feat: adding error handler

app/[locale]/apps/[id]/components/Container.tsx

@@ -19,7 +19,7 @@ export const PageContainer = ({ params }: AppLayoutProps) => {
     [CrosschainNFTBridgeAppIdFuji]: CrosschainNFTBridge
   }[id]
 
-  if (Component) return <Component />
+  if (Component) return <Component id={id} />
 
   const t = useI18n()
 

app/[locale]/apps/[id]/crosschain-nft-bridge/components/CrosschainNFTBridge.tsx

@@ -2,27 +2,40 @@
 
 import { Card } from '@/app/components'
 import { allowedChainsConfig } from '@/app/config/config'
-import { useMemo, useState } from 'react'
+import { HTMLProps, useEffect, useMemo, useState } from 'react'
 import { useEffectOnce } from 'usehooks-ts'
-import { useNetwork } from 'wagmi'
 import { Requirements } from './Requirements'
 import { Form } from './Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
 import { ethers } from 'ethers'
+import { useNetwork } from '@/app/lib/wallet/hooks'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import classNames from 'classnames'
 
 export const CrosschainNFTBridgeAppIdMumbai =
   '0x3581ded89c04be046f61dbf380aff24bbb4d1866010c64302ad872e61a44c06023000000'
 
 export const CrosschainNFTBridgeAppIdFuji =
   '0xd53a723850e67d08016c7d6f115d60d59bc9c6bd6a8c75875bb6f15719ee8d6a00000000'
 
-const bridgeChains = [allowedChainsConfig[80001], allowedChainsConfig[43113]]
+const [mumbai, fuji] = [allowedChainsConfig[80001], allowedChainsConfig[43113]]
 
-export const CrosschainNFTBridge = () => {
-  const [chains, setChains] = useState(bridgeChains)
-  const { chain } = useNetwork()
+export type CrosschainNFTBridgeProps = HTMLProps<HTMLDivElement> & {
+  id: string
+}
+
+export const CrosschainNFTBridge = ({
+  id,
+  className,
+  ...props
+}: CrosschainNFTBridgeProps) => {
+  const pathname = usePathname()
+  const router = useRouter()
+
+  const [chains, setChains] = useState([mumbai, fuji])
+  const { chain, config } = useNetwork()
 
   const sourceChain = useMemo(() => chains[0], [chains])
   const destinationChain = useMemo(() => chains[1], [chains])
@@ -43,19 +56,38 @@ export const CrosschainNFTBridge = () => {
   })
 
   useEffectOnce(() => {
-    const [mumbai, fuji] = [bridgeChains[0].id, bridgeChains[1].id]
-
-    const sourceChainId = chain?.id === mumbai ? mumbai : fuji
-    const destinationChainId = sourceChainId === mumbai ? fuji : mumbai
+    const sourceChainId = chain?.id === mumbai.id ? mumbai.id : fuji.id
+    const destinationChainId = sourceChainId === mumbai.id ? fuji.id : mumbai.id
 
     setChains(() => [
       allowedChainsConfig[sourceChainId],
       allowedChainsConfig[destinationChainId]
     ])
   })
 
+  const updatePathname = (currentAppId: string, targetAppId: string) => {
+    const updatedPathname = pathname.replace(currentAppId, targetAppId)
+    router.replace(updatedPathname)
+  }
+
+  useEffect(() => {
+    const currentAppId =
+      config.id === mumbai.id
+        ? CrosschainNFTBridgeAppIdFuji
+        : CrosschainNFTBridgeAppIdMumbai
+
+    const targetAppId =
+      config.id === mumbai.id
+        ? CrosschainNFTBridgeAppIdMumbai
+        : CrosschainNFTBridgeAppIdFuji
+
+    if (pathname.includes(currentAppId)) {
+      updatePathname(currentAppId, targetAppId)
+    }
+  }, [config.id, mumbai.id, pathname, router])
+
   return (
-    <div className='flex  justify-center'>
+    <div className={classNames(className, 'flex  justify-center')} {...props}>
       <Card className='flex w-full flex-col space-y-4 rounded-md p-4 lg:w-auto lg:min-w-[26rem]'>
         <FormProvider {...methods}>
           <Form

app/[locale]/apps/[id]/crosschain-nft-bridge/components/Form.tsx

@@ -60,7 +60,7 @@ export const Form = ({
             aria-label='Switch'
             type='button'
             onClick={onSwitch}
-            className='text-lime-400'
+            className='text-third-300 dark:text-lime-400'
           >
             <ArrowPathRoundedSquareIcon
               width={24}
@@ -85,6 +85,10 @@ export const Form = ({
           Your ERC721 has been bridged successfully to {destinationChain.name}!
         </p>
       )}
+
+      {!isLoading && status === 'error' && (
+        <p className='text-red-500'>Error! Please try again later.</p>
+      )}
     </form>
   )
 }

app/[locale]/apps/[id]/crosschain-nft-bridge/components/Selector.tsx

@@ -29,7 +29,7 @@ export const Selector = ({
       <Heading as='h5'>{label}</Heading>
       <div className='flex justify-between'>
         <Text className='text-gray-400'>{chain.name}</Text>
-        {chain && displayBlockExplorer && (
+        {address && chain && displayBlockExplorer && (
           <Text>
             <Link
               target='_blank'