feat: add bridge link in contract button

Author: dan13ram

apps/web/src/components/ContractButton.tsx

@@ -1,10 +1,15 @@
+import { L2_CHAINS, TESTNET_CHAINS } from '@buildeross/constants'
 import { Box, Button, ButtonProps, Flex, PopUp, Text } from '@buildeross/zord'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
-import { useCallback, useRef, useState } from 'react'
+import Link from 'next/link'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { Icon } from 'src/components/Icon'
 import { useChainStore } from 'src/stores/useChainStore'
 import { useAccount, useBalance, useSwitchChain } from 'wagmi'
 
+const INSUFFICIENT_BALANCE_ERROR =
+  'Insufficient balance. Add ETH to your wallet (via bridging or exchange) to complete the transaction.'
+
 export type ContractButtonProps = Omit<ButtonProps, 'onClick' | 'type' | 'ref'> & {
   // Accept an optional click event; callers may also pass a 0-arg handler.
   handleClick: (e?: any) => void | Promise<void>
@@ -24,6 +29,12 @@ export const ContractButton = ({
     chainId: appChain.id,
   })
 
+  const shouldShowBridgeLink = useMemo(() => {
+    const isL2 = L2_CHAINS.includes(appChain.id)
+    const isTestnet = TESTNET_CHAINS.some((chain) => chain.id === appChain.id)
+    return isL2 && !isTestnet && userBalance?.value === 0n
+  }, [appChain.id, userBalance?.value])
+
   const { openConnectModal } = useConnectModal()
   const { switchChain } = useSwitchChain()
   const [buttonError, setButtonError] = useState<string | null>(null)
@@ -43,7 +54,7 @@ export const ContractButton = ({
 
       if (!userAddress) return openConnectModal?.()
       if (userBalance?.value === 0n) {
-        setButtonError('Insufficient balance')
+        setButtonError(INSUFFICIENT_BALANCE_ERROR)
         return
       }
       if (userChain?.id !== appChain.id) {
@@ -103,7 +114,17 @@ export const ContractButton = ({
             <Icon id="warning" size="md" fill="negative" />
             <Box>
               <Text variant="paragraph-sm" color="text2">
-                {buttonError}
+                {buttonError === INSUFFICIENT_BALANCE_ERROR && shouldShowBridgeLink ? (
+                  <>
+                    Insufficient balance. Add ETH to your wallet via{' '}
+                    <Link href="/bridge" style={{ textDecoration: 'underline' }}>
+                      bridging
+                    </Link>{' '}
+                    or exchange to complete the transaction.
+                  </>
+                ) : (
+                  buttonError
+                )}
               </Text>
             </Box>
           </Flex>

packages/constants/src/chains.ts

@@ -12,7 +12,7 @@ import {
 
 type Chains = [Chain, ...Chain[]]
 
-const MAINNET_CHAINS: Chains = [
+export const MAINNET_CHAINS: Chains = [
   { ...mainnet, id: CHAIN_ID.ETHEREUM, slug: 'ethereum', icon: '/chains/ethereum.svg' },
   { ...zora, id: CHAIN_ID.ZORA, slug: 'zora', icon: '/chains/zora.png' },
   { ...base, id: CHAIN_ID.BASE, slug: 'base', icon: '/chains/base.svg' },
@@ -24,7 +24,7 @@ const MAINNET_CHAINS: Chains = [
   },
 ]
 
-const TESTNET_CHAINS: Chains = [
+export const TESTNET_CHAINS: Chains = [
   { ...sepolia, id: CHAIN_ID.SEPOLIA, slug: 'sepolia', icon: '/chains/ethereum.svg' },
   {
     ...optimismSepolia,