Create a Stablecoin

Create your own stablecoin on Tempo using the TIP-20 token standard. TIP-20 tokens are designed specifically for payments with built-in compliance features, role-based permissions, and integration with Tempo's payment infrastructure.

Demo

By the end of this guide, you will be able to create a stablecoin on Tempo.

Create a Stablecoin

demo

Create an account, or use an existing one.

Add testnet funds to your account.

Create & deploy a token to testnet.

Steps

Set up Wagmi & integrate accounts

Ensure that you have set up your project with Wagmi and integrated accounts by following either of the guides:

Add testnet funds¹

Before we send off a transaction to deploy our stablecoin to the Tempo testnet, we need to make sure our account is funded with a stablecoin to cover the transaction fee.

As we have configured our project to use AlphaUSD (0x20c000…0001) as the default fee token, we will need to add some AlphaUSD to our account.

Luckily, the built-in Tempo testnet faucet supports funding accounts with AlphaUSD.

Add Funds

Add testnet funds to your account.

AddFunds.ts

import { Hooks } from 'tempo.ts/wagmi'
import { useConnection } from 'wagmi'
 
export function AddFunds() {
  const { address } = useConnection()
  const addFunds = Hooks.faucet.useFund()
 
  return (
    <button onClick={() => addFunds.mutate({ account: address })}>
      Add Funds
    </button>
  )
}

Add form fields

Now that we have some funds to cover the transaction fee in our account, we can create a stablecoin.

Let's create a new component and add some input fields for the name and symbol of our stablecoin, as shown in the demo.

Create Form

demo

Add testnet funds to your account.

Create & deploy a token to testnet.

CreateStablecoin.tsx

export function CreateStablecoin() {
  return (
    <div>
      <form
        onSubmit={(event) => {
          event.preventDefault()
          const formData = new FormData(event.target as HTMLFormElement)
          const name = formData.get('name') as string
          const symbol = formData.get('symbol') as string
        }}
      >
        <input type="text" name="name" placeholder="demoUSD" required />
        <input type="text" name="symbol" placeholder="DEMO" required />
        <button type="submit">
          Create
        </button>
      </form>
    </div>
  )
}

Add submission logic

Now that we have some input fields, we need to add some logic to handle the submission of the form to create the stablecoin.

After this step, your users will be able to create a stablecoin by clicking the "Create" button!

Create Form

demo

Create & deploy a token to testnet.

CreateStablecoin.tsx

import { Hooks } from 'tempo.ts/wagmi'
 
export function CreateStablecoin() {
  const create = Hooks.token.useCreateSync() 
 
  return (
    <div>
      <form
        onSubmit={(event) => {
          event.preventDefault()
          const formData = new FormData(event.target as HTMLFormElement)
          const name = formData.get('name') as string
          const symbol = formData.get('symbol') as string
          create.mutate({ 
            name, 
            symbol, 
            currency: 'USD', 
          }) 
        }}
      >
        <input type="text" name="name" placeholder="demoUSD" required />
        <input type="text" name="symbol" placeholder="DEMO" required />
        <button type="submit">
          Create
        </button>
      </form>
    </div>
  )
}

Add success state

Now that users can submit the form and create a stablecoin, let's add a basic success state to display the name of the stablecoin and a link to the transaction receipt.

CreateStablecoin.tsx

import { Hooks } from 'tempo.ts/wagmi' 
 
export function CreateStablecoin() {
  const create = Hooks.token.useCreateSync() 
 
  return (
    <div>
      <form
        onSubmit={(event) => {
          event.preventDefault()
          const formData = new FormData(event.target as HTMLFormElement)
          const name = formData.get('name') as string
          const symbol = formData.get('symbol') as string
          create.mutate({ 
            name, 
            symbol, 
            currency: 'USD', 
          }) 
        }}
      >
        <input type="text" name="name" placeholder="demoUSD" required />
        <input type="text" name="symbol" placeholder="DEMO" required />
        <button type="submit">
          Create
        </button>
      </form>
 
      {create.data && ( 
        <div> 
          {create.data.name} created successfully! 
          <a href={`https://explore.tempo.xyz/tx/${create.data.receipt.transactionHash}`}> 
            View receipt 
          </a> 
        </div> 
      )}
    </div>
  )
}

Next steps

Now that you have created your first stablecoin, you can now:

learn the Best Practices below
follow a guide on how to mint and more with your stablecoin.

Best Practices

Loading State

When the user is creating a stablecoin, we should show loading state to indicate that the process is happening.

We can use the isPending property from the useCreateSync hook to show pending state to the user on our "Create" button.

<button 
  disabled={create.isPending}
  type="submit"
>
  {create.isPending ? 'Creating...' : 'Create'}
</button>

Error Handling

If an error unexpectedly occurs, we should display an error message to the user.

We can use the error property from the useCreateSync hook to show error state to the user.

export function CreateStablecoin() {
  // ...
 
  if (create.error) 
    return <div>Error: {create.error.message}</div> 
 
  // ...
}

Learning Resources

TIP20 Tokens

Learn more about TIP-20 tokens on Tempo