BigBlocks

Deploy Token

Deploy a BSV21 fungible token to the BSV blockchain with symbol, supply, decimal precision, and an icon image

Deploy New Token

Deploy a BSV21 fungible token. All tokens are minted to your wallet on deployment.

SymbolNot required to be unique

Token IconSquare image recommended

Select Image

Max SupplyWhole tokens

21,000,000 tokens

Decimals0-18

"use client"

import { useState } from "react"
import {
  DeployToken,
  type DeployTokenParams,
  type DeployTokenResult,
} from "@/registry/bigblocks/blocks/deploy-token"

export function DeployTokenDemo() {
  const [lastResult, setLastResult] = useState<DeployTokenResult | null>(null)

  async function handleDeploy(
    params: DeployTokenParams
  ): Promise<DeployTokenResult> {
    // In a real application, you would call deployBsv21Token from @1sat/core:
    //
    // import { deployBsv21Token } from "@1sat/core"
    //
    // const tx = await deployBsv21Token({
    //   symbol: params.symbol,
    //   decimals: params.decimals,
    //   icon: { dataB64: params.iconBase64, contentType: params.iconContentType },
    //   initialDistribution: {
    //     address: myAddress,
    //     tokens: Number(params.maxSupply),
    //   },
    //   destinationAddress: myAddress,
    //   utxos: paymentUtxos,
    // })
    //
    // return { txid: tx.id("hex") }

    // Demo: simulate a 2-second deployment
    await new Promise((resolve) => setTimeout(resolve, 2000))

    return {
      txid: "f1e2d3c4b5a6f1e2d3c4b5a6f1e2d3c4b5a6f1e2d3c4b5a6f1e2d3c4b5a6f1e2",
    }
  }

  return (
    <div className="mx-auto w-full max-w-lg">
      <DeployToken
        onDeploy={handleDeploy}
        onSuccess={(result) => setLastResult(result)}
        onError={(error) => console.error("Deploy error:", error)}
      />
    </div>
  )
}

A self-contained block for deploying BSV21 fungible tokens. Manages form state, icon upload with live preview, fee estimation, and deploy execution through a clean onDeploy callback. The underlying useDeployToken hook is also exported for headless usage.

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/deploy-token.json

Usage

import { DeployToken, type DeployTokenParams, type DeployTokenResult } from "@/components/blocks/deploy-token"
import { deployBsv21Token } from "@1sat/core"
 
export default function DeployTokenPage() {
  const handleDeploy = async (params: DeployTokenParams): Promise<DeployTokenResult> => {
    try {
      const tx = await deployBsv21Token({
        symbol: params.symbol,
        decimals: params.decimals,
        icon: {
          dataB64: params.iconBase64,
          contentType: params.iconContentType,
        },
        initialDistribution: {
          address: myAddress,
          tokens: Number(params.maxSupply),
        },
        destinationAddress: myAddress,
        utxos: paymentUtxos,
      })
      return { txid: tx.id("hex") }
    } catch (err) {
      return { error: err instanceof Error ? err.message : "Deploy failed" }
    }
  }
 
  return (
    <DeployToken
      onDeploy={handleDeploy}
      onSuccess={(result) => console.log("Deployed:", result.txid)}
      onError={(error) => console.error(error)}
      defaults={{ defaultMaxSupply: "21000000", defaultDecimals: 8 }}
    />
  )
}

API Reference

DeployToken

Prop	Type	Default	Description
`onDeploy`	`(params: DeployTokenParams) => Promise<DeployTokenResult>`	—	Required. Executes the on-chain deploy action.
`onSuccess`	`(result: DeployTokenResult) => void`	—	Called after a successful deployment.
`onError`	`(error: Error) => void`	—	Called when deployment fails.
`defaults`	`UseDeployTokenOptions`	—	Default values for the form fields.
`className`	`string`	—	Additional CSS classes applied to the outer card.

DeployTokenParams

interface DeployTokenParams {
  symbol: string           // Token ticker symbol
  maxSupply: string        // Raw integer string, no separators
  decimals: number         // 0–18
  iconBase64: string       // Raw base64 (no data: prefix)
  iconContentType: string  // MIME type of the icon image
}

DeployTokenResult

interface DeployTokenResult {
  txid?: string   // Transaction ID on success
  rawtx?: string  // Raw transaction hex (optional)
  error?: string  // Error message when deploy failed
}

UseDeployTokenOptions

Pass as defaults to pre-populate form fields.

Field	Type	Default	Description
`defaultSymbol`	`string`	`""`	Initial token symbol.
`defaultMaxSupply`	`string`	`"21000000"`	Initial max supply.
`defaultDecimals`	`number`	`8`	Initial decimal precision (0–18).

Hook

Use useDeployToken directly when you need a custom UI.

import { useDeployToken } from "@/components/blocks/deploy-token"
 
function CustomDeployForm() {
  const token = useDeployToken({ defaultMaxSupply: "1000000" })
 
  return (
    <form onSubmit={(e) => {
      e.preventDefault()
      token.deploy(async (params) => {
        // call your deploy function
        return { txid: "..." }
      })
    }}>
      <input
        value={token.form.symbol}
        onChange={(e) => token.setSymbol(e.target.value)}
        placeholder="TOKEN"
      />
      <p>Estimated fee: {token.feeEstimate} sats</p>
      <button type="submit" disabled={!token.isValid || token.isDeploying}>
        Deploy
      </button>
    </form>
  )
}

UseDeployTokenReturn

Property	Type	Description
`form`	`DeployTokenFormState`	Current form values for binding to UI inputs.
`isValid`	`boolean`	Whether all required fields are filled.
`isDeploying`	`boolean`	Whether a deploy is in progress.
`feeEstimate`	`number`	Estimated fee in satoshis (0 until icon is selected).
`resultTxid`	`string \| null`	Transaction ID after successful deploy.
`errorMessage`	`string \| null`	Error message from the most recent attempt.
`setSymbol`	`(value: string) => void`	Update the symbol field.
`setMaxSupply`	`(value: string) => void`	Update the max supply field.
`setDecimals`	`(value: string) => void`	Update the decimals field.
`selectIcon`	`(file: File) => void`	Select and preview an icon file.
`removeIcon`	`() => void`	Clear the selected icon.
`deploy`	`(handler: (params: DeployTokenParams) => Promise<DeployTokenResult>) => Promise<void>`	Execute the deploy with a provided handler.

Create Listing Follow Button