Show values in USD

dapp/package.json

@@ -23,11 +23,11 @@
     "@reduxjs/toolkit": "^2.2.0",
     "@sentry/react": "^7.98.0",
     "@tanstack/react-table": "^8.11.3",
+    "axios": "^1.6.7",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-number-format": "^5.3.1",
     "react-redux": "^9.1.0"
   },
   "devDependencies": {

dapp/src/DApp.tsx

@@ -1,8 +1,8 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { Box, ChakraProvider } from "@chakra-ui/react"
 import { Provider as ReduxProvider } from "react-redux"
 import { useSentry } from "./hooks"
-import { reduxStore } from "./redux/store"
+import { store } from "./redux/store"
 import theme from "./theme"
 import {
   DocsDrawerContextProvider,
@@ -15,12 +15,19 @@ import Overview from "./components/Overview"
 import Sidebar from "./components/Sidebar"
 import DocsDrawer from "./components/DocsDrawer"
 import GlobalStyles from "./components/GlobalStyles"
+import { fetchBTCPriceUSD } from "./redux/thunks"
+import { useAppDispatch } from "./hooks"
 
 function DApp() {
+  const dispatch = useAppDispatch()
   // TODO: Let's uncomment when dark mode is ready
   // useDetectThemeMode()
   useSentry()
 
+  useEffect(() => {
+    dispatch(fetchBTCPriceUSD())
+  }, [dispatch])
+
   return (
     <>
       <Header />
@@ -39,7 +46,7 @@ function DAppProviders() {
       <WalletContextProvider>
         <DocsDrawerContextProvider>
           <SidebarContextProvider>
-            <ReduxProvider store={reduxStore}>
+            <ReduxProvider store={store}>
               <ChakraProvider theme={theme}>
                 <GlobalStyles />
                 <DApp />

dapp/src/components/Overview/PositionDetails.tsx

@@ -12,6 +12,7 @@ import {
 import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
 import { TextMd } from "#/components/shared/Typography"
 import { Info } from "#/assets/icons"
+import { useAppSelector } from "#/hooks"
 import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
 import TransactionModal from "../TransactionModal"
 
@@ -28,7 +29,7 @@ export default function PositionDetails(props: CardProps) {
     <Card {...props}>
       <CardBody>
         <HStack justifyContent="space-between">
-          <TextMd fontWeight="bold">Your position</TextMd>
+          <TextMd fontWeight="bold">Your position :</TextMd>
           {/* TODO: Add correct text for tooltip */}
           <Tooltip label="Template" placement="top">
             <Icon as={Info} color="grey.700" />

dapp/src/hooks/index.ts

@@ -11,3 +11,5 @@ export * from "./useSignMessage"
 export * from "./useDepositBTCTransaction"
 export * from "./useTransactionHistoryTable"
 export * from "./useSentry"
+export * from "./useAppDispatch"
+export * from "./useAppSelector"

dapp/src/hooks/useAppDispatch.ts

@@ -0,0 +1,4 @@
+import { useDispatch } from "react-redux"
+import { AppDispatch } from "#/types"
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()

dapp/src/hooks/useAppSelector.ts

@@ -0,0 +1,4 @@
+import { useSelector } from "react-redux"
+import { RootState } from "#/types"
+
+export const useAppSelector = useSelector.withTypes<RootState>()

dapp/src/redux/reducer.ts

@@ -1,6 +1,6 @@
 import { combineReducers } from "@reduxjs/toolkit"
 import * as combinedSlices from "./slices"
 
-export default combineReducers({
+export const reducer = combineReducers({
   ...combinedSlices,
 })

dapp/src/redux/selectors/btc.selector.ts

@@ -0,0 +1,3 @@
+import { RootState } from "#/types"
+
+export const selectBtcUsdPrice = (state: RootState) => state.btcReducer.usdPrice

dapp/src/redux/selectors/index.ts

@@ -0,0 +1 @@
+export * from "./btc.selector"

dapp/src/redux/slices/btc.slice.ts

@@ -0,0 +1,27 @@
+import { createSlice } from "@reduxjs/toolkit"
+import { BtcState } from "#/types"
+import { fetchBTCPriceUSD } from "../thunks"
+
+const initialState: BtcState = {
+  isLoadingPriceUSD: false,
+  usdPrice: 0,
+}
+
+// Store Bitcoin data such as balance, balance in usd and other related data to Bitcoin chain.
+const btcSlice = createSlice({
+  name: "btc",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(fetchBTCPriceUSD.pending, (state) => {
+      state.isLoadingPriceUSD = true
+    })
+    builder.addCase(fetchBTCPriceUSD.fulfilled, (state, action) => {
+      state.isLoadingPriceUSD = false
+      state.usdPrice = action.payload
+    })
+  },
+})
+
+export const btcActions = btcSlice.actions
+export const btcReducer = btcSlice.reducer

dapp/src/redux/slices/index.ts

@@ -1 +1 @@
-export * from "./todo.slice"
+export { btcReducer } from "./btc.slice"

dapp/src/redux/store.ts

@@ -1,12 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit"
-import { preloadedState } from "./state"
-import combinedReducer from "./reducer"
 import combinedMiddleware from "./middleware"
+import { reducer } from "./reducer"
 
-export const reduxStore = configureStore({
-  reducer: combinedReducer,
+export const store = configureStore({
+  reducer,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware(combinedMiddleware),
-  preloadedState,
-  devTools: process.env.NODE_ENV !== "production",
+  devTools: true
 })

dapp/src/redux/thunks/btc.thunk.ts

@@ -0,0 +1,8 @@
+import { BITCOIN } from "#/constants";
+import { fetchCryptoCurrencyPriceUSD } from "#/utils";
+import { createAsyncThunk } from "@reduxjs/toolkit";
+
+export const fetchBTCPriceUSD = createAsyncThunk(
+    "btc/fetchBTCPriceUSD",
+    async () => await fetchCryptoCurrencyPriceUSD(BITCOIN)
+  )

dapp/src/redux/thunks/index.ts

@@ -0,0 +1 @@
+export * from "./btc.thunk"

dapp/src/types/btc.ts

@@ -0,0 +1,4 @@
+export interface BtcState {
+  isLoadingPriceUSD: boolean
+  usdPrice: number
+}

dapp/src/types/index.ts

@@ -6,3 +6,5 @@ export * from "./transaction"
 export * from "./chain"
 export * from "./table"
 export * from "./action-flow"
+export * from "./btc"
+export * from "./redux"

dapp/src/types/redux.ts

@@ -0,0 +1,4 @@
+import { store } from "#/redux/store"
+
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch

dapp/src/utils/conversion.ts

@@ -0,0 +1,81 @@
+// export const toUsdBalance = (token: TokenState) => {
+//     const amount = BigNumber.from(10)
+//       .pow(18 - (token.decimals ?? 18)) // cast all to 18 decimals
+//       .mul(BigNumber.from(token.balance))
+//       .toString()
+
+//     return getUsdBalance(amount, token.usdConversion)
+//   }
+// import { FixedNumber } from "@ethersproject/bignumber"
+
+//   export const toUsdBalance = (
+//     balance: string | number,
+//     usdConversion: number
+//   ): FixedNumber => {
+//     return FixedNumber.fromString(usdConversion.toString()).mulUnsafe(
+//       FixedNumber.fromString(balance.toString())
+//     )
+//   }
+
+
+// import { BigNumber } from "ethers"
+
+// const toUsdBalance = (token: TokenState) => {
+//     const amount = BigNumber.from(10)
+//       .pow(18 - (token.decimals ?? 18)) // cast all to 18 decimals
+//       .mul(BigNumber.from(token.balance))
+//       .toString()
+
+//     return getUsdBalance(amount, token.usdConversion)
+//   }
+
+// import { FixedNumber } from "@ethersproject/bignumber"
+
+// export const toUsdBalance = (
+//     balance: string | number,
+//     usdConversion: number
+//   ): FixedNumber => {
+//     return FixedNumber.fromString(usdConversion.toString()).mulUnsafe(
+//       FixedNumber.fromString(balance.toString())
+//     )
+//   }
+
+import { FixedNumber } from "@ethersproject/bignumber"
+import { formatUnits } from "@ethersproject/units"
+import numeral from "numeral"
+
+export const formatNumeral = (number: string | number, format = "0,00.00") => {
+    return numeral(number).format(format)
+  }
+
+export const formatFiatCurrencyAmount = (
+    amount: number | string,
+    format = "0,00",
+    currencySymbol = "$"
+  ) => {
+    return formatNumeral(amount, `${currencySymbol}${format}`)
+  }
+
+
+export const toUsdBalance = (
+    balance: string | number,
+    usdConversion: number
+  ): FixedNumber => {
+    console.log('### balance', FixedNumber.fromString(usdConversion.toString()).mulUnsafe(
+        FixedNumber.fromString(balance.toString())
+      ))
+    return FixedNumber.fromString(usdConversion.toString()).mulUnsafe(
+      FixedNumber.fromString(balance.toString())
+    ).floor()
+  }
+
+
+ export const getUsdBalance = (
+    balance: string | number,
+    usdConversion: number
+  ): string => {
+    console.log('### toUsdBalance(formatUnits(balance), usdConversion).toString()', toUsdBalance(formatUnits(balance), usdConversion).toString())
+    return formatFiatCurrencyAmount(
+      toUsdBalance(formatUnits(balance), usdConversion).toString()
+    )
+  }

dapp/src/utils/externalApi.ts

@@ -0,0 +1,13 @@
+import axios from "axios"
+import { Currency } from "#/types"
+
+const coingeckoApiURL = "https://api.coingecko.com/api/v3"
+
+export const fetchCryptoCurrencyPriceUSD = async ({
+  name
+}: Currency) => {
+    const response = await axios.get(
+      `${coingeckoApiURL}/simple/price?ids=${name}&vs_currencies=usd`
+    )
+    return response.data[name.toLowerCase()].usd;
+}

dapp/src/utils/index.ts

@@ -6,3 +6,4 @@ export * from "./chain"
 export * from "./text"
 export * from "./time"
 export * from "./async"
+export * from "./externalApi"