Skip to content

Commit

Permalink
* Refactor to use 1.2.9
Browse files Browse the repository at this point in the history
* Change helper name
* update to new metaMask standards
* add setProvider
  • Loading branch information
clbrge committed Nov 7, 2020
2 parents 57799d7 + 233fac4 commit 2074a3c
Show file tree
Hide file tree
Showing 6 changed files with 2,249 additions and 3,942 deletions.
22 changes: 15 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

# svelte-web3

web3.js as a Svelte store.
web3.js 1.2.9 as a Svelte store.

## Installation

Expand All @@ -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
Expand All @@ -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

Expand Down
73 changes: 45 additions & 28 deletions example/App.svelte
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -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>
Expand Down
Loading

0 comments on commit 2074a3c

Please sign in to comment.