diff --git a/README.md b/README.md
index bc9f48b..03f829f 100644
--- a/README.md
+++ b/README.md
@@ -64,7 +64,7 @@ import { defaultEvmStores } from 'svelte-web3'
:exclamation: `defaultEvmStores` was named before `defaultChainStore`. The
former naming has been removed in later versions of
-`svelte-web3` package. Please update your code!
+`svelte-web3` package.
### Connection with the browser provider (eg wallets like Metamask)
@@ -196,6 +196,66 @@ not it's value).
const { name, chainId } = await $web3.eth.getChainId()
const balance = await $web3.eth.getBalance('0x0000000000000000000000000000000000000000') : ''
+
+```
+
+### Using the contracts store for reactive contract calls
+
+To enjoy the same reactivity as using `$web3` but with a `web3.eth.Contract`
+contract instance, you first need to declare its address and interface. To
+differentiate each `eth.Contract` instance, you also need to define a logical
+name. That's the function `attachContract`:
+
+
+```html
+
+```
+
+`attachContract` only needs to be called once and can be called before
+connection since `web3.eth.Contract` instances will only be created when
+a connection becomes available. You may want to reattach new contract
+definition or abi for example when you the current network change. For
+the old definition will be overwritten and instance updated in the
+`contracts` store, simply use the same logical name.
+
+After a contract as be declared, you can use its instance anywhere
+using the `$` notation and the logical name :
+
+```html
+
+
+
+ {#await $contracts.myContract.methods.totalSupply().call()}
+
+ waiting...
+
+ {:then value}
+
+ result of contract call totalSupply on my contract : { value }
+
+ {/await}
+
+```
+
+By default, `svelte-web3` build contract instances using the current connection
+options. You may want to overwrite options by passing them as fourth argument.
+
+```js
+ defaultEvmStores.attachContract('myContract',
, , { from: , ... })
```
### Reading stores outside of Svelte files
@@ -292,19 +352,6 @@ import { getChainDataByChainId } from 'svelte-web3'
console.log( getChainDataByChainId(5) )
```
-## Create contract stores
-
-The function `makeContractStore` allows you to create a Svelte derived
-store of a `web3.eth.Contract` object instance. It takes the same
-parameters as a ̀new web3.eth.Contract` call:
-
-```js
-makeContractStore(jsonInterface[, address][, options])
-```
-
-This store is also conveniently and automatically updated after
-connection and when the account or chain change.
-
## Web3 Svelte component [ experimental ]
@@ -324,6 +371,19 @@ discussions in our [Discord](https://discord.gg/7yXuwDwaHF).
```
+## Create contract stores (deprecated)
+
+The function `makeContractStore` allowed you to create a Svelte derived
+store of a `web3.eth.Contract` object instance. It takes the same
+parameters as a ̀new web3.eth.Contract` call:
+
+```js
+makeContractStore(jsonInterface[, address][, options])
+```
+
+This function will be removed in the next major release of `svelte-web3`.
+Please update your code to use the new $contracts store.
+
## Simultaneous multi chain usage
You can also using the library to create several stores, each
@@ -394,16 +454,18 @@ Please check [examples/sveltekit-app-template-web3 on github](https://github.com
### Svelte basic example (based on rollup template)
+:exclamation: This is a legacy example and will be removed in future version of `svelte-web3`.
+
Please check [examples/svelte-app-template-web3 on github](https://github.com/clbrge/svelte-web3/tree/master/examples/svelte-app-template-web3).
-This is a legacy example and will be removed in future version of `svelte-web3`.
Contains demos to use the default store and multi stores.
### Sapper basic example (based on webpack template)
+:exclamation: This is a legacy example and will be removed in future version of `svelte-web3`.
+
Please check [examples/sapper-app-template-web3 on github](https://github.com/clbrge/svelte-web3/tree/master/examples/sapper-app-template-web3).
-This is a legacy example and will be removed in future version of `svelte-web3`.
### tradingstrategy.ai presented at EthLisbon 2021
diff --git a/examples/svelte-vite-template-web3/src/App.svelte b/examples/svelte-vite-template-web3/src/App.svelte
index 1642ad1..0d52715 100644
--- a/examples/svelte-vite-template-web3/src/App.svelte
+++ b/examples/svelte-vite-template-web3/src/App.svelte
@@ -3,12 +3,23 @@
import ethereumLogo from '../public/ethereum.svg'
import Counter from './lib/Counter.svelte'
- import Providers from './Providers.svelte'
-
- $: route = window.location.pathname
-
-
+ import { defaultEvmStores as evm, connected, web3, evmProviderType, selectedAccount, chainId, chainData } from 'svelte-web3'
+ import Providers from './Providers.svelte'
+ import Contracts from './Contracts.svelte'
+ import Menu from './Menu.svelte'
+
+ // super basic router
+ let route = window.location.pathname || '/'
+ function click(e) {
+ var x = e.target.closest('a'), y = x && x.getAttribute('href');
+ if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button || e.defaultPrevented) return;
+ if (!y || x.target || x.host !== location.host || y[0] == '#') return;
+ e.preventDefault()
+ history.pushState(y, '', y)
+ route = y
+ }
+ addEventListener('click', click)
@@ -18,9 +29,9 @@
- {:else if /setprovidex/.test(route)}
+ {:else if /contracts/.test(route)}
-
+
{:else}
@@ -49,12 +60,20 @@
Before using the svelte-web3 stores, you need to connect to a provider: here are a few examples...
+
+ Use the contracts store for easy access to any web3 smart-contract instance: erc20 example...
+
+
Click on the Vite, Svelte and web3.js/Ethereum logos to learn more
{/if}
+ {#if !/^\/$/.test(route)}
+
+ {/if}
+