fix: only check for bridge on initial page load

base-org · Aug 10, 2023 · afa0e31 · afa0e31
1 parent 1875cba
commit afa0e31
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 34 deletions.
diff --git a/src/components/MintDialog/MintDialog.tsx b/src/components/MintDialog/MintDialog.tsx
@@ -36,14 +36,16 @@ export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
   const [txDetails, setTxDetails] = useState<TxDetails | null>(null)
   const [mintError, setMintError] = useState<any | null>(null)
 
-  const { l2PriceEstimate } = usePriceEstimate()
   const [crossMintOrderIdentifier, setCrossMintOrderIdentifier] = useState('')
   const [quantity, setQuantity] = useState(1)
   const totalPrice = useMemo(() => {
     return formatEther(parseEther(price) * BigInt(quantity))
   }, [quantity, price])
 
+  const { l2PriceEstimate } = usePriceEstimate(totalPrice)
+
   const { fundsStatus, getFundsStatus } = useFundsStatus(totalPrice)
+
   const [page, setPage] = useState<ModalPage>(() => {
     switch (fundsStatus) {
       case 'sufficient':
@@ -66,7 +68,7 @@ export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
 
   useEffect(() => {
     const needsBridge = fundsStatus === 'bridge'
-    if (needsBridge && page === ModalPage.NATIVE_MINT) {
+    if (needsBridge && page === ModalPage.NATIVE_MINT && quantity === 1) {
       setPage(ModalPage.BRIDGE)
     }
 
@@ -77,7 +79,7 @@ export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
     ) {
       setPage(ModalPage.NATIVE_MINT)
     }
-  }, [fundsStatus, page])
+  }, [fundsStatus, page, quantity])
 
   const resetModal = () => {
     setPage(ModalPage.NATIVE_MINT)
@@ -187,7 +189,9 @@ export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
             txDetails={txDetails}
             setTxDetails={setTxDetails}
             setMintError={setMintError}
-            insufficientFunds={fundsStatus === 'insufficient'}
+            insufficientFunds={
+              fundsStatus === 'insufficient' || fundsStatus === 'bridge'
+            }
           />
         )
       case ModalPage.BRIDGE:
@@ -203,7 +207,7 @@ export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
       case ModalPage.INSUFFICIENT_FUNDS:
         return (
           <InsufficientFunds
-            minimalBalance={''}
+            minimalBalance={formatEther(l2PriceEstimate.toBigInt())}
             setPage={setPage}
             totalPrice={totalPrice}
           />

diff --git a/src/components/MintDialog/elements/useFundsStatus.ts b/src/components/MintDialog/elements/useFundsStatus.ts
@@ -7,10 +7,6 @@ type FundsStatus = 'insufficient' | 'sufficient' | 'bridge'
 
 export const useFundsStatus = (totalPrice: string) => {
   const { address } = useAccount()
-  const hasCheckedForBridge = useRef({
-    address,
-    hasChecked: false,
-  })
 
   const [fundsStatus, setFundsStatus] = useState<FundsStatus>('sufficient')
 
@@ -19,21 +15,6 @@ export const useFundsStatus = (totalPrice: string) => {
 
     const status = await checkBalances(address, totalPrice)
 
-    if (status === 'bridge') {
-      const hasChecked =
-        hasCheckedForBridge.current.address === address &&
-        hasCheckedForBridge.current.hasChecked
-
-      if (hasChecked) {
-        return
-      }
-
-      hasCheckedForBridge.current = {
-        address,
-        hasChecked: true,
-      }
-    }
-
     setFundsStatus(status)
   }, [address, totalPrice])
 

diff --git a/src/components/MintDialog/elements/usePriceEstimate.ts b/src/components/MintDialog/elements/usePriceEstimate.ts
@@ -5,9 +5,8 @@ import { getPriceEstimate } from './getPriceEstimate'
 import { useMintDialogContext } from '../Context/useMintDialogContext'
 import { useAccount } from 'wagmi'
 
-export const usePriceEstimate = () => {
-  const {address} = useAccount()
-  const { price } = useMintDialogContext()
+export const usePriceEstimate = (totalPrice: string) => {
+  const { address } = useAccount()
 
   const [response, setResponse] = useState<
     Awaited<ReturnType<typeof getPriceEstimate>>
@@ -20,12 +19,12 @@ export const usePriceEstimate = () => {
     const getFundsStatus = async () => {
       if (!address) return
 
-      const response = await getPriceEstimate(price, address)
+      const response = await getPriceEstimate(totalPrice, address)
 
       setResponse(response)
     }
     getFundsStatus()
-  }, [address, price])
+  }, [address, totalPrice])
 
   return response
 }
diff --git a/src/components/MintDialog/pages/InsufficientFunds/usePollBalance.ts b/src/components/MintDialog/pages/InsufficientFunds/usePollBalance.ts
@@ -8,16 +8,14 @@ export const usePollBalance = (
   setPage: React.Dispatch<ModalPage>,
   totalPrice: string
 ) => {
-  const {address} = useAccount()
+  const { address } = useAccount()
   const cb = useCallback(async () => {
     if (!address) return
 
     const status = await checkBalances(address, totalPrice)
 
     if (status === 'sufficient') {
       setPage(ModalPage.NATIVE_MINT)
-    } else if (status === 'bridge') {
-      setPage(ModalPage.BRIDGE)
     }
   }, [address, setPage, totalPrice])
 

diff --git a/src/components/MintDialog/pages/NativeMint/NativeMint.tsx b/src/components/MintDialog/pages/NativeMint/NativeMint.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import * as Dialog from '@radix-ui/react-dialog'
 import { NativeMintButton } from '../../elements/NativeMintButton'
-import { MintType, ModalPage } from '../../types'
+import { ModalPage } from '../../types'
 import { Button } from '@/components/Button'
 import { Pending } from '../../elements/Pending'
 import clsx from 'clsx'
@@ -11,10 +11,10 @@ import { AddressPill } from '@/components/AddressPill'
 import { PartnerInfo } from '../../elements/PartnerInfo'
 
 import { MintDotFunMinter } from '../../elements/MintDotFunMinter'
-import dialogClasses from '@/components/dialog.module.css'
 import { l2 } from '@/config/chain'
 import { Quantity } from '../../elements/Quantity'
 import { Address, useNetwork, useSwitchNetwork } from 'wagmi'
+
 interface NativeMintProps {
   page: ModalPage
   setPage: React.Dispatch<ModalPage>