Guide

Working with BRC-20 Tokens

Learn how to interact with BRC-20 tokens using LaserEyes - fetch balances, send tokens, and manage transfers.

LaserEyes provides comprehensive support for BRC-20 tokens, allowing you to easily fetch balances, send tokens, and manage transfers through a unified interface.

Key Features

Fetch BRC-20 Balances

Retrieve token balances for any Bitcoin address with support for multiple data sources.

Send BRC-20 Tokens

Securely transfer BRC-20 tokens between addresses with built-in PSBT support.

Rich Token Data

Access comprehensive token data including overall, transferable, and available balances.

Safe Transfers

Built-in safety checks and validations for secure token transfers.

The BRC-20 Balance Type

BRC-20 Balance Interface

type Brc20Balance = {
  ticker: string;     // The token ticker symbol
  overall: string;    // Total token balance
  transferable: string; // Amount available for transfer
  available: string;  // Amount available for spending
}

Fetching BRC-20 Balances

Example

import { useLaserEyes } from '@omnisat/lasereyes-react'
import { useState, useEffect } from 'react'

function TokenBalances() {
  const { getAddressBrc20Balances } = useLaserEyes()
  const [balances, setBalances] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchBalances = async () => {
      try {
        setLoading(true)
        const results = await getAddressBrc20Balances('bc1p...')
        setBalances(results)
      } catch (error) {
        console.error('Failed to fetch balances:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchBalances()
  }, [])

  if (loading) return <div>Loading token balances...</div>

  return (
    <div className="space-y-4">
      {balances.map(token => (
        <div key={token.ticker} className="p-4 border rounded">
          <h3 className="font-bold">{token.ticker}</h3>
          <p>Overall: {token.overall}</p>
          <p>Transferable: {token.transferable}</p>
          <p>Available: {token.available}</p>
        </div>
      ))}
    </div>
  )
}

Sending BRC-20 Tokens

Example

import { useLaserEyes } from '@omnisat/lasereyes-react'
import { useState } from 'react'
import { BRC20 } from '@omnisat/lasereyes-core'

function SendToken() {
  const { send } = useLaserEyes()
  const [sending, setSending] = useState(false)

  const handleSend = async () => {
    try {
      setSending(true)
      
      // Send BRC-20 tokens to an address
      const txId = await send(BRC20, {
        ticker: 'ORDI',
        amount: '1000',
        toAddress: 'bc1p...'
      })

      console.log('Transaction ID:', txId)
    } catch (error) {
      console.error('Failed to send:', error)
    } finally {
      setSending(false)
    }
  }

  return (
    <button 
      onClick={handleSend}
      disabled={sending}
      className="px-4 py-2 bg-emerald-500 text-white rounded"
    >
      {sending ? 'Sending...' : 'Send Tokens'}
    </button>
  )
}

Best Practices

1. Balance Validation

Always validate token balances before attempting transfers. Check both the transferable and available amounts.

2. Error Handling

Implement proper error handling for token operations. Network issues, insufficient balances, or wallet rejections should be handled gracefully.

3. Loading States

Show appropriate loading states during token operations. Both fetching balances and sending can take time to complete.

4. Data Source Fallbacks

Consider implementing fallback data sources for token operations. LaserEyes supports multiple data providers to ensure reliability.

Complete Example

BRC-20 Token Dashboard

import { useLaserEyes } from '@omnisat/lasereyes-react'
import { useState, useEffect } from 'react'
import { BRC20 } from '@omnisat/lasereyes-core'

function TokenDashboard() {
  const { getAddressBrc20Balances, send, address } = useLaserEyes()
  const [balances, setBalances] = useState([])
  const [loading, setLoading] = useState(false)
  const [sending, setSending] = useState(false)
  const [selectedToken, setSelectedToken] = useState(null)
  const [amount, setAmount] = useState('')
  const [recipient, setRecipient] = useState('')

  useEffect(() => {
    if (address) {
      fetchBalances()
    }
  }, [address])

  const fetchBalances = async () => {
    try {
      setLoading(true)
      const results = await getAddressBrc20Balances(address)
      setBalances(results)
    } catch (error) {
      console.error('Failed to fetch balances:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleSend = async (e) => {
    e.preventDefault()
    if (!selectedToken || !amount || !recipient) return

    try {
      setSending(true)
      const txId = await send(BRC20, {
        ticker: selectedToken,
        amount,
        toAddress: recipient
      })
      
      console.log('Transaction ID:', txId)
      // Refresh balances after sending
      await fetchBalances()
      
      // Reset form
      setSelectedToken(null)
      setAmount('')
      setRecipient('')
    } catch (error) {
      console.error('Failed to send:', error)
    } finally {
      setSending(false)
    }
  }

  if (loading) return <div>Loading token balances...</div>

  return (
    <div className="space-y-8">
      {/* Token Balances Display */}
      <div className="grid gap-4 sm:grid-cols-2">
        {balances.map(token => (
          <div 
            key={token.ticker}
            className="p-4 border rounded hover:border-emerald-500/30 cursor-pointer"
            onClick={() => setSelectedToken(token.ticker)}
          >
            <h3 className="font-bold">{token.ticker}</h3>
            <p>Overall: {token.overall}</p>
            <p>Transferable: {token.transferable}</p>
            <p>Available: {token.available}</p>
          </div>
        ))}
      </div>

      {/* Send Form */}
      <form onSubmit={handleSend} className="space-y-4">
        <div>
          <label className="block mb-2">Selected Token</label>
          <input
            type="text"
            value={selectedToken || ''}
            readOnly
            className="w-full p-2 border rounded"
          />
        </div>

        <div>
          <label className="block mb-2">Amount</label>
          <input
            type="text"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            className="w-full p-2 border rounded"
            placeholder="Enter amount"
          />
        </div>

        <div>
          <label className="block mb-2">Recipient Address</label>
          <input
            type="text"
            value={recipient}
            onChange={(e) => setRecipient(e.target.value)}
            className="w-full p-2 border rounded"
            placeholder="Enter recipient address"
          />
        </div>

        <button
          type="submit"
          disabled={sending || !selectedToken || !amount || !recipient}
          className="px-4 py-2 bg-emerald-500 text-white rounded disabled:opacity-50"
        >
          {sending ? 'Sending...' : 'Send Tokens'}
        </button>
      </form>
    </div>
  )
}

Runes

LaserEyesProvider