add example for Web3Modal, bump deps

README.md

@@ -63,6 +63,9 @@ To enable connection using an url string or a valid provider object
 defaultChainStore.setProvider(<ws/https or http provider url or provider Object>)
 ```
 
+Please check `examples/svelte-app-template-web3/src/Web3Modal.svelte` in github.
+
+
 ### Using the Web3 instance $web3 after the connection
 
 If a connection is successful, you can access the instantiated web3.js

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

@@ -1,6 +1,7 @@
 <script>
   import MonoChain from './MonoChain.svelte'
   import MultiChain from './MultiChain.svelte'
+  import Web3Modal from './Web3Modal.svelte'
 
   export let name
 
@@ -47,6 +48,12 @@
             <span>MonoChain</span>
           </a>
         </li>
+        <li on:click={() => {example = Web3Modal}}  class:is-active={/Web3Modal/.test(example.toString())}>
+          <a>
+            <span class="icon is-small"><i class="fas fa-music"></i></span>
+            <span>Web3Modal</span>
+          </a>
+        </li>
         <li on:click={() => {example = MultiChain}}  class:is-active={/MultiChain/.test(example.toString())}>
           <a>
             <span class="icon is-small"><i class="fas fa-music"></i></span>

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

@@ -0,0 +1,63 @@
+<script>
+  import { defaultChainStore, web3, connected, selectedAccount, chainId, chainData } from '../../../dist/index.js'
+  //import { defaultChainStore, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
+
+  export let name
+
+  const Web3Modal = window.Web3Modal.default
+  const WalletConnectProvider = window.WalletConnectProvider.default
+
+  const enable = async () => {
+    let web3Modal = new Web3Modal({
+      cacheProvider: false,
+      providerOptions: {
+        walletconnect: {
+          package: WalletConnectProvider,
+          options: {
+            infuraId: '27e484dcd9e3efcfd25a83a78777cdf1'
+          }
+        }
+      },
+      disableInjectedProvider: false,
+    })
+    const provider = await web3Modal.connect()
+    defaultChainStore.setProvider(provider)
+  }
+
+  $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000'
+  $: balance = $connected ? $web3.eth.getBalance(checkAccount) : ''
+
+</script>
+
+<p>
+  Simple example to using the <a href="https://web3modal.com/">Web3Modal</a> library to connect the default store.
+</p>
+
+{#if $web3.version}
+<div class="buttons">
+  <button class="button is-link is-light" on:click="{enable}">connect using Web3Modal</button>
+</div>
+{/if}
+
+{#if $connected}
+<p>
+  Connected chain: chainId = {$chainId}
+</p>
+<p>
+  chainData = {JSON.stringify($chainData)}
+</p>
+<p>
+  Selected account: {$selectedAccount || 'not defined'}
+</p>
+
+<p>
+  {checkAccount} Balance on {$chainData.name}:
+    {#await balance}
+  <span>waiting...</span>
+  {:then value}
+  <span>{value}</span>
+  {/await} {$chainData.nativeCurrency?.symbol}
+</p>
+
+
+{/if}