Skip to content

Commit

Permalink
Merge pull request #216 from BreadchainCoop/development
Browse files Browse the repository at this point in the history 
Deploy VotingPowerCard update
  • Loading branch information
@secbajor
secbajor authored Jan 22, 2025
2 parents 7eed808 + 008a3ce commit fefa449
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 149 deletions.
30 changes: 16 additions & 14 deletions src/app/governance/lp-vaults/LPVotingPowerPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { VotingPowerPanel } from "./components/VotingPowerPanel";
import { Accordion } from "@radix-ui/react-accordion";
import { getConfig } from "@/chainConfig";
import useLocalStorage from "@/app/core/hooks/useLocalStorage";
import { PageGrid } from "@/app/governance/components/PageGrid";

export function LPVotingPowerPage() {
const { user } = useConnectedUser();
Expand All @@ -24,16 +25,15 @@ export function LPVotingPowerPage() {
}, [accordionState]);

return (
<div className="w-full lg:max-w-[67rem] m-auto px-4 md:px-8 grid gap-4">
<div className="flex flex-wrap gap-6">
<div className="grow">
<section className="grow w-full max-w-[44rem] lg:max-w-[67rem] m-auto pb-16 px-4 lg:px-8">
<PageGrid>
<div className="col-span-12 lg:col-span-8 row-start-1 row-span-1">
<TitleSection />
</div>
<div className="grow">
<VotingPowerPanel />
</div>
</div>
<div className="w-full md:pt-0 pt-3">

<VotingPowerPanel />
</PageGrid>
<div className="w-full pt-6">
<h2 className="font-bold text-xl">Manage your BREAD LP vaults</h2>
<p className="text-breadgray-rye dark:text-breadgray-grey mt-2 mb-4">
Lock LP tokens for voting power within the Breadchain cooperative
Expand All @@ -48,25 +48,27 @@ export function LPVotingPowerPage() {
<VaultPanel tokenAddress={config.BUTTER.address} />
</Accordion>
</div>
</div>
</section>
);
}

function TitleSection() {
return (
<div className="flex flex-col gap-4">
<h1 className="font-bold text-2xl text-breadgray-grey100 dark:text-breadgray-ultra-white">
<h1 className="font-bold text-3xl text-breadgray-grey100 dark:text-breadgray-ultra-white">
Voting Power LP Vaults
</h1>
<div className="max-w-xl text-breadgray-rye dark:text-breadgray-grey">
<p className=" ">
<div className="max-w-xl text-lg text-breadgray-rye dark:text-breadgray-light-grey">
<p>
This page lets you provide liquidity for BREAD while maintaining your
voting power for governing the monthly BREAD crowdstaking yield
distribution. By staking your LP tokens into a vault, you still get
your voting power as if you are holding BREAD normally.
</p>
<h4 className="mt-4 mb-2 font-bold">Get Started:</h4>
<ol className="list-decimal ml-4">
<h4 className="mt-5 mb-2 font-bold text-2xl leading-none text-breadgray-grey100 dark:text-breadgray-ultra-white">
Get Started:
</h4>
<ol className="list-decimal px-5">
<li>
<b>Provide Liquidity:</b> Add liquidity for BREAD on the listed
liquidity pool of the vault to receive LP tokens.
Expand Down
272 changes: 137 additions & 135 deletions src/app/governance/lp-vaults/components/VotingPowerPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,147 +46,149 @@ export function VotingPowerPanel() {
};

return (
<div className="w-full md:w-[380px] m-auto">
<CardBox>
<div className="p-4 flex flex-col items-center gap-4">
<h2 className="font-medium text-xl leading-none dark:text-breadgray-light-grey">
MY VOTING POWER
</h2>
<div className="flex flex-col gap-2">
<div className="flex gap-2 items-center">
<div className="font-bold text-3xl w-full leading-none text-breadgray-grey100 dark:text-breadgray-ultra-white">
{votingPower &&
votingPower.bread.status === "success" &&
votingPower.butteredBread.status === "success" ? (
renderFormattedDecimalNumber(
formatBalance(
Number(
votingPower.bread.value +
votingPower.butteredBread.value
) /
10 ** 18,
1
),
<FistIcon bg="burnt" />
)
) : (
<div className="flex justify-center items-center">
<FistIcon bg="burnt" />
<span className="ms-2">-</span>
</div>
)}
<div className="col-span-12 lg:col-span-4 row-start-2 lg:row-start-1 lg:row-span-2">
<div className="justify-center lg:block lg:w-full">
<CardBox>
<div className="p-4 flex flex-col items-center gap-4">
<h2 className="font-medium text-xl leading-none dark:text-breadgray-light-grey">
MY VOTING POWER
</h2>
<div className="flex flex-col gap-2">
<div className="flex gap-2 items-center">
<div className="font-bold text-3xl w-full leading-none text-breadgray-grey100 dark:text-breadgray-ultra-white">
{votingPower &&
votingPower.bread.status === "success" &&
votingPower.butteredBread.status === "success" ? (
renderFormattedDecimalNumber(
formatBalance(
Number(
votingPower.bread.value +
votingPower.butteredBread.value
) /
10 ** 18,
1
),
<FistIcon bg="burnt" />
)
) : (
<div className="flex justify-center items-center">
<FistIcon bg="burnt" />
<span className="ms-2">-</span>
</div>
)}
</div>
</div>
</div>

<div className="flex items-center gap-2 font-medium text-xs text-breadgray-rye dark:text-breadgray-grey">
<span className="pb-1">Accessible voting power</span>
<Tooltip>
Your total available voting power for the current voting cycle #
{distributions ? distributions.length + 1 + "." : "-"}
</Tooltip>
<div className="flex items-center gap-2 font-medium text-xs text-breadgray-rye dark:text-breadgray-grey">
<span className="pb-1">Accessible voting power</span>
<Tooltip>
Your total available voting power for the current voting cycle
#{distributions ? distributions.length + 1 + "." : "-"}
</Tooltip>
</div>
</div>
</div>

{/* voting power grid */}
<div className="w-full grid grid-cols-[repeat(2, max-content)] gap-3">
<DividerWithText text="Breakdown" />

<p className="text-breadgray-rye dark:text-breadgray-grey">
Voting power from locked LP
</p>

<span className="font-bold text-breadgray-grey100 dark:text-breadgray-white text-right">
{votingPower && votingPower.butteredBread.status === "success"
? formatBalance(
Number(votingPower.butteredBread.value) / 10 ** 18,
1
)
: "-"}
</span>

<p className="text-breadgray-rye dark:text-breadgray-grey">
Voting power from $BREAD
</p>
<span className="text-right font-bold text-breadgray-grey100 dark:text-breadgray-white">
{votingPower && votingPower.bread.status === "success"
? formatBalance(Number(votingPower.bread.value) / 10 ** 18, 1)
: "-"}
</span>
<DividerWithText text="Source(s)" />

<p className="text-breadgray-rye dark:text-breadgray-grey">
Total locked LP tokens
</p>

<span className="text-right font-bold text-breadpink-100">
{vaultTokenBalance &&
vaultTokenBalance.butter.status === "success"
? formatBalance(
Number(vaultTokenBalance.butter.value) / 10 ** 18,
0
)
: "-"}
</span>

{user.status === "CONNECTED" && (
<>
<p className="text-breadgray-rye dark:text-breadgray-grey">
Total $BREAD baked
</p>

<span className="font-bold text-breadgray-grey100 dark:text-breadgray-white text-right">
{BREAD && BREAD.status === "SUCCESS"
? formatBalance(parseFloat(BREAD.value), 2)
: "-"}
</span>
</>
)}

{user.status === "CONNECTED" ? (
<>
<DividerWithText text="Future voting power" />

<p className="text-breadgray-rye dark:text-breadgray-grey">
<div className="flex items-center gap-2">
<span className="pb-1">Pending voting power</span>
<Tooltip>
The voting power you will receive in the next voting
cycle.
</Tooltip>
</div>
</p>

<span className="text-right w-32 font-bold text-breadgray-rye dark:text-breadgray-grey">
<PendingVotingPowerDisplay user={user} />
</span>
</>
) : (
<></>
)}

{user.status === "CONNECTED" ? (
<></>
) : (
<div className="col-span-2 pt-3">
<AccountMenu size="large" fullWidth>
Connect
</AccountMenu>
{/* voting power grid */}
<div className="w-full grid grid-cols-[repeat(2, max-content)] gap-3">
<DividerWithText text="Breakdown" />

<p className="text-breadgray-rye dark:text-breadgray-grey">
Voting power from locked LP
</p>

<span className="font-bold text-breadgray-grey100 dark:text-breadgray-white text-right">
{votingPower && votingPower.butteredBread.status === "success"
? formatBalance(
Number(votingPower.butteredBread.value) / 10 ** 18,
1
)
: "-"}
</span>

<p className="text-breadgray-rye dark:text-breadgray-grey">
Voting power from $BREAD
</p>
<span className="text-right font-bold text-breadgray-grey100 dark:text-breadgray-white">
{votingPower && votingPower.bread.status === "success"
? formatBalance(Number(votingPower.bread.value) / 10 ** 18, 1)
: "-"}
</span>
<DividerWithText text="Source(s)" />

<p className="text-breadgray-rye dark:text-breadgray-grey">
Total locked LP tokens
</p>

<span className="text-right font-bold text-breadpink-100">
{vaultTokenBalance &&
vaultTokenBalance.butter.status === "success"
? formatBalance(
Number(vaultTokenBalance.butter.value) / 10 ** 18,
0
)
: "-"}
</span>

{user.status === "CONNECTED" && (
<>
<p className="text-breadgray-rye dark:text-breadgray-grey">
Total $BREAD baked
</p>

<span className="font-bold text-breadgray-grey100 dark:text-breadgray-white text-right">
{BREAD && BREAD.status === "SUCCESS"
? formatBalance(parseFloat(BREAD.value), 2)
: "-"}
</span>
</>
)}

{user.status === "CONNECTED" ? (
<>
<DividerWithText text="Future voting power" />

<p className="text-breadgray-rye dark:text-breadgray-grey">
<div className="flex items-center gap-2">
<span className="pb-1">Pending voting power</span>
<Tooltip>
The voting power you will receive in the next voting
cycle.
</Tooltip>
</div>
</p>

<span className="text-right w-27 font-bold text-breadgray-rye dark:text-breadgray-grey">
<PendingVotingPowerDisplay user={user} />
</span>
</>
) : (
<></>
)}

{user.status === "CONNECTED" ? (
<></>
) : (
<div className="col-span-2 pt-3">
<AccountMenu size="large" fullWidth>
Connect
</AccountMenu>
</div>
)}
</div>
<a
className="flex items-center gap-2 text-sm font-medium pt-4 text-breadgray-grey100 hover:text-breadpink-shaded dark:text-breadgray-ultra-white"
href="https://breadchain.notion.site/BREAD-Voting-Power-UI-0f2d350320b94e4ba9aeec2ef6fdcb84"
target="_blank"
rel="noopener noreferrer"
>
How does this work?
<div className="text-breadpink-shaded">
<LinkIcon />
</div>
)}
</a>
</div>
<a
className="flex items-center gap-2 text-sm font-medium pt-4 text-breadgray-grey100 hover:text-breadpink-shaded dark:text-breadgray-ultra-white"
href="https://breadchain.notion.site/BREAD-Voting-Power-UI-0f2d350320b94e4ba9aeec2ef6fdcb84"
target="_blank"
rel="noopener noreferrer"
>
How does this work?
<div className="text-breadpink-shaded">
<LinkIcon />
</div>
</a>
</div>
</CardBox>
</CardBox>
</div>
</div>
);
}
Expand Down

0 comments on commit fefa449

Please sign in to comment.