Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deploy VotingPowerCard update #216

Merged
merged 2 commits into from
Jan 22, 2025
Merged

Deploy VotingPowerCard update #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3aab36c
VotingPowerPanel layout fixes
Jan 19, 2025
008a3ce
Merge pull request #213 from BreadchainCoop/sb-181-5
secbajor Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 16 additions & 14 deletions src/app/governance/lp-vaults/LPVotingPowerPage.tsx
View file
Open in desktop
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
Open in desktop
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
Loading