Create a custom component for token balance

thesis · Dec 6, 2023 · 72c8e3c · 72c8e3c
1 parent 0df5493
commit 72c8e3c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 34 deletions.
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
@@ -15,7 +15,8 @@ import {
   useRequestEthereumAccount,
   useWalletContext,
 } from "../../hooks"
-import { formatSatoshiAmount, truncateAddress } from "../../utils"
+import { truncateAddress } from "../../utils"
+import { TokenBalance } from "../TokenBalance"
 
 export type ConnectButtonsProps = {
   leftIcon: typeof Icon
@@ -62,12 +63,10 @@ export default function ConnectWallet() {
     <HStack spacing={4}>
       <HStack>
         <Text>Balance</Text>
-        <Text as="b">
-          {!btcAccount || btcAccount?.balance.isZero()
-            ? "0.00"
-            : formatSatoshiAmount(btcAccount.balance.toString())}
-        </Text>
-        <Text>{BITCOIN.symbol}</Text>
+        <TokenBalance
+          tokenBalance={btcAccount?.balance.toString() ?? "0"}
+          currency={BITCOIN}
+        />
       </HStack>
       <ConnectButton
         leftIcon={Bitcoin}

diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
@@ -1,17 +1,9 @@
 import React from "react"
-import {
-  Text,
-  Button,
-  HStack,
-  Tooltip,
-  Icon,
-  useColorModeValue,
-  Flex,
-} from "@chakra-ui/react"
-import { BITCOIN, USD } from "../../constants"
-import { Info } from "../../static/icons"
+import { Text, Button, Flex } from "@chakra-ui/react"
+import { BITCOIN } from "../../constants"
 import Staking from "../Staking"
 import { useStakingFlowContext } from "../../hooks"
+import { TokenBalance } from "../TokenBalance"
 
 export default function PositionDetails() {
   const { setModalType } = useStakingFlowContext()
@@ -21,22 +13,13 @@ export default function PositionDetails() {
       <Flex p={4} h="100%" direction="column" justifyContent="space-between">
         <Flex direction="column" gap={2}>
           <Text>Your positions</Text>
-          <Flex direction="column" alignItems="flex-start">
-            <HStack>
-              <Text>34.75</Text>
-              <Text>{BITCOIN.symbol}</Text>
-            </HStack>
-            <Flex w="100%" justifyContent="space-between">
-              <HStack>
-                <Text>1.245.148,1</Text>
-                <Text>{USD.symbol}</Text>
-              </HStack>
-              {/* TODO: Add correct text for tooltip */}
-              <Tooltip label="Template">
-                <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
-              </Tooltip>
-            </Flex>
-          </Flex>
+          {/* TODO: Use the real data */}
+          <TokenBalance
+            tokenBalance="132231212"
+            currency={BITCOIN}
+            usdBalance="1.245.148,1"
+            alignItems="start"
+          />
         </Flex>
         <Flex direction="column" gap={2}>
           {/* TODO: Handle click actions */}

diff --git a/dapp/src/components/TokenBalance/index.tsx b/dapp/src/components/TokenBalance/index.tsx
@@ -0,0 +1,39 @@
+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 && (
+        // TODO: Set the correct color
+        <HStack color="gray.500">
+          <Text>{usdBalance}</Text>
+          <Text>{USD.symbol}</Text>
+        </HStack>
+      )}
+    </Flex>
+  )
+}
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))