Use the web3.js library as a collection of readable svelte stores for Svelte, Sapper or Sveltekit.

1. add the svelte-web3 package

npm i svelte-web3

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 SvelteKit)

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

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

import { defaultChainStore, web3, selectedAccount, connected, chainData } from 'svelte-web3'

❗ 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!

To enable a connection with the current window provider:

defaultChainStore.setBrowserProvider()

Please note that your code need to be in browser context when setBrowserProvider is running. So you may want to use onMount when using Sapper or Sveltekit. Similarly, you cannot use setBrowserProvider in SSR context.

  onMount(
    () => {
      // add a test to return in SSR context
      defaultChainStore.setBrowserProvider()
    }
  )

To enable connection using an url string or a valid provider object (as returned by web3Modal or WalletConnect for example):

defaultChainStore.setProvider(<ws/https or http provider url or provider Object>)

Please check examples/svelte-app-template-web3/src/Web3Modal.svelte in github.

Simply call the function close directly on the store. For example with the default store:

defaultChainStore.close()

If a connection is successful, you can access the instantiated web3.js using the $ svelte store syntax :

$web3.eth.getBalance(<Ethereum address>)

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)

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:

• 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.

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.

chainData is a store returning the current JavaScript CAIP-2 representation object.

The information returned by the chainData store depends (like all other web3 stores) on which chain the current provider is connected. If the store has not yet been connected (with setProvider or setBrowserProvider), the store value will be undefined.

Below is the CAIP-2 formatted information when the default store is connected with the Ethereum Mainnet :

{
  "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"
  }]
}

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.

import { allChainsData } from 'svelte-web3'

console.log( allChainsData )

The function makeContractStore 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:

makeContractStore(jsonInterface[, address][, options])

This store is conveniently and automatically updated after connection and when the account or chain change.

You can also using the library to create several stores, each 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.

In this case, use the makeChainStore factory function as below :

  import { makeChainStore } from 'svelte-web3'

  let ethStore, web3, connected, selectedAccount, chainId, chainData
  ({ web3, connected, selectedAccount, chainId, chainData, ...ethStore } = makeChainStore('<id>'))

  ethStore.setProvider('https://rpc.slock.it/goerli')

<id> can be an arbitrary name to be able to retrieve the store with the function getChainStore without reinitializing the conection:

  import { getChainStore } from 'svelte-web3'

  let ethStore, web3, connected, selectedAccount, chainId, chainData
  ({ web3, connected, selectedAccount, chainId, chainData, ...ethStore } = getChainStore('<id>'))

The web3 store and all other derived stores will work the same way as with the default store.

If you want to use the different chain stores in the same svelte file (not advised, it's better to use subcomponents), you may renamed the stores this way :

  let ethStore_A, web3_A, ethStore_B, web3_B

  ({ web3: web3_A, ...ethStore_A } = makeChainStore('<id_A>'))
  ({ web3: web3_B, ...ethStore_B } = makeChainStore('<id_B>'))

Please check examples/svelte-app-template-web3 in github.

Contain both sub-examples to use the default store and multi stores.

Please check examples/sapper-app-template-web3 in github.