Skip to content

Commit

Permalink
Feature/voting rights cta styles (#100)
Browse files Browse the repository at this point in the history 
* Fix cta for voting rights

* fix div

* fix display for undefined
  • Loading branch information
@bryzettler
bryzettler authored Jan 10, 2024
1 parent 140a986 commit 2770296
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 121 deletions.
254 changes: 146 additions & 108 deletions components/Proposals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import { IdlAccounts } from "@coral-xyz/anchor/dist/cjs/program/namespace/types"
import { Proposal as ProposalIdl } from "@helium/modular-governance-idls/lib/types/proposal";

type Proposal = IdlAccounts<ProposalIdl>["proposalV0"];
import { useMetaplexMetadata } from "../hooks/useMetaplexMetadata";
import { BsFillLightningChargeFill } from "react-icons/bs";

export type ProposalFilter =
| "all"
Expand Down Expand Up @@ -82,11 +84,11 @@ type LegacyProposal = {
};

function getLegacyProposalState(p: LegacyProposal): ProposalFilter {
const passed = p.outcomes[0].hntVoted > p.outcomes[1].hntVoted
const passed = p.outcomes[0].hntVoted > p.outcomes[1].hntVoted;
if (passed) {
return 'passed'
return "passed";
} else {
return 'failed'
return "failed";
}
}

Expand Down Expand Up @@ -257,12 +259,12 @@ const REALMS_VOTES = {
href: "https://realms.heliumvote.com/dao/iot/proposal/4TZE7E3KvRgZiaSMF8h4s7F9UhWDJUgNdNuBz8y1dGzq",
outcomes: [
{
votes: 3651135780
votes: 3651135780,
},
{
votes: 5307502230
}
]
votes: 5307502230,
},
],
},
{
name: "HIP 72: Secure Concentrators",
Expand Down Expand Up @@ -293,7 +295,8 @@ export const Proposals = ({
[network]
);
const [filter, setFilter] = useState<ProposalFilter>("all");
const { votingPower, positions, mint, loading } = useHeliumVsrState();
const { votingPower, positions, amountLocked, mint, loading } =
useHeliumVsrState();
const decimals = useMint(mint)?.info?.decimals;

const {
Expand All @@ -312,6 +315,7 @@ export const Proposals = ({
}, [proposalsWithDups]);
const { publicKey } = useWallet();
const { amount, loading: loadingBalance } = useOwnedAmount(publicKey, mint);
const { symbol: tokenName } = useMetaplexMetadata(mint);

useEffect(() => {
if (error) {
Expand Down Expand Up @@ -341,124 +345,158 @@ export const Proposals = ({
}, [legacyVotes, filter]);

return (
<div className="p-4 bg-gray-600 bg-opacity-25 rounded-lg">
<div className="flex flex-col md:flex-row justify-between items-stretch md:items-center">
<div className="flex flex-col space-y-0 mb-0 bg-gray-600 rounded-lg p-4 md:bg-transparent md:p-0 ">
<div className="text-white text-2xl font-bold leading-loose">
<>
<Link
href={`/${network}/staking`}
className="flex flex-col p-4 bg-gray-600 bg-opacity-25 rounded-lg mb-4 hover:bg-opacity-50"
>
<div className="flex flex-row justify-items-center justify-between">
<div className="flex flex-row text-white text-2xl font-bold">
Voting Rights
</div>
<Link href={`/${network}/staking`}>
<div className="flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-4 md:items-center cursor-pointer">
{loading ? (
<div className="text-white text-xs font-normal">
Loading voting power...
</div>
) : (
<div className="flex flex-row items-center space-x-1 text-white text-xs font-normal">
<span className="text-base font-medium leading-none">
<div className="flex flex-row space-x-1 items-center text-white">
<div className="text-lg">View</div>
<IoChevronForward />
</div>
</div>
<div className="flex flex-col space-y-2 cursor-pointer">
{loading ? (
<div className="text-white text-md font-normal">
Loading voting power...
</div>
) : (
<div className="flex flex-col gap-2">
<div className="flex flex-row flex-1 rounded-lg text-white items-center">
Increase your voting power by locking tokens
</div>
<div className="flex flex-1 flex-col md:flex-row md:gap-4">
<div className="flex flex-1 flex-col mt-2 bg-gray-600 rounded-lg p-4 text-white">
<div className="flex flex-row text-md font-bold">Votes</div>
<div className="flex flex-row text-xl font-bold items-center gap-4">
{publicKey
? votingPower && decimals
? humanReadable(votingPower, decimals)
: "0"
: "N/A"}{" "}
</span>
<span>
voting power from{" "}
{publicKey ? (positions ? positions.length : "0") : "N/A"}{" "}
positions
</span>
{votingPower &&
amountLocked &&
!amountLocked.isZero() &&
!votingPower.isZero() && (
<div className="flex flex-row items-center text-xs">
<BsFillLightningChargeFill className="h-3 mr-1 text-primary-light w-3" />
{`${humanReadable(
votingPower.mul(new BN(100)).div(amountLocked),
2
)}x`}
</div>
)}
</div>
</div>
<div className="flex flex-1 flex-col mt-2 bg-gray-600 rounded-lg p-4 text-white">
<div className="flex flex-row text-md font-bold">
{tokenName || network} Locked
</div>
<div className="flex flex-col text-xl font-bold">
{publicKey
? amountLocked && decimals
? humanReadable(amountLocked, decimals)
: "0"
: "N/A"}{" "}
</div>
</div>
<div className="flex flex-1 flex-col mt-2 bg-gray-600 rounded-lg p-4 text-white">
<div className="flex flex-row text-md font-bold">
{tokenName || network} Available to lock
</div>
<div className="flex flex-col text-xl font-bold">
{loadingBalance || !decimals
? "..."
: publicKey
? humanReadable(
new BN(amount?.toString() || "0"),
decimals
)
: "N/A"}{" "}
</div>
</div>
)}
<div className="py-2 md:hidden">
<hr className="border-black" />
</div>
<div className="flex flex-row space-x-1 md:items-center text-gray-50 text-xs font-normal">
<span>Available to lock:</span>
<span className="font-medium">
{loadingBalance || !decimals
? "..."
: publicKey
? humanReadable(new BN(amount?.toString() || "0"), decimals)
: "N/A"}{" "}
more HNT
</span>
<IoChevronForward />
</div>
</div>
</Link>
)}
</div>
</Link>
<div className="p-4 bg-gray-600 bg-opacity-25 rounded-lg">
<Dropdown
className="border border-white w-full mt-4 md:mt-0 md:w-auto flex-row justify-between"
value={filter}
values={FILTERS}
onSelect={(v) => setFilter(v as ProposalFilter)}
/>
</div>
{filteredProposals.length +
filteredRealmsProposals.length +
filteredLegacyProposals.length ==
0 && (
<div className="flex flex-row justify-center h-60 items-center mt-4">
{loadingProposals ? (
<Loading />
) : (
<div className="text-center text-gray-50 text-base font-normal">
No Votes
</div>
)}
</div>
)}
<div className="flex flex-col space-y-2 mt-4">
{filteredProposals.map((proposal) => (
<ProposalVoteCard
proposal={proposal.info as any}
proposalKey={proposal.publicKey}
key={proposal.publicKey.toBase58()}
/>
))}
{filteredRealmsProposals.map((proposal) => {
const total = proposal.outcomes.reduce(
(acc, o) => acc + o.votes,
0
);
return (
<VoteCard
id={proposal.name}
href={proposal.href}
name={proposal.name}
endTs={proposal.endTs}
results={proposal.outcomes.map((o, index) => ({
index,
percent: (o.votes / total) * 100,
}))}
totalVotes={new BN(total)}
decimals={decimals}
tags={["realms"]}
/>
);
})}
{filteredLegacyProposals.map((proposal) => {
const total = proposal.outcomes.reduce(
(acc, o) => acc + o.hntVoted,
0
);
return (
<VoteCard
id={proposal.id}
href={`/legacy/${proposal.id}`}
name={proposal.name}
endTs={proposal.deadlineTs}
results={proposal.outcomes.map((o, index) => ({
index,
percent: (o.hntVoted / total) * 100,
}))}
totalVotes={new BN(total)}
decimals={8}
tags={Object.values(proposal.tags)}
{filteredProposals.length +
filteredRealmsProposals.length +
filteredLegacyProposals.length ==
0 && (
<div className="flex flex-row justify-center h-60 items-center mt-4">
{loadingProposals ? (
<Loading />
) : (
<div className="text-center text-gray-50 text-base font-normal">
No Votes
</div>
)}
</div>
)}
<div className="flex flex-col space-y-2 mt-4">
{filteredProposals.map((proposal) => (
<ProposalVoteCard
proposal={proposal.info as any}
proposalKey={proposal.publicKey}
key={proposal.publicKey.toBase58()}
/>
);
})}
))}
{filteredRealmsProposals.map((proposal) => {
const total = proposal.outcomes.reduce(
(acc, o) => acc + o.votes,
0
);
return (
<VoteCard
id={proposal.name}
href={proposal.href}
name={proposal.name}
endTs={proposal.endTs}
results={proposal.outcomes.map((o, index) => ({
index,
percent: (o.votes / total) * 100,
}))}
totalVotes={new BN(total)}
decimals={decimals}
tags={["realms"]}
/>
);
})}
{filteredLegacyProposals.map((proposal) => {
const total = proposal.outcomes.reduce(
(acc, o) => acc + o.hntVoted,
0
);
return (
<VoteCard
id={proposal.id}
href={`/legacy/${proposal.id}`}
name={proposal.name}
endTs={proposal.deadlineTs}
results={proposal.outcomes.map((o, index) => ({
index,
percent: (o.hntVoted / total) * 100,
}))}
totalVotes={new BN(total)}
decimals={8}
tags={Object.values(proposal.tags)}
/>
);
})}
</div>
</div>
</div>
</>
);
};
11 changes: 8 additions & 3 deletions components/TabPill.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,19 @@ export const TabPill = ({
<Link
href={href}
className={classNames(
"p-1 flex flex-row space-x-2 pr-4 h-12 rounded-3xl cursor-pointer align-center text-white font-medium",
"flex flex-row space-x-2 pl-2 pr-4 h-12 rounded-3xl cursor-pointer align-center text-white font-medium items-center",
{
"bg-gray-600": active,
"hover:bg-gray-500": !active,
"bg-gray-600 bg-opacity-25 hover:bg-gray-500 hover:bg-opacity-50":
!active,
}
)}
>
<img alt={`${name} icon`} src={icon} />
<img
alt={`${name} icon`}
src={icon}
className="rounded-3xl border-2 w-8 h-8"
/>
<span
className={classNames(
"flex-grow flex items-center justify-center text-base md:text-xl",
Expand Down
20 changes: 10 additions & 10 deletions components/VoteCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,20 @@ export const VoteCard = ({
results,
totalVotes,
decimals,
tags
tags,
}: {
id: string
href: string
name: string
endTs?: number
results: { index: number; percent: number; }[]
totalVotes?: BN
decimals?: number
tags: string[]
id: string;
href: string;
name: string;
endTs?: number;
results: { index: number; percent: number }[];
totalVotes?: BN;
decimals?: number;
tags: string[];
}) => {
return (
<Link href={href} className="w-full flex flex-row cursor-pointer">
<div className="flex flex-col items-stretch md:flex-row p-4 grow bg-gray-600 hover:bg-gray-500 rounded-lg justify-start md:items-center gap-4 inline-flex">
<div className="flex flex-col items-stretch md:flex-row p-4 grow bg-gray-600 hover:bg-gray-500 rounded-lg justify-start md:items-center gap-4">
<div className="md:w-1/2 flex-col justify-center items-start inline-flex">
<div className="text-white text-xl font-bold leading-7">{name}</div>
<div className="flex-row justify-start pr-16 items-start gap-1 inline-flex">
Expand Down

0 comments on commit 2770296

Please sign in to comment.