add proxy handlers

README.md

@@ -29,32 +29,34 @@ npm i svelte-web3
 <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
 ```
 
-This step is necessary for now because the Web3.js doesn't play well with bundlers (webpack,
-vite, snowpack, etc), thus we cannot simply add a dependency in package.json.
+This step is necessary for now because the Web3.js library doesn't
+play well with bundlers (webpack, vite, snowpack, etc), thus we cannot
+simply add a dependency in package.json.
 
 
 ## Basic usage (default stores connected to one chain)
 
-## Derived stores
+### Derived stores
 
-This library is creating automatically a set of readable Svelte stores
-that are automatically updated when a new connection happens, or when
-the chain or the selected account change. You can import them directly
-in any svelte or JavaScript files :
+This library creates a set of readable Svelte stores that are
+automatically updated when a new connection happens, or when the chain
+or the selected account change. You can import them directly in any
+svelte or JavaScript files :
 
 ```js
 import { connected, web3, selectedAccount, chainId, chainData } from 'svelte-web3'
 ```
 
  * connected: store value is true a connection has been set up.
- * web3: store value is an Web3.js instance if connected.
- * selectedAccount: store value is the current selected account (if connected).
- * chainId: store value is the current chainId if connected.
- * chainData: store value is the current blokchain CAIP-2 data (if connected), see below.
+ * web3: store value is a Web3.js instance when connected.
+ * selectedAccount: store value is the current selected account (when connected).
+ * chainId: store value is the current chainId when connected.
+ * chainData: store value is the current blokchain CAIP-2 data (when connected), see below.
 
-For these stores to be useful in your svelte application, you first need to connect to the blockchain.
+For these stores to be useful in your svelte application, you thus
+first need to connect to the EVM blockchain.
 
-The main connection helper `defaultEvmStores` can be use to initiate a connection.
+The main connection helper `defaultEvmStores` can be used to initiate a connection.
 
 ```js
 import { defaultEvmStores } from 'svelte-web3'
@@ -90,7 +92,7 @@ former naming still works but will be removed in later versions of
 ### Connection with other providers (ws, http, Web3Modal, Walletconnect, etc)
 
 To enable connection using an url string or a valid provider object
-(as returned by web3Modal or WalletConnect for example):
+(for example as returned by web3Modal or WalletConnect):
 
 ```js
 defaultEvmStores.setProvider(<ws/https or http provider url or provider Object>)
@@ -99,11 +101,12 @@ defaultEvmStores.setProvider(<ws/https or http provider url or provider Object>)
 Please check `examples/svelte-app-template-web3/src/Web3Modal.svelte` in github.
 
 
-### Using the connection Web3 API 
+### Using the Web3 API 
 
 After a connection has been established, you may import the default
-`web3` store anywhere in your application to use Web3.js API. Use the
-`$` prefix svelte notation to access its value and call Web3.js functions.
+`web3` store anywhere in your application to use the Web3.js API. Use
+the `$` prefix svelte notation to access its instance and call Web3.js
+functions.
 
 ```js
   import { web3, selectedAccount } from 'svelte-web3'
@@ -116,15 +119,16 @@ After a connection has been established, you may import the default
 ```
 
 The whole Web3.js API is usable in the `<script>` section of your
-svelte files if you always use notation `$web3` (beware, `web3` is the
-default notation in web3.js library documentation but in our context,
-it's the Svelte store itself, not it's value, the instantiated
-library).
+svelte files using the notation `$web3` (beware, in the Web3.js
+library documentaion, instances are always noted as `web3`, without
+`$`, but in the context of `svelte-web3`, `web3` is the Svelte store
+itself, not it's value).
 
 
 ### Forcing a disconnect (and the remove all listeners)
 
-Simply call the function `disconnect` directly on the store. For example with the default store:
+Simply call the function `disconnect` directly on the store. For
+example with the default store:
 
 ```js
 defaultEvmStores.disconnect()

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

@@ -3,6 +3,7 @@
   import MultiChain from './MultiChain.svelte'
   import Web3Modal from './Web3Modal.svelte'
 
+  let name
   let example = MonoChain
 
   $: metamaskConnected = window.ethereum ? window.ethereum.isConnected() : false

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

@@ -1,17 +1,17 @@
 <script>
-  import { allChainsData, makeChainStore, defaultChainStore, 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 } = makeChainStore('sokol'))
+  ({ connected: sokol_connected, web3: sokol_web3, ...sokol } = makeEvmStores('sokol'))
 
   sokol.setProvider('https://sokol.poa.network')
 
-  const enable = () => defaultChainStore.setProvider('https://sokol.poa.network')
-  const enableBrowser = () => defaultChainStore.setBrowserProvider()
+  const enable = () => defaultEvmStores.setProvider('https://sokol.poa.network')
+  const enableBrowser = () => defaultEvmStores.setBrowserProvider()
 
   $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000'
 

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

@@ -1,11 +1,11 @@
 <script>
-  import { makeChainStore } from 'svelte-web3'
+  import { makeEvmStores } from 'svelte-web3'
 
   export let name
   export let provider
 
   let ethStore, web3, connected, selectedAccount, chainId, chainData
-  ({ web3, connected, selectedAccount, chainId, chainData, ...ethStore } = makeChainStore(name))
+  ({ web3, connected, selectedAccount, chainId, chainData, ...ethStore } = makeEvmStores(name))
 
   ethStore.setProvider(provider)
 

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

@@ -1,10 +1,11 @@
 <script>
-  import { defaultChainStore, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
+  import { defaultEvmStores, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
   import { Balance } from 'svelte-web3/components'
 
   const Web3Modal = window.Web3Modal.default
   const WalletConnectProvider = window.WalletConnectProvider.default
 
+  const disable = () => defaultEvmStores.disconnect()
   const enable = async () => {
     let web3Modal = new Web3Modal({
       cacheProvider: false,
@@ -19,7 +20,7 @@
       disableInjectedProvider: false,
     })
     const provider = await web3Modal.connect()
-    defaultChainStore.setProvider(provider)
+    defaultEvmStores.setProvider(provider)
   }
 
   $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000'
@@ -36,6 +37,13 @@
 </div>
 {/if}
 
+{#if $web3.version}
+<div class="buttons">
+  <button class="button is-link is-light" on:click="{disable}">disconnect</button>
+</div>
+{/if}
+
+
 {#if $connected}
 <p>
   Connected chain: chainId = {$chainId}

package.json

@@ -10,14 +10,14 @@
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "svelte": "src/web3-store.js",
+  "svelte": "src/stores.js",
   "types": "dist/svelte-web3.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "main": "./dist/index.js",
       "module": "./dist/index.mjs",
-      "svelte": "./src/web3-store.js",
+      "svelte": "./src/stores.js",
       "types": "./dist/svelte-web3.d.ts"
     },
     "./components": {

rollup.config.js

@@ -2,7 +2,7 @@ import dts from "rollup-plugin-dts";
 
 export default [
   {
-    input: "./src/web3-store.js",
+    input: "./src/stores.js",
     output: [
       { file: "dist/index.mjs", format: "es" },
       { file: "dist/index.js", format: "umd", name: "web3store" },