From fb0616bf021e3119dbdeb7b78ed5a4ed764ef18f Mon Sep 17 00:00:00 2001 From: Christophe Le Bars Date: Thu, 27 May 2021 15:33:47 +0200 Subject: [PATCH] update README --- README.md | 121 +++++++++++---- .../svelte-app-template-web3/src/App.svelte | 139 ++++++------------ .../src/MonoChain.svelte | 71 +++++++++ .../src/MultiChain.svelte | 11 ++ .../svelte-app-template-web3/src/RPC.svelte | 32 ++++ examples/svelte-app-template-web3/src/main.js | 1 - src/web3-store.js | 5 + 7 files changed, 263 insertions(+), 117 deletions(-) create mode 100644 examples/svelte-app-template-web3/src/MonoChain.svelte create mode 100644 examples/svelte-app-template-web3/src/MultiChain.svelte create mode 100644 examples/svelte-app-template-web3/src/RPC.svelte diff --git a/README.md b/README.md index 1c1d88f..4133b3d 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,11 @@ # svelte-web3 -Import the [web3.js library](https://web3js.readthedocs.io/) as a +Use the [web3.js library](https://web3js.readthedocs.io/) as a collection of [readable svelte stores](https://svelte.dev/tutorial/readable-stores) for Svelte, Sapper or Svelte-kit. -## Svelte, Sapper and Svelte-kit installation +## Installation 1. add the `svelte-web3` package @@ -20,65 +20,88 @@ npm i svelte-web3 ``` -## Svelte and Sapper basic usage +## Basic usage (defaultstore connected to one chain) -Import the `ethStore` main connection helper and needed derived Svelte stores (see list below): +Import the `defaultChainStore` main connection helper and needed derived Svelte stores (see list below): ```js -import { ethStore, web3, selectedAccount, connected, chainData } from 'svelte-web3' +import { defaultChainStore, web3, selectedAccount, connected, chainData } from 'svelte-web3' ``` -To enable connection to the current window provider: +:exclamation: `defaultChainStore` was named before `ethStore`. The +former naming still works but will be removed in later versions of +`svelte-web3` package. Please update your code! + +### Connection with the browser provider (wallets like metamask) + +To enable a connection with the current window provider: ```js -ethStore.setBrowserProvider() +defaultChainStore.setBrowserProvider() ``` -To enable connection using an url string: +Please note that your code need to be in browser context when +`setBrowserProvider` is running. So you may want to use `onMount` when +using Sapper or Svelte-kit. Similarly, you cannot use +`setBrowserProvider` in SSR context. ```js -ethStore.setProvider('') + onMount( + () => { + // add a test to return in SSR context + defaultChainStore.setBrowserProvider() + } + ) ``` -Please note that if your code is running in SSR context (like with -Sapper), you can only call `setBrowserProvider` and `setProvider` in -browser context for example using `onMount` or as an handler of a -client-side event : +### 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): ```js - onMount( - async () => { - console.log('Connecting to Ethereum Testnet Görli...') - ethStore.setProvider('https://rpc.slock.it/goerli') - }) +defaultChainStore.setProvider() ``` -In SSR context, the stores are defined but no connection has been -instanciated. +### Using the Web3 instance $web3 after the connection If a connection is successful, you can access the instantiated web3.js -with the current window provider using the `$` svelte store syntax : +using the `$` svelte store syntax : ```js $web3.eth.getBalance() ``` +The whole Web3.js API is now usable in the ` - $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000' - $: balance = $connected ? $web3.eth.getBalance(checkAccount) : '' +
+
+

+ svelte-web3 usage example with Svelte +

- const sendTip = async (e) => { - console.log('Received move event (sendTip button)', e) - const tx = await $web3.eth.sendTransaction({ - // gasPrice: $web3.utils.toHex($web3.utils.toWei('30', 'gwei')), - gasLimit: $web3.utils.toHex('21000'), - from: $selectedAccount, - to: tipAddress, - value: $web3.utils.toHex($web3.utils.toWei('1', 'finney')) - }) - console.log('Receipt from sendTip transaction', tx) - alert('Thanks!') - } +

Visit the Svelte tutorial to learn how to build Svelte apps.

- +

Visit the Web3.js documentation to learn how to use Web3.js library.

-
+ {#if window.Web3} +

The Web3.js library has been injected in Global window Object (version: {window.Web3.version}).

+ {:else} +
+ Error! The Web3.js library has not been detected in the Global window Object. + Please check that Web3.js has been correctly added in public/index.html + with the line: + 
+      <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
+
+
+ {/if} +

Browser wallet detected in Global Object window.ethereum : { window.ethereum ? 'yes' : 'no' }

-

Hello {name}!

+
+
-

Visit the Svelte tutorial to learn how to build Svelte apps.

+
-

Visit the Web3.js documentation to learn how to use Web3.js library.

+
+
+
    +
  • {example = MonoChain}} class:is-active={/MonoChain/.test(example.toString())}> + + + MonoChain + +
    • +
  • {example = MultiChain}} class:is-active={/MultiChain/.test(example.toString())}> + + + MultiChains + +
    • +
+
-

Web3 injected in window: { window.Web3 ? 'yes' : 'no' }

+ -

Web3 version: {$web3.version}

+
- {#if $web3.version} -

- -

-

- (eg Metamask) -

- {:else} - Please check that web3 as been added in public/index.html with the line: - 
-      <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
-
- {/if} - - {#if $connected} -

- Connected chain: chainId = {$chainId} -

-

- chainData = {JSON.stringify($chainData)} -

-

- Selected account: {$selectedAccount || 'not defined'} -

- -

- {checkAccount} Balance on {$chainData.name}: - {#await balance} - waiting... - {:then value} - {value} - {/await} {$chainData.nativeCurrency?.symbol} -

- - {#if $selectedAccount} -

- {/if} - - {/if} - - - - + +
diff --git a/examples/svelte-app-template-web3/src/MonoChain.svelte b/examples/svelte-app-template-web3/src/MonoChain.svelte new file mode 100644 index 0000000..eb4a65f --- /dev/null +++ b/examples/svelte-app-template-web3/src/MonoChain.svelte @@ -0,0 +1,71 @@ + + +

+ Simple example to using the default store. You may switch + the connection to different providers (browser or not) at any time. +

+ +{#if $web3.version} +
+ + (eg Metamask) +
+{/if} + +{#if $connected} +

+ Connected chain: chainId = {$chainId} +

+

+ chainData = {JSON.stringify($chainData)} +

+

+ Selected account: {$selectedAccount || 'not defined'} +

+ +

+ {checkAccount} Balance on {$chainData.name}: + {#await balance} + waiting... + {:then value} + {value} + {/await} {$chainData.nativeCurrency?.symbol} +

+ +{#if $selectedAccount} +

+{/if} + +{/if} diff --git a/examples/svelte-app-template-web3/src/MultiChain.svelte b/examples/svelte-app-template-web3/src/MultiChain.svelte new file mode 100644 index 0000000..4e46abf --- /dev/null +++ b/examples/svelte-app-template-web3/src/MultiChain.svelte @@ -0,0 +1,11 @@ + + +

Simple example to create several stores connected to different providers in parallel.

+ + + + diff --git a/examples/svelte-app-template-web3/src/RPC.svelte b/examples/svelte-app-template-web3/src/RPC.svelte new file mode 100644 index 0000000..f8031f1 --- /dev/null +++ b/examples/svelte-app-template-web3/src/RPC.svelte @@ -0,0 +1,32 @@ + + +
+
+

+ { name } { $connected ? '(connected)' : '(not connected)' } +

+
+
+
+ {#if $connected} +

+ chainData = {JSON.stringify($chainData)} +

+ {/if} +
+
+ +
diff --git a/examples/svelte-app-template-web3/src/main.js b/examples/svelte-app-template-web3/src/main.js index a476738..4745346 100644 --- a/examples/svelte-app-template-web3/src/main.js +++ b/examples/svelte-app-template-web3/src/main.js @@ -4,7 +4,6 @@ const app = new App({ target: document.body, props: { name: 'world', - tipAddress: '0x834356a88C66897FA0A05a61964a91A607956ee3' } }); diff --git a/src/web3-store.js b/src/web3-store.js index 35c6892..89965d4 100644 --- a/src/web3-store.js +++ b/src/web3-store.js @@ -152,6 +152,11 @@ export const makeChainStore = name => { return allStores[name] } +export const getChainStore = name => { + if (!allStores[name]) throw new Error(`chain store ${name} does not exist`) + return allStores[name] +} + export const contractStore = (abi, address, defaults = {}) => derived( [web3, connected], ([$web3, $connected]) => {