Skip to content

Setup

Setup the Tempo extension for Wagmi by following the steps below.

Install

To add Wagmi to your project, install the required packages:

npm
npm i tempo.ts wagmi viem @tanstack/react-query
  • Viem is a TypeScript interface for the EVM 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.

import { tempo } from 'tempo.ts/chains'
import { KeyManager, webAuthn } from 'tempo.ts/wagmi'
import { createConfig, http } from 'wagmi'
 
export const config = createConfig({
  connectors: [
    webAuthn({
      keyManager: KeyManager.localStorage(),
    }),
  ],
  chains: [tempo({ feeToken: '0x20c0000000000000000000000000000000000001' })],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})

In this example, Wagmi is configured to use the Tempo chain and webAuthn connector to enable Passkeys. Check out the createConfig docs for more configuration options.

Wrap App in Context Provider

Wrap your app in the WagmiProvider React Context Provider and pass the config you created earlier to the config property.

app.tsx
import { WagmiProvider } from 'wagmi'
import { config } from './config'
 
function App() {
  return (
    <WagmiProvider config={config}> 
      {/** ... */}
    </WagmiProvider> 
  )
}

Check out the WagmiProvider docs to learn more about React Context in Wagmi.

Setup TanStack Query

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

app.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'
 
const queryClient = new QueryClient() 
 
function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}> 
        {/** ... */} 
      </QueryClientProvider> 
    </WagmiProvider>
  )
}

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

Use Wagmi Hooks

Now that everything is set up, we can now use regular Wagmi Hooks (e.g. useSendTransactionSync) that are decorated with Tempo properties like calls (batch transactions), feePayer (fee sponsorship), nonceKey (concurrent transactions) and more!

balance.tsx
import { useAccount, useSendTransactionSync } from 'wagmi'
 
export function TokenMetadata() {
  const { sendTransactionSync } = useSendTransactionSync()
 
  return (
    <button
      onClick={() =>
        sendTransactionSync({
          calls: [
            {
              data: '0xcafebabe00000000000000000000000000000001',
              to: '0xdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef'
            },
            {
              data: '0xdeadbeef00000000000000000000000000000002',
              to: '0xfeedfacefeedfacefeedfacefeedfacefeedface'
            },
            {
              data: '0xfeedface00000000000000000000000000000003',
              to: '0xfeedfacefeedfacefeedfacefeedfacefeedface'
            },
          ],
          feePayer: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
          nonceKey: 1337n,
        })
      }
    >
      Send transaction
    </button>
  )
}

Use Tempo Hooks

You can also use Tempo-specific Hooks:

balance.tsx
import { useAccount } from 'wagmi'
import { Hooks } from 'tempo.ts/wagmi'
 
const alphaUsd = '0x20c0000000000000000000000000000000000001'
 
export function TokenMetadata() {
  const { data: metadata, ...metadataQuery } = Hooks.token.useGetMetadata({ 
    token: alphaUsd 
  })
 
  if (metadataQuery.isError)
    return <div>Error fetching metadata: {metadataQuery.error.message}</div>
  if (metadataQuery.isLoading) return <div>Loading metadata...</div>
  return <div>{metadata.name} ({metadata.symbol})</div>
}

Next Steps

After you have set up your Tempo with Wagmi, you can now: