perf(wallets): lazy-load chain providers, drop / first-load JS from 2.01 MB to 703 kB

[babkenmes]

Summary

• Each chain package now ships its connection hook + heavy SDK imports in a lazy chunk loaded via connectionRegistrar: () => import("./XConnectionRegistrar"). Replicates the EVM split across Starknet, SVM, TON, Fuel, Bitcoin, Tron, Paradex.
• New wrapperHostsChildren: false option on defineWalletProvider renders the form as a sibling of every chain wrapper instead of nested inside the chain Suspense boundaries — so a slow chain chunk no longer hides the form.
• Paradex's useParadexConnection no longer calls useConfig() from wagmi. EVM publishes the wagmi Config via a side store (wagmiConfigStore); Paradex reads it at call time. Lets Paradex's registrar run outside WagmiProvider, which was the last cross-chain React-context coupling.

Result

Page	Before	After
/	2.01 MB	703 kB
/swap/[swapId]	1.95 MB	647 kB

grep confirms the heavy SDK chunks (WagmiProvider, StarknetProvider, TonConnectUIProvider, BigmiProvider, FuelHooksProvider) all end up in async chunks not loaded on /.

Architectural changes

Per chain, three new files alongside the slimmed index.tsx:

• XConnectionRegistrar.tsx — lazy chunk: useXConnection, useXTransfer, plus any provider classes that statically import a chain SDK (e.g. StarknetNftProvider, SolanaAddressUtilsProvider, TonAddressUtilsProvider, BitcoinGasProvider).
• shellInternals.tsx — the lazy chain-wrapper component + any cross-file context.
• legacy.tsx — eager createXProvider factory + the deprecated XProvider const initializer, both moved out of the static surface so tree-shaking actually drops them when only createXShell is used.

The shell's index.tsx becomes a thin re-export surface — export { createXProvider, XProvider } from "./legacy" — and only references the heavy module via () => import("./XConnectionRegistrar").

Dropped the sync-when-cached wrapper pattern (if (Impl) return <Impl>; else return <Lazy>) — it caused subtree remounts when chunks landed because the rendered component type swapped from the lazy ref to the impl ref. React.lazy caches resolved modules itself; using the lazy ref directly keeps component identity stable.

preloadDefaultProviders() now warms both the wrapper chunk and the connection-registrar chunk for every chain, and DefaultChainShells fires it in a useEffect on mount so chunks arrive in parallel with hydration.

Pnpm overrides

Three version pins were needed for clean builds:

• @tanstack/react-query: 5.90.11 — @fuels/react pulled 5.90.16 in parallel, producing a "No QueryClient set" runtime error from two distinct QueryClientContext instances.
• rpc-websockets: 9.3.2 — newer 9.3.9 transitively requires uuid@14 (ESM-only), breaking webpack through @solana/web3.js.
• @types/react: 19.2.3 / @types/react-dom: 19.2.3 — Radix sub-deps pulled @types/react@18.3.28, producing a ReactNode bigint mismatch in AddressWithIcon.tsx on Vercel cold builds.

Test plan

• pnpm install — single version of @types/react, @tanstack/react-query, rpc-websockets in node_modules/.pnpm
• pnpm -r build — every wallet package + widget compiles
• pnpm --filter @layerswap/bridge build — bridge build green; / First Load JS reads ~700 kB
• Bundle analyzer: chain-SDK chunks (WagmiProvider, StarknetProvider, etc.) are not in /'s chunk list
• Cold-cache page load: form is rendered from first paint, no appear/disappear cycle
• Click "Connect a wallet" — EVM, Starknet, SVM, TON, Fuel, Bitcoin, Tron, Paradex flows still work end-to-end
• Paradex deposit flow (uses EVM wagmi via getEVMWagmiConfig) — verify connect + authorize still works
• Vercel deployment succeeds (no @types/react type mismatch)

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
layerswapapp	Error		May 18, 2026 5:32pm