Add Web3Modal paths in readme + Svelte demo link (#450)

* update lock

* update next & react lock

* add demo in readme

* fix link

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

@@ -9,9 +9,6 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  
-  scrollbar-width: thin;
-  scrollbar-color: #fff #141414;
 }
 
 body, html{
@@ -22,11 +19,6 @@ body, html{
   font-family: 'montserrat';
 }
 
-*::selection{
-  background-color: rgb(255, 255, 255);
-  color: #141414;
-}
-
 ::-webkit-scrollbar {
   background: #141414;
   width: 9px;

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

@@ -1,6 +1,12 @@
 import { defaultWagmiConfig, createWeb3Modal } from '@web3modal/wagmi'
 
-import { getAccount, getChainId, reconnect, watchAccount, watchChainId } from '@wagmi/core'
+import {
+	getAccount,
+	getChainId,
+	reconnect,
+	watchAccount,
+	watchChainId,
+} from '@wagmi/core'
 import { readable, writable } from 'svelte/store'
 
 import {
@@ -64,20 +70,24 @@ createWeb3Modal({
 	projectId,
 	themeMode: 'dark',
 	featuredWalletIds: [],
-  enableAnalytics: true
+	enableAnalytics: true,
 })
 
-export const chainId = readable(getChainId(wagmiConfig), (set) => watchChainId(wagmiConfig, { onChange: set }))
+export const chainId = readable(getChainId(wagmiConfig), (set) =>
-export const account = readable(getAccount(wagmiConfig), (set) => watchAccount(wagmiConfig, { onChange: 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) => {
+			onChange: async (account) => {
-			if (!account.connector) return set(undefined)
+				if (!account.connector) return set(undefined)
-			set(await account.connector?.getProvider())
+				set(await account.connector?.getProvider())
-		}
+			},
-    }),
+		}),
 )
 
 export const supported_chains = writable<string[]>([])

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

@@ -9,20 +9,20 @@
 			<span id="title">Chain ID:</span>
 			{$chainId}
 		</span>
-    {#if $account.chain}
+		{#if $account.chain}
-    <span>
+			<span>
-      <span id="title">Network:</span>
+				<span id="title">Network:</span>
-      {$account.chain?.name}
+				{$account.chain?.name}
-    </span>
+			</span>
-    <span>
+			<span>
-      <span id="title">Decimals:</span>
+				<span id="title">Decimals:</span>
-      {$account.chain?.nativeCurrency.decimals}
+				{$account.chain?.nativeCurrency.decimals}
-    </span>
+			</span>
-    <span>
+			<span>
-      <span id="title">Currency:</span>
+				<span id="title">Currency:</span>
-      {$account.chain?.nativeCurrency.name}
+				{$account.chain?.nativeCurrency.name}
-    </span>
+			</span>
-    {/if}
+		{/if}
 	</Card>
 {/if}
 

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

@@ -1,68 +0,0 @@
-<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/routes/+layout.svelte

@@ -14,7 +14,7 @@
 	<span class="btn">
 		<w3m-button />
 		<a
-			href="https://github.com/WalletConnect/evm-e2e-dapp"
+			href="https://github.com/WalletConnect/web-examples/tree/main/dapps/web3modal/svelte"
 			target="_blank"
 			rel="noreferrer nofollow"
 		>

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

@@ -4,7 +4,6 @@
 	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>
@@ -15,7 +14,6 @@
 	{#if $account.isConnected}
 		<SignMessage />
 		<SignTypeData />
-		<SwitchChain />
 		<Transaction />
 	{/if}
 </div>