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,6 +21,7 @@
     "@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",
     "@sentry/types": "^7.102.0",
     "@tanstack/react-table": "^8.11.3",
@@ -31,6 +32,7 @@
     "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 { useInitializeAcreSdk } from "./hooks"
+import { useInitApp } from "./hooks"
+import { store } from "./store"
 import theme from "./theme"
 import {
   DocsDrawerContextProvider,
@@ -15,13 +17,9 @@ import Sidebar from "./components/Sidebar"
 import DocsDrawer from "./components/DocsDrawer"
 import GlobalStyles from "./components/GlobalStyles"
 import { router } from "./router"
-import { useSentry } from "./hooks/sentry"
 
 function DApp() {
-  // TODO: Let's uncomment when dark mode is ready
-  // useDetectThemeMode()
-  useSentry()
-  useInitializeAcreSdk()
+  useInitApp()
 
   return (
     <>
@@ -42,10 +40,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/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

@@ -10,7 +10,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"
 
@@ -42,7 +42,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])
 
@@ -62,7 +62,7 @@ export default function DepositBTCModal() {
     // TODO: Display the correct message for the user
     if (response.verificationStatus !== "valid") return
 
-    asyncWrapper(sendBitcoinTransaction(tokenAmount?.amount, btcAddress))
+    logPromiseFailure(sendBitcoinTransaction(tokenAmount?.amount, btcAddress))
   }, [
     btcAddress,
     depositReceipt,
@@ -73,7 +73,7 @@ export default function DepositBTCModal() {
   ])
 
   const handledDepositBTCWrapper = useCallback(() => {
-    asyncWrapper(handledDepositBTC())
+    logPromiseFailure(handledDepositBTC())
   }, [handledDepositBTC])
 
   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 StakeFormModal from "../ActiveStakingStep/StakeFormModal"
 import UnstakeFormModal from "../ActiveUnstakingStep/UnstakeFormModal"
 
@@ -59,7 +59,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,15 @@
-import React, { useMemo } from "react"
+import React from "react"
+import { useCurrencyConversion } from "#/hooks"
 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, to })
 
   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"
@@ -12,4 +13,7 @@ export * from "./useInitializeAcreSdk"
 export * from "./useTransactionHistoryTable"
 export * from "./useExecuteFunction"
 export * from "./useStakeFlowContext"
+export * from "./useInitApp"
+export * from "./useCurrencyConversion"
 export * from "./useDepositTelemetry"
+export * from "./useFetchBTCPriceUSD"

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,39 @@
+import { CURRENCIES_BY_TYPE } from "#/constants"
+import { selectBtcUsdPrice } from "#/store/btc"
+import { bigIntToUserAmount } from "#/utils"
+import { CurrencyType } from "#/types"
+import { useMemo } from "react"
+import { useAppSelector } from "./store"
+
+type CurrencyConversionType = {
+  currency: CurrencyType
+  amount?: number | string
+}
+
+// TODO: should be updated to handle another currencies
+const isBtcUsdConversion = (
+  from: CurrencyConversionType,
+  to: CurrencyConversionType,
+): boolean => from.currency === "bitcoin" && to.currency === "usd"
+
+export function useCurrencyConversion({
+  from,
+  to,
+}: {
+  from: CurrencyConversionType
+  to: CurrencyConversionType
+}) {
+  const price = useAppSelector(
+    isBtcUsdConversion(from, to) ? selectBtcUsdPrice : () => undefined,
+  )
+  const conversionAmount = useMemo(() => {
+    if (!from.amount || !price) return undefined
+
+    const { amount, currency } = from
+    const { decimals, desiredDecimals } = CURRENCIES_BY_TYPE[currency]
+
+    return bigIntToUserAmount(BigInt(amount), decimals, desiredDecimals) * price
+  }, [from, price])
+
+  return conversionAmount
+}

dapp/src/hooks/useFetchBTCPriceUSD.ts

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

dapp/src/hooks/useInitApp.ts

@@ -0,0 +1,11 @@
+import { useSentry } from "./sentry"
+import { useInitializeAcreSdk } from "./useInitializeAcreSdk"
+import { useFetchBTCPriceUSD } from "./useFetchBTCPriceUSD"
+
+export function useInitApp() {
+  // TODO: Let's uncomment when dark mode is ready
+  // useDetectThemeMode()
+  useSentry()
+  useInitializeAcreSdk()
+  useFetchBTCPriceUSD()
+}

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
+      },
+    )
+  },
+})