Read the min amount of BTC deposit from the SDK

dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx

@@ -11,12 +11,12 @@ function StakeDetails({
   maxTokenAmount,
 }: {
   currency: CurrencyType
-  minTokenAmount: string
-  maxTokenAmount: string
+  minTokenAmount: bigint
+  maxTokenAmount: bigint
 }) {
   const value = useTokenAmountFormValue() ?? 0n
-  const isMaximumValueExceeded = value > BigInt(maxTokenAmount)
-  const isMinimumValueFulfilled = value >= BigInt(minTokenAmount)
+  const isMaximumValueExceeded = value > maxTokenAmount
+  const isMinimumValueFulfilled = value >= minTokenAmount
   // Let's not calculate the details of the transaction when the value is not valid.
   const amount = !isMaximumValueExceeded && isMinimumValueFulfilled ? value : 0n
   const details = useTransactionDetails(amount)

dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/index.tsx

@@ -1,8 +1,7 @@
 import React from "react"
-import { BITCOIN_MIN_AMOUNT } from "#/constants"
 import TokenAmountForm from "#/components/shared/TokenAmountForm"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
-import { useWalletContext } from "#/hooks"
+import { useMinDepositAmount, useWalletContext } from "#/hooks"
 import { FormSubmitButton } from "#/components/shared/Form"
 import StakeDetails from "./StakeDetails"
 
@@ -11,20 +10,21 @@ function StakeFormModal({
 }: {
   onSubmitForm: (values: TokenAmountFormValues) => void
 }) {
+  const minDepositAmount = useMinDepositAmount()
   const { btcAccount } = useWalletContext()
-  const tokenBalance = btcAccount?.balance.toString() ?? "0"
+  const tokenBalance = BigInt(btcAccount?.balance.toString() ?? "0")
 
   return (
     <TokenAmountForm
       tokenBalanceInputPlaceholder="BTC"
       currency="bitcoin"
       tokenBalance={tokenBalance}
-      minTokenAmount={BITCOIN_MIN_AMOUNT}
+      minTokenAmount={minDepositAmount}
       onSubmitForm={onSubmitForm}
     >
       <StakeDetails
         currency="bitcoin"
-        minTokenAmount={BITCOIN_MIN_AMOUNT}
+        minTokenAmount={minDepositAmount}
         maxTokenAmount={tokenBalance}
       />
       <FormSubmitButton mt={4}>Stake</FormSubmitButton>

dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/index.tsx

@@ -1,27 +1,29 @@
 import React from "react"
 import { Card, CardBody, Flex, HStack } from "@chakra-ui/react"
-import { BITCOIN_MIN_AMOUNT } from "#/constants"
 import TokenAmountForm from "#/components/shared/TokenAmountForm"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
 import { TextMd, TextSm } from "#/components/shared/Typography"
 import Spinner from "#/components/shared/Spinner"
 import { FormSubmitButton } from "#/components/shared/Form"
+import { useMinDepositAmount } from "#/hooks"
 import UnstakeDetails from "./UnstakeDetails"
 
 // TODO: Use a position amount
-const MOCK_POSITION_AMOUNT = "2398567898"
+const MOCK_POSITION_AMOUNT = BigInt("2398567898")
 
 function UnstakeFormModal({
   onSubmitForm,
 }: {
   onSubmitForm: (values: TokenAmountFormValues) => void
 }) {
+  const minDepositAmount = useMinDepositAmount()
+
   return (
     <TokenAmountForm
       tokenBalanceInputPlaceholder="BTC"
       currency="bitcoin"
       tokenBalance={MOCK_POSITION_AMOUNT}
-      minTokenAmount={BITCOIN_MIN_AMOUNT}
+      minTokenAmount={minDepositAmount}
       onSubmitForm={onSubmitForm}
     >
       <Flex flexDirection="column" gap={10}>

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

@@ -9,7 +9,7 @@ import { CurrencyType } from "#/types"
 
 export type CurrencyBalanceProps = {
   currency: CurrencyType
-  amount?: string | number
+  amount?: string | number | bigint
   shouldBeFormatted?: boolean
   desiredDecimals?: number
   size?: string
@@ -40,7 +40,7 @@ export function CurrencyBalance({
 
   const balance = useMemo(() => {
     const value = amount ?? 0
-    if (shouldBeFormatted)
+    if (shouldBeFormatted || typeof value === "bigint")
       return formatTokenAmount(value, decimals, desiredDecimals)
 
     return numberToLocaleString(value, desiredDecimals)

dapp/src/components/shared/TokenAmountForm/TokenAmountFormBase.tsx

@@ -19,7 +19,7 @@ export const useTokenAmountFormValue = () => {
 
 export type TokenAmountFormBaseProps = {
   formId?: string
-  tokenBalance: string
+  tokenBalance: bigint
   tokenBalanceInputPlaceholder: string
   currency: CurrencyType
   children?: React.ReactNode

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

@@ -7,7 +7,7 @@ import TokenAmountFormBase, {
 
 type TokenAmountFormProps = {
   onSubmitForm: (values: TokenAmountFormValues) => void
-  minTokenAmount: string
+  minTokenAmount: bigint
 } & TokenAmountFormBaseProps
 
 const TokenAmountForm = withFormik<TokenAmountFormProps, TokenAmountFormValues>(

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

@@ -87,7 +87,7 @@ function FiatCurrencyBalance({
 export type TokenBalanceInputProps = {
   amount?: bigint
   currency: CurrencyType
-  tokenBalance: string | number
+  tokenBalance: bigint
   placeholder?: string
   size?: "lg" | "md"
   setAmount: (value?: bigint) => void
@@ -143,9 +143,7 @@ export default function TokenBalanceInput({
           placeholder={placeholder}
           {...inputProps}
           value={
-            amount
-              ? fixedPointNumberToString(BigInt(amount), decimals)
-              : undefined
+            amount ? fixedPointNumberToString(amount, decimals) : undefined
           }
           onValueChange={(values: NumberFormatInputValues) =>
             handleValueChange(values.value)
@@ -155,7 +153,7 @@ export default function TokenBalanceInput({
           }}
         />
         <InputRightElement>
-          <Button h="70%" onClick={() => setAmount(BigInt(tokenBalance))}>
+          <Button h="70%" onClick={() => setAmount(tokenBalance)}>
             Max
           </Button>
         </InputRightElement>

dapp/src/constants/currency.ts

@@ -1,13 +1,13 @@
 import { Currency, CurrencyType } from "#/types"
 import { EthereumNetwork } from "@acre-btc/sdk"
 import { ETHEREUM_NETWORK } from "./chains"
-import { BITCOIN_DESIRED_DECIMALS } from "./staking"
 
 export const BITCOIN: Currency = {
   name: "Bitcoin",
   symbol: "BTC",
   decimals: 8,
-  desiredDecimals: BITCOIN_DESIRED_DECIMALS,
+  // TODO: Change when min amount of BTC will be updated
+  desiredDecimals: 5,
 }
 
 export const STBTC: Currency = {

dapp/src/constants/staking.ts

@@ -1,11 +1 @@
-import { getDesiredDecimals } from "#/utils/numbers"
-
-// TODO: Read the value from the SDK, once we expose it
-export const BITCOIN_MIN_AMOUNT = String(1e4) // 0.0001 BTC
-
-export const BITCOIN_DESIRED_DECIMALS = getDesiredDecimals(
-  BITCOIN_MIN_AMOUNT,
-  8,
-)
-
 export const REFERRAL = import.meta.env.VITE_REFERRAL

dapp/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from "./store"
+export * from "./sdk"
 export * from "./useDetectThemeMode"
 export * from "./useRequestBitcoinAccount"
 export * from "./useRequestEthereumAccount"
@@ -9,7 +10,6 @@ export * from "./useModalFlowContext"
 export * from "./useTransactionContext"
 export * from "./useTransactionDetails"
 export * from "./useDepositBTCTransaction"
-export * from "./useInitializeAcreSdk"
 export * from "./useTransactionHistoryTable"
 export * from "./useExecuteFunction"
 export * from "./useStakeFlowContext"
@@ -19,5 +19,4 @@ export * from "./useDepositTelemetry"
 export * from "./useFetchBTCPriceUSD"
 export * from "./useCountdown"
 export * from "./useActivities"
-export * from "./useFetchBTCBalance"
 export * from "./useSize"

dapp/src/hooks/sdk/index.ts

@@ -0,0 +1,4 @@
+export * from "./useInitializeAcreSdk"
+export * from "./useFetchMinDepositAmount"
+export * from "./useInitDataFromSdk"
+export * from "./useFetchBTCBalance"

dapp/src/hooks/useFetchBTCBalance.ts → dapp/src/hooks/sdk/useFetchBTCBalance.ts

@@ -3,8 +3,8 @@ import { EthereumAddress } from "@acre-btc/sdk"
 import { useAcreContext } from "#/acre-react/hooks"
 import { logPromiseFailure } from "#/utils"
 import { setEstimatedBtcBalance, setSharesBalance } from "#/store/btc"
-import { useWalletContext } from "./useWalletContext"
-import { useAppDispatch } from "./store"
+import { useWalletContext } from "../useWalletContext"
+import { useAppDispatch } from "../store/useAppDispatch"
 
 export function useFetchBTCBalance() {
   const { acre, isInitialized } = useAcreContext()

dapp/src/hooks/sdk/useFetchMinDepositAmount.ts

@@ -0,0 +1,22 @@
+import { useEffect } from "react"
+import { setMinDepositAmount } from "#/store/btc"
+import { logPromiseFailure } from "#/utils"
+import { useAcreContext } from "#/acre-react/hooks"
+import { useAppDispatch } from "../store/useAppDispatch"
+
+export function useFetchMinDepositAmount() {
+  const { acre, isInitialized } = useAcreContext()
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    if (!isInitialized || !acre) return
+
+    const fetchMinDepositAmount = async () => {
+      const minDepositAmount = await acre.staking.minDepositAmount()
+
+      dispatch(setMinDepositAmount(minDepositAmount))
+    }
+
+    logPromiseFailure(fetchMinDepositAmount())
+  }, [acre, dispatch, isInitialized])
+}

dapp/src/hooks/sdk/useInitDataFromSdk.ts

@@ -0,0 +1,7 @@
+import { useFetchBTCBalance } from "./useFetchBTCBalance"
+import { useFetchMinDepositAmount } from "./useFetchMinDepositAmount"
+
+export function useInitDataFromSdk() {
+  useFetchBTCBalance()
+  useFetchMinDepositAmount()
+}

dapp/src/hooks/useInitializeAcreSdk.ts → dapp/src/hooks/sdk/useInitializeAcreSdk.ts

@@ -2,7 +2,7 @@ import { useEffect } from "react"
 import { ETHEREUM_NETWORK } from "#/constants"
 import { logPromiseFailure } from "#/utils"
 import { useAcreContext } from "#/acre-react/hooks"
-import { useWalletContext } from "./useWalletContext"
+import { useWalletContext } from "../useWalletContext"
 
 export function useInitializeAcreSdk() {
   const { ethAccount } = useWalletContext()

dapp/src/hooks/store/index.ts

@@ -2,3 +2,4 @@ export * from "./useAppDispatch"
 export * from "./useAppSelector"
 export * from "./useEstimatedBTCBalance"
 export * from "./useSharesBalance"
+export * from "./useMinDepositAmount"

dapp/src/hooks/store/useMinDepositAmount.ts

@@ -0,0 +1,6 @@
+import { selectMinDepositAmount } from "#/store/btc"
+import { useAppSelector } from "./useAppSelector"
+
+export function useMinDepositAmount() {
+  return useAppSelector(selectMinDepositAmount)
+}

dapp/src/hooks/useCurrencyConversion.ts

@@ -7,7 +7,7 @@ import { useAppSelector } from "./store"
 
 type CurrencyConversionType = {
   currency: CurrencyType
-  amount?: number | string
+  amount?: number | string | bigint
 }
 
 // TODO: should be updated to handle another currencies

dapp/src/hooks/useInitApp.ts

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

dapp/src/store/btc/btcSelector.ts

@@ -2,7 +2,12 @@ import { RootState } from ".."
 
 export const selectEstimatedBtcBalance = (state: RootState): bigint =>
   state.btc.estimatedBtcBalance
+
 export const selectSharesBalance = (state: RootState): bigint =>
   state.btc.sharesBalance
+
 export const selectBtcUsdPrice = (state: RootState): number =>
   state.btc.usdPrice
+
+export const selectMinDepositAmount = (state: RootState) =>
+  state.btc.minDepositAmount

dapp/src/store/btc/btcSlice.ts

@@ -6,13 +6,15 @@ type BtcState = {
   sharesBalance: bigint
   isLoadingPriceUSD: boolean
   usdPrice: number
+  minDepositAmount: bigint
 }
 
 const initialState: BtcState = {
   estimatedBtcBalance: 0n,
   sharesBalance: 0n,
   isLoadingPriceUSD: false,
   usdPrice: 0,
+  minDepositAmount: 0n,
 }
 
 // Store Bitcoin data such as balance, balance in usd and other related data to Bitcoin chain.
@@ -26,6 +28,9 @@ export const btcSlice = createSlice({
     setEstimatedBtcBalance(state, action: PayloadAction<bigint>) {
       state.estimatedBtcBalance = action.payload
     },
+    setMinDepositAmount(state, action: PayloadAction<bigint>) {
+      state.minDepositAmount = action.payload
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(fetchBTCPriceUSD.pending, (state) => {
@@ -44,4 +49,5 @@ export const btcSlice = createSlice({
   },
 })
 
-export const { setSharesBalance, setEstimatedBtcBalance } = btcSlice.actions
+export const { setSharesBalance, setEstimatedBtcBalance, setMinDepositAmount } =
+  btcSlice.actions

dapp/src/utils/forms.ts

@@ -17,24 +17,21 @@ export function getErrorsObj<T>(errors: { [key in keyof T]: string }) {
 
 export function validateTokenAmount(
   value: bigint | undefined,
-  maxValue: string,
-  minValue: string,
+  maxValue: bigint,
+  minValue: bigint,
   currency: CurrencyType,
 ): string | undefined {
   if (value === undefined) return ERRORS.REQUIRED
 
   const { decimals } = getCurrencyByType(currency)
 
-  const maxValueInBI = BigInt(maxValue)
-  const minValueInBI = BigInt(minValue)
-
-  const isMaximumValueExceeded = value > maxValueInBI
-  const isMinimumValueFulfilled = value >= minValueInBI
+  const isMaximumValueExceeded = value > maxValue
+  const isMinimumValueFulfilled = value >= minValue
 
   if (isMaximumValueExceeded) return ERRORS.EXCEEDED_VALUE
   if (!isMinimumValueFulfilled)
     return ERRORS.INSUFFICIENT_VALUE(
-      fixedPointNumberToString(BigInt(minValue), decimals),
+      fixedPointNumberToString(minValue, decimals),
     )
 
   return undefined

dapp/src/utils/numbers.ts

@@ -48,7 +48,7 @@ export function bigIntToUserAmount(
  *
  */
 export const formatTokenAmount = (
-  amount: number | string,
+  amount: number | string | bigint,
   decimals = 18,
   desiredDecimals = 2,
 ) => {
@@ -201,12 +201,6 @@ export function userAmountToBigInt(
 export const randomInteger = (min: number, max: number) =>
   Math.floor(Math.random() * (max - min + 1)) + min
 
-export function getDesiredDecimals(amount: string | number, decimals: number) {
-  const undecimaledAmount = amount.toString()
-  const desiredDecimals = decimals - undecimaledAmount.length + 1
-  return desiredDecimals > 0 ? desiredDecimals : 2
-}
-
 export const addLeadingZero = (num: number): string =>
   num >= 0 && num <= 9 ? `0${num}` : `${num}`
 

sdk/src/lib/contracts/bitcoin-depositor.ts

@@ -35,4 +35,9 @@ export interface BitcoinDepositor extends DepositorProxy {
    * @param extraData Encoded extra data.
    */
   decodeExtraData(extraData: string): DecodedExtraData
+
+  /**
+   * @returns Minimum deposit amount.
+   */
+  minDepositAmount(): Promise<bigint>
 }