How elliott-green/sveltekit-reown-ethers works
This is a barebones SvelteKit Web3 demo template. A user connects a wallet and selects a network through the shared app bar, then the page displays wallet/AppKit state, reads USDC metadata for the active chain, and can submit a USDC approval transaction. Wallet setup, reactive state, and contract interaction are the main runtime layers. The excerpts show page-to-modal and page-to-contract usage; they do not expose AppKit’s internal dispatch or the underlying RPC transport.
Main entry points: +page.svelte Demo Page · +layout.svelte App Layout · appkit.ts AppKit Setup · store.ts Wallet State
Components 9
SvelteKit UI
- App Layout
src/routes/+layout.svelte - Demo Page
src/routes/+page.svelte
Wallet Integration
- Wallet State
src/lib/store.ts - AppKit Setup
src/lib/appkit.ts
USDC Interaction
- Ethers Provider
src/routes/+page.svelte - USDC Contract
src/routes/+page.svelte
Other components
- User
- Reown AppKit
- EVM Network
Connections 9
- User → App Layout: uses wallet controls
src/routes/+layout.svelte - App Layout → Demo Page: renders route content
src/routes/+layout.svelte - User → Demo Page: uses demo
src/routes/+page.svelte - AppKit Setup → Reown AppKit: configures
src/lib/appkit.ts - Demo Page → Reown AppKit: gets provider
src/routes/+page.svelte - Demo Page → Wallet State: updates state
src/routes/+page.svelte - Demo Page → Ethers Provider: creates provider
src/routes/+page.svelte - Demo Page → USDC Contract: reads and approves
src/routes/+page.svelte - USDC Contract → EVM Network: accesses contract