Feat/add svelte (#447)

* add sveltekit example

* fix deps

* remove warning

* Update README.md

dapps/web3modal/next/package.json

@@ -10,21 +10,21 @@
     "format": "pnpm dlx @biomejs/biome format ./src --write"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-query": "5.17.19",
     "@web3modal/wagmi": "4.0.0-alpha.3",
     "next": "14.0.4",
-    "react": "^18",
-    "react-dom": "^18",
-    "viem": "^2.5.0",
-    "wagmi": "^2.5.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "viem": "2.5.0",
+    "wagmi": "2.5.2"
   },
   "devDependencies": {
     "@biomejs/biome": "1.5.2",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
+    "@types/node": "20.11.4",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "eslint": "8.44.0",
     "eslint-config-next": "14.0.4",
-    "typescript": "^5"
+    "typescript": "5.0.2"
   }
 }

dapps/web3modal/react/package.json

@@ -10,24 +10,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-query": "5.17.19",
     "@web3modal/wagmi": "4.0.0-alpha.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "viem": "^2.5.0",
-    "wagmi": "^2.5.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "viem": "2.5.0",
+    "wagmi": "2.5.2"
   },
   "devDependencies": {
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "eslint": "^8.44.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.1",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.0"
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "@typescript-eslint/eslint-plugin": "5.61.0",
+    "@typescript-eslint/parser": "5.61.0",
+    "@vitejs/plugin-react-swc": "3.3.2",
+    "eslint": "8.44.0",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.1",
+    "typescript": "5.0.2",
+    "vite": "4.4.0"
   }
 }

dapps/web3modal/svelte/.env.example

@@ -0,0 +1 @@
+VITE_PROJECT_ID=YOUR_PROJECT_ID

dapps/web3modal/svelte/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

dapps/web3modal/svelte/.eslintrc.cjs

@@ -0,0 +1,30 @@
+/** @type { import("eslint").Linter.FlatConfig } */
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

dapps/web3modal/svelte/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

dapps/web3modal/svelte/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

dapps/web3modal/svelte/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
+  "useTabs": true,
+  "semi": false,
+  "singleQuote": true
+}

dapps/web3modal/svelte/README.md

@@ -0,0 +1,9 @@
+# Run the app
+
+```ts
+pnpm install
+```
+
+```ts
+pnpm run dev
+```

dapps/web3modal/svelte/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "e2e-dapp",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "eslint .",
+    "format": "npx prettier src/**/*.svelte src/**/*.ts --write"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "3.1.1",
+    "@sveltejs/kit": "2.5.0",
+    "@sveltejs/vite-plugin-svelte": "3.0.2",
+    "@typescript-eslint/eslint-plugin": "6.0.0",
+    "@typescript-eslint/parser": "6.0.0",
+    "eslint": "8.28.0",
+    "eslint-plugin-svelte": "2.30.0",
+    "prettier": "3.1.1",
+    "prettier-plugin-svelte": "3.1.2",
+    "svelte": "4.2.9",
+    "svelte-check": "3.6.0",
+    "tslib": "2.4.1",
+    "typescript": "5.0.0",
+    "vite": "5.0.12"
+  },
+  "type": "module",
+  "dependencies": {
+    "@wagmi/connectors": "4.1.12",
+    "@wagmi/core": "2.6.3",
+    "@web3modal/wagmi": "4.0.0-alpha.3",
+    "svelte-french-toast": "1.2.0",
+    "viem": "2.7.1"
+  }
+}

dapps/web3modal/svelte/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {}

dapps/web3modal/svelte/src/app.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>EVM Test Dapp</title>
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

dapps/web3modal/svelte/src/components/Button.svelte

@@ -0,0 +1,21 @@
+<button on:click>
+	<slot />
+</button>
+
+<style>
+	button {
+		background-color: #2890ff;
+		color: #ffffff;
+		cursor: pointer;
+		border: none;
+		padding: 0px 15px 1px;
+		height: 40px;
+		border-radius: 50px;
+
+		font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+			Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
+		font-weight: 600;
+		font-size: 16px;
+		line-height: 20px;
+	}
+</style>

dapps/web3modal/svelte/src/components/Card.svelte

@@ -0,0 +1,57 @@
+<script>
+	export let overflow = false
+</script>
+
+<span class="card">
+	<span class="container" class:overflow>
+		<slot />
+	</span>
+</span>
+
+<style>
+	.card {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 34px;
+		height: 300px;
+	}
+
+	.container {
+		width: max-content;
+		max-width: 500px;
+		height: 100%;
+		display: flex;
+		justify-content: flex-start;
+		align-items: flex-start;
+		flex-direction: column;
+		font-weight: 400;
+		font-size: 20px;
+
+		background: linear-gradient(135deg, #272a2a 0, #141414 100%);
+		border: 1px #3b4040 solid;
+		color: #fff;
+		border-radius: 0.5rem;
+		padding: 30px 40px;
+		gap: 20px;
+	}
+
+	.overflow {
+		gap: 10px;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	@media (max-width: 540px) {
+		.card {
+			min-height: 300px;
+		}
+
+		.container {
+			width: fit-content;
+			max-width: 300px;
+			overflow-y: auto;
+			overflow-x: hidden;
+		}
+	}
+</style>

dapps/web3modal/svelte/src/css/global.css

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: 'montserrat';
+  src: url('../fonts/montserrat.ttf');
+}
+
+*, *:before, *:after{
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  
+  scrollbar-width: thin;
+  scrollbar-color: #fff #141414;
+}
+
+body, html{
+  width: 100%;
+  min-height: 100vh;
+  background-color: #141414;
+  color: #fff;
+  font-family: 'montserrat';
+}
+
+*::selection{
+  background-color: rgb(255, 255, 255);
+  color: #141414;
+}
+
+::-webkit-scrollbar {
+  background: #141414;
+  width: 9px;
+  height: 9px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 20px;
+  background: #fff;
+}
+
+::-webkit-scrollbar-corner {
+  background: #141414;
+}
+
+a{
+  color: #fff;
+  line-height: 0;
+}

dapps/web3modal/svelte/src/lib/types.ts

@@ -0,0 +1,23 @@
+import type { InjectedConnector } from '@wagmi/core'
+
+export type Metadata = {
+	name?: string
+	description?: string
+	icons?: string[]
+	url?: string
+}
+
+export type ExtendedProvider = {
+	session?: {
+		peer: {
+			metadata: Metadata
+		}
+		namespaces: {
+			eip155: {
+				chains: string[]
+				methods: string[]
+				events: string[]
+			}
+		}
+	}
+} & InjectedConnector

dapps/web3modal/svelte/src/lib/web3modal.ts

@@ -0,0 +1,83 @@
+import { defaultWagmiConfig, createWeb3Modal } from '@web3modal/wagmi'
+
+import { getAccount, getChainId, reconnect, watchAccount, watchChainId } from '@wagmi/core'
+import { readable, writable } from 'svelte/store'
+
+import {
+	arbitrum,
+	aurora,
+	avalanche,
+	base,
+	bsc,
+	celo,
+	gnosis,
+	mainnet,
+	optimism,
+	polygon,
+	zkSync,
+	zora,
+	goerli,
+	ronin,
+	saigon,
+} from 'viem/chains'
+import type { ExtendedProvider } from './types'
+
+export const projectId = import.meta.env.VITE_PROJECT_ID
+
+const metadata = {
+	name: 'Web3Modal',
+	description: 'Web3Modal Example',
+	url: 'https://web3modal.com',
+	icons: ['https://avatars.githubusercontent.com/u/37784886'],
+}
+
+export const chains = [
+	arbitrum,
+	aurora,
+	avalanche,
+	base,
+	bsc,
+	celo,
+	gnosis,
+	mainnet,
+	optimism,
+	polygon,
+	zkSync,
+	zora,
+	goerli,
+	ronin,
+	saigon,
+] as const
+
+export const wagmiConfig = defaultWagmiConfig({
+	chains,
+	projectId,
+	metadata,
+	enableCoinbase: false,
+	enableInjected: false,
+})
+
+reconnect(wagmiConfig)
+
+createWeb3Modal({
+	wagmiConfig,
+	projectId,
+	themeMode: 'dark',
+	featuredWalletIds: [],
+  enableAnalytics: true
+})
+
+export const chainId = readable(getChainId(wagmiConfig), (set) => watchChainId(wagmiConfig, { onChange: set }))
+export const account = readable(getAccount(wagmiConfig), (set) => watchAccount(wagmiConfig, { onChange: set }))
+export const provider = readable<ExtendedProvider | undefined>(
+	undefined,
+	(set) =>
+		watchAccount(wagmiConfig, {
+      onChange: async (account) => {
+			if (!account.connector) return set(undefined)
+			set(await account.connector?.getProvider())
+		}
+    }),
+)
+
+export const supported_chains = writable<string[]>([])

dapps/web3modal/svelte/src/partials/Network.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { chainId, account } from '$lib/web3modal'
+	import Card from '../components/Card.svelte'
+</script>
+
+{#if $account.address}
+	<Card>
+		<span>
+			<span id="title">Chain ID:</span>
+			{$chainId}
+		</span>
+    {#if $account.chain}
+    <span>
+      <span id="title">Network:</span>
+      {$account.chain?.name}
+    </span>
+    <span>
+      <span id="title">Decimals:</span>
+      {$account.chain?.nativeCurrency.decimals}
+    </span>
+    <span>
+      <span id="title">Currency:</span>
+      {$account.chain?.nativeCurrency.name}
+    </span>
+    {/if}
+	</Card>
+{/if}
+
+<style>
+	#title {
+		font-weight: 500;
+	}
+</style>

dapps/web3modal/svelte/src/partials/SignMessage.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { signMessage } from '@wagmi/core'
+	import toast from 'svelte-french-toast'
+	import Card from '../components/Card.svelte'
+	import Button from '../components/Button.svelte'
+	import { wagmiConfig } from '$lib/web3modal'
+
+	let signature: string | undefined
+	let label: string = 'Sign Message'
+
+	async function handleSign() {
+		label = 'Signing...'
+		signature = '_'
+
+		try {
+			const _signature = await signMessage(wagmiConfig, {
+				message: 'WalletConnect message',
+			})
+
+			//@ts-expect-error Wagmi Type bug
+			if (_signature !== 'null') {
+				signature = _signature
+				toast.success('Message signed successfully')
+				signature = '_ personal_sign'
+			} else {
+				toast.error('The signature was rejected')
+				signature = '_ personal_sign'
+			}
+		} catch (error) {
+			toast.error((error as Error).message)
+		} finally {
+			label = 'Sign Message'
+		}
+	}
+</script>
+
+<Card>
+	<div>
+		{signature ?? '_ personal_sign'}
+		<Button on:click={handleSign}>{label}</Button>
+	</div>
+</Card>
+
+<style>
+	div {
+		width: 220px;
+		word-wrap: break-word;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 100%;
+	}
+</style>

dapps/web3modal/svelte/src/partials/SignTypeData.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { signTypedData } from '@wagmi/core'
+	import toast from 'svelte-french-toast'
+	import Card from '../components/Card.svelte'
+	import Button from '../components/Button.svelte'
+	import { wagmiConfig, chainId } from '$lib/web3modal'
+
+	let signature: string | undefined
+	let label: string = 'Sign Type Data'
+
+	const domain = {
+		name: 'Ether Mail',
+		version: '1',
+		chainId: $chainId,
+		verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
+	} as const
+
+	const types = {
+		Person: [
+			{ name: 'name', type: 'string' },
+			{ name: 'wallet', type: 'address' },
+		],
+		Mail: [
+			{ name: 'from', type: 'Person' },
+			{ name: 'to', type: 'Person' },
+			{ name: 'contents', type: 'string' },
+		],
+	} as const
+
+	const message = {
+		from: {
+			name: 'Cow',
+			wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
+		},
+		to: {
+			name: 'Bob',
+			wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
+		},
+		contents: 'Hello, Bob!',
+	} as const
+
+	async function handleSign() {
+		label = 'Signing...'
+		signature = '_'
+
+		try {
+			const _signature = await signTypedData(wagmiConfig, {
+				domain,
+				message,
+				primaryType: 'Mail',
+				types,
+			})
+
+			//@ts-expect-error Wagmi Type bug
+			if (_signature !== 'null') {
+				signature = _signature
+				toast.success('Message signed successfully')
+			} else {
+				toast.error('The signature was rejected')
+				signature = '_ signTypeData_v4'
+			}
+		} catch (error) {
+			toast.error((error as Error).message)
+			signature = '_ signTypeData_v4'
+		} finally {
+			label = 'Sign Type Data'
+		}
+	}
+</script>
+
+<Card>
+	<div>
+		{signature ?? '_ signTypeData_v4'}
+		<Button on:click={handleSign}>{label}</Button>
+	</div>
+</Card>
+
+<style>
+	div {
+		width: 230px;
+		word-wrap: break-word;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 100%;
+	}
+</style>

dapps/web3modal/svelte/src/partials/SwitchChain.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { switchChain } from '@wagmi/core'
+	import { wagmiConfig, provider, supported_chains } from '$lib/web3modal'
+	import toast from 'svelte-french-toast'
+	import Card from '../components/Card.svelte'
+	import Button from '../components/Button.svelte'
+
+	let selected_chain: string
+
+	async function handleSwitch() {
+		try {
+			await switchChain(wagmiConfig, {
+				chainId: Number(selected_chain),
+			})
+		} catch (error) {
+			toast.error((error as Error).message)
+		}
+	}
+</script>
+
+{#if $provider?.session}
+	<Card>
+		<div class="main">
+			Switch Chain
+			<div class="action">
+				<select bind:value={selected_chain}>
+					<option value="" disabled selected> Select a chain ID </option>
+					{#each $supported_chains as chain}
+						<option value={chain.slice(7)}>
+							{chain.slice(7)}
+						</option>
+					{/each}
+				</select>
+				<Button on:click={handleSwitch}>Switch Chain</Button>
+			</div>
+		</div>
+	</Card>
+{/if}
+
+<style>
+	.main {
+		width: 230px;
+		word-wrap: break-word;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 100%;
+	}
+
+	.action {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+	}
+
+	select {
+		border: none;
+		border-radius: 30px;
+		padding: 10px;
+		cursor: pointer;
+		text-align: center;
+	}
+
+	option[value=''][disabled] {
+		display: none;
+	}
+</style>

dapps/web3modal/svelte/src/partials/Transaction.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { account, wagmiConfig } from '$lib/web3modal'
+	import toast from 'svelte-french-toast'
+	import Button from '../components/Button.svelte'
+	import Card from '../components/Card.svelte'
+	import { sendTransaction } from '@wagmi/core'
+
+	let label: string = 'Send Transaction'
+	let hash: string
+
+	async function handleWrite() {
+		if (!$account.address) throw Error('Wallet disconnected')
+		label = 'Processing...'
+
+		try {
+			const _hash = await sendTransaction(wagmiConfig, {
+				to: $account.address,
+				value: 0n,
+				data: '0x48656c6c6f2066726f6d2057616c6c6574436f6e6e656374',
+			})
+
+			//@ts-expect-error Wagmi Type bug
+			if (_hash !== 'null') {
+				hash = 'Hash: ' + _hash
+				toast.success('Message signed successfully')
+			} else {
+				toast.error('The signature was rejected')
+				hash = '_ eth_sendTransaction'
+			}
+		} catch (error) {
+			toast.error((error as Error).message)
+			hash = '_ eth_sendTransaction'
+		} finally {
+			label = 'Send Transaction'
+		}
+	}
+</script>
+
+<Card>
+	<div>
+		{hash ?? '_ eth_sendTransaction'}
+		<Button on:click={handleWrite}>{label}</Button>
+	</div>
+</Card>
+
+<style>
+	div {
+		width: 230px;
+		word-wrap: break-word;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 100%;
+	}
+</style>

dapps/web3modal/svelte/src/partials/Wallet.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { Metadata } from '$lib/types'
+	import Card from '../components/Card.svelte'
+	import { account, provider, supported_chains } from '../lib/web3modal'
+
+	let metadata: Metadata
+	let chains: string[] = []
+	let methods: string[] = []
+	let events: string[] = []
+
+	provider.subscribe((value) => {
+		const session = value?.session
+		if (session) {
+			const namespaces = session.namespaces?.eip155
+			metadata = session.peer?.metadata
+			chains = namespaces?.chains
+			methods = namespaces?.methods
+			events = namespaces?.events
+
+			if (chains.length) supported_chains.set(chains)
+		}
+	})
+</script>
+
+{#if $account.isConnected && metadata}
+	<Card>
+		<span>
+			{#if metadata.name}
+				<span id="title">Wallet:</span> {metadata.name}
+			{/if}
+		</span>
+		{#if metadata.description}
+			<span>
+				<span id="title">description:</span>
+				{metadata.description}
+			</span>
+		{/if}
+		{#if metadata.icons?.[0]}
+			<span>
+				<span id="title">icon:</span>
+				<img class="wallet-icon" src={metadata.icons[0]} alt="wallet icon" />
+			</span>
+		{/if}
+		{#if metadata.url}
+			<span>
+				<span id="title">Domain:</span>
+				<a href={metadata.url} target="_blank" rel="noreferrer nofollow"
+					>{metadata.url}</a
+				>
+			</span>
+		{/if}
+	</Card>
+	{#if chains}
+		<Card overflow>
+			<span id="title">Approved Chains:</span>
+			{#each chains as chain}
+				<div>{chain}</div>
+			{/each}
+		</Card>
+	{/if}
+	{#if events}
+		<Card overflow>
+			<span id="title">Approved Events:</span>
+			{#each events as event}
+				<div>{event}</div>
+			{/each}
+		</Card>
+	{/if}
+	{#if methods}
+		<Card overflow>
+			<span id="title">Approved Methods:</span>
+			{#each methods as method}
+				<div>{method}</div>
+			{/each}
+		</Card>
+	{/if}
+{/if}
+
+<style>
+	#title {
+		font-weight: 500;
+	}
+
+	.wallet-icon {
+		width: 40px;
+		height: auto;
+	}
+</style>

dapps/web3modal/svelte/src/routes/+layout.svelte

@@ -0,0 +1,76 @@
+<script>
+	import '../css/global.css'
+	import '../lib/web3modal'
+</script>
+
+<div class="container">
+	<a
+		href="https://walletconnect.com/"
+		target="_blank"
+		rel="noreferrer nofollow"
+	>
+		<img src="walletconnect.svg" alt="WalletConnect" />
+	</a>
+	<span class="btn">
+		<w3m-button />
+		<a
+			href="https://github.com/WalletConnect/evm-e2e-dapp"
+			target="_blank"
+			rel="noreferrer nofollow"
+		>
+			<img src="github.svg" alt="GitHub" />
+		</a>
+	</span>
+</div>
+<slot />
+
+<style>
+	.container {
+		padding: 20px;
+		height: 90px;
+		text-align: center;
+
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		gap: 100px;
+
+		margin-bottom: 40px;
+
+		font-size: 34px;
+		font-weight: 600;
+	}
+
+	.container img {
+		width: 80px;
+		height: auto;
+	}
+
+	.btn img {
+		width: 40px;
+		height: auto;
+	}
+	.btn a {
+		transition: all 0.2s ease;
+	}
+
+	.btn a:hover {
+		transform: scale(1.1);
+	}
+
+	.btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 30px;
+	}
+
+	@media (max-width: 540px) {
+		.container {
+			gap: 0;
+		}
+		.btn {
+			gap: 10px;
+		}
+	}
+</style>

dapps/web3modal/svelte/src/routes/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { account } from '$lib/web3modal'
+	import { Toaster } from 'svelte-french-toast'
+	import Network from '../partials/Network.svelte'
+	import SignMessage from '../partials/SignMessage.svelte'
+	import SignTypeData from '../partials/SignTypeData.svelte'
+	import SwitchChain from '../partials/SwitchChain.svelte'
+	import Transaction from '../partials/Transaction.svelte'
+	import Wallet from '../partials/Wallet.svelte'
+</script>
+
+<div class="main">
+	<Network />
+	<Wallet />
+	{#if $account.isConnected}
+		<SignMessage />
+		<SignTypeData />
+		<SwitchChain />
+		<Transaction />
+	{/if}
+</div>
+
+<Toaster />
+
+<style>
+	.main {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 30px;
+		width: 100%;
+		padding: 20px;
+	}
+</style>

dapps/web3modal/svelte/static/github.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>

dapps/web3modal/svelte/static/logo-blue.svg

@@ -0,0 +1 @@
+<svg fill="none" height="332" viewBox="0 0 480 332" width="480" xmlns="http://www.w3.org/2000/svg"><path d="m126.613 93.9842c62.622-61.3123 164.152-61.3123 226.775 0l7.536 7.3788c3.131 3.066 3.131 8.036 0 11.102l-25.781 25.242c-1.566 1.533-4.104 1.533-5.67 0l-10.371-10.154c-43.687-42.7734-114.517-42.7734-158.204 0l-11.107 10.874c-1.565 1.533-4.103 1.533-5.669 0l-25.781-25.242c-3.132-3.066-3.132-8.036 0-11.102zm280.093 52.2038 22.946 22.465c3.131 3.066 3.131 8.036 0 11.102l-103.463 101.301c-3.131 3.065-8.208 3.065-11.339 0l-73.432-71.896c-.783-.767-2.052-.767-2.835 0l-73.43 71.896c-3.131 3.065-8.208 3.065-11.339 0l-103.4657-101.302c-3.1311-3.066-3.1311-8.036 0-11.102l22.9456-22.466c3.1311-3.065 8.2077-3.065 11.3388 0l73.4333 71.897c.782.767 2.051.767 2.834 0l73.429-71.897c3.131-3.065 8.208-3.065 11.339 0l73.433 71.897c.783.767 2.052.767 2.835 0l73.431-71.895c3.132-3.066 8.208-3.066 11.339 0z" fill="#3396ff"/></svg>

dapps/web3modal/svelte/static/walletconnect.svg

@@ -0,0 +1 @@
+<svg fill="none" height="332" viewBox="0 0 480 332" width="480" xmlns="http://www.w3.org/2000/svg"><path d="m126.613 93.9842c62.622-61.3123 164.152-61.3123 226.775 0l7.536 7.3788c3.131 3.066 3.131 8.036 0 11.102l-25.781 25.242c-1.566 1.533-4.104 1.533-5.67 0l-10.371-10.154c-43.687-42.7734-114.517-42.7734-158.204 0l-11.107 10.874c-1.565 1.533-4.103 1.533-5.669 0l-25.781-25.242c-3.132-3.066-3.132-8.036 0-11.102zm280.093 52.2038 22.946 22.465c3.131 3.066 3.131 8.036 0 11.102l-103.463 101.301c-3.131 3.065-8.208 3.065-11.339 0l-73.432-71.896c-.783-.767-2.052-.767-2.835 0l-73.43 71.896c-3.131 3.065-8.208 3.065-11.339 0l-103.4657-101.302c-3.1311-3.066-3.1311-8.036 0-11.102l22.9456-22.466c3.1311-3.065 8.2077-3.065 11.3388 0l73.4333 71.897c.782.767 2.051.767 2.834 0l73.429-71.897c3.131-3.065 8.208-3.065 11.339 0l73.433 71.897c.783.767 2.052.767 2.835 0l73.431-71.895c3.132-3.066 8.208-3.066 11.339 0z" fill="#fff"/></svg>

dapps/web3modal/svelte/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

dapps/web3modal/svelte/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

dapps/web3modal/svelte/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});