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} +