experimental version. component

CONTRIBUTING.md

@@ -0,0 +1,24 @@
+# Contributing to svelte-web3
+
+Thanks for your interest in improving svelte-web3! We welcome
+contributions of all kinds: from discussion to documentation to
+bugfixes to feature improvements.
+
+Please review this document to help to streamline the process and save
+everyone's precious time.
+
+## Issues
+
+No software is bug-free. So, if you got an issue, follow these steps:
+
+- Search the [issue list](https://github.com/clbrge/svelte-web3/issues) for current and old issues.
+  - If you find an existing issue, please UPVOTE the issue by adding a "thumbs-up reaction". We use this to help prioritize issues!
+- If none of that is helping, create an issue with the following information:
+  - Clear title (shorter is better).
+  - Describe the issue in clear language.
+  - Share error logs, screenshots and etc.
+  - To speed up the issue fixing process, send us a sample repo with the issue you faced:
+
+## Pull Requests (PRs)
+
+We welcome all contributions. There are many ways you can help us. This is few of those ways:

README.md

@@ -1,11 +1,20 @@
----
 
 # svelte-web3
 
 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 Sveltekit.
 
+If you prefer to use the [ethers.js
+library](https://docs.ethers.io/v5/) to intereact with EVM, you may be
+interested by our sister package
+[svelte-ethers-store](https://www.npmjs.com/package/svelte-ethers-store).%
+
+### Community
+
+For additional help or discussion, join us [in our
+Discord](https://discord.gg/7yXuwDwaHF).
+
 ## Installation
 
 1. add the `svelte-web3` package
@@ -20,24 +29,43 @@ npm i svelte-web3
 <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
 ```
 
-## Basic usage (defaultstore connected to one chain)
+This step is necessary for now because the Web3.js doesn't play well with bundlers (webpack,
+vite, snowpack, etc), thus we cannot simply add a dependency in package.json.
+
+
+## Basic usage (default stores connected to one chain)
+
+## Derived stores
 
-Import the `defaultChainStore` main connection helper and needed derived Svelte stores (see list below):
+This library is creating automatically a set of readable Svelte stores
+that are automatically updated when a new connection happens, or when
+the chain or the selected account change. You can import them directly
+in any svelte or JavaScript files :
 
 ```js
-import { defaultChainStore, web3, selectedAccount, connected, chainData } from 'svelte-web3'
+import { connected, web3, selectedAccount, chainId, chainData } from 'svelte-web3'
 ```
 
-: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!
+ * connected: store value is true a connection has been set up.
+ * web3: store value is an Web3.js instance if connected.
+ * selectedAccount: store value is the current selected account (if connected).
+ * chainId: store value is the current chainId if connected.
+ * chainData: store value is the current blokchain CAIP-2 data (if connected), see below.
+
+For these stores to be useful in your svelte application, you first need to connect to the blockchain.
+
+The main connection helper `defaultEvmStores` can be use to initiate a connection.
+
+```js
+import { defaultEvmStores } from 'svelte-web3'
+```
 
 ### Connection with the browser provider (wallets like metamask)
 
 To enable a connection with the current window provider: 
 
 ```js
-defaultChainStore.setBrowserProvider()
+defaultEvmStores.setBrowserProvider()
 ```
 
 Please note that your code need to be in browser context when
@@ -49,63 +77,76 @@ using Sapper or Sveltekit. Similarly, you cannot use
   onMount(
     () => {
       // add a test to return in SSR context
-      defaultChainStore.setBrowserProvider()
+      defaultEvmStores.setBrowserProvider()
     }
   )
 ```
 
+:exclamation: `defaultEvmStores` was named before `defaultChainStore`. The
+former naming still works but will be removed in later versions of
+`svelte-web3` package. Please update your code!
+
+
 ### 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
-defaultChainStore.setProvider(<ws/https or http provider url or provider Object>)
+defaultEvmStores.setProvider(<ws/https or http provider url or provider Object>)
 ```
 
 Please check `examples/svelte-app-template-web3/src/Web3Modal.svelte` in github.
 
 
-### Forcing a disconnect (and event subscriptions from a provider)
+### Using the connection Web3 API 
 
-Simply call the function `close` directly on the store. For example with the default store:
+After a connection has been established, you may import the default
+`web3` store anywhere in your application to use Web3.js API. Use the
+`$` prefix svelte notation to access its value and call Web3.js functions.
 
 ```js
-defaultChainStore.close()
+  import { web3, selectedAccount } from 'svelte-web3'
+
+  ...
+
+  const { name, chainId } = await $web3.eth.getChainId()
+
+  const balance = await $web3.eth.getBalance('0x0000000000000000000000000000000000000000') : ''
 ```
 
-### Using the Web3 instance $web3 after the connection
+The whole Web3.js API is usable in the `<script>` section of your
+svelte files if you always use notation `$web3` (beware, `web3` is the
+default notation in web3.js library documentation but in our context,
+it's the Svelte store itself, not it's value, the instantiated
+library).
 
-If a connection is successful, you can access the instantiated web3.js
-using the `$` svelte store syntax :
+
+### Forcing a disconnect (and the remove all listeners)
+
+Simply call the function `disconnect` directly on the store. For example with the default store:
 
 ```js
-$web3.eth.getBalance(<Ethereum address>)
+defaultEvmStores.disconnect()
 ```
 
-The whole Web3.js API is now usable in the `<script>` section of your
-svelte files if you always use notation `$web3` and not `web3` which
-is the default notation is in web3.js library documentation.  (using
-`svelte-web3` package, because the svelte store value should always
-start with `$`, `web3` is the Svelte store itself, not the
-instantiated library)
+## Web3 Svelte component [ experimental ]
 
-## Derived stores
 
-Some helpers derivated Svelte stores have been defined. They are
-automatically updated when a new connection happens, or when the chain
-or the selected account change:
+We plan to export generic Svelte components both to demonstrate the use
+of the svelte-web3 library and as resuable and composable best practices
+components. Only a `Balance` component has been implemented for now. You
+are welcome to help define and develop new components by joining our
+discussions in our [Discord](https://discord.gg/7yXuwDwaHF).
 
-* connected: true if connection to the provider was successful.
-* selectedAccount: current selected account (if connected).
-* chainId: The current chainId (if connected).
-* chainData: The current blokchain CAIP-2 data (if connected), see below.
 
+```html
+  import { Balance } from 'svelte-web3/components'
+</script>
+
+<p>balance = <Balance address="0x0000000000000000000000000000000000000000" />
 
-Please see the file
-`examples/svelte-app-template-web3/src/MonoChain.svelte` for more
-usage information to start a transaction and concrete usage of derived
-stores.
+```
 
 
 ## Human readable chain CAIP-2 information

examples/svelte-app-template-web3/package.json

@@ -8,17 +8,17 @@
     "start": "sirv public"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "rollup": "^2.3.4",
+    "svelte-web3": "file:../../",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "rollup": "^2.61.1",
     "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.41.0"
+    "svelte": "^3.44.3"
   },
   "dependencies": {
-    "sirv-cli": "^1.0.0",
-    "svelte-web3": "^1.3.4"
+    "sirv-cli": "^1.0.14"
   }
 }

examples/svelte-app-template-web3/rollup.config.js

@@ -29,9 +29,13 @@ function serve() {
 }
 
 export default {
-	input: 'src/main.js',
-	output: {
-		sourcemap: true,
+  input: 'src/main.js',
+  // globals: {
+  //   'svelte-web3': 'svelte-web3',
+  //   'svelte-web3/components': ' svelte-web3/components',
+  // },
+  output: {
+	sourcemap: true,
 		format: 'iife',
 		name: 'app',
 		file: 'public/build/bundle.js'
@@ -53,8 +57,8 @@ export default {
 		// consult the documentation for details:
 		// https://github.com/rollup/plugins/tree/master/packages/commonjs
 		resolve({
-			browser: true,
-			dedupe: ['svelte']
+		  browser: true,
+		  dedupe: ['svelte', 'svelte-web3']
 		}),
 		commonjs(),
 

examples/svelte-app-template-web3/src/App.svelte

@@ -3,8 +3,6 @@
   import MultiChain from './MultiChain.svelte'
   import Web3Modal from './Web3Modal.svelte'
 
-  export let name
-
   let example = MonoChain
 
   $: metamaskConnected = window.ethereum ? window.ethereum.isConnected() : false

examples/svelte-app-template-web3/src/MonoChain.svelte

@@ -1,8 +1,7 @@
 <script>
-  //import { allChainsData makeChainStore, defaultChainStore, web3, connected, selectedAccount, chainId, chainData } from '../../../dist/index.js'
   import { allChainsData, makeChainStore, defaultChainStore, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
 
-  export let name
+  import { Balance } from 'svelte-web3/components'
 
   let tipAddress = '0x834356a88C66897FA0A05a61964a91A607956ee3'
 
@@ -15,7 +14,6 @@
   const enableBrowser = () => defaultChainStore.setBrowserProvider()
 
   $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000'
-  $: balance = $connected ? $web3.eth.getBalance(checkAccount) : ''
 
   const sendTip = async (e) => {
     console.log('Received move event (sendTip button)', e)
@@ -51,18 +49,12 @@
 <p>
   chainData = {JSON.stringify($chainData)}
 </p>
+
 <p>
   Selected account: {$selectedAccount || 'not defined'}
 </p>
 
-<p>
-  {checkAccount} Balance on {$chainData.name}:
-    {#await balance}
-  <span>waiting...</span>
-  {:then value}
-  <span>{value}</span>
-  {/await} {$chainData.nativeCurrency?.symbol}
-</p>
+<p>Selected account balance = <Balance address={checkAccount} /> {$chainData.nativeCurrency?.symbol}</p>
 
 {#if $selectedAccount}
 <p><button class="button is-primary is-light" on:click="{sendTip}">send 0.01 {$chainData.nativeCurrency?.symbol} tip to {tipAddress} (author)</button></p>

examples/svelte-app-template-web3/src/MultiChain.svelte

@@ -1,7 +1,6 @@
 <script>
   import RPC from './RPC.svelte'
 
-
 </script>
 
 <p>Simple example to create several stores connected to different providers in parallel.</p>

examples/svelte-app-template-web3/src/RPC.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { makeChainStore } from '../../../dist/index.js'
+  import { makeChainStore } from 'svelte-web3'
 
   export let name
   export let provider

examples/svelte-app-template-web3/src/Web3Modal.svelte

@@ -1,8 +1,6 @@
 <script>
-  import { defaultChainStore, web3, connected, selectedAccount, chainId, chainData } from '../../../dist/index.js'
-  //import { defaultChainStore, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
-
-  export let name
+  import { defaultChainStore, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
+  import { Balance } from 'svelte-web3/components'
 
   const Web3Modal = window.Web3Modal.default
   const WalletConnectProvider = window.WalletConnectProvider.default
@@ -25,7 +23,6 @@
   }
 
   $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000'
-  $: balance = $connected ? $web3.eth.getBalance(checkAccount) : ''
 
 </script>
 
@@ -50,14 +47,6 @@
   Selected account: {$selectedAccount || 'not defined'}
 </p>
 
-<p>
-  {checkAccount} Balance on {$chainData.name}:
-    {#await balance}
-  <span>waiting...</span>
-  {:then value}
-  <span>{value}</span>
-  {/await} {$chainData.nativeCurrency?.symbol}
-</p>
-
+<p>Selected account balance = <Balance address={checkAccount} /> {$chainData.nativeCurrency?.symbol}</p>
 
 {/if}

package.json

@@ -2,16 +2,29 @@
   "name": "svelte-web3",
   "version": "2.3.5",
   "description": "web3.js as a collection of stores for Svelte, Sapper or SvelteKit.",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "svelte": "src/web3-store.js",
-  "types": "dist/svelte-web3.d.ts",
   "license": "MIT",
   "repository": "clbrge/svelte-web3",
   "author": {
     "name": "Christophe Le Bars",
     "email": "<[email protected]>"
   },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "svelte": "src/web3-store.js",
+  "types": "dist/svelte-web3.d.ts",
+  "exports":{
+    "./package.json": "./package.json",
+    ".":{
+      "main": "./dist/index.js",
+      "module": "./dist/index.mjs",
+      "svelte": "./src/web3-store.js",
+      "types": "./dist/svelte-web3.d.ts"
+    },
+    "./components":{
+      "import": "./src/components/index.js",
+      "svelte": "./src/components/index.js"
+    }
+  },
   "scripts": {
     "update-chains": "node ./scripts/update-chains.js",
     "build": "rollup -c"

src/components/Balance.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { web3, connected } from 'svelte-web3'
+
+  export let address
+  export let pending = 'pending'
+  // todo format + symbol
+
+  $: balance = $connected && address ? $web3.eth.getBalance(address) : ''
+
+</script>
+
+{#if address}{#await balance}{pending}{:then value}{value}{/await}{/if}