Introduction @ic-reactor/react for React Developers

Showcase
27

I’ve created a new example called ckBTC Wallet! This example demonstrates how to integrate with the ckBTC ledger and minter to retrieve BTC.

Check out the demo video:

You can find the source code on GitHub:

ckBTC Wallet Code

Key Component: MinterRetrieveBTC

This hooks handles the retrieval of BTC by interacting with the ckBTC ledger and minter. Here are the main parts of the component:

  const { call: refetchBalance, data: balance, loading: balanceLoading } = useCKBTCLedgerMethod({
    functionName: "icrc1_balance_of",
    args: [{ owner: userPrincipal, subaccount: [] }],
  })

  const { call: refetchAllowance, data: allowance, loading: allowanceLoading } = useCKBTCLedgerMethod({
    functionName: "icrc2_allowance",
    args: [
      {
        account: { owner: userPrincipal, subaccount: [] },
        spender: { owner: minterCanisterId, subaccount: [] },
      },
    ],
  })

  const { call: retreiveBtc, data: retreiveBtcResult, error: retreiveBtcError, loading: retreiveBtcLoading } = useCKBTCMinterMethod({
    functionName: "retrieve_btc_with_approval",
    onSuccess: () => {
      refetchBalance()
      refetchAllowance()
    },
  })

  const { call: approve, loading: approveLoading, data: approveResult } = useCKBTCLedgerMethod({
    functionName: "icrc2_approve",
    onSuccess: () => {
      refetchAllowance()
      const amount = BigInt(amountRef.current?.value || "0")
      const address = addressRef.current?.value || ""
      retreiveBtc([{ amount, address, from_subaccount: [] }])
    },
  })

  const onSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    const amount = BigInt(amountRef.current?.value || "0")
    approve([{ spender: { owner: minterCanisterId, subaccount: [] }, amount, fee: [], memo: [], created_at_time: [], from_subaccount: [], expected_allowance: [], expires_at: [] }])
  }

This component demonstrates how to:

  • Fetch and display the ckBTC balance.
  • Retrieve the allowance given to the minter.
  • Approve and retrieve BTC using the provided address and amount.

Feel free to explore and adapt the code to your needs. Happy coding!

2 Likes