diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx index 0d86db1a93..63e429f2ee 100644 --- a/pages/_app.page.tsx +++ b/pages/_app.page.tsx @@ -54,16 +54,6 @@ const BridgeModal = dynamic(() => import('src/components/transactions/Bridge/BridgeModal').then((module) => module.BridgeModal) ); -// ssr: false (unlike the other modal hosts) because `@funkit/connect` is a -// client-only, ESM/browser package. -const FunkitCheckout = dynamic( - () => - import('src/components/transactions/FunCheckout/FunkitCheckout').then( - (module) => module.FunkitCheckout - ), - { ssr: false } -); - const BorrowModal = dynamic(() => import('src/components/transactions/Borrow/BorrowModal').then((module) => module.BorrowModal) ); @@ -84,6 +74,17 @@ const RepayModal = dynamic(() => const SupplyModal = dynamic(() => import('src/components/transactions/Supply/SupplyModal').then((module) => module.SupplyModal) ); +// funkit checkout host, mounted once globally alongside the other modal hosts as an +// `ssr: false` island (`@funkit/connect` is client-only). Reuses the interface's +// wagmi + react-query. With `ssr: true` on the wagmi config the guest reconnect no +// longer churns, so a single global mount doesn't thrash — no page-scoping needed. +const FunkitCheckout = dynamic( + () => + import('src/components/transactions/FunCheckout/FunkitCheckout').then( + (module) => module.FunkitCheckout + ), + { ssr: false } +); const WithdrawModal = dynamic(() => import('src/components/transactions/Withdraw/WithdrawModal').then( (module) => module.WithdrawModal @@ -176,8 +177,8 @@ export default function MyApp(props: MyAppProps) { {getLayout()} - + diff --git a/src/ui-config/wagmiConfig.ts b/src/ui-config/wagmiConfig.ts index 034580be3d..83f4df5716 100644 --- a/src/ui-config/wagmiConfig.ts +++ b/src/ui-config/wagmiConfig.ts @@ -122,6 +122,11 @@ const connectors = narvalConnector ? [...(baseConnectors ?? []), narvalConnector const prodConfig = createConfig({ ...prodCkConfig, connectors, + // Next.js SSR mode: run wagmi's reconnect once on mount (guarded) instead of + // on every render. Without this, WagmiProvider re-fires reconnect() on each + // render, ping-ponging account status and re-rendering the tree on navigation. + // Auto-reconnect for returning wallets is preserved. + ssr: true, }); const isCypressEnabled = process.env.NEXT_PUBLIC_IS_CYPRESS_ENABLED === 'true';