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,11 +70,15 @@ createWeb3Modal({
 	projectId,
 	themeMode: 'dark',
 	featuredWalletIds: [],
-  enableAnalytics: true
+	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 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) =>
@@ -76,7 +86,7 @@ export const provider = readable<ExtendedProvider | undefined>(
 			onChange: async (account) => {
 				if (!account.connector) return set(undefined)
 				set(await account.connector?.getProvider())
-		}
+			},
 		}),
 )
 

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>