Getting Started

Overview

Wagmi is a Svelte library for Ethereum.

Manual Installation

To manually add Wagmi to your project, install the required packages.

pnpm

pnpm add wagmi viem@2.x https://pkg.pr.new/@tanstack/svelte-query@ccce0b8

npm

npm install wagmi viem@2.x https://pkg.pr.new/@tanstack/svelte-query@ccce0b8

yarn

yarn add wagmi viem@2.x https://pkg.pr.new/@tanstack/svelte-query@ccce0b8

bun

bun add wagmi viem@2.x https://pkg.pr.new/@tanstack/svelte-query@ccce0b8

• Viem is a TypeScript interface for Ethereum that performs blockchain operations.
• TanStack Query is an async state manager that handles requests, caching, and more.

Create Config

Create and export a new Wagmi config using createConfig.

config.ts

import { http, createConfig } from '@wagmi/svelte'
import { mainnet, sepolia } from '@wagmi/svelte/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Wrap App in Context Provider

Wrap your app in the WagmiProvider component and pass the config you created earlier to the config property. You may do this in the +layout.svelte file, or in another component for more fine-grained control.

+layout.svelte

<script lang="ts">
  import { WagmiProvider } from '@wagmi/svelte'
  import { config } from './config'

  const { children } = $props();
</script>

<WagmiProvider config={config}>
  {@render children()}
</WagmiProvider>

config.ts

import { http, createConfig } from '@wagmi/svelte'
import { mainnet, sepolia } from '@wagmi/svelte/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Setup TanStack Query

Inside the WagmiProvider, wrap your app in a TanStack Query Context Provider, e.g. QueryClientProvider, and pass a new QueryClient instance to the client property.

+layout.svelte

<script lang="ts">
  import { WagmiProvider } from '@wagmi/svelte'
  import { config } from './config'
  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'

  const { children } = $props();

  const queryClient = new QueryClient();
</script>

<WagmiProvider config={config}>
  <QueryClientProvider client={queryClient}>
    {@render children()}
  </QueryClientProvider>
</WagmiProvider>

config.ts

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Check out the TanStack Query docs to learn about the library, APIs, and more.

Use Wagmi

Now that everything is set up, every component inside the Wagmi and TanStack Query Providers can use Wagmi React Hooks.

+page.svelte

<script lang="ts">
  import { useAccount, useEnsName } from '@wagmi/svelte';

  const account = $derived.by(useAccount());
  const ensName = $derived.by(useEnsName(() => ({ address: account.address })));
</script>

{#if ensName.status === 'loading'}
  <div>Loading ENS name</div>
{:else if ensName.status === 'error'}
  <div>Error fetching ENS name: {ensName.error.message}</div>
{:else}
  <div>ENS name: {ensName.data}</div>
{/if}

+layout.svelte

<script lang="ts">
  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
  import { WagmiProvider } from '@wagmi/svelte';
  import { config } from './config';
  import Profile from './Profile.svelte';

  const queryClient = new QueryClient();

  const { children } = $props();
</script>

<WagmiProvider {config}>
  <QueryClientProvider client={queryClient}>
    {@render children()}
  </QueryClientProvider>
</WagmiProvider>

config.ts

import { http, createConfig } from '@wagmi/svelte'
import { mainnet, sepolia } from '@wagmi/svelte/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

DANGER

Reactivity in Svelte is different than other frameworks! I would highly suggest you read the page on Reactivity