Getting Started

Overview

The Tempo Accounts SDK is a TypeScript library for applications and wallets to create, manage, and interact with accounts on Tempo.

Demo

Try sign in and make a payment on Tempo using the Accounts SDK.

Quick Prompt

You can integrate the Accounts SDK, and achieve a flow like the demo above by prompting your agent:

Read docs.tempo.xyz/accounts and integrate Tempo Wallet into my application

Architecture

The Accounts SDK is a router between your application and a signing Adapter (e.g. the Tempo Wallet dialog), exposed as an EIP-1193 Provider.

Adapters handle where keys live and who handles signing. The Accounts SDK currently ships with two adapters:

Your application interacts with the SDK through standard JSON-RPC methods (via Wagmi or Viem).

An example of a high-level flow of an Application requesting for a user to perform an action with their Tempo Wallet is shown below:

Install

The Tempo Accounts SDK is available as an NPM package under accounts

Wagmi Usage

The Tempo Accounts SDK is best used in conjunction with Wagmi to provide a seamless experience for developers and end-users.

import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { tempoWallet } from 'accounts/wagmi'
 
export const wagmiConfig = createConfig({
  chains: [tempo],
  connectors: [tempoWallet()], 
  transports: {
    [tempo.id]: http(),
  },
})

import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { webAuthn } from 'accounts/wagmi'
 
export const wagmiConfig = createConfig({
  chains: [tempo],
  connectors: [webAuthn({ authUrl: '/auth' })], 
  transports: {
    [tempo.id]: http(),
  },
})

import { useConnect, useConnectors } from 'wagmi'
 
function Connect() {
  const connect = useConnect()
  const connectors = useConnectors()
 
  return connectors?.map((connector) => (
    <button
      key={connector.uid}
      onClick={() => connect.connect({ connector })}
    >
      Connect
    </button>
  ))
}

Vanilla + Viem Usage

You can get started with the Tempo Accounts SDK by creating a new Provider instance. Once set up, you can use the provider to interact with accounts via JSON-RPC, or use Viem Actions with .getClient().

import { Provider } from 'accounts'
import { parseUnits } from 'viem'
import { tempoActions } from 'viem/tempo'
 
const provider = Provider.create()
 
const { accounts } = await provider.request({
  method: 'wallet_connect',
})
 
const client = provider.getClient().extend(tempoActions())
 
const { receipt } = await client.token.transferSync({
  token: '0x20c0000000000000000000000000000000000001',
  to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEbb',
  amount: parseUnits('10', 6),
})

Examples

Check out these examples to get started with the Tempo Accounts SDK.

Secure Origins (HTTPS)

The Tempo Accounts SDK is designed to be used on secure origins (HTTPS). If you are using HTTP, it will fallback to using a popup instead of an iframe. This is because WebAuthn is not supported on iframes embedded on insecure origins (HTTP).

Web frameworks typically default to HTTP in development environments. You will need to ensure to turn on HTTPS in development to leverage the iframe dialog.

Portless

Portless replaces port numbers with stable, named .localhost URLs and can enable HTTPS with auto-generated certificates.

npm install -g portless
portless run dev
# → https://myapp.localhost

Next.js

HTTPS can be enabled on Next.js' dev server by setting the --experimental-https flag on the next dev command.

next dev --experimental-https

Vite

HTTPS can be enabled on Vite's dev server by installing and configuring the vite-plugin-mkcert plugin.

npm i vite-plugin-mkcert

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mkcert from 'vite-plugin-mkcert'
 
export default defineConfig({
  plugins: [
    mkcert(),
    react(),
  ],
})

Getting Help

Have questions or building something cool with the Accounts SDK?

Join the Telegram group to chat with the team and other devs: @mpp_devs