better change account support

.prettierignore

@@ -0,0 +1 @@
+src/chains.js

examples/svelte-app-template-web3/src/MonoChain.svelte

@@ -1,19 +1,20 @@
 <script>
-  import { allChainsData, makeEvmStores, defaultEvmStores, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
+  import {
+    allChainsData,
+    makeEvmStores,
+    defaultEvmStores,
+    web3,
+    selectedAccount,
+    connected,
+    chainId,
+    chainData } from 'svelte-web3'
 
   import { Balance } from 'svelte-web3/components'
 
   let tipAddress = '0x834356a88C66897FA0A05a61964a91A607956ee3'
 
-  let sokol, sokol_connected, sokol_web3
-  ({ connected: sokol_connected, web3: sokol_web3, ...sokol } = makeEvmStores('sokol'))
-
-  sokol.setProvider('https://sokol.poa.network')
-
-  const enable = () => defaultEvmStores.setProvider('https://sokol.poa.network')
-  const enableBrowser = () => defaultEvmStores.setBrowserProvider()
-
-  $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000'
+  //const enable = () => defaultEvmStores.setProvider('https://sokol.poa.network')
+  //const enableBrowser = () => defaultEvmStores.setBrowserProvider()
 
   const sendTip = async (e) => {
     console.log('Received move event (sendTip button)', e)
@@ -28,21 +29,60 @@
     alert('Thanks!')
   }
 
+  let type
+  let pending = false
+
+  const connect = async () => {
+    pending = true
+    try {
+      const handler = {
+        Browser: () => defaultEvmStores.setProvider(),
+        Localhost: () => defaultEvmStores.setProvider('http://127.0.0.1:8545'),
+        Localhost4: () => defaultEvmStores.setProvider('http://127.0.0.1:8545', 4),
+        DAI: () => defaultEvmStores.setProvider('https://rpc.xdaichain.com/'),
+        Sokol: () => defaultEvmStores.setProvider('https://sokol.poa.network'),
+      }
+      await handler[type]()
+      console.log('$connected', defaultEvmStores.$connected  )
+      console.log('$selectedAccount', defaultEvmStores.$selectedAccount )
+      console.log('$web3', defaultEvmStores.$web3  )
+      pending = false
+    } catch(e) {
+      console.log(e)
+      pending = false
+    }
+  }
+
+  const disconnect = async () => {
+    await defaultEvmStores.disconnect()
+    pending = false
+  }
+
 </script>
 
-<p>
+<p class="subtitle">
   Simple example to using the default store. You may switch
   the connection to different providers (browser or not) at any time.
 </p>
 
 {#if $web3.version}
-<div class="buttons">
-  <button class="button is-link is-light" on:click="{enable}">connect to https://sokol.poa.network</button>
-  <button class="button is-link is-light" on:click="{enableBrowser}">connect to the browser window provider </button> (eg Metamask)
-</div>
+
+<p>Choose the provider:</p>
+<button class="button is-link is-light" disabled={pending} on:click={connect}>Connect with {type}</button>
+<select bind:value={type}>
+  <option value="Browser">Browser (window.ethereum)</option>
+  <option value="Localhost">Localhost (eg ganache or hardhat on http://127.0.0.1:8545)</option>
+  <option value="Localhost4">Localhost using account index 4</option>
+  <option value="DAI">https://rpc.xdaichain.com/ (RPC)</option>
+  <option value="Sokol">https://sokol.poa.network (RPC)</option>
+</select>
+
 {/if}
 
 {#if $connected}
+
+<button class="button is-link is-warn" on:click={disconnect}> Disconnect </button>
+
 <p>
   Connected chain: chainId = {$chainId}
 </p>
@@ -51,10 +91,10 @@
 </p>
 
 <p>
-  Selected account: {$selectedAccount || 'not defined'}
+  Selected account: {$selectedAccount || 'no account'}
 </p>
 
-<p>Selected account balance = <Balance address={checkAccount} /> {$chainData.nativeCurrency?.symbol}</p>
+<p>Selected account balance = <Balance address={$selectedAccount} /> {$chainData.nativeCurrency?.symbol}</p>
 
 {#if $selectedAccount}
 <p><button class="button is-primary is-light" on:click="{sendTip}">send 0.01 {$chainData.nativeCurrency?.symbol} tip to {tipAddress} (author)</button></p>

examples/svelte-app-template-web3/src/Web3Modal.svelte

@@ -6,15 +6,17 @@
   const WalletConnectProvider = window.WalletConnectProvider.default
 
   const disable = () => defaultEvmStores.disconnect()
+
+  let infuraId
+  let web3Modal
   const enable = async () => {
-    let web3Modal = new Web3Modal({
+    if (web3Modal) web3Modal.clearCachedProvider()
+    web3Modal = new Web3Modal({
       cacheProvider: false,
       providerOptions: {
         walletconnect: {
           package: WalletConnectProvider,
-          options: {
-            infuraId: '27e484dcd9e3efcfd25a83a78777cdf1'
-          }
+          options: { infuraId }
         }
       },
       disableInjectedProvider: false,
@@ -23,14 +25,32 @@
     defaultEvmStores.setProvider(provider)
   }
 
-  $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000'
+  $: checkAccount = $selectedAccount
+
+
+  const debug = async () => {
+
+    console.log('$web3.eth.getChainId', await $web3.eth.getChainId())
+
+  }
+
+
+  $: if ($connected && $web3) debug()
+
 
 </script>
 
-<p>
+<p class="subtitle">
   Simple example to using the <a href="https://web3modal.com/">Web3Modal</a> library to connect the default store.
 </p>
 
+<div class="field">
+  <div class="control">
+    <input class="input p-4" type="text" placeholder="InfuraId (to use walletconnect)"  bind:value={infuraId}>
+  </div>
+</div>
+
+
 {#if $web3.version}
 <div class="buttons">
   <button class="button is-link is-light" on:click="{enable}">connect using Web3Modal</button>
@@ -45,19 +65,20 @@
 
 
 {#if $connected}
+
 <p>
   Connected chain: chainId = {$chainId}
 </p>
-<p>
-  chainData = {JSON.stringify($chainData)}
-</p>
 <p>
   Selected account: {$selectedAccount || 'not defined'}
 </p>
 
 <p>
   Wallet type: {$walletType || 'not defined'}
 </p>
+<p>
+  chainData = {JSON.stringify($chainData)}
+</p>
 
 
 <p>Selected account balance = <Balance address={checkAccount} /> {$chainData.nativeCurrency?.symbol}</p>