# elliott-green/sveltekit-reown-ethers architecture

> Architecture diagram of the GitHub repository elliott-green/sveltekit-reown-ethers, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/elliott-green/sveltekit-reown-ethers
- Repository: https://github.com/elliott-green/sveltekit-reown-ethers

## Overview

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: [`src/routes/+page.svelte`](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Bpage.svelte) (Demo Page), [`src/routes/+layout.svelte`](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Blayout.svelte) (App Layout), [`src/lib/appkit.ts`](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/lib/appkit.ts) (AppKit Setup), [`src/lib/store.ts`](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/lib/store.ts) (Wallet State)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["SvelteKit UI"]
  node_layout["App Layout<br/>[+layout.svelte]"]
  node_demo["Demo Page<br/>[+page.svelte]"]
end

subgraph group_wallet["Wallet Integration"]
  node_stores["Wallet State<br/>[store.ts]"]
  node_config["AppKit Setup<br/>[appkit.ts]"]
end

subgraph group_contract["USDC Interaction"]
  node_ethers["Ethers Provider<br/>[+page.svelte]"]
  node_usdc["USDC Contract<br/>[+page.svelte]"]
end

node_user(("User"))
node_appkit["Reown AppKit"]
node_chain[("EVM Network")]

node_user -->|"uses wallet controls"| node_layout
node_layout -->|"renders route content"| node_demo
node_user -->|"uses demo"| node_demo
node_config -->|"configures"| node_appkit
node_demo -->|"gets provider"| node_appkit
node_demo -->|"updates state"| node_stores
node_demo -->|"creates provider"| node_ethers
node_demo -->|"reads and approves"| node_usdc
node_usdc -.->|"accesses contract"| node_chain

click node_layout "https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Blayout.svelte"
click node_demo "https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Bpage.svelte"
click node_stores "https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/lib/store.ts"
click node_config "https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/lib/appkit.ts"
click node_ethers "https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Bpage.svelte"
click node_usdc "https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Bpage.svelte"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_layout,node_demo,node_user toneBlue
class node_stores,node_config,node_chain toneAmber
class node_ethers,node_usdc toneMint
class node_appkit toneIndigo
```

## Components

### SvelteKit UI

- [App Layout](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Blayout.svelte): `src/routes/+layout.svelte`
- [Demo Page](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`

### Wallet Integration

- [Wallet State](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/lib/store.ts): `src/lib/store.ts`
- [AppKit Setup](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/lib/appkit.ts): `src/lib/appkit.ts`

### USDC Interaction

- [Ethers Provider](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`
- [USDC Contract](https://github.com/elliott-green/sveltekit-reown-ethers/blob/main/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`

### Other components

- **User**
- **Reown AppKit**
- **EVM Network**

## Connections

- User → App Layout: uses wallet controls (evidence: `src/routes/+layout.svelte`)
- App Layout → Demo Page: renders route content (evidence: `src/routes/+layout.svelte`)
- User → Demo Page: uses demo (evidence: `src/routes/+page.svelte`)
- AppKit Setup → Reown AppKit: configures (evidence: `src/lib/appkit.ts`)
- Demo Page → Reown AppKit: gets provider (evidence: `src/routes/+page.svelte`)
- Demo Page → Wallet State: updates state (evidence: `src/routes/+page.svelte`)
- Demo Page → Ethers Provider: creates provider (evidence: `src/routes/+page.svelte`)
- Demo Page → USDC Contract: reads and approves (evidence: `src/routes/+page.svelte`)
- USDC Contract → EVM Network: accesses contract