ckBTC Wallet

A specialized wallet interface for ckBTC (Chain Key Bitcoin). This example demonstrates how to build a finance-ready dApp that interacts with the ckBTC ledger and minter canisters.

Features Demonstrated

• ICRC-1 Standard: Interacting with the standard token interface (balance, transfer).
• ckBTC Specifics: Retrieving BTC addresses and updating balances.
• Complex Flows: Managing deposit/withdraw cycles.
• Floating Point Math: Handling token decimals correctly in the UI.

Links

Open in StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Live Preview

Key Design Patterns

Domain Specific Hooks

Instead of generic queries, this example wraps them in domain-specific hooks for cleaner code:

src/reactor.ts

// Ledger hooks, bound to the ckBTC ledger DisplayReactor
export const { useActorQuery: useCkbtcLedgerQuery } =
  createActorHooks(ckbtcLedger)

// Reusable query/mutation objects for the two canisters
export const balanceQuery = createQueryFactory(ckbtcLedger, {
  functionName: "icrc1_balance_of",
})

export const updateBalanceMutation = createMutation(ckbtcMinter, {
  functionName: "update_balance",
})

// src/App.tsx
const { data: name } = useCkbtcLedgerQuery({
  functionName: "icrc1_name",
})

// src/MinterRetrieveBtc.tsx — `owner` is a plain string under DisplayReactor
const { data: balance, refetch: refetchBalance } = balanceQuery([
  { owner: userPrincipal },
]).useQuery()