Feat: Multichain Deposits via Layerswap integration

[TomasDmArg]

Closes: #302

Problem

ChatterPay wallets currently live on Scroll, a single L2 network. Users who hold assets on other chains (Ethereum, Arbitrum, Optimism, Base, Solana, Bitcoin, Tron, etc.) have no straightforward way to fund their ChatterPay wallet without manually bridging through external tools, finding the right contract addresses, and hoping they pick the correct network. This friction discourages onboarding and limits the pool of potential depositors.

Solution

Integrate Layerswap as an embedded iframe widget that handles cross-chain bridging directly inside ChatterPay. Layerswap abstracts away network selection, wallet connection, and token routing:

The user simply picks a source and an amount, and funds arrive on Scroll USDT in their ChatterPay wallet.

Why Layerswap

• Minimal integration — single iframe with URL params. No SDK, no npm packages, no RPC/wallet-connect CSP entries. Zero maintenance on our side.
• 74+ source networks — EVM chains, Solana, Bitcoin, Tron, and Starknet. This gives us the broadest funnel for attracting deposits.
• Clean UX — the user sees one unified interface regardless of source chain. Network selection, wallet connection, and token routing are fully abstracted.
• Battle-tested — production-grade, audited, used by major projects.

Alternatives considered

• Direct bridge integration (Axelar, Layerswap API, etc.) — Higher complexity and, critically, the user would end up seeing two deposit addresses (one for Scroll, one for the multichain bridge contract), which breaks the single-wallet mental model and degrades the user experience.
• LiFi widget — The UX felt significantly worse compared to Layerswap's iframe. Less polished interface and harder to integrate seamlessly into our dark-themed UI.

How it works

Dashboard deposit modal

1. User clicks Deposit in the dashboard balance card.
2. A dialog opens with a dark background matching the Layerswap iframe.
3. The Layerswap widget loads pre-configured: destination locked to Scroll mainnet, destination address pre-filled with the user's wallet, USDT as default asset.
4. User connects their source wallet inside the iframe, picks a source network/token, and deposits.
5. A tertiary "See my address on Scroll" button toggles to a fallback view with QR code + wallet address for manual transfers.

Standalone deposit page (/deposit)

1. The WhatsApp bot (or any external link) sends users to /deposit?address=0x.... Note: This could happen when the user says "I'd like to deposit", "I'd like to see my wallet", "I'd like to create an account", "I'd like to see my balance"
2. The page validates the Ethereum address and renders the Layerswap widget.
3. A minimal header shows only the ChatterPay logo and language/theme selectors (no nav clutter).
4. A "Return to ChatterPay" link at the bottom sends the user back to WhatsApp with a translated message to see the balance (in case the deposit notification didn't arrive fast).

[Copilot]

Pull request overview

Adds an embedded Layerswap iframe widget to support multichain deposits into a Scroll-based ChatterPay wallet, including a standalone /deposit page for deep links with a prefilled destination address.

Changes:

• Introduces a reusable LayerswapWidget component and integrates it into the dashboard Deposit modal.
• Adds a standalone /deposit route that validates ?address=0x... and renders the Layerswap widget with a minimal header/layout.
• Updates CSP to allow embedding Layerswap and adds new i18n strings for the deposit experience.

Reviewed changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/sections/deposit/view/layerswap-widget.tsx	New Layerswap iframe widget component with URL-param configuration and optional embedded styling.
src/sections/deposit/view/deposit-view.tsx	New standalone deposit view that reads address from query params, validates it, and renders widget/error state + WhatsApp return link.
src/sections/deposit/view/index.ts	Barrel export for DepositView.
src/sections/banking/banking-balances.tsx	Reworks deposit dialog to embed Layerswap widget and adds a toggle to show the raw Scroll address + QR fallback view.
src/app/deposit/page.tsx	Adds /deposit page rendering DepositView (wrapped in Suspense).
src/app/deposit/layout.tsx	Adds deposit-specific layout with minimal header and main container spacing.
src/app/deposit/header.tsx	Adds minimal header (logo + language/theme controls) for /deposit.
src/routes/paths.ts	Adds paths.deposit.
src/config-global.ts	Adds LAYERSWAP_BG and LAYERSWAP_BASE_URL constants.
src/locales/langs/en.json	Adds layerswapDeposit strings and new deposit modal strings.
src/locales/langs/es.json	Adds layerswapDeposit strings and new deposit modal strings.
src/locales/langs/br.json	Adds layerswapDeposit strings and new deposit modal strings.
next.config.js	Allows layerswap.io in CSP frame-src and adjusts webpack config (fallback + externals).
src/layouts/common/notifications-modal.tsx	Formatting-only change (no functional impact).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[dappsar]

@TomasDmArg : Temporarily deployed in dev for testing.