React redux implementation, fetching current price of BTC

dapp/.eslintrc

@@ -18,6 +18,16 @@
     "react/require-default-props": [0],
     "no-console": ["error", { "allow": ["error"] }],
   },
+  "overrides": [
+    {
+      "files": [
+        "src/store/**/*Slice.ts"
+      ],
+      "rules": {
+        "no-param-reassign": ["error", {"ignorePropertyModificationsFor": ["state"] }]
+      }
+    }
+  ],
   "settings": {
     "import/resolver": {
       "alias": {

dapp/package.json

@@ -21,14 +21,17 @@
     "@emotion/styled": "^11.11.0",
     "@ledgerhq/wallet-api-client": "^1.5.0",
     "@ledgerhq/wallet-api-client-react": "^1.3.0",
+    "@reduxjs/toolkit": "^2.2.0",
     "@sentry/react": "^7.98.0",
     "@tanstack/react-table": "^8.11.3",
+    "axios": "^1.6.7",
     "ethers": "^6.10.0",
     "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",
     "react-router-dom": "^6.22.0",
     "recharts": "^2.12.0"
   },

dapp/src/DApp.tsx

@@ -1,7 +1,9 @@
 import React from "react"
 import { Box, ChakraProvider } from "@chakra-ui/react"
+import { Provider as ReduxProvider } from "react-redux"
 import { RouterProvider } from "react-router-dom"
-import { useSentry, useInitializeAcreSdk } from "./hooks"
+import { useSentry, useInitializeAcreSdk, useInitApp } from "./hooks"
+import { store } from "./store"
 import theme from "./theme"
 import {
   DocsDrawerContextProvider,
@@ -21,6 +23,7 @@ function DApp() {
   // useDetectThemeMode()
   useSentry()
   useInitializeAcreSdk()
+  useInitApp()
 
   return (
     <>
@@ -41,10 +44,12 @@ function DAppProviders() {
         <AcreSdkProvider>
           <DocsDrawerContextProvider>
             <SidebarContextProvider>
-              <ChakraProvider theme={theme}>
-                <GlobalStyles />
-                <DApp />
-              </ChakraProvider>
+              <ReduxProvider store={store}>
+                <ChakraProvider theme={theme}>
+                  <GlobalStyles />
+                  <DApp />
+                </ChakraProvider>
+              </ReduxProvider>
             </SidebarContextProvider>
           </DocsDrawerContextProvider>
         </AcreSdkProvider>

dapp/src/api/coingeckoApi.ts

@@ -0,0 +1,20 @@
+import axios from "axios"
+import { CoingeckoIdType, CoingeckoCurrencyType } from "#/types"
+
+const coingeckoApiURL = "https://api.coingecko.com/api/v3"
+
+type CoingeckoSimplePriceResponse = {
+  data: {
+    [id in CoingeckoIdType]: Record<CoingeckoCurrencyType, number>
+  }
+}
+
+export const fetchCryptoCurrencyPriceUSD = async (
+  coingeckoId: CoingeckoIdType,
+): Promise<number> => {
+  const response: CoingeckoSimplePriceResponse = await axios.get(
+    `${coingeckoApiURL}/simple/price?ids=${coingeckoId}&vs_currencies=usd`,
+  )
+
+  return response.data[coingeckoId].usd
+}

dapp/src/api/index.ts

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

dapp/src/components/Header/ConnectWallet.tsx

@@ -9,7 +9,7 @@ import {
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { TextMd } from "#/components/shared/Typography"
 import { Bitcoin, EthereumIcon } from "#/assets/icons"
-import { truncateAddress, asyncWrapper } from "#/utils"
+import { truncateAddress, logPromiseFailure } from "#/utils"
 
 export type ConnectButtonsProps = {
   leftIcon: typeof Icon
@@ -25,7 +25,7 @@ function ConnectButton({
   const colorScheme = !account ? "error" : undefined
 
   const handleClick = () => {
-    asyncWrapper(requestAccount())
+    logPromiseFailure(requestAccount())
   }
 
   return (

dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx

@@ -8,7 +8,7 @@ import {
 } from "#/hooks"
 import Alert from "#/components/shared/Alert"
 import { TextMd } from "#/components/shared/Typography"
-import { asyncWrapper } from "#/utils"
+import { logPromiseFailure } from "#/utils"
 import { PROCESS_STATUSES } from "#/types"
 import StakingStepsModalContent from "./StakingStepsModalContent"
 
@@ -38,7 +38,7 @@ export default function DepositBTCModal() {
     // to make sure for the moment that it doesn't return an error about funds not found
     // TODO: Remove the delay when SDK is updated
     setTimeout(() => {
-      asyncWrapper(handleStake())
+      logPromiseFailure(handleStake())
     }, 10000)
   }, [setStatus, handleStake])
 
@@ -48,7 +48,7 @@ export default function DepositBTCModal() {
   const handledDepositBTC = useCallback(() => {
     if (!tokenAmount?.amount || !btcAddress) return
 
-    asyncWrapper(sendBitcoinTransaction(tokenAmount?.amount, btcAddress))
+    logPromiseFailure(sendBitcoinTransaction(tokenAmount?.amount, btcAddress))
   }, [btcAddress, sendBitcoinTransaction, tokenAmount])
 
   return (

dapp/src/components/TransactionModal/ActiveStakingStep/SignMessageModal.tsx

@@ -4,7 +4,7 @@ import {
   useModalFlowContext,
   useStakeFlowContext,
 } from "#/hooks"
-import { asyncWrapper } from "#/utils"
+import { logPromiseFailure } from "#/utils"
 import AlertReceiveSTBTC from "#/components/shared/AlertReceiveSTBTC"
 import { PROCESS_STATUSES } from "#/types"
 import StakingStepsModalContent from "./StakingStepsModalContent"
@@ -15,7 +15,7 @@ export default function SignMessageModal() {
   const handleSignMessage = useExecuteFunction(signMessage, goNext)
 
   const handleSignMessageWrapper = useCallback(() => {
-    asyncWrapper(handleSignMessage())
+    logPromiseFailure(handleSignMessage())
   }, [handleSignMessage])
 
   useEffect(() => {

dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx

@@ -4,7 +4,7 @@ import { PROCESS_STATUSES } from "#/types"
 import { Button, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
 import AlertReceiveSTBTC from "#/components/shared/AlertReceiveSTBTC"
-import { asyncWrapper } from "#/utils"
+import { logPromiseFailure } from "#/utils"
 
 export default function SignMessageModal() {
   const { setStatus } = useModalFlowContext()
@@ -34,7 +34,7 @@ export default function SignMessageModal() {
 
     // TODO: Remove when SDK is ready
     setTimeout(() => {
-      asyncWrapper(handleSignMessage())
+      logPromiseFailure(handleSignMessage())
     }, 5000)
   }, [setStatus, handleSignMessage])
 

dapp/src/components/TransactionModal/ModalContentWrapper/ActionFormModal.tsx

@@ -16,7 +16,7 @@ import {
 } from "#/hooks"
 import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
-import { asyncWrapper } from "#/utils"
+import { logPromiseFailure } from "#/utils"
 import { REFERRAL } from "#/constants"
 import StakeFormModal from "../ActiveStakingStep/StakeFormModal"
 import UnstakeFormModal from "../ActiveUnstakingStep/UnstakeFormModal"
@@ -60,7 +60,8 @@ function ActionFormModal({ defaultType }: { defaultType: ActionFlowType }) {
   )
 
   const handleSubmitFormWrapper = useCallback(
-    (values: TokenAmountFormValues) => asyncWrapper(handleSubmitForm(values)),
+    (values: TokenAmountFormValues) =>
+      logPromiseFailure(handleSubmitForm(values)),
     [handleSubmitForm],
   )
 

dapp/src/components/TransactionModal/ModalContentWrapper/MissingAccountModal.tsx

@@ -10,7 +10,7 @@ import {
 } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
 import Alert from "#/components/shared/Alert"
-import { asyncWrapper, getCurrencyByType } from "#/utils"
+import { logPromiseFailure, getCurrencyByType } from "#/utils"
 import { CurrencyType, RequestAccountParams } from "#/types"
 
 type MissingAccountModalProps = {
@@ -27,7 +27,7 @@ export default function MissingAccountModal({
   const { name, symbol } = getCurrencyByType(currency)
 
   const handleClick = () => {
-    asyncWrapper(requestAccount())
+    logPromiseFailure(requestAccount())
   }
 
   return (

dapp/src/components/shared/CurrencyBalanceWithConversion/index.tsx

@@ -1,21 +1,19 @@
-import React, { useMemo } from "react"
+import React from "react"
+import { useCurrencyConversion } from "#/hooks"
+import { CurrencyConversionType } from "#/types"
 import { CurrencyBalance, CurrencyBalanceProps } from "../CurrencyBalance"
 
-const MOCK_CONVERSION_AMOUNT = 100
-
 export function CurrencyBalanceWithConversion({
   from,
   to,
 }: {
   from: CurrencyBalanceProps
   to: CurrencyBalanceProps
 }) {
-  // TODO: Make the correct conversion
-  const conversionAmount = useMemo(() => {
-    if (!from.amount || BigInt(from.amount) < 0n) return undefined
-
-    return MOCK_CONVERSION_AMOUNT
-  }, [from.amount])
+  const conversionAmount = useCurrencyConversion(
+    from as CurrencyConversionType,
+    to as CurrencyConversionType,
+  )
 
   return (
     <>

dapp/src/components/shared/Form/FormTokenBalanceInput.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { useField } from "formik"
-import { asyncWrapper } from "#/utils"
+import { logPromiseFailure } from "#/utils"
 import TokenBalanceInput, { TokenBalanceInputProps } from "../TokenBalanceInput"
 
 export type FormTokenBalanceInputProps = {
@@ -13,7 +13,7 @@ export function FormTokenBalanceInput({
   const [field, meta, helpers] = useField(name)
 
   const setAmount = (value?: bigint) => {
-    asyncWrapper(helpers.setValue(value))
+    logPromiseFailure(helpers.setValue(value))
   }
 
   return (

dapp/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from "./store"
 export * from "./useDetectThemeMode"
 export * from "./useRequestBitcoinAccount"
 export * from "./useRequestEthereumAccount"
@@ -13,3 +14,5 @@ export * from "./useTransactionHistoryTable"
 export * from "./useSentry"
 export * from "./useExecuteFunction"
 export * from "./useStakeFlowContext"
+export * from "./useInitApp"
+export * from "./useCurrencyConversion"

dapp/src/hooks/store/index.ts

@@ -0,0 +1,2 @@
+export * from "./useAppDispatch"
+export * from "./useAppSelector"

dapp/src/hooks/store/useAppDispatch.ts

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

dapp/src/hooks/store/useAppSelector.ts

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

dapp/src/hooks/useCurrencyConversion.ts

@@ -0,0 +1,35 @@
+import { CURRENCIES_BY_TYPE } from "#/constants"
+import { selectBtcUsdPrice } from "#/store/btc"
+import { bigIntToUserAmount } from "#/utils"
+import { CurrencyConversionType } from "#/types"
+import { useMemo } from "react"
+import { useAppSelector } from "./store"
+
+export function useCurrencyConversion(
+  from: CurrencyConversionType,
+  to: CurrencyConversionType,
+) {
+  const usdPrice = useAppSelector(selectBtcUsdPrice)
+
+  const convertedValue = useMemo(() => {
+    if (!from.amount || BigInt(from.amount) < 0n) return undefined
+
+    switch (from.currency) {
+      case "bitcoin":
+        if (to.currency === "usd") {
+          const fromAmount = bigIntToUserAmount(
+            BigInt(from.amount),
+            CURRENCIES_BY_TYPE[from.currency].decimals,
+            CURRENCIES_BY_TYPE[from.currency].desiredDecimals,
+          )
+          const conversionAmount = fromAmount * usdPrice
+          return conversionAmount
+        }
+        return undefined
+      default:
+        return undefined
+    }
+  }, [from, to, usdPrice])
+
+  return convertedValue
+}

dapp/src/hooks/useInitApp.ts

@@ -0,0 +1,12 @@
+import { useEffect } from "react"
+import { fetchBTCPriceUSD } from "#/store/btc"
+import { logPromiseFailure } from "#/utils"
+import { useAppDispatch } from "./store"
+
+export function useInitApp() {
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    logPromiseFailure(dispatch(fetchBTCPriceUSD()))
+  }, [dispatch])
+}

dapp/src/hooks/useInitializeAcreSdk.ts

@@ -1,6 +1,6 @@
 import { useEffect } from "react"
 import { ETHEREUM_NETWORK } from "#/constants"
-import { asyncWrapper } from "#/utils"
+import { logPromiseFailure } from "#/utils"
 import { useAcreContext } from "#/acre-react/hooks"
 import { useWalletContext } from "./useWalletContext"
 
@@ -14,6 +14,6 @@ export function useInitializeAcreSdk() {
     const initSDK = async (ethAddress: string) => {
       await init(ethAddress, ETHEREUM_NETWORK)
     }
-    asyncWrapper(initSDK(ethAccount.address))
+    logPromiseFailure(initSDK(ethAccount.address))
   }, [ethAccount?.address, init])
 }

dapp/src/store/btc/btcSelector.ts

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

dapp/src/store/btc/btcSlice.ts

@@ -0,0 +1,34 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { fetchBTCPriceUSD } from "./btcThunk"
+
+type BtcState = {
+  isLoadingPriceUSD: boolean
+  usdPrice: number
+}
+
+const initialState: BtcState = {
+  isLoadingPriceUSD: false,
+  usdPrice: 0,
+}
+
+// Store Bitcoin data such as balance, balance in usd and other related data to Bitcoin chain.
+export const btcSlice = createSlice({
+  name: "btc",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(fetchBTCPriceUSD.pending, (state) => {
+      state.isLoadingPriceUSD = true
+    })
+    builder.addCase(fetchBTCPriceUSD.rejected, (state) => {
+      state.isLoadingPriceUSD = false
+    })
+    builder.addCase(
+      fetchBTCPriceUSD.fulfilled,
+      (state, action: PayloadAction<number>) => {
+        state.isLoadingPriceUSD = false
+        state.usdPrice = action.payload
+      },
+    )
+  },
+})