feat: show free, staked & total amount on account info section

TaoStats · Nov 27, 2023 · 3cf5c9a · 3cf5c9a
1 parent 2d30b3f
commit 3cf5c9a
Showing 1 changed file with 38 additions and 13 deletions.
diff --git a/src/components/account/AccountInfoTable.tsx b/src/components/account/AccountInfoTable.tsx
@@ -76,6 +76,8 @@ export const AccountInfoTable = (props: AccountInfoTableProps) => {
 	} = props;
 
 	const total = rawAmountToDecimal(balance.data?.total.toString());
+	const free = rawAmountToDecimal(balance.data?.free.toString());
+	const staked = rawAmountToDecimal(balance.data?.staked.toString());
 	const [rank, setRank] = useState<number>();
 
 	useEffect(() => {
@@ -145,19 +147,42 @@ export const AccountInfoTable = (props: AccountInfoTableProps) => {
 			<AccountInfoTableAttribute
 				label='Total balance'
 				render={() => (
-					<div css={balanceContainer}>
-						<span css={taoBalance}>
-							{`${formatCurrency(
-								new Decimal(total.toFixed(2).toString()),
-								"USD",
-								{ decimalPlaces: 2 }
-							)} 𝞃`}
-						</span>
-						<span>
-							{`(${formatCurrency(total.mul(price ?? 0), "USD", {
-								decimalPlaces: 2,
-							})} USD)`}
-						</span>
+					<div>
+						<div css={balanceContainer}>
+							<span css={taoBalance}>
+								Free:
+								{`${formatCurrency(
+									new Decimal(free.toFixed(2).toString()),
+									"USD",
+									{ decimalPlaces: 2 }
+								)} 𝞃`}
+							</span>
+						</div>
+						<div css={balanceContainer}>
+							<span css={taoBalance}>
+								Staked:
+								{`${formatCurrency(
+									new Decimal(staked.toFixed(2).toString()),
+									"USD",
+									{ decimalPlaces: 2 }
+								)} 𝞃`}
+							</span>
+						</div>
+						<div css={balanceContainer}>
+							<span css={taoBalance}>
+								Total:
+								{`${formatCurrency(
+									new Decimal(total.toFixed(2).toString()),
+									"USD",
+									{ decimalPlaces: 2 }
+								)} 𝞃`}
+							</span>
+							{/* <span>
+								{`(${formatCurrency(total.mul(price ?? 0), "USD", {
+									decimalPlaces: 2,
+								})} USD)`}
+							</span> */}
+						</div>
 					</div>
 				)}
 				copyToClipboard={() => total.toFixed(2).toString()}