Getting Started

Overview

Tempo is a purpose-built Layer 1 blockchain optimized for payments.

It enshrines features like token management, Fee AMM, and a stablecoin DEX directly into the protocol, as well as a Tempo transaction type with support for batch calls, fee sponsorship, configurable fee tokens, concurrent transactions, access keys, and scheduled execution.

Setup

Wagmi React and Core both have first-class support for Tempo with Hooks and Actions. To get started, first follow the Getting Started guide for React or Core and make sure your Viem version is >=2.43.3.

pnpm

pnpm add viem@>=2.43.3

npm

npm install viem@>=2.43.3

yarn

yarn add viem@>=2.43.3

```bash-vue [bun]
bun add viem@>=2.43.3

To dive a layer deeper, check out the Viem Tempo docs.

Use Wagmi Hooks

Now that everything is set up, we can 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!

tokenMetadata.tsx

import { useSendTransactionSync } from 'wagmi'

export function TokenMetadata() {
  const sendTransactionSync = useSendTransactionSync()

  return (
    <button
      onClick={() =>
        sendTransactionSync.mutate({
          calls: [
            {
              data: '0xcafebabe00000000000000000000000000000001',
              to: '0xdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef'
            },
            {
              data: '0xdeadbeef00000000000000000000000000000002',
              to: '0xfeedfacefeedfacefeedfacefeedfacefeedface'
            },
            {
              data: '0xfeedface00000000000000000000000000000003',
              to: '0xfeedfacefeedfacefeedfacefeedfacefeedface'
            },
          ],
          feePayer: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
          nonceKey: 1337n,
        })
      }
    >
      Send transaction
    </button>
  )
}

app.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'
import { TokenMetadata } from './tokenMetadata'

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <TokenMetadata />
      </QueryClientProvider>
    </WagmiProvider>
  )
}

config.ts

import { createConfig, http } from 'wagmi'
import { tempoTest } from 'wagmi/chains'
import { KeyManager, webAuthn } from 'wagmi/tempo'

export const config = createConfig({
  connectors: [
    webAuthn({
      keyManager: KeyManager.localStorage(),
    }),
  ],
  chains: [tempoTest],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempoTest.id]: http(),
  },
})

Use Tempo Hooks

You can also use Tempo-specific Hooks:

tokenMetadata.tsx

import { Hooks } from 'wagmi/tempo'

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>
}

app.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'
import { TokenMetadata } from './tokenMetadata'

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <TokenMetadata />
      </QueryClientProvider>
    </WagmiProvider>
  )
}

config.ts

import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { KeyManager, webAuthn } from 'wagmi/tempo'

export const config = createConfig({
  connectors: [
    webAuthn({
      keyManager: KeyManager.localStorage(),
    }),
  ],
  chains: [tempo],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})

Next Steps

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

• Guides & Examples Follow guides on how to use accounts, make payments, issue stablecoins, exchange stablecoins, and more!
• Tempo React Hooks Browse the collection of React Hooks and learn how to use them.
• Tempo Core Actions Browse the collection of Core Actions and learn how to use them.