diff --git a/.gitignore b/.gitignore index c564328..8636007 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ node_modules /dist/ public +example/sapper-app-template-web3/package-lock.json +example/svelte-app-template-web3/package-lock.json diff --git a/README.md b/README.md index 618bcd3..1c1d88f 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,11 @@ # 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 @@ -12,11 +14,10 @@ import web3.js as a store for Svelte or Sapper. 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 - ``` ## Svelte and Sapper basic usage @@ -24,7 +25,7 @@ npm i svelte-web3 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: @@ -65,20 +66,54 @@ $web3.eth.getBalance() ## 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. diff --git a/example/svelte-app-template-web3/src/main.js b/example/svelte-app-template-web3/src/main.js deleted file mode 100644 index d6cacbb..0000000 --- a/example/svelte-app-template-web3/src/main.js +++ /dev/null @@ -1,10 +0,0 @@ -import App from './App.svelte'; - -const app = new App({ - target: document.body, - props: { - name: 'world' - } -}); - -export default app; \ No newline at end of file diff --git a/example/sapper-app-template-web3/.gitignore b/examples/sapper-app-template-web3/.gitignore similarity index 100% rename from example/sapper-app-template-web3/.gitignore rename to examples/sapper-app-template-web3/.gitignore diff --git a/example/sapper-app-template-web3/README.md b/examples/sapper-app-template-web3/README.md similarity index 100% rename from example/sapper-app-template-web3/README.md rename to examples/sapper-app-template-web3/README.md diff --git a/example/sapper-app-template-web3/package.json b/examples/sapper-app-template-web3/package.json similarity index 90% rename from example/sapper-app-template-web3/package.json rename to examples/sapper-app-template-web3/package.json index 9cbef84..63e324f 100644 --- a/example/sapper-app-template-web3/package.json +++ b/examples/sapper-app-template-web3/package.json @@ -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" diff --git a/example/sapper-app-template-web3/scripts/setupTypeScript.js b/examples/sapper-app-template-web3/scripts/setupTypeScript.js similarity index 100% rename from example/sapper-app-template-web3/scripts/setupTypeScript.js rename to examples/sapper-app-template-web3/scripts/setupTypeScript.js diff --git a/example/sapper-app-template-web3/src/ambient.d.ts b/examples/sapper-app-template-web3/src/ambient.d.ts similarity index 100% rename from example/sapper-app-template-web3/src/ambient.d.ts rename to examples/sapper-app-template-web3/src/ambient.d.ts diff --git a/example/sapper-app-template-web3/src/client.js b/examples/sapper-app-template-web3/src/client.js similarity index 100% rename from example/sapper-app-template-web3/src/client.js rename to examples/sapper-app-template-web3/src/client.js diff --git a/example/sapper-app-template-web3/src/components/Nav.svelte b/examples/sapper-app-template-web3/src/components/Nav.svelte similarity index 100% rename from example/sapper-app-template-web3/src/components/Nav.svelte rename to examples/sapper-app-template-web3/src/components/Nav.svelte diff --git a/example/sapper-app-template-web3/src/routes/_error.svelte b/examples/sapper-app-template-web3/src/routes/_error.svelte similarity index 100% rename from example/sapper-app-template-web3/src/routes/_error.svelte rename to examples/sapper-app-template-web3/src/routes/_error.svelte diff --git a/example/sapper-app-template-web3/src/routes/_layout.svelte b/examples/sapper-app-template-web3/src/routes/_layout.svelte similarity index 100% rename from example/sapper-app-template-web3/src/routes/_layout.svelte rename to examples/sapper-app-template-web3/src/routes/_layout.svelte diff --git a/example/sapper-app-template-web3/src/routes/about.svelte b/examples/sapper-app-template-web3/src/routes/about.svelte similarity index 100% rename from example/sapper-app-template-web3/src/routes/about.svelte rename to examples/sapper-app-template-web3/src/routes/about.svelte diff --git a/example/sapper-app-template-web3/src/routes/blog/[slug].json.js b/examples/sapper-app-template-web3/src/routes/blog/[slug].json.js similarity index 100% rename from example/sapper-app-template-web3/src/routes/blog/[slug].json.js rename to examples/sapper-app-template-web3/src/routes/blog/[slug].json.js diff --git a/example/sapper-app-template-web3/src/routes/blog/[slug].svelte b/examples/sapper-app-template-web3/src/routes/blog/[slug].svelte similarity index 100% rename from example/sapper-app-template-web3/src/routes/blog/[slug].svelte rename to examples/sapper-app-template-web3/src/routes/blog/[slug].svelte diff --git a/example/sapper-app-template-web3/src/routes/blog/_posts.js b/examples/sapper-app-template-web3/src/routes/blog/_posts.js similarity index 100% rename from example/sapper-app-template-web3/src/routes/blog/_posts.js rename to examples/sapper-app-template-web3/src/routes/blog/_posts.js diff --git a/example/sapper-app-template-web3/src/routes/blog/index.json.js b/examples/sapper-app-template-web3/src/routes/blog/index.json.js similarity index 100% rename from example/sapper-app-template-web3/src/routes/blog/index.json.js rename to examples/sapper-app-template-web3/src/routes/blog/index.json.js diff --git a/example/sapper-app-template-web3/src/routes/blog/index.svelte b/examples/sapper-app-template-web3/src/routes/blog/index.svelte similarity index 100% rename from example/sapper-app-template-web3/src/routes/blog/index.svelte rename to examples/sapper-app-template-web3/src/routes/blog/index.svelte diff --git a/example/sapper-app-template-web3/src/routes/index.svelte b/examples/sapper-app-template-web3/src/routes/index.svelte similarity index 100% rename from example/sapper-app-template-web3/src/routes/index.svelte rename to examples/sapper-app-template-web3/src/routes/index.svelte diff --git a/example/sapper-app-template-web3/src/routes/web3test.svelte b/examples/sapper-app-template-web3/src/routes/web3test.svelte similarity index 81% rename from example/sapper-app-template-web3/src/routes/web3test.svelte rename to examples/sapper-app-template-web3/src/routes/web3test.svelte index aa473a6..f0cb7dd 100644 --- a/example/sapper-app-template-web3/src/routes/web3test.svelte +++ b/examples/sapper-app-template-web3/src/routes/web3test.svelte @@ -1,6 +1,7 @@