Skip to content

Commit

Permalink
fix: Portfolio token card and stats tab UI (#427)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sh-wallet
sh-wallet authored Dec 24, 2024
1 parent f4de157 commit b4f615c
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 151 deletions.
1 change: 0 additions & 1 deletion packages/fetch-extension/src/pages-new/main/tokens/tokens.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,6 @@ export const Tokens = observer(() => {
rightContent={tokenInUsd ? tokenInUsd : ""}
style={{
background: "rgba(255, 255, 255, 0.12)",
height: "78px",
marginBottom: "6px",
padding: "18px",
}}
Expand Down
295 changes: 149 additions & 146 deletions packages/fetch-extension/src/pages-new/portfolio/stats/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,10 @@ export const Stats = observer(
tooltips: {
enabled: false,
},
responsive: true,
maintainAspectRatio: false,
width: "240px",
height: "120px",
},
};
const handleClaimRewards = async () => {
Expand Down Expand Up @@ -312,110 +316,157 @@ export const Stats = observer(
style={{
display: "flex",
position: "relative",
alignItems: "center",
}}
>
<div>
<div className={style["legends"]}>
<div className={style["legend"]}>
<img
src={
stakableInFiatCurrency !== undefined &&
stakableInFiatCurrency > "$0"
? require("@assets/svg/wireframe/legend-light-purple-long.svg")
: require("@assets/svg/wireframe/legend-light-purple.svg")
}
alt=""
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "3px",
}}
>
<div className={style["label"]}>Available</div>
{isLoaded ? (
<div className={style["value"]}>
{stakableBalInUI.toFixed(2)} {` ${stakableDenom} `}
<span className={style["label"]}>
({stakablePercentage.toFixed(1)}%)
</span>
<div className={style["legends"]}>
<div className={style["legend"]}>
<img
src={
stakableInFiatCurrency !== undefined &&
stakableInFiatCurrency > "$0"
? require("@assets/svg/wireframe/legend-light-purple-long.svg")
: require("@assets/svg/wireframe/legend-light-purple.svg")
}
alt=""
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "3px",
}}
>
<div className={style["label"]}>Available</div>
{isLoaded ? (
<div className={style["value"]}>
{stakableBalInUI.toFixed(2)} {` ${stakableDenom} `}
<span className={style["label"]}>
({stakablePercentage.toFixed(1)}%)
</span>
</div>
) : (
<Skeleton height="17.5px" />
)}
{isLoaded ? (
stakableInFiatCurrency !== undefined &&
stakableInFiatCurrency > "$0" ? (
<div
style={{
fontSize: "14px",
fontWeight: 400,
color: "rgba(255,255,255,0.6)",
}}
>
{stakableInFiatCurrency}
</div>
) : (
<Skeleton height="17.5px" />
)}
{isLoaded ? (
stakableInFiatCurrency !== undefined &&
stakableInFiatCurrency > "$0" ? (
<div
style={{
fontSize: "14px",
fontWeight: 400,
color: "rgba(255,255,255,0.6)",
}}
>
{stakableInFiatCurrency}
</div>
) : null
) : (
<Skeleton height="21px" />
)}
</div>
) : null
) : (
<Skeleton height="21px" />
)}
</div>
<div className={style["legend"]}>
<img
src={
stakedInFiatCurrency !== undefined &&
stakedInFiatCurrency > "$0"
? require("@assets/svg/wireframe/legend-purple-long.svg")
: require("@assets/svg/wireframe/legend-purple.svg")
}
alt=""
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "3px",
}}
>
<div className={style["label"]}>Staked</div>
{isLoaded ? (
<div className={style["value"]}>
{stakedBalInUI.toFixed(2)} {` ${stakedDenom} `}
<span className={style["label"]}>
({stakedPercentage.toFixed(1)}
%)
</span>
</div>
<div className={style["legend"]}>
<img
src={
stakedInFiatCurrency !== undefined &&
stakedInFiatCurrency > "$0"
? require("@assets/svg/wireframe/legend-purple-long.svg")
: require("@assets/svg/wireframe/legend-purple.svg")
}
alt=""
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "3px",
}}
>
<div className={style["label"]}>Staked</div>
{isLoaded ? (
<div className={style["value"]}>
{stakedBalInUI.toFixed(2)} {` ${stakedDenom} `}
<span className={style["label"]}>
({stakedPercentage.toFixed(1)}
%)
</span>
</div>
) : (
<Skeleton height="17.5px" />
)}
{isLoaded ? (
stakedInFiatCurrency !== undefined &&
stakedInFiatCurrency > "$0" ? (
<div
style={{
fontSize: "14px",
fontWeight: 400,
color: "rgba(255,255,255,0.6)",
}}
>
{stakedInFiatCurrency}
</div>
) : (
<Skeleton height="17.5px" />
)}
{isLoaded ? (
stakedInFiatCurrency !== undefined &&
stakedInFiatCurrency > "$0" ? (
<div
style={{
fontSize: "14px",
fontWeight: 400,
color: "rgba(255,255,255,0.6)",
}}
>
{stakedInFiatCurrency}
</div>
) : null
) : (
<Skeleton height="21px" />
)}
</div>
) : null
) : (
<Skeleton height="21px" />
)}
</div>
</div>
<div className={style["legend"]}>
<img
src={
rewardsInFiatCurrency !== undefined &&
rewardsInFiatCurrency > "$0"
? require("@assets/svg/wireframe/legend-orange-long.svg")
: require("@assets/svg/wireframe/legend-orange.svg")
}
alt=""
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "3px",
}}
>
<div className={style["label"]}>Staking rewards</div>
{isLoaded ? (
<div className={style["value"]}>
{rewardsBalInUI.toFixed(2)} {` ${rewardDenom} `}
<span className={style["label"]}>
({rewardsPercentage.toFixed(1)}%)
</span>
</div>
) : (
<Skeleton height="17.5px" />
)}
{isLoaded ? (
rewardsInFiatCurrency !== undefined &&
rewardsInFiatCurrency > "$0" ? (
<div
style={{
fontSize: "14px",
fontWeight: 400,
color: "rgba(255,255,255,0.6)",
}}
>
{rewardsInFiatCurrency}
</div>
) : null
) : (
<Skeleton height="21px" />
)}
</div>
</div>
{isVesting && !isVestingExpired(vestingEndTimeStamp) && (
<div className={style["legend"]}>
<img
src={
rewardsInFiatCurrency !== undefined &&
rewardsInFiatCurrency > "$0"
? require("@assets/svg/wireframe/legend-orange-long.svg")
: require("@assets/svg/wireframe/legend-orange.svg")
? require("@assets/svg/wireframe/legend-light-orange.svg")
: require("@assets/svg/wireframe/legend-light-orange.svg")
}
alt=""
/>
Expand All @@ -426,69 +477,21 @@ export const Stats = observer(
gap: "3px",
}}
>
<div className={style["label"]}>Staking rewards</div>
<div className={style["label"]}>Vesting</div>
{isLoaded ? (
<div className={style["value"]}>
{rewardsBalInUI.toFixed(2)} {` ${rewardDenom} `}
{Number(vestingBalance()).toFixed(2)}{" "}
{` ${spendableDenom} `}
<span className={style["label"]}>
({rewardsPercentage.toFixed(1)}%)
({vestingPercentage.toFixed(1)}%)
</span>
</div>
) : (
<Skeleton height="17.5px" />
)}
{isLoaded ? (
rewardsInFiatCurrency !== undefined &&
rewardsInFiatCurrency > "$0" ? (
<div
style={{
fontSize: "14px",
fontWeight: 400,
color: "rgba(255,255,255,0.6)",
}}
>
{rewardsInFiatCurrency}
</div>
) : null
) : (
<Skeleton height="21px" />
)}
</div>
</div>
{isVesting && !isVestingExpired(vestingEndTimeStamp) && (
<div className={style["legend"]}>
<img
src={
rewardsInFiatCurrency !== undefined &&
rewardsInFiatCurrency > "$0"
? require("@assets/svg/wireframe/legend-light-orange.svg")
: require("@assets/svg/wireframe/legend-light-orange.svg")
}
alt=""
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "3px",
}}
>
<div className={style["label"]}>Vesting</div>
{isLoaded ? (
<div className={style["value"]}>
{Number(vestingBalance()).toFixed(2)}{" "}
{` ${spendableDenom} `}
<span className={style["label"]}>
({vestingPercentage.toFixed(1)}%)
</span>
</div>
) : (
<Skeleton height="17.5px" />
)}
</div>
</div>
)}
</div>
)}
</div>
<div className={style["doughnut-graph"]}>
<Doughnut data={doughnutData} options={doughnutData.options} />
Expand Down
7 changes: 3 additions & 4 deletions packages/fetch-extension/src/pages-new/portfolio/style.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,19 @@
}
.doughnut-graph {
display: block;
flex: 2;
height: 120px;
width: 240px;
position: absolute;
right: -68px;
top: 50%;
transform: translateY(-50%);
}

.legend {
display: flex;
gap: 10px;
}

.legends {
display: flex;
flex: 3;
justify-content: center;
flex-direction: column;
gap: 12px;
Expand Down

0 comments on commit b4f615c

Please sign in to comment.