fix: insufficient balance message if too many

base-org · Aug 11, 2023 · 9e799a0 · 9e799a0
1 parent ecb3dc7
commit 9e799a0
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 43 deletions.
diff --git a/src/components/MintDialog/MintDialog.tsx b/src/components/MintDialog/MintDialog.tsx
@@ -22,16 +22,24 @@ import dialogClasses from '@/components/dialog.module.css'
 import { usePriceEstimate } from './elements/usePriceEstimate'
 import useBalances from '@/utils/useBalances'
 import { Checkmark } from '../icons/Checkmark'
+import { l2GasToMint, useMintThresholds } from '@/utils/useMintThresholds'
 export type TxDetails = {
   hash: string
 }
 
+enum FundsStatus {
+  Sufficient,
+  Bridge, 
+  InsufficientFromQuantity,
+  Insufficient
+}
+
 export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
   const { price, crossMintClientId, trendingPageNativeMint, mintButtonStyles } =
     useMintDialogContext()
 
   const [open, setOpen] = useState(false)
-  const { l1Balance } = useBalances()
+  const {l2Balance, l1Balance} = useBalances();
 
   const [txDetails, setTxDetails] = useState<TxDetails | null>(null)
   const [mintError, setMintError] = useState<any | null>(null)
@@ -43,41 +51,43 @@ export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
     return formatEther(parseEther(price) * BigInt(quantity))
   }, [quantity, price])
 
-  const { fundsStatus, getFundsStatus } = useFundsStatus(totalPrice)
-  const [page, setPage] = useState<ModalPage>(() => {
-    switch (fundsStatus) {
-      case 'sufficient':
-        return ModalPage.NATIVE_MINT
-      case 'bridge':
-        return ModalPage.BRIDGE
-      case 'insufficient':
-      default:
-        return ModalPage.NATIVE_MINT
-    }
-  })
+  const [page, setPage] = useState<ModalPage>()
+  const {minL1BalanceWei, minL2BalanceWei} = useMintThresholds();
 
-  useEffect(() => {
-    if (!open || ![ModalPage.NATIVE_MINT].includes(page)) {
-      return
+  const fundsStatus = useMemo(() => {
+    const totalPriceWei = parseEther(totalPrice);
+    if (l2Balance >= totalPriceWei + l2GasToMint) {
+      return FundsStatus.Sufficient
     }
 
-    getFundsStatus()
-  }, [page, open, getFundsStatus])
+    if (l2Balance >= minL2BalanceWei && l2Balance < totalPriceWei + l2GasToMint) {
+      return FundsStatus.InsufficientFromQuantity
+    }
 
-  useEffect(() => {
-    const needsBridge = fundsStatus === 'bridge'
-    if (needsBridge && page === ModalPage.NATIVE_MINT) {
-      setPage(ModalPage.BRIDGE)
+    if (l2Balance < minL2BalanceWei && l1Balance < minL1BalanceWei) {
+      return FundsStatus.Insufficient
     }
+
+    return FundsStatus.Bridge
 
-    const sufficientFunds = fundsStatus === 'sufficient'
-    if (
-      (sufficientFunds && page === ModalPage.BRIDGE) ||
-      (sufficientFunds && page === ModalPage.INSUFFICIENT_FUNDS)
-    ) {
+  }, [l1Balance, l2Balance, minL1BalanceWei, minL2BalanceWei, totalPrice])
+
+  useEffect(() => {
+    switch (fundsStatus){
+      case FundsStatus.Sufficient:
       setPage(ModalPage.NATIVE_MINT)
+      return;
+      case FundsStatus.InsufficientFromQuantity:
+        setPage(ModalPage.NATIVE_MINT)
+        return;
+      case FundsStatus.Bridge:
+      setPage(ModalPage.BRIDGE)
+      return;
+      case FundsStatus.Insufficient:
+        setPage(ModalPage.INSUFFICIENT_FUNDS)
+        return;
     }
-  }, [fundsStatus, page])
+  }, [fundsStatus])
 
   const resetModal = () => {
     setPage(ModalPage.NATIVE_MINT)
@@ -187,7 +197,7 @@ export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
             txDetails={txDetails}
             setTxDetails={setTxDetails}
             setMintError={setMintError}
-            insufficientFunds={fundsStatus === 'insufficient'}
+            insufficientFunds={[FundsStatus.Insufficient, FundsStatus.InsufficientFromQuantity].includes(fundsStatus)}
           />
         )
       case ModalPage.BRIDGE:
@@ -203,7 +213,7 @@ export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
       case ModalPage.INSUFFICIENT_FUNDS:
         return (
           <InsufficientFunds
-            minimalBalance={''}
+            minimalBalance={Number(formatEther((parseEther(totalPrice) - l2Balance + l2GasToMint))).toFixed(5).toString()}
             setPage={setPage}
             totalPrice={totalPrice}
           />

diff --git a/src/components/MintDialog/pages/Bridge/Bridge.tsx b/src/components/MintDialog/pages/Bridge/Bridge.tsx
@@ -13,7 +13,7 @@ import { BridgeError } from './BridgeError'
 import { BigNumber } from 'ethers'
 
 interface BridgeProps {
-  l1Balance: BigNumber
+  l1Balance: bigint
   minAmount: string
   setPage: React.Dispatch<ModalPage>
 }

diff --git a/src/utils/useBalances.ts b/src/utils/useBalances.ts
@@ -1,32 +1,33 @@
 import { constants } from 'ethers'
 
-import { useAccount, useBalance } from 'wagmi'
+import { useQuery } from 'react-query'
+import { getJsonRpcProviders } from './getJsonRpcProviders'
+import { Address, useAccount, usePublicClient } from 'wagmi'
 import { l1, l2 } from '@/config/chain'
-import { useQuery } from 'react-query';
-import { getJsonRpcProviders } from './getJsonRpcProviders';
 
 const useBalances = () => {
-  const {address} = useAccount();
+  const {address} = useAccount()
+  const l1Provider = usePublicClient({chainId: l1.id})
+  const l2Provider = usePublicClient({chainId: l2.id})
   const { data, isLoading } = useQuery({
     queryKey: ['balances', address],
     queryFn: async ({ queryKey }) => {
       const [_, address] = queryKey as ['balances', string | undefined]
-      const { l1Provider, l2Provider } = getJsonRpcProviders()
 
-      const l1Signer = l1Provider.getSigner(address)
-      const l2Signer = l2Provider.getSigner(address)
+      if (!address) return {l1Balance: BigInt(0), l2Balance: BigInt(0)}
+
+      const l1Balance = await l1Provider.getBalance({address: address as Address})
+      const l2Balance = await l2Provider.getBalance({address: address as Address})
 
-      const l1Balance = await l1Signer.getBalance()
-      const l2Balance = await l2Signer.getBalance()
       return { l1Balance, l2Balance }
     },
   })
 
   return {
-    l1Balance: data?.l1Balance || constants.Zero,
-    l2Balance: data?.l2Balance || constants.Zero,
+    l1Balance: data?.l1Balance || BigInt(0),
+    l2Balance: data?.l2Balance || BigInt(0),
     isLoading,
   }
 }
 
-export default useBalances
+export default useBalances
diff --git a/src/utils/useMintThresholds.ts b/src/utils/useMintThresholds.ts
@@ -0,0 +1,15 @@
+import { useMintDialogContext } from "@/components/MintDialog/Context/useMintDialogContext"
+import { parseEther } from "viem"
+
+export const l2GasToMint = parseEther('0.0006')
+export const l1GasToBridge = parseEther('0.01')
+
+export function useMintThresholds() {
+    const {price} = useMintDialogContext();
+    const priceWei = parseEther(price);
+
+    return {
+        minL1BalanceWei: l1GasToBridge + priceWei,
+        minL2BalanceWei: l2GasToMint + priceWei
+    }
+}