Skip to content

Commit

Permalink
draft 1.3.5
Browse files Browse the repository at this point in the history
  • Loading branch information
clbrge committed May 8, 2021
1 parent b7435f4 commit 5fc4439
Show file tree
Hide file tree
Showing 42 changed files with 12,156 additions and 1,744 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@
node_modules
/dist/
public
example/sapper-app-template-web3/package-lock.json
example/svelte-app-template-web3/package-lock.json
57 changes: 46 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,30 @@

# svelte-web3

import web3.js as a store for Svelte or Sapper.
Import 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 and Sapper installation
## Svelte, Sapper and Svelte-kit installation

1. add the `svelte-web3` package

```bash
npm i svelte-web3
```

2. add the web3.js library in the main HTML page (`public/index.html` in Svelte and `src/template.html` in Sapper)
2. add the web3.js library in the main HTML page (`public/index.html` in Svelte, `src/template.html` in Sapper or `src/app.html` in Svelte-kit)

```html
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
```

## Svelte and Sapper basic usage

Import the `ethStore` main connection helper and needed derived Svelte stores (see list below):

```js
import { ethStore, web3, selectedAccount, connected } from 'svelte-web3'
import { ethStore, web3, selectedAccount, connected, chainData } from 'svelte-web3'
```

To enable connection to the current window provider:
Expand Down Expand Up @@ -65,20 +66,54 @@ $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.
* selectedAccount: current selected account.
* nativeCurrency: currency name in the current chain.
* selectedAccount: current selected account (if connected).
* chainId: The current chainId (if connected).
* chainData: The current blokchain CAIP-2 data (if connected), see below.

Svelte stores are automatically updated when network or the selected account change.
Svelte stores are automatically updated when the chain or the selected account change.

Please see the file `example/App.svelte` for more usage information to start a transaction
and concrete usage of stores.

## Human readable chain CAIP-2 information

`chainData` is a store returning the current JavaScript [CAIP-2 representation](https://github.com/ChainAgnostic/CAIPs/blob/master/CAIPs/caip-2.md) object.

### Example of information available (vary depending on the chain)

```json
{
"name": "Ethereum Mainnet",
"chain": "ETH",
"network": "mainnet",
"rpc": [
"https://mainnet.infura.io/v3/${INFURA_API_KEY}",
"https://api.mycryptoapi.com/eth"
],
"faucets": [],
"nativeCurrency": {
"name": "Ether",
"symbol": "ETH",
"decimals": 18
},
"infoURL": "https://ethereum.org",
"shortName": "eth",
"chainId": 1,
"networkId": 1,
"icon": "ethereum",
"explorers": [{
"name": "etherscan",
"url": "https://etherscan.io",
"icon": "etherscan",
"standard": "EIP3091"
}]
}
```

## Svelte example (based on rollup template)

Please check `example/svelte-app-template-web3` in github.

## Sapper example (ased on webpack template)
## Sapper example (based on webpack template)

Please check `example/sapper-app-template-web3` in github.
10 changes: 0 additions & 10 deletions example/svelte-app-template-web3/src/main.js

This file was deleted.

File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
"dependencies": {
"compression": "^1.7.1",
"polka": "next",
"svelte-web3": "^1.3.4",
"sirv": "^1.0.0"
"sirv": "^1.0.0",
"svelte-web3": "^1.3.4"
},
"devDependencies": {
"file-loader": "^6.0.0",
"sapper": "^0.28.0",
"svelte": "^3.17.3",
"file-loader": "^6.0.0",
"svelte-loader": "^2.9.0",
"webpack": "^4.7.0",
"webpack-modules": "^1.0.0"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script>
import { onMount } from 'svelte';
import { ethStore, web3, selectedAccount, connected, chainName, nativeCurrency } from 'svelte-web3'
import { ethStore, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
export let message
export let tipAddress
Expand All @@ -14,7 +15,7 @@
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')),
// gasPrice: $web3.utils.toHex($web3.utils.toWei('30', 'gwei')),
gasLimit: $web3.utils.toHex('21000'),
from: $selectedAccount,
to: tipAddress,
Expand Down Expand Up @@ -48,6 +49,7 @@
<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>
Expand All @@ -60,23 +62,26 @@

{#if $connected}
<p>
Connected chain: {$chainName}
Connected chain: chainId = {$chainId}
</p>
<p>
chainData = {JSON.stringify($chainData)}
</p>
<p>
Selected account: {$selectedAccount || 'not defined'}
</p>

<p>
{checkAccount} Balance on {$chainName}:
{checkAccount} Balance on {$chainData.name}:
{#await balance}
<span>waiting...</span>
{:then value}
<span>{value}</span>
{/await} {$nativeCurrency.symbol}
{/await} {$chainData.nativeCurrency?.symbol}
</p>

{#if $selectedAccount}
<p><button on:click="{sendTip}">send 0.01 {$nativeCurrency.symbol} tip to {tipAddress} (author)</button></p>
<p><button on:click="{sendTip}">send 0.01 {$chainData.nativeCurrency?.symbol} tip to {tipAddress} (author)</button></p>
{/if}

{/if}
Expand Down
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script>
import { ethStore, web3, selectedAccount, connected, chainName, nativeCurrency } from 'svelte-web3'
// import { ethStore, web3, selectedAccount, connected, chainId, chainData } from '../../../dist/index.js'
import { ethStore, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
export let name;
Expand All @@ -14,7 +15,7 @@
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')),
// gasPrice: $web3.utils.toHex($web3.utils.toWei('30', 'gwei')),
gasLimit: $web3.utils.toHex('21000'),
from: $selectedAccount,
to: tipAddress,
Expand Down Expand Up @@ -56,23 +57,26 @@

{#if $connected}
<p>
Connected chain: {$chainName}
Connected chain: chainId = {$chainId}
</p>
<p>
chainData = {JSON.stringify($chainData)}
</p>
<p>
Selected account: {$selectedAccount || 'not defined'}
</p>

<p>
{checkAccount} Balance on {$chainName}:
{checkAccount} Balance on {$chainData.name}:
{#await balance}
<span>waiting...</span>
{:then value}
<span>{value}</span>
{/await} {$nativeCurrency.symbol}
{/await} {$chainData.nativeCurrency?.symbol}
</p>

{#if $selectedAccount}
<p><button on:click="{sendTip}">send 0.01 {$nativeCurrency.symbol} tip to {tipAddress} (author)</button></p>
<p><button on:click="{sendTip}">send 0.01 {$chainData.nativeCurrency?.symbol} tip to {tipAddress} (author)</button></p>
{/if}

{/if}
Expand Down
11 changes: 11 additions & 0 deletions examples/svelte-app-template-web3/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import App from './App.svelte';

const app = new App({
target: document.body,
props: {
name: 'world',
tipAddress: '0x834356a88C66897FA0A05a61964a91A607956ee3'
}
});

export default app;
Loading

0 comments on commit 5fc4439

Please sign in to comment.