Create a separate type for the currency kind

thesis · Dec 14, 2023 · 4cd2ef6 · 4cd2ef6
1 parent 4d01503
commit 4cd2ef6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
@@ -2,7 +2,6 @@ import React from "react"
 import { Button, HStack, Icon } from "@chakra-ui/react"
 import { Account } from "@ledgerhq/wallet-api-client"
 import { Bitcoin, Ethereum } from "../../static/icons"
-import { BITCOIN } from "../../constants"
 import {
   useRequestBitcoinAccount,
   useRequestEthereumAccount,
@@ -47,7 +46,7 @@ export default function ConnectWallet() {
       <HStack display={{ base: "none", md: "flex" }}>
         <TextMd color="grey.500">Balance</TextMd>
         <CurrencyBalance
-          currency={BITCOIN}
+          currencyType="bitcoin"
           amount={btcAccount?.balance.toString()}
         />
       </HStack>

diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
@@ -9,7 +9,6 @@ import {
   HStack,
   CardProps,
 } from "@chakra-ui/react"
-import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
 import { TokenBalance } from "../shared/TokenBalance"
 import { TextMd } from "../shared/Typography"
@@ -27,12 +26,12 @@ export default function PositionDetails(props: CardProps) {
         </HStack>
         <TokenBalance
           token={{
-            currency: BITCOIN,
+            currencyType: "bitcoin",
             amount: "2398567898",
             variant: "greater-balance",
           }}
           fiatCurrency={{
-            currency: USD,
+            currencyType: "usd",
             amount: 419288.98,
             shouldBeFormatted: false,
             size: "lg",

diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/dapp/src/components/shared/CurrencyBalance/index.tsx
@@ -1,10 +1,11 @@
 import React, { useMemo } from "react"
 import { Box, useMultiStyleConfig } from "@chakra-ui/react"
 import { formatTokenAmount, toLocaleString } from "../../../utils"
-import { Currency } from "../../../types"
+import { CurrencyType } from "../../../types"
+import { CURRENCIES_BY_TYPE } from "../../../constants"
 
 export type CurrencyBalanceProps = {
-  currency: Currency
+  currencyType: CurrencyType
   amount?: string | number
   shouldBeFormatted?: boolean
   desiredDecimals?: number
@@ -13,7 +14,7 @@ export type CurrencyBalanceProps = {
 }
 
 export function CurrencyBalance({
-  currency,
+  currencyType,
   amount,
   shouldBeFormatted = true,
   desiredDecimals = 2,
@@ -22,6 +23,8 @@ export function CurrencyBalance({
 }: CurrencyBalanceProps) {
   const styles = useMultiStyleConfig("CurrencyBalance", { size, variant })
 
+  const currency = CURRENCIES_BY_TYPE[currencyType]
+
   const balance = useMemo(() => {
     if (shouldBeFormatted)
       return formatTokenAmount(amount ?? 0, currency.decimals, desiredDecimals)

diff --git a/dapp/src/constants/currency.ts b/dapp/src/constants/currency.ts
@@ -1,4 +1,4 @@
-import { Currency } from "../types"
+import { Currency, CurrencyType } from "../types"
 
 export const BITCOIN: Currency = {
   name: "Bitcoin",
@@ -23,3 +23,9 @@ export const CURRENCY_ID_BITCOIN =
 
 export const CURRENCY_ID_ETHEREUM =
   import.meta.env.VITE_USE_TESTNET === "true" ? "ethereum_goerli" : "ethereum"
+
+export const CURRENCIES_BY_TYPE: Record<CurrencyType, Currency> = {
+  bitcoin: BITCOIN,
+  ethereum: ETHEREUM,
+  usd: ETHEREUM,
+}
diff --git a/dapp/src/types/currency.ts b/dapp/src/types/currency.ts
@@ -3,3 +3,5 @@ export type Currency = {
   symbol: string
   decimals: number
 }
+
+export type CurrencyType = "bitcoin" | "ethereum" | "usd"