-
Notifications
You must be signed in to change notification settings - Fork 121
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Namadillo: new overview panel (#1356)
* feat: new overview panel * refactor: removing deprecated component * feat: updating tests * feat: handling empty amounts
- Loading branch information
1 parent
78f243f
commit ec92436
Showing
9 changed files
with
294 additions
and
229 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
143 changes: 0 additions & 143 deletions
143
apps/namadillo/src/App/AccountOverview/BalanceContainer.tsx
This file was deleted.
Oops, something went wrong.
131 changes: 131 additions & 0 deletions
131
apps/namadillo/src/App/AccountOverview/BalanceOverviewChart.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| import { | ||
| Heading, | ||
| PieChart, | ||
| PieChartData, | ||
| SkeletonLoading, | ||
| } from "@namada/components"; | ||
| import { FiatCurrency } from "App/Common/FiatCurrency"; | ||
| import { NamCurrency } from "App/Common/NamCurrency"; | ||
| import { shieldedTokensAtom, transparentTokensAtom } from "atoms/balance"; | ||
| import { getTotalDollar } from "atoms/balance/functions"; | ||
| import { applicationFeaturesAtom } from "atoms/settings"; | ||
| import BigNumber from "bignumber.js"; | ||
| import { useBalances } from "hooks/useBalances"; | ||
| import { useAtomValue } from "jotai"; | ||
| import { colors } from "theme"; | ||
|
|
||
| const BalanceOverviewCaptionItem = ({ | ||
| color, | ||
| children, | ||
| }: { color: string } & React.PropsWithChildren): JSX.Element => { | ||
| return ( | ||
| <li className="flex gap-2 items-center text-base"> | ||
| <i | ||
| className="w-3 h-3 aspect-square rounded-full" | ||
| style={{ background: color }} | ||
| /> | ||
| {children} | ||
| </li> | ||
| ); | ||
| }; | ||
|
|
||
| export const BalanceOverviewChart = (): JSX.Element => { | ||
| const { maspEnabled } = useAtomValue(applicationFeaturesAtom); | ||
| const shieldedTokensQuery = useAtomValue(shieldedTokensAtom); | ||
| const transparentTokensQuery = useAtomValue(transparentTokensAtom); | ||
| const { totalTransparentAmount, isLoading: isLoadingTransparent } = | ||
| useBalances(); | ||
| const shieldedDollars = | ||
| getTotalDollar(shieldedTokensQuery.data) || new BigNumber(0); | ||
| const transparentDollars = | ||
| getTotalDollar(transparentTokensQuery.data) || new BigNumber(0); | ||
| const totalAmountInDollars = shieldedDollars.plus(transparentDollars); | ||
|
|
||
| const isLoading = | ||
| maspEnabled ? | ||
| isLoadingTransparent || | ||
| shieldedTokensQuery.isLoading || | ||
| transparentTokensQuery.isLoading | ||
| : isLoadingTransparent; | ||
|
|
||
| const getPiechartData = (): Array<PieChartData> => { | ||
| if (isLoading) { | ||
| return []; | ||
| } | ||
|
|
||
| if (!maspEnabled) { | ||
| return [ | ||
| { | ||
| value: 1, | ||
| color: totalTransparentAmount.gt(0) ? colors.shielded : colors.empty, | ||
| }, | ||
| ]; | ||
| } | ||
|
|
||
| if (totalAmountInDollars.eq(0)) { | ||
| return [{ value: 1, color: colors.empty }]; | ||
| } | ||
|
|
||
| return [ | ||
| { | ||
| value: transparentDollars || new BigNumber(0), | ||
| color: colors.balance, | ||
| }, | ||
| { value: shieldedDollars || new BigNumber(0), color: colors.shielded }, | ||
| ]; | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="h-[230px] w-[230px]"> | ||
| {isLoading ? | ||
| <SkeletonLoading | ||
| height="100%" | ||
| width="100%" | ||
| className="rounded-full border-neutral-800 border-[24px] bg-transparent" | ||
| /> | ||
| : <PieChart | ||
| id="balance-chart" | ||
| data={getPiechartData()} | ||
| strokeWidth={24} | ||
| radius={125} | ||
| segmentMargin={0} | ||
| > | ||
| <div className="flex flex-col gap-1 leading-tight"> | ||
| <Heading className="text-sm" level="h3"> | ||
| {maspEnabled ? "Total Balance" : "NAM Balance"} | ||
| </Heading> | ||
| <div className="text-2xl"> | ||
| {maspEnabled ? | ||
| <span> | ||
| <FiatCurrency amount={totalAmountInDollars} />* | ||
| </span> | ||
| : <NamCurrency | ||
| amount={totalTransparentAmount} | ||
| currencySymbolClassName="hidden" | ||
| decimalPlaces={2} | ||
| /> | ||
| } | ||
| </div> | ||
| </div> | ||
| </PieChart> | ||
| } | ||
| </div> | ||
| {maspEnabled && ( | ||
| <> | ||
| <ul className="mx-auto px-5 mt-3"> | ||
| <BalanceOverviewCaptionItem color={colors.shielded}> | ||
| Shielded Assets | ||
| </BalanceOverviewCaptionItem> | ||
| <BalanceOverviewCaptionItem color={colors.balance}> | ||
| Transparent Assets | ||
| </BalanceOverviewCaptionItem> | ||
| </ul> | ||
| <small className="text-xxs -mb-3 mt-3 block"> | ||
| * Balances exclude NAM until phase 5 | ||
| </small> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.
ec92436There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Published on https://namada-interface-dev.netlify.app as production
🚀 Deployed on https://674dac592e8d24388033b6fe--namada-interface-dev.netlify.app