# Introduction @ic-reactor/react for React Developers

**URL:** <https://forum.dfinity.org/t/introduction-ic-reactor-react-for-react-developers/27930>\
**Category:** Showcase\
**Tags:** Discussing\
**Created:** [February 27, 2024, 3:35pm UTC](https://forum.dfinity.org/t/introduction-ic-reactor-react-for-react-developers/27930 "2024-02-27T15:35:16Z")\
**Posts on this page:** 1\
**Showing post:** 27

<div class="post-metadata">

**Author:** ![b3hr4d](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/b3hr4d/32/9755_2.png) [@b3hr4d](https://forum.dfinity.org/u/b3hr4d)\
**Post date:** [May 23, 2024, 11:00am UTC](https://forum.dfinity.org/t/introduction-ic-reactor-react-for-react-developers/27930/27 "2024-05-23T11:00:13Z")

</div>

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:

[![](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/3X/5/9/59e19855ecd263aa49c62d1fac0c7cbee3f1bb2b.jpeg "Simple btc intraction on ICP with @ic-reactor") ](https://www.youtube.com/watch?v=r-J6eWcfmOQ)

### You can find the source code on GitHub:

[ckBTC Wallet Code](https://github.com/B3Pay/ic-reactor/tree/main/examples/ckbtc-wallet)

### 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:

```typescript
  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!

---

_[View the full topic](https://forum.dfinity.org/t/introduction-ic-reactor-react-for-react-developers/27930)._