From 0c6c3b4a59338e8e20519095734a4411dcb15a06 Mon Sep 17 00:00:00 2001 From: Christophe Le Bars Date: Mon, 10 Apr 2023 15:47:20 +0200 Subject: [PATCH] migrate to prettier-config-standard --- .prettierignore | 2 + README.md | 176 +++++++++++++-------------- package.json | 6 +- rollup.config.mjs | 16 +-- scripts/update-chains.mjs | 10 +- src/stores.js | 65 ++++++---- src/svelte-web3.d.ts | 250 +++++++++++++++++++------------------- 7 files changed, 266 insertions(+), 259 deletions(-) diff --git a/.prettierignore b/.prettierignore index 75d4e18..902a3cb 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,3 @@ src/chains.js +examples +dist diff --git a/README.md b/README.md index 4b59c31..71d85d3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ - # svelte-web3 Use the [web3.js library](https://web3js.readthedocs.io/) as a @@ -33,7 +32,6 @@ This step is necessary for now because the Web3.js library doesn't play well with bundlers (Vite, Rollup, Webpack, Snowpack, etc), thus we cannot simply add a dependency in package.json. - ## Basic usage (default stores connected to one chain) ### Derived stores @@ -44,14 +42,20 @@ or the selected account change. You can import them directly in any Svelte or JavaScript files : ```js -import { connected, web3, selectedAccount, chainId, chainData } from 'svelte-web3' +import { + connected, + web3, + selectedAccount, + chainId, + chainData +} from 'svelte-web3' ``` - * connected: store value is true if a connection has been set up. - * web3: store value is a Web3.js instance when connected. - * selectedAccount: store value is the current selected account (when connected). - * chainId: store value is the current chainId when connected. - * chainData: store value is the current blockchain CAIP-2 data (when connected), see below. +- connected: store value is true if a connection has been set up. +- web3: store value is a Web3.js instance when connected. +- selectedAccount: store value is the current selected account (when connected). +- chainId: store value is the current chainId when connected. +- chainData: store value is the current blockchain CAIP-2 data (when connected), see below. For these stores to be useful in your Svelte application, a connection to an EVM blockchain first need to established . The abstract helper @@ -83,12 +87,10 @@ Sapper or SvelteKit. Similarly, you cannot use `setProvider` with no argument in SSR context. ```js - onMount( - () => { - // add a test to return in SSR context - defaultEvmStores.setProvider() - } - ) +onMount(() => { + // add a test to return in SSR context + defaultEvmStores.setProvider() +}) ``` `svelte-web3` will automatically update the stores when the network or @@ -98,17 +100,16 @@ accounts change and remove listeners at disconnection. method `setBrowserProvider`. The former naming still works but will be removed in later versions. Please update your code! - ### Connection with non injected EIP-1193 providers To connect to non injected EIP-1193 providers like : - * web3-onboard - * buidler.dev - * ethers.js - * eth-provider - * WalletConnect - * Web3Modal +- web3-onboard +- buidler.dev +- ethers.js +- eth-provider +- WalletConnect +- Web3Modal Call `setProvider` on the library abstract helper with the JavaScript provider instance object of the library. For example with Web3Modal : @@ -123,8 +124,8 @@ defaultEvmStores.setProvider(provider) accounts change and remove listeners at disconnection. Please check - `examples/svelte-app-template-web3/src/Web3Modal.svelte`(https://github.com/clbrge/svelte-web3/tree/master/examples/svelte-app-template-web3/src/Web3Modal.svelte). - in github for a complete example. +`examples/svelte-app-template-web3/src/Web3Modal.svelte`(https://github.com/clbrge/svelte-web3/tree/master/examples/svelte-app-template-web3/src/Web3Modal.svelte). +in github for a complete example. ### Connection with other Web3 providers (ws, http, ipc, ...) @@ -134,19 +135,25 @@ Web3.providers`, for example : ```js defaultEvmStores.setProvider('https://rinkeby.infura.io/v3/your-api-key') -// or -defaultEvmStores.setProvider('https://eth-mainnet.alchemyapi.io/v2/your-api-key') -// or +// or +defaultEvmStores.setProvider( + 'https://eth-mainnet.alchemyapi.io/v2/your-api-key' +) +// or defaultEvmStores.setProvider('http://localhost:8545') -// or -defaultEvmStores.setProvider(new Web3.providers.WebsocketProvider('ws://localhost:8546')) -// or +// or +defaultEvmStores.setProvider( + new Web3.providers.WebsocketProvider('ws://localhost:8546') +) +// or var net = require('net') -defaultEvmStores.setProvider(new Web3.providers.IpcProvider('/Users/myuser/Library/Ethereum/geth.ipc', net)) +defaultEvmStores.setProvider( + new Web3.providers.IpcProvider('/Users/myuser/Library/Ethereum/geth.ipc', net) +) // etc... ``` -### Selecting a specific account +### Selecting a specific account You can also pass `Index` as the second argument of `setProvider()` to select another account than the default when possible. @@ -161,12 +168,9 @@ After a connection has been established, you may import the stores anywhere in your application. Most of the time, you should use the `$` prefix Svelte notation to access the stores values. - ```html {#if !$connected} @@ -206,16 +210,14 @@ contract instance, you first need to declare its address and interface. To differentiate each `eth.Contract` instance, you also need to define a logical name. That's the function `attachContract`: - ```html ``` @@ -231,24 +233,20 @@ using the `$` notation and the logical name : ```html +{#await $contracts.myContract.methods.totalSupply().call()} - {#await $contracts.myContract.methods.totalSupply().call()} - - waiting... - - {:then value} +waiting... - result of contract call totalSupply on my contract : { value } +{:then value} - {/await} +result of contract call totalSupply on my contract : { value } +{/await} ``` By default, `svelte-web3` build contract instances using the current connection @@ -266,13 +264,11 @@ values in pure javascript library without subscribing to the store, you can use a special getter on the library abstract helper: ```js -// this is not a Svelte file but a standard JavaScript file +// this is not a Svelte file but a standard JavaScript file import { defaultEvmStores } from 'svelte-web3' if (defaultEvmStores.$selectedAccount) { - // do something if store selectedAccount is non null - } ``` @@ -300,7 +296,7 @@ This object is extremely useful to build components that reactively update all variables elements that depends on the current active chain or account. -Below is the CAIP-2 formatted information when the default store is +Below is the CAIP-2 formatted information when the default store is connected with the Ethereum Mainnet : ```json @@ -324,11 +320,13 @@ connected with the Ethereum Mainnet : "networkId": 1, "slip44": 60, "ens": { "registry": "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e" }, - "explorers": [{ - "name": "etherscan", - "url": "https://etherscan.io", - "standard": "EIP3091" - }] + "explorers": [ + { + "name": "etherscan", + "url": "https://etherscan.io", + "standard": "EIP3091" + } + ] } ``` @@ -339,7 +337,7 @@ the list of all CAIP-2 data available. ```js import { allChainsData } from 'svelte-web3' -console.log( allChainsData ) +console.log(allChainsData) ``` Another solution is to use the helper function `getChainDataByChainId` @@ -349,20 +347,17 @@ the CAIP-2 data or an empty object if not found. ```js import { getChainDataByChainId } from 'svelte-web3' -console.log( getChainDataByChainId(5) ) +console.log(getChainDataByChainId(5)) ``` - ## Web3 Svelte component [ experimental ] - 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). - ```html import { Balance } from 'svelte-web3/components' @@ -387,7 +382,7 @@ Please update your code to use the new $contracts store. ## Simultaneous multi chain usage You can also using the library to create several stores, each -connected to different providers. For example, you may want a +connected to different providers. For example, you may want a connection to the same chain througth the browser wallet and simultaneously with Infura; or many stores each connected to a different chains at the same time. @@ -395,23 +390,24 @@ different chains at the same time. In this case, use the `makeEvmStores` factory function as below : ```js - import { makeEvmStores } from 'svelte-web3' +import { makeEvmStores } from 'svelte-web3' - let evmStores, web3, connected, selectedAccount, chainId, chainData - ({ web3, connected, selectedAccount, chainId, chainData, ...evmStores } = makeEvmStores('')) +let evmStores, web3, connected, selectedAccount, chainId, chainData +;({ web3, connected, selectedAccount, chainId, chainData, ...evmStores } = + makeEvmStores('')) - evmStores.setProvider('https://rpc.slock.it/goerli') +evmStores.setProvider('https://rpc.slock.it/goerli') ``` `` can be an arbitrary name to be able to retrieve the store with the function `getChainStore` without reinitializing the conection: - ```js - import { getChainStore } from 'svelte-web3' +import { getChainStore } from 'svelte-web3' - let evmStores, web3, connected, selectedAccount, chainId, chainData - ({ web3, connected, selectedAccount, chainId, chainData, ...evmStores } = getChainStore('')) +let evmStores, web3, connected, selectedAccount, chainId, chainData +;({ web3, connected, selectedAccount, chainId, chainData, ...evmStores } = + getChainStore('')) ``` The `web3` store and all other derived stores will work the same way as with the default store. @@ -421,14 +417,15 @@ If you want to use the different chain stores in the same Svelte file stores this way : ```js - let evmStores_A, web3_A, evmStores_B, web3_B - - ({ web3: web3_A, ...evmStores_A } = makeEvmStores('')) +let evmStores_A, web3_A, evmStores_B, web3_B +;({ web3: web3_A, ...evmStores_A } = makeEvmStores(''))( ({ web3: web3_B, ...evmStores_B } = makeEvmStores('')) +) ``` + ## FAQ -### *What would be the most basic scaffolding to get Svelte + web3 running* +### _What would be the most basic scaffolding to get Svelte + web3 running_ Assuming that you already have a working injected provider like MetaMask in your browser: @@ -436,19 +433,22 @@ Assuming that you already have a working injected provider like MetaMask in your 2. cd myapp && npm install svelte-web3 3. add `web3.js` script loading tag inside the `index.html` header (see above) 4. add this minimal connection code in App.svelte: + ```js - import { onMount } from 'svelte' - import { defaultEvmStores as evm, selectedAccount, chainId } from 'svelte-web3' - onMount( evm.setProvider ) +import { onMount } from 'svelte' +import { defaultEvmStores as evm, selectedAccount, chainId } from 'svelte-web3' +onMount(evm.setProvider) ``` + 5. use the stores in the HTML + ```html -

account: {$selectedAccount} / chainId: {$chainId}

+

account: {$selectedAccount} / chainId: {$chainId}

``` -6. `npm run dev` +6. `npm run dev` -### *X doesn't work after `await defaultEvmStores.setProvider()`* +### _X doesn't work after `await defaultEvmStores.setProvider()`_ It's not sufficient to `await` for the `setProvider` to be certain that other derived stores have been populated. Instead you should subscribe @@ -461,10 +461,10 @@ on ```js import { defaultEvmStores as evm, web3, selectedAccount } from 'svelte-web3' -selectedAccount.subscribe(async $selectedAccount => { - if (!$selectedAccount) return - // do stuff here - // ... +selectedAccount.subscribe(async ($selectedAccount) => { + if (!$selectedAccount) return + // do stuff here + // ... }) onMount(() => { @@ -472,20 +472,18 @@ onMount(() => { }) ``` -### *how to auto-connect on page load?* +### _how to auto-connect on page load?_ It is out of scope of this package to implement this function but it generally depends on the type of provider you are using and a way to store connection information between page loads (for example by using localStorage). - ## Examples If you are using `svelte-web3` to build an open source Dapp, let us know if you want to be listed in this section. - ### Svelte basic example (using Vite) Please check [examples/svelte-vite-template-web3 on github](https://github.com/clbrge/svelte-web3/tree/master/examples/svelte-vite-template-web3). @@ -500,7 +498,6 @@ Please check [examples/sveltekit-app-template-web3 on github](https://github.com Please check [examples/svelte-app-template-web3 on github](https://github.com/clbrge/svelte-web3/tree/master/examples/svelte-app-template-web3). - Contains demos to use the default store and multi stores. ### Sapper basic example (based on webpack template) @@ -509,9 +506,8 @@ Contains demos to use the default store and multi stores. Please check [examples/sapper-app-template-web3 on github](https://github.com/clbrge/svelte-web3/tree/master/examples/sapper-app-template-web3). - ### tradingstrategy.ai presented at EthLisbon 2021 A website presented in EthLisbon 2021, used svelte-web3 (version 2) for building the frontend. : -* Tutorial: https://tradingstrategy.ai/blog/building-cryptocurrency-website +- Tutorial: https://tradingstrategy.ai/blog/building-cryptocurrency-website diff --git a/package.json b/package.json index d8efaee..19becad 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ }, "scripts": { "update-chains": "node ./scripts/update-chains.mjs", - "lint": "prettier-standard --lint 'src/**/*.js'", + "format": "prettier --plugin-search-dir . --write .", "build": "rollup -c" }, "prettier": "prettier-config-standard", @@ -47,9 +47,7 @@ "web3": "1.9.0" }, "lint-staged": { - "*": [ - "prettier-standard --lint" - ] + "*.{js,json,md}": "prettier --write" }, "release-it": { "github": { diff --git a/rollup.config.mjs b/rollup.config.mjs index eeb580b..1c5f147 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -1,16 +1,16 @@ -import dts from "rollup-plugin-dts"; +import dts from 'rollup-plugin-dts' export default [ { - input: "./src/stores.js", + input: './src/stores.js', output: [ - { file: "dist/index.mjs", format: "es" }, - { file: "dist/index.js", format: "umd", name: "web3store" }, + { file: 'dist/index.mjs', format: 'es' }, + { file: 'dist/index.js', format: 'umd', name: 'web3store' } ] }, { - input: "./src/svelte-web3.d.ts", - output: [{ file: "dist/svelte-web3.d.ts", format: "es" }], - plugins: [dts()], - }, + input: './src/svelte-web3.d.ts', + output: [{ file: 'dist/svelte-web3.d.ts', format: 'es' }], + plugins: [dts()] + } ] diff --git a/scripts/update-chains.mjs b/scripts/update-chains.mjs index 9caefd4..091df30 100644 --- a/scripts/update-chains.mjs +++ b/scripts/update-chains.mjs @@ -3,22 +3,22 @@ import fetch from 'node-fetch' import { writeFile } from 'fs/promises' const run = async () => { - const res = await fetch('https://chainid.network/chains.json') const chains = await res.json() - if (!chains.map( c => c.name ).includes('Ethereum Mainnet')) { + if (!chains.map((c) => c.name).includes('Ethereum Mainnet')) { throw new Error('something wrong... check!') } - await writeFile('./src/chains.js', ` + await writeFile( + './src/chains.js', + ` const chains = ${util.inspect(chains, { depth: null, maxArrayLength: null })} export default chains ` -) - + ) } run() diff --git a/src/stores.js b/src/stores.js index 24c211f..35ce513 100644 --- a/src/stores.js +++ b/src/stores.js @@ -40,7 +40,8 @@ const getWindowEthereum = () => { } // always get chainId as number -const alwaysNumber = n => Web3.utils.isHex(n) ? Web3.utils.hexToNumber(n) : n +const alwaysNumber = (n) => + Web3.utils.isHex(n) ? Web3.utils.hexToNumber(n) : n export const createStore = () => { const { emit, get, subscribe, assign, deleteAll } = proxied() @@ -73,10 +74,11 @@ export const createStore = () => { emit() } - const accountsChangedHandler = accounts => switch1193Provider({ accounts }) - const chainChangedHandler = chainId => switch1193Provider({ chainId: alwaysNumber(chainId) }) + const accountsChangedHandler = (accounts) => switch1193Provider({ accounts }) + const chainChangedHandler = (chainId) => + switch1193Provider({ chainId: alwaysNumber(chainId) }) // TODO better error support ? - const disconnectHandler = error => switch1193Provider({ error }) + const disconnectHandler = (error) => switch1193Provider({ error }) const init = () => { loadWeb3() @@ -160,7 +162,9 @@ export const createStore = () => { } const setBrowserProvider = () => { - console.warn('[svelte-web3] setBrowserProvider is deprecated. Please use setProvider() without argument instead.') + console.warn( + '[svelte-web3] setBrowserProvider is deprecated. Please use setProvider() without argument instead.' + ) return setProvider() } @@ -199,7 +203,7 @@ const allStores = {} const noData = { rpc: [], explorers: [{}], faucets: [], nativeCurrency: {} } -const getData = id => { +const getData = (id) => { if (!id || !Web3.utils) return noData if (Web3.utils.isHexStrict(id)) id = Web3.utils.hexToNumber(id) for (const data of chains) { @@ -210,35 +214,35 @@ const getData = id => { const subStoreNames = ['web3', 'selectedAccount', 'connected', 'chainId'] -export const makeEvmStores = name => { +export const makeEvmStores = (name) => { const evmStore = (allStores[name] = createStore()) const registry = createContractStore() const target = {} - allStores[name].web3 = derived(evmStore, $evmStore => { + allStores[name].web3 = derived(evmStore, ($evmStore) => { if (!$evmStore.web3) return { utils: Web3.utils, version: Web3.version } return $evmStore.web3 }) allStores[name].selectedAccount = derived( evmStore, - $evmStore => $evmStore.selectedAccount + ($evmStore) => $evmStore.selectedAccount ) allStores[name].connected = derived( evmStore, - $evmStore => $evmStore.connected + ($evmStore) => $evmStore.connected ) - allStores[name].chainId = derived(evmStore, $evmStore => $evmStore.chainId) - allStores[name].chainData = derived(evmStore, $evmStore => + allStores[name].chainId = derived(evmStore, ($evmStore) => $evmStore.chainId) + allStores[name].chainData = derived(evmStore, ($evmStore) => $evmStore.chainId ? getData($evmStore.chainId) : {} ) allStores[name].evmProviderType = derived( evmStore, - $evmStore => $evmStore.evmProviderType + ($evmStore) => $evmStore.evmProviderType ) - allStores[name].walletType = derived(evmStore, $evmStore => { + allStores[name].walletType = derived(evmStore, ($evmStore) => { if (!$evmStore.eipProvider) return null if (typeof $evmStore.eipProvider === 'string') return $evmStore.eipProvider if ($evmStore.eipProvider.isNiftyWallet) return 'Nifty' @@ -253,18 +257,22 @@ export const makeEvmStores = name => { }) allStores[name].contracts = derived( - [ evmStore, registry ], - ([ $evmStore, $registry ]) => { + [evmStore, registry], + ([$evmStore, $registry]) => { if (!$evmStore.connected) return target for (let key of Object.keys($registry)) { - target[key] = new $evmStore.web3.eth.Contract($registry[key][1], $registry[key][0], $registry[key][2]) + target[key] = new $evmStore.web3.eth.Contract( + $registry[key][1], + $registry[key][0], + $registry[key][2] + ) } return target } ) // force one subscribtion on $contracts so it's defined via proxy - allStores[name].contracts.subscribe(()=>{}) + allStores[name].contracts.subscribe(() => {}) return new Proxy(allStores[name], { get: function (internal, property) { @@ -297,7 +305,7 @@ export const makeEvmStores = name => { }) } -export const getChainStore = name => { +export const getChainStore = (name) => { if (!allStores[name]) throw new Error(`[svelte-web3] chain store ${name} does not exist`) return allStores[name] @@ -307,7 +315,8 @@ loadWeb3() export { chains as allChainsData } -export const getChainDataByChainId = id => (chains.filter(o => o.chainId === id) || [{}])[0] +export const getChainDataByChainId = (id) => + (chains.filter((o) => o.chainId === id) || [{}])[0] export const defaultEvmStores = makeEvmStores('default') @@ -326,10 +335,12 @@ export const walletType = allStores.default.walletType // TODO legacy makeContractStore to be removed export const makeContractStore = (abi, address, defaults = {}) => - console.warn('[svelte-web3] makeContractStore is deprecated. Please use the new $contracts store') - derived([web3, connected], ([$web3, $connected]) => { - if ($connected && $web3.eth) { - return new $web3.eth.Contract(abi, address, defaults) - } - return null - }) + console.warn( + '[svelte-web3] makeContractStore is deprecated. Please use the new $contracts store' + ) +derived([web3, connected], ([$web3, $connected]) => { + if ($connected && $web3.eth) { + return new $web3.eth.Contract(abi, address, defaults) + } + return null +}) diff --git a/src/svelte-web3.d.ts b/src/svelte-web3.d.ts index 9a6bef7..a88e066 100644 --- a/src/svelte-web3.d.ts +++ b/src/svelte-web3.d.ts @@ -1,146 +1,146 @@ -import { Readable } from "svelte/store"; -import Web3 from "web3"; -import { provider } from "web3-core"; -import { ContractOptions, Contract } from "web3-eth-contract"; +import { Readable } from 'svelte/store' +import Web3 from 'web3' +import { provider } from 'web3-core' +import { ContractOptions, Contract } from 'web3-eth-contract' -declare module "svelte-web3" { - /** - * JavaScript CAIP-2 representation object. - * @see https://github.com/ChainAgnostic/CAIPs/blob/master/CAIPs/caip-2.md - */ - interface ChainData { - name: string; - chain: string; - network: string; - rpc: string[]; - faucets: string[]; - nativeCurrency: { - name: string; - symbol: string; - decimals: number; - }; - infoURL: string; - shortName: string; - chainId: number; - networkId: number; - icon: string; - explorers: { - name: string; - url: string; - icon: string; - standard: string; - }[]; +declare module 'svelte-web3' { + /** + * JavaScript CAIP-2 representation object. + * @see https://github.com/ChainAgnostic/CAIPs/blob/master/CAIPs/caip-2.md + */ + interface ChainData { + name: string + chain: string + network: string + rpc: string[] + faucets: string[] + nativeCurrency: { + name: string + symbol: string + decimals: number } + infoURL: string + shortName: string + chainId: number + networkId: number + icon: string + explorers: { + name: string + url: string + icon: string + standard: string + }[] + } - interface ChainStore { - /** - * Enables a connection with the current window provider. - * Note that your code need to be in browser context when setProvider is running. - * So you may want to use onMount when using Sapper or Sveltekit. - * @param provider An url string or a valid provider object (as returned by web3Modal or WalletConnect for example) - * @param index Select another account than the default when possible. - */ - setProvider(provider?: provider, index?: string): Promise; - /** - * Forces a disconnect (and event subscriptions from a provider) - */ - disconnect(): Promise; - /** - * The whole Web3.js API. It must be references as `$web3` and not `web3` since it is a Svelte store. - * @see https://web3js.readthedocs.io/en/v1.5.2/web3.html - */ - readonly web3: Readable; - /** - * Current selected account address if connected, `null` otherwise. - */ - readonly selectedAccount: Readable; - /** - * `true` if connection to the provider was successful. - */ - readonly connected: Readable; - /** - * The current blockchain CAIP-2 data if connected, empty object otherwise. - */ - readonly chainData: Readable; - /** - * The current chainId (if connected). - */ - readonly chainId: Readable; - } - - // ---------- DEFAULT CHAIN STORE EXPORTS ---------- + interface ChainStore { /** - * The main connection helper and derived Svelte stores + * Enables a connection with the current window provider. + * Note that your code need to be in browser context when setProvider is running. + * So you may want to use onMount when using Sapper or Sveltekit. + * @param provider An url string or a valid provider object (as returned by web3Modal or WalletConnect for example) + * @param index Select another account than the default when possible. */ - const defaultEvmStores: ChainStore; - + setProvider(provider?: provider, index?: string): Promise /** - * The whole Web3.js API for the `defaultEvmStores`. It must be references as `$web3` and not `web3` since it is a Svelte store. - * @see https://web3js.readthedocs.io/en/v1.5.2/web3.html + * Forces a disconnect (and event subscriptions from a provider) */ - const web3: Readable; + disconnect(): Promise /** - * Current selected account address of the `defaultEvmStores` if connected, `null` otherwise. + * The whole Web3.js API. It must be references as `$web3` and not `web3` since it is a Svelte store. + * @see https://web3js.readthedocs.io/en/v1.5.2/web3.html */ - const selectedAccount: Readable; + readonly web3: Readable /** - * `true` if connection to the provider was successful for `defaultEvmStores`. + * Current selected account address if connected, `null` otherwise. */ - const connected: Readable; + readonly selectedAccount: Readable /** - * The current blockchain CAIP-2 data of `defaultEvmStores` if connected, empty object otherwise. + * `true` if connection to the provider was successful. */ - const chainData: Readable; + readonly connected: Readable /** - * The current chainId of `defaultEvmStores` if connected. + * The current blockchain CAIP-2 data if connected, empty object otherwise. */ - const chainId: Readable; - + readonly chainData: Readable /** - * This can be used to create several stores, each connected to different providers. - * This lets you manage different chains at the same time. - * @param name Unique name for the newly created store. The name `default` is used to create `defaultEvmStores` so you shouldn't use it unless you want to override the default store. + * The current chainId (if connected). */ - function makeEvmStores(name: string): ChainStore; - /** - * Retrieves the store without re-initializing the connection: - * @param name Name of the previously created store. - * @returns The store if connected, `null` otherwise. - */ - function getChainStore(name: string): ChainStore; + readonly chainId: Readable + } - /** - * You might want to access all chains CAIP-2 data directly without using the chainData store. - * In this case, use the getter allChainsData, it returns the list of all CAIP-2 data available. - */ - const allChainsData: ChainData[]; + // ---------- DEFAULT CHAIN STORE EXPORTS ---------- + /** + * The main connection helper and derived Svelte stores + */ + const defaultEvmStores: ChainStore - /** - * Allows you to create a Svelte derived store of a web3.eth.Contract object instance. - * It takes the same parameters as a ̀new web3.eth.Contract` call. - * @param jsonInterface The contract ABI - * @param address The contract address - * @param options The contract options - * @returns A Svelte derived store of a web3.eth.Contract object instance - */ - function makeContractStore( - jsonInterface: any, - address?: string, - options?: ContractOptions - ): Readable; + /** + * The whole Web3.js API for the `defaultEvmStores`. It must be references as `$web3` and not `web3` since it is a Svelte store. + * @see https://web3js.readthedocs.io/en/v1.5.2/web3.html + */ + const web3: Readable + /** + * Current selected account address of the `defaultEvmStores` if connected, `null` otherwise. + */ + const selectedAccount: Readable + /** + * `true` if connection to the provider was successful for `defaultEvmStores`. + */ + const connected: Readable + /** + * The current blockchain CAIP-2 data of `defaultEvmStores` if connected, empty object otherwise. + */ + const chainData: Readable + /** + * The current chainId of `defaultEvmStores` if connected. + */ + const chainId: Readable + + /** + * This can be used to create several stores, each connected to different providers. + * This lets you manage different chains at the same time. + * @param name Unique name for the newly created store. The name `default` is used to create `defaultEvmStores` so you shouldn't use it unless you want to override the default store. + */ + function makeEvmStores(name: string): ChainStore + /** + * Retrieves the store without re-initializing the connection: + * @param name Name of the previously created store. + * @returns The store if connected, `null` otherwise. + */ + function getChainStore(name: string): ChainStore + + /** + * You might want to access all chains CAIP-2 data directly without using the chainData store. + * In this case, use the getter allChainsData, it returns the list of all CAIP-2 data available. + */ + const allChainsData: ChainData[] + + /** + * Allows you to create a Svelte derived store of a web3.eth.Contract object instance. + * It takes the same parameters as a ̀new web3.eth.Contract` call. + * @param jsonInterface The contract ABI + * @param address The contract address + * @param options The contract options + * @returns A Svelte derived store of a web3.eth.Contract object instance + */ + function makeContractStore( + jsonInterface: any, + address?: string, + options?: ContractOptions + ): Readable - export { - ChainData, - ChainStore, - web3, - selectedAccount, - connected, - chainId, - chainData, - defaultEvmStores, - makeEvmStores, - getChainStore, - allChainsData, - makeContractStore, - }; + export { + ChainData, + ChainStore, + web3, + selectedAccount, + connected, + chainId, + chainData, + defaultEvmStores, + makeEvmStores, + getChainStore, + allChainsData, + makeContractStore + } }