Connect to Wallets

It is possible to use Tempo with EVM-compatible wallets that support the Tempo network, or support adding custom networks (like MetaMask).

You can use these wallets when building your application on Tempo.

This guide will walk you through how to set up your application to connect to wallets.

Connect to Wallets

demo

Connect your browser wallet.

No browser wallets found.

Wagmi Setup

Set up Wagmi

Ensure that you have set up your project with Wagmi by following the guide.

Configure Wagmi

Next, let's ensure Wagmi is configured correctly to connect to wallets.

Ensure we have multiInjectedProviderDiscovery set to true to display injected browser wallets.

We can also utilize wallet connectors from Wagmi like metaMask to support mobile devices.

config.ts

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

Display Connect Buttons

After that, we will set up "Connect" buttons so that the user can connect to their wallet.

We will create a new ConnectWallet.tsx component to work in.

No browser wallets found.

Connect.tsx

import { useConnect, useConnectors } from 'wagmi'
 
export function Connect() {
  const connect = useConnect()
  const connectors = useConnectors()
 
  return (
    <div>
      {connectors.map((connector) => (
        <button
          key={connector.id}
          onClick={() => connect.connect({ connector })}
          type="button"
        >
          {connector.name}
        </button>
      ))}
    </div>
  )
}

Display Account & Sign Out

After the user has connected to their wallet, we can display the account information and a sign out button.

We will create a new Account.tsx component to work in.

No browser wallets found.

Account.tsx

import { useConnection, useDisconnect } from 'wagmi'
 
export function Account() {
  const account = useConnection()
  const disconnect = useDisconnect()
 
  return (
    <div>
      <div>
        {account.address?.slice(0, 6)}...{account.address?.slice(-4)}
      </div>
      <button onClick={() => disconnect.disconnect()}>
        Sign out
      </button>
    </div>
  )
}

Display "Add Tempo" Button

If the wallet is not on the Tempo network, we can display a "Add Tempo" button so that the user can add the network to their wallet.

No browser wallets found.

Account.tsx

import { useConnection, useDisconnect, useSwitchChain } from 'wagmi'
import { tempo } from 'tempo.ts/chains'
 
export function Account() {
  const account = useConnection()
  const disconnect = useDisconnect()
  const switchChain = useSwitchChain() 
 
  return (
    <div>
      <div>
        {account.address?.slice(0, 6)}...{account.address?.slice(-4)}
      </div>
      <button onClick={() => disconnect.disconnect()}>
        Sign out
      </button>
 
      <button
        onClick={() =>
          switchChain.switchChain({ 
            chainId: tempo.id, 
            addEthereumChainParameter: { 
              nativeCurrency: { 
                name: 'USD', 
                decimals: 18, 
                symbol: 'USD', 
              }, 
            }, 
          }) 
        }
      > 
        Add {chain.name} to wallet 
      </button> 
    </div>
  )
}

Third-Party Libraries

You can also use a third-party Wallet Connection library to handle the onboarding & connection of wallets.

Such libraries include: Privy, ConnectKit, AppKit, Dynamic, and RainbowKit.

The above libraries are all built on top of Wagmi, handle all the edge cases around wallet connection.

Add to Wallet Manually

You can add Tempo testnet to a wallet that supports custom networks (e.g. MetaMask) manually.

For example, if you are using MetaMask:

Open MetaMask and click on the menu in the top right and select "Networks"
Click "Add a custom network"
Enter the network details:

Name	`Tempo Testnet (Andantino)`
Currency	`USD`
Chain ID	`42429`
HTTP URL	`https://rpc.testnet.tempo.xyz`
WebSocket URL	`wss://rpc.testnet.tempo.xyz`
Block Explorer	`https://explore.tempo.xyz`

The official documentation from MetaMask on this process is also available here.