Refactor for showing token balance

thesis · Dec 4, 2023 · 816f7e4 · 816f7e4
1 parent 1da9e86
commit 816f7e4
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 69 deletions.
diff --git a/dapp/src/components/AssetBalance/index.tsx b/dapp/src/components/AssetBalance/index.tsx
diff --git a/dapp/src/components/Modals/StakeModal.tsx b/dapp/src/components/Modals/StakeModal.tsx
@@ -16,26 +16,25 @@ import {
 } from "@chakra-ui/react"
 import { useStakingFlowContext } from "../../hooks"
 import BaseModal from "./BaseModal"
-import { BITCOIN, USD } from "../../constants"
-import { AssetBalance } from "../AssetBalance"
+import { TokenBalance } from "../TokenBalance"
+import { BITCOIN } from "../../constants"
 
 function StakeDetails({
   text,
-  amount,
-  usdAmount,
+  tokenBalance,
+  usdBalance,
 }: {
   text: string
-  amount: string
-  usdAmount?: string
+  tokenBalance: string
+  usdBalance: string
 }) {
   return (
     <Flex justifyContent="space-between">
       <Text>{text}</Text>
-      <AssetBalance
-        asset={{ amount, currency: BITCOIN }}
-        currencyAsset={
-          usdAmount ? { amount: usdAmount, currency: USD } : undefined
-        }
+      <TokenBalance
+        tokenBalance={tokenBalance}
+        currency={BITCOIN}
+        usdBalance={usdBalance}
       />
     </Flex>
   )
@@ -65,18 +64,18 @@ export default function ActionModal() {
                   {/* TODO: Use the real data */}
                   <StakeDetails
                     text="Amount to be staked"
-                    amount="1.75"
-                    usdAmount="45.725,91"
+                    tokenBalance="179776555"
+                    usdBalance="45.725,91"
                   />
                   <StakeDetails
                     text="Protocol fee (0.01%)"
-                    amount="0.0020"
-                    usdAmount="0.024,91"
+                    tokenBalance="20"
+                    usdBalance="0.024,91"
                   />
                   <StakeDetails
                     text="Approximately staked tokens"
-                    amount="1.74"
-                    usdAmount="44.762,21"
+                    tokenBalance="13456775"
+                    usdBalance="44.762,21"
                   />
                 </Flex>
               </Flex>

diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx
@@ -9,14 +9,14 @@ import {
 } from "@chakra-ui/react"
 import { Account } from "@ledgerhq/wallet-api-client"
 import { Bitcoin, Ethereum, Info } from "../../static/icons"
-import { BITCOIN } from "../../constants"
 import {
   useRequestBitcoinAccount,
   useRequestEthereumAccount,
   useWalletContext,
 } from "../../hooks"
-import { formatSatoshiAmount, truncateAddress } from "../../utils"
-import { AssetBalance } from "../AssetBalance"
+import { truncateAddress } from "../../utils"
+import { BITCOIN } from "../../constants"
+import { TokenBalance } from "../TokenBalance"
 
 export type ConnectButtonsProps = {
   leftIcon: typeof Icon
@@ -63,15 +63,9 @@ export default function ConnectWallet() {
     <HStack>
       <HStack mr="16px">
         <Text>Balance</Text>
-        <AssetBalance
-          // TODO: This value should be calculated after the account is connected and stored in the context or redux.
-          asset={{
-            amount:
-              !btcAccount || btcAccount?.balance.isZero()
-                ? "0.00"
-                : formatSatoshiAmount(btcAccount.balance.toString()),
-            currency: BITCOIN,
-          }}
+        <TokenBalance
+          tokenBalance={btcAccount?.balance.toString() ?? "0"}
+          currency={BITCOIN}
         />
       </HStack>
       <ConnectButton

diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
@@ -8,11 +8,11 @@ import {
   useColorModeValue,
   Flex,
 } from "@chakra-ui/react"
-import { BITCOIN, USD } from "../../constants"
+import { BITCOIN } from "../../constants"
 import { Info } from "../../static/icons"
 import { useStakingFlowContext } from "../../hooks"
 import Staking from "../Staking"
-import { AssetBalance } from "../AssetBalance"
+import { TokenBalance } from "../TokenBalance"
 
 export default function PositionDetails() {
   const { setModalType } = useStakingFlowContext()
@@ -29,9 +29,11 @@ export default function PositionDetails() {
             </Tooltip>
           </Flex>
           <Flex direction="column" alignItems="flex-start">
-            <AssetBalance
-              asset={{ amount: "34.75", currency: BITCOIN }}
-              currencyAsset={{ amount: "1.245.148,1", currency: USD }}
+            {/* TODO: Use the real data */}
+            <TokenBalance
+              tokenBalance="132231212"
+              currency={BITCOIN}
+              usdBalance="1.245.148,1"
               alignItems="start"
             />
           </Flex>

diff --git a/dapp/src/components/TokenBalance/index.tsx b/dapp/src/components/TokenBalance/index.tsx
@@ -0,0 +1,38 @@
+import React from "react"
+import { HStack, Text, Flex } from "@chakra-ui/react"
+import { Currency } from "../../types"
+import { formatTokenAmount } from "../../utils"
+import { USD } from "../../constants"
+
+type TokenBalanceProps = {
+  currency: Currency
+  tokenBalance: string | number
+  usdBalance?: string
+  desiredDecimals?: number
+  alignItems?: "end" | "start"
+}
+
+export function TokenBalance({
+  currency,
+  tokenBalance,
+  usdBalance,
+  desiredDecimals = 2,
+  alignItems = "end",
+}: TokenBalanceProps) {
+  return (
+    <Flex direction="column" alignItems={alignItems}>
+      <HStack>
+        <Text>
+          {formatTokenAmount(tokenBalance, currency.decimals, desiredDecimals)}
+        </Text>
+        <Text>{currency.symbol}</Text>
+      </HStack>
+      {usdBalance && (
+        <HStack color="gray.500">
+          <Text>{usdBalance}</Text>
+          <Text>{USD.symbol}</Text>
+        </HStack>
+      )}
+    </Flex>
+  )
+}
diff --git a/dapp/src/types/currency.ts b/dapp/src/types/currency.ts
@@ -3,8 +3,3 @@ export type Currency = {
   symbol: string
   decimals: number
 }
-
-export type Asset = {
-  amount: string
-  currency: Currency
-}
diff --git a/dapp/src/utils/numbers.ts b/dapp/src/utils/numbers.ts
@@ -15,6 +15,10 @@ export function bigIntToUserAmount(
   fixedPointDecimals: number,
   desiredDecimals = 2,
 ): string {
+  if (fixedPoint === BigInt(0)) {
+    return `0.${"0".repeat(desiredDecimals)}`
+  }
+
   const fixedPointDesiredDecimalsAmount =
     fixedPoint /
     10n ** BigInt(Math.max(1, fixedPointDecimals - desiredDecimals))