Svelte Wagmi

Use the wagmi/core library as a collection of readable Svelte stores for Svelte or SvelteKit.

Installation

Add the svelte-wagmi@latest package

pnpm i svelte-wagmi@latest

Usages

import {
    configureWagmi,
    wagmiLoaded,
    connected,
    chainId,
    web3Modal,
    signerAddress,
    loading,
    connection,
    disconnectWagmi
} from 'svelte-wagmi';

• connected: store value is true if a connection has been set up.
• wagmiLoaded: store value is true if Svelte Wagmi is Successfully Configured.
• chainId: store value is the current chainId when connected.
• signerAddress: store value is a shortcut to get eth address when connected.
• loading: store value is true if a connection is being set up.
• web3Modal: store value is a of the walletconnect modal.

import { configureWagmi, wagmiLoaded } from 'svelte-wagmi';
import { onMount } from 'svelte';

const options = {
    walletconnect: false,
    walletconnectProjectID: '',
    alchemyKey: '',
    autoConnect: true
}

onMount(async () => await configureWagmi(options));


{#if $wagmiLoaded}
    <h1>Svelte Wagmi Loaded</h1>
{/if}

• configureWagmi should be on the +layout.svelte root folder
• wagmiLoaded should always render the layout html first.

Note

In a production app, it is not recommended to use a public provider (no alchemy key).

import { connection, web3Modal } from 'svelte-wagmi';

// injected connector (metamask) params: chainId: defaults to 1
<button on:click={async () => await connection(1)}>connect</button>;

// walletconnect
<button on:click={async () => $web3Modal.openModal()}>connect</button>;

Web3Modal

Docs to use the Modal is here

Using the stores

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.

<script>
    import { connected, chainId, signerAddress } from 'svelte-wagmi';
</script>

{#if !$connected}

<p>My application is not yet connected</p>

{:else}

<p>Connected to chain (id {$chainId}) with account ($signerAddress)</p>

{/if}

Using Wagmi/core

You can use any wagmi/core functions

<script>
        import { getAccount, switchNetwork } from '@wagmi/core';

        const account = getAccount();

        const network = await switchNetwork({
      chainId: 69,
    })
</script>

Note

changing network using @wagmi/core will also chage the svelte-wagmi: chainId store

$signerAddress and getAccount() are the same ETH address

Roadmap

this is a basic package I made for projects and can add more features if people like this.