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

Jump to bottom

Breadchain governance page "Distribution Card" upgrade #124

Merged
merged 3 commits into from
Nov 2, 2024
Merged

Breadchain governance page "Distribution Card" upgrade #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
046762d
Reduce font size of post-decimal text in distribution amount
Oct 21, 2024
036310f
Add DAI APY to Distribution Card
Oct 25, 2024
7c6c806
fix bread logo sizing
Nov 1, 2024
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
32 changes: 32 additions & 0 deletions src/app/core/components/Icons/Bread.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
export function BreadSVG({ size = "regular" }: { size?: "small" | "regular" }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
className={size === "small" ? "w-3 h-3" : ""}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.1087 3.625C3.66795 3.625 2.5 4.79295 2.5 6.2337C2.5 7.58604 3.52903 8.69805 4.8468 8.82941V14.7119C4.8468 16.5128 6.30674 17.9727 8.10767 17.9727H11.7598C13.5607 17.9727 15.0206 16.5128 15.0206 14.7119V8.83924C16.4013 8.77184 17.5 7.63108 17.5 6.2337C17.5 4.79295 16.332 3.625 14.8913 3.625H5.1087Z"
fill="url(#paint0_linear_6729_165920)"
/>
<defs>
<linearGradient
id="paint0_linear_6729_165920"
x1="4.5625"
y1="14.9238"
x2="14.8529"
y2="5.8642"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D04EC5" />
<stop offset="1" stop-color="#ED7BC7" />
</linearGradient>
</defs>
</svg>
);
}
2 changes: 1 addition & 1 deletion src/app/core/components/Icons/Logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export function LogoSVG() {
export function LogoSVG({ size = "regular" }: { size?: "small" | "regular" }) {
return (
<svg viewBox="0 0 60 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
Expand Down
6 changes: 3 additions & 3 deletions src/app/core/components/Icons/TokenIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Image from "next/image";
import { LogoSVG } from "./Logo";
import { BreadSVG } from "./Bread";
import clsx from "clsx";

export function XDAIIcon() {
Expand Down Expand Up @@ -32,8 +32,8 @@ export function BreadIcon({
size === "small" ? "size-4" : "size-6"
)}
>
<div className="w-2/3">
<LogoSVG />
<div>
<BreadSVG size={size} />
</div>
</div>
);
Expand Down
26 changes: 20 additions & 6 deletions src/app/governance/components/DistributionOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export function DistributionOverview({
}) {
const { claimableYield } = useClaimableYield();
const { chain: activeChain } = useNetwork();
const [dsrAPY, setDsrAPY] = useState("");
const config = activeChain ? getConfig(activeChain.id) : getConfig("DEFAULT");
const [yieldIncrement, setYieldIncrement] = useState(0);

Expand Down Expand Up @@ -63,6 +64,8 @@ export function DistributionOverview({
const yieldPerDay = (totalSupply * dsr) / 365;
const yieldPerHour = yieldPerDay / 24;

setDsrAPY((dsr * 100).toFixed(2));

return yieldPerHour;
}
return null;
Expand Down Expand Up @@ -104,11 +107,13 @@ export function DistributionOverview({
<h4 className="text-xl font-medium text-breadgray-rye dark:text-breadgray-light-grey tracking-wide uppercase leading-none">
Amount to Distribute
</h4>
<div className="pt-4 pb-6 w-full">
<div className="pt-4 pb-6 w-full items-center">
{claimableYield ? (
<div className="w-full flex justify-center text-3xl font-bold text-breadgray-grey100 dark:text-breadgray-ultra-white leading-none">
<div className="w-[45%] flex gap-2 items-center justify-end">
<BreadIcon />
<div className="w-full flex justify-center tracking-wider text-3xl font-bold text-breadgray-grey100 dark:text-breadgray-ultra-white leading-none">
<div className=" flex gap-2 justify-end">
<div className="mt-1">
<BreadIcon />
</div>
<span>
{
formatBalance(claimableYield + yieldIncrement, 4).split(
Expand All @@ -118,7 +123,7 @@ export function DistributionOverview({
</span>
</div>
<div>.</div>
<div className="w-[45%]">
<div className="text-xl leading-[1.1] w-[56px] self-end">
{
formatBalance(claimableYield + yieldIncrement, 4).split(
"."
Expand Down Expand Up @@ -146,7 +151,16 @@ export function DistributionOverview({
</span>
</div>
</div>

<div className="flex w-full">
<p className="grow text-breadgray-rye dark:text-breadgray-grey">
DAI savings rate (APY)
</p>
<div className="flex gap-2 items-center md:justify-center">
<span className="font-bold text-breadgray-grey100 dark:text-breadgray-white">
{dsrAPY + "%"}
</span>
</div>
</div>
<div className="flex w-full">
<p className="grow text-breadgray-rye dark:text-breadgray-grey">
Voting cycle #
Expand Down