Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions templates/nextjs-crosschain/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.next/
node_modules/
*.log
86 changes: 86 additions & 0 deletions templates/nextjs-crosschain/.learn.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# Cross-chain dApp Starter

This template shows how to place EVM and Solana wallet providers in one Next.js App Router project and route them through one shared wallet picker component.

```text
app/layout.tsx
└── Providers
├── WagmiProvider
│ └── QueryClientProvider
└── Solana ConnectionProvider
└── WalletProvider
```

## Provider layering

`app/layout.tsx` stays a server component. It imports global CSS and wraps the page with `app/providers.tsx`.

`app/providers.tsx` is a client component because wallet adapters read browser wallet APIs such as `window.ethereum` and injected Solana wallet objects. Keeping browser-only provider setup in this file avoids server rendering wallet state.

## Shared wallet picker

The template vendors the `ConnectWallet` registry component from `w3-kit/ui` and feeds it one flat wallet list:

```text
wallets[]
├── evm:injected
├── sol:phantom
└── sol:solflare
```

The `onConnect(walletId)` callback then branches by prefix:

```text
walletId
├── `evm:*` -> wagmi `connect({ connector })`
└── `sol:*` -> wallet-adapter `select(adapter.name)`
```

## EVM model

EVM wallets expose accounts through connectors. wagmi stores the active connector, address, chain, and connection status. viem provides typed chain and transport primitives.

This template configures:

- `mainnet`
- `sepolia`
- `injected()` for browser wallets
- HTTP transports for both EVM chains

## Solana model

Solana wallet-adapter works around wallet adapters instead of EVM connectors. A wallet adapter exposes a public key, connection status, and signing methods when the selected wallet supports them.

This template configures:

- Solana `devnet`
- `PhantomWalletAdapter`
- `SolflareWalletAdapter`

## Example cross-chain interaction

The dashboard builds a cross-chain identity view:

```text
EVM address
+
Solana public key
|
v
Unified client session
```

That is a useful first cross-chain primitive because many apps need to know that one user controls wallets on multiple chains before adding signing, storage, or protocol actions.

## Why this template does not bridge assets

Real bridging is protocol-specific. A production bridge needs explicit decisions about:

- message verification
- finality assumptions
- relayers or validators
- fees and liquidity
- replay protection
- failure recovery

Adding a fake bridge would make the starter look more complete while teaching the wrong boundary. This template keeps the first PR scoped to provider setup and identity pairing, then leaves bridge SDK integration as a deliberate next step.
42 changes: 42 additions & 0 deletions templates/nextjs-crosschain/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# Next.js Cross-chain Starter

A minimal Next.js App Router template that connects EVM and Solana wallets in one client session.

## What is included

- Next.js App Router
- wagmi and viem for EVM wallet state
- Solana wallet-adapter providers
- Tailwind CSS for registry component styling
- `ConnectWallet` from the `w3-kit/ui` registry, wired to both ecosystems
- A dashboard that shows an EVM address and Solana public key together
- A safe example cross-chain identity view without token transfers or bridging

## Getting started

```bash
npm install
npm run dev
```

Open `http://localhost:3000` and connect either wallet, or connect both wallets to populate the unified session panel.

## Registry component

This template is pre-wired to the shared `ConnectWallet` component from the `w3-kit/ui` registry. If you want to refresh it later in your own app, the equivalent install path is:

```bash
npx shadcn@latest init
npx shadcn@latest add @w3-kit/connect-wallet
```

## Build

```bash
npm run build
npm run start
```

## Template boundary

This starter intentionally does not implement a bridge, token transfer, production authentication, or a backend. It keeps the first cross-chain example to wallet identity pairing so the template is safe to run and easy to extend.
Loading
Loading