Add cross-chain Next.js starter template

[peter941221]

Summary

• Add a new templates/nextjs-crosschain/ Next.js App Router template.
• Configure EVM wallet state with wagmi, viem, RainbowKit provider context, mainnet, Sepolia, and an injected connector.
• Configure Solana wallet state with wallet-adapter, Phantom, Solflare, and devnet.
• Add a usable cross-chain dashboard that shows EVM address + Solana public key in one session view.
• Add .learn.md explaining provider layering, wallet model differences, and why this first template does not implement a real bridge.

Scope

This PR intentionally keeps the example interaction to identity/session pairing. It does not add a bridge, token transfers, backend auth, relayers, production signing proofs, or protocol-specific trust assumptions.

Verification

• cd templates/nextjs-crosschain && npm ci
• cd templates/nextjs-crosschain && npm run build
• npx prettier --check templates/nextjs-crosschain/README.md templates/nextjs-crosschain/.learn.md
• Browser smoke on local dev server with Playwright CLI:
  • text=Connect EVM visible
  • text=Select Wallet visible

Notes

• Uses next@15.5.18 instead of 15.1.5 because npm reports 15.1.5 as vulnerable.
• Direct Solana adapter imports are used instead of importing from @solana/wallet-adapter-wallets so the template avoids bundling many unused adapters.

Closes #30

[PetarStoev02]

Reviewed locally. Three things before this is ready to merge:

1. Consume connect-wallet from the w3-kit/ui registry instead of hand-rolling. The template imports @rainbow-me/rainbowkit but never uses <ConnectButton /> — the EVM button calls wagmi's connect() directly. Drop the RainbowKit dep and replace both connect surfaces with one <ConnectWallet />. Install:

   npx shadcn@latest init   # one-time, also sets up Tailwind
   npx shadcn@latest add @w3-kit/connect-wallet
   

   The component takes a flat wallets array (EVM + Solana mixed) and an onConnect(walletId) callback. Wire it to wagmi.connect() for EVM wallets and wallet-adapter's select() for Solana, keyed by an id prefix (evm: / sol:).

2. Open a follow-up PR in w3-kit/ui first; this PR depends on it. connect-wallet already accepts WalletOption.ecosystem: "evm" | "solana" | "both", but renderWalletList puts all wallets in one flat list — no Ethereum / Solana section headers. For a cross-chain picker that's a real UX gap (users can't tell which side they're connecting to). Fix is ~40 lines: bucket by ecosystem, render a header per non-empty bucket, only show headers when ≥2 buckets are populated (backwards-compatible). Once that lands, rebase this PR — the import from step 1 will give you grouping for free.

3. Add a favicon and flesh out metadata. app/layout.tsx only sets title + description — no icons, no openGraph, no Twitter card, no metadataBase. Add app/icon.svg (or favicon.ico) and expand the metadata export so the template ships with the basics a starter is expected to have.

I prototyped (1) and (2) locally end-to-end. Happy to share the diff.

[peter941221]

Thanks, this is clear and the split makes sense.

I’ll handle it in the order you suggested:

1. Open a small follow-up PR in w3-kit/ui to group wallets by ecosystem in connect-wallet.
2. Rebase this PR to consume <ConnectWallet /> from the registry once that lands.
3. Add favicon + fuller Next.js metadata in this template PR.

If you have the local prototype diff handy, please share it — that would help me align with the implementation you validated locally.

[peter941221]

Follow-up PR is up: w3-kit/ui#110

Once that lands, I’ll rebase this PR onto <ConnectWallet /> and then add the favicon + fuller metadata here.

[peter941221]

Follow-up is pushed.

What changed in this revision:

1. Switched the template from the hand-rolled EVM/Solana connect surfaces to the shared ConnectWallet registry component.
2. Removed RainbowKitProvider and @solana/wallet-adapter-react-ui from the template, and routed the unified picker into wagmi for evm:* IDs and wallet-adapter select() for sol:* IDs.
3. Added the minimal Tailwind/shadcn support files needed for the registry component.
4. Added app/icon.svg and expanded the exported metadata with metadataBase, icons, openGraph, and twitter.

Dependency PR is merged:

• feat: group connect-wallet options by ecosystem ui#110

Fresh verification:

• cd templates/nextjs-crosschain && npm install
• cd templates/nextjs-crosschain && npm run build

[PetarStoev02]

Two small tweaks before merge:

1. Favicon doesn't match w3-kit branding. Templates should reuse the marketing favicon for consistency. Replace app/icon.svg with the one from w3-kit/website at public/favicon.svg:

   curl -o templates/nextjs-crosschain/app/icon.svg \
     https://raw.githubusercontent.com/w3-kit/website/main/public/favicon.svg

2. Meta title needs the w3-kit suffix. Tab currently reads "Next.js Cross-chain Starter". Update metadata.title in app/layout.tsx:

   title: {
     default: "Next.js Cross-chain Starter | w3-kit",
     template: "%s | w3-kit",
   },

[peter941221]

Addressed the requested follow-up in dedfca2.\n\n- Replaced emplates/nextjs-crosschain/app/icon.svg with the shared w3-kit/website favicon\n- Updated the template metadata title to use the | w3-kit suffix\n- Re-ran cd templates/nextjs-crosschain && npm run build successfully\n\nReady for another look.