refactor for 1.2.9

README.md

@@ -2,7 +2,7 @@
 
 # svelte-web3
 
-web3.js as a Svelte store.
+web3.js 1.2.9 as a Svelte store.
 
 ## Installation
 
@@ -12,16 +12,22 @@ npm i svelte-web3
 
 ## Basic Usage
 
-Import the `ethereum` main helper and needed derived Svelte stores (see list below):
+Import the `ethStore` main connection helper and needed derived Svelte stores (see list below):
 
 ```js
-import { ethereum, web3, selectedAccount, isListening } from 'svelte-ethereum';
+import { ethStore, web3, selectedAccount, connected } from 'svelte-web3';
 ```
 
 To enable connection to the current window provider: 
 
 ```js
-ethereum.setBrowserProvider()
+ethStore.setBrowserProvider()
+```
+
+To enable connection using an url string: 
+
+```js
+ethStore.setProvider('<ws/https or http provider url>')
 ```
 
 If connection is successful, you can access the instantiated web3.js with the current window provider
@@ -33,14 +39,16 @@ $web3.eth.getBalance(<Ethereum address>)
 
 ## Derived stores
 
+* connected: true if connection to the provider was successful.
 * chainId: The current blokchain Id.
 * chainName: Name of the The current blokchain.
-* isListening: true if connection to the provider was successful.
 * selectedAccount: current selected account.
+* nativeCurrency: currency name in the current chain.
 
-Svelte stores are automatically updated when network or selected account change.
+Svelte stores are automatically updated when network or the selected account change.
 
-Please see the file `example/App.svelte` for more usage information.
+Please see the file `example/App.svelte` for more usage information to start a transaction
+and concrete usage of stores.
 
 ## Demo/Example
 

example/App.svelte

@@ -1,27 +1,28 @@
 <script>
 
-import { ethereum, web3, chainName, isListening, nativeCurrency, selectedAccount, whenReady } from '../dist/index.mjs'
-
-export let name
-export let tipAddres
-
-const enable = () => ethereum.setBrowserProvider()
-//const enable = () => ethereum.setProvider('https://sokol.poa.network')
-
-$: balance = whenReady($selectedAccount, a => $web3.eth.getBalance(a))
-
-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('5', 'gwei')),
-    gasLimit: $web3.utils.toHex('21000'),
-    from: $selectedAccount,
-    to: tipAddres,
-    value: $web3.utils.toHex($web3.utils.toWei('1', 'finney'))
-  })
-  console.log('Receipt from sendTip transaction', tx)
-  alert('Thanks!')
-}
+  import { ethStore, web3, selectedAccount, connected, chainName, nativeCurrency } from '../dist/index.mjs'
+
+  export let name
+  export let tipAddres
+
+  const enable = () => ethStore.setProvider('https://sokol.poa.network')
+  const enableBrowser = () => ethStore.setBrowserProvider()
+
+  $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000'
+  $: balance = $connected ? $web3.eth.getBalance(checkAccount) : ''
+
+  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('5', 'gwei')),
+      gasLimit: $web3.utils.toHex('21000'),
+      from: $selectedAccount,
+      to: tipAddres,
+      value: $web3.utils.toHex($web3.utils.toWei('1', 'finney'))
+    })
+    console.log('Receipt from sendTip transaction', tx)
+    alert('Thanks!')
+  }
 
 </script>
 
@@ -33,21 +34,37 @@ const sendTip = async (e) => {
 
   <p>Visit the <a href="https://web3js.readthedocs.io/en/">Web3.js documentation</a> to learn how to use Web3.js library.</p>
 
-  <p><button on:click="{enable}">connect</button> this svelte example app to the window provider (eg Metamask) :
- {$selectedAccount}
+  <p>Web3 version: {$web3.version} </p>
+
+  <p>
+    <button on:click="{enable}">connect to https://sokol.poa.network</button>
+  </p>
+
+  <p>
+    <button on:click="{enableBrowser}">connect to the browser window provider </button> (eg Metamask)
   </p>
 
-  {#if $isListening}
+  {#if $connected}
+  <p>
+    Connected chain: {$chainName}
+  </p>
   <p>
     Selected account: {$selectedAccount || 'not defined'}
   </p>
-  {#if $chainName}
+
   <p>
-    Balance on {$chainName}:
-    {#await balance}<span>waiting...</span>{:then value}<span>{$web3.utils.fromWei(value)}</span>{/await} {$nativeCurrency.symbol}
+    {checkAccount} Balance on {$chainName}:
+    {#await balance}
+    <span>waiting...</span>
+    {:then value}
+    <span>{value}</span>
+    {/await} {$nativeCurrency.symbol}
   </p>
+
+  {#if $selectedAccount}
   <p><button on:click="{sendTip}">send 0.01 {$nativeCurrency.symbol} tip to {tipAddres} (author)</button></p>
   {/if}
+
   {/if}
 
 </main>