diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..36bf9b4 --- /dev/null +++ b/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: diff --git a/README.md b/README.md index 87f6452..caab10c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ ---- # svelte-web3 @@ -6,6 +5,16 @@ 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 ``` -## 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() +defaultEvmStores.setProvider() ``` 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 ` + +

balance = -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 diff --git a/examples/svelte-app-template-web3/package.json b/examples/svelte-app-template-web3/package.json index 70c032e..2ac4490 100644 --- a/examples/svelte-app-template-web3/package.json +++ b/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" } } diff --git a/examples/svelte-app-template-web3/rollup.config.js b/examples/svelte-app-template-web3/rollup.config.js index e8965ec..3e3a2a8 100644 --- a/examples/svelte-app-template-web3/rollup.config.js +++ b/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(), diff --git a/examples/svelte-app-template-web3/src/App.svelte b/examples/svelte-app-template-web3/src/App.svelte index cec3a80..b03e40a 100644 --- a/examples/svelte-app-template-web3/src/App.svelte +++ b/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 diff --git a/examples/svelte-app-template-web3/src/MonoChain.svelte b/examples/svelte-app-template-web3/src/MonoChain.svelte index ccbcc4e..1514c29 100644 --- a/examples/svelte-app-template-web3/src/MonoChain.svelte +++ b/examples/svelte-app-template-web3/src/MonoChain.svelte @@ -1,8 +1,7 @@

Simple example to create several stores connected to different providers in parallel.

diff --git a/examples/svelte-app-template-web3/src/RPC.svelte b/examples/svelte-app-template-web3/src/RPC.svelte index f8031f1..d9fa227 100644 --- a/examples/svelte-app-template-web3/src/RPC.svelte +++ b/examples/svelte-app-template-web3/src/RPC.svelte @@ -1,5 +1,5 @@ @@ -50,14 +47,6 @@ Selected account: {$selectedAccount || 'not defined'}

-

- {checkAccount} Balance on {$chainData.name}: - {#await balance} - waiting... - {:then value} - {value} - {/await} {$chainData.nativeCurrency?.symbol} -

- +

Selected account balance = {$chainData.nativeCurrency?.symbol}

{/if} diff --git a/package.json b/package.json index 75855f3..37337f6 100644 --- a/package.json +++ b/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": "" }, + "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" diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte new file mode 100644 index 0000000..ef0d924 --- /dev/null +++ b/src/components/Balance.svelte @@ -0,0 +1,12 @@ + + +{#if address}{#await balance}{pending}{:then value}{value}{/await}{/if} diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..a5e0f63 --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,3 @@ +import Balance from './Balance.svelte' + +export { Balance } diff --git a/src/web3-store.js b/src/web3-store.js index 0a0bd60..75aff58 100644 --- a/src/web3-store.js +++ b/src/web3-store.js @@ -84,7 +84,7 @@ export const createStore = () => { })) } - const close = async (provider) => { + const disconnect = async (provider) => { if(provider && provider.disconnect) { await provider.disconnect() } @@ -97,7 +97,8 @@ export const createStore = () => { return { setBrowserProvider, setProvider, - close, + disconnect, + close: disconnect, subscribe } } @@ -115,7 +116,7 @@ const getData = id => { return noData } -export const makeChainStore = name => { +export const makeEvmStores = name => { const ethStore = allStores[name] = createStore() @@ -174,7 +175,8 @@ loadWeb3() export { chains as allChainsData } -export const defaultChainStore = makeChainStore('default') +export const defaultEvmStores = makeEvmStores('default') + export const connected = allStores.default.connected export const chainId = allStores.default.chainId export const providerType = allStores.default.providerType @@ -183,5 +185,7 @@ export const walletType = allStores.default.walletType export const web3 = allStores.default.web3 export const chainData = allStores.default.chainData -export const ethStore = defaultChainStore +// legacy naming +export const defaultChainStore = defaultEvmStores +export const ethStore = defaultEvmStores