perf: Memoize bridge props to avoid triggering effect logic on each r…

…ender
pancakeswap · Feb 13, 2025 · 2cc9432 · 2cc9432
1 parent 7aa89fe
commit 2cc9432
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/packages/canonical-bridge/src/modules/wallet/BridgeWalletProvider.tsx b/packages/canonical-bridge/src/modules/wallet/BridgeWalletProvider.tsx
@@ -5,13 +5,15 @@ import {
 import { WalletProvider as TronWalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks'
 import { env } from '../../configs'
 
+const EMPTY_ARRAY: never[] = []
+
 export function BridgeWalletProvider(props: React.PropsWithChildren) {
   const { children } = props
 
   return (
     <SolanaConnectionProvider endpoint={env.SOLANA_RPC_ENDPOINT}>
-      <SolanaWalletProvider wallets={[]} autoConnect={false}>
-        <TronWalletProvider adapters={[]} autoConnect={false}>
+      <SolanaWalletProvider wallets={EMPTY_ARRAY} autoConnect={false}>
+        <TronWalletProvider adapters={EMPTY_ARRAY} autoConnect={false}>
           {children}
         </TronWalletProvider>
       </SolanaWalletProvider>

diff --git a/packages/canonical-bridge/src/views/index.tsx b/packages/canonical-bridge/src/views/index.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from '@pancakeswap/localization'
 import { Flex, useToast } from '@pancakeswap/uikit'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 
 import {
   BridgeRoutes,
@@ -67,6 +67,15 @@ export const CanonicalBridge = (props: CanonicalBridgeProps) => {
       .map((chain) => ({ ...chain, rpcUrl: props.rpcConfig?.[chain.id]?.[0] ?? chain.rpcUrl }))
   }, [supportedChainIds, connector?.id, props.rpcConfig])
 
+  const handleError = useCallback(
+    (params: { type: string; message?: string | undefined; error?: Error | undefined }) => {
+      if (params.message) {
+        toast.toastError(params.message)
+      }
+    },
+    [toast],
+  )
+
   return (
     <BridgeWalletProvider>
       <GlobalStyle />
@@ -76,11 +85,7 @@ export const CanonicalBridge = (props: CanonicalBridgeProps) => {
         chains={supportedChains}
         connectWalletButton={connectWalletButton}
         refreshingIcon={<RefreshingIcon />}
-        onError={(params) => {
-          if (params.message) {
-            toast.toastError(params.message)
-          }
-        }}
+        onError={handleError}
       >
         <Flex flexDirection="column" justifyContent="center" maxWidth="480px" width="100%">
           <BridgeTransfer />