How to Sign Messages, get the balance and send transactions on Bitcoin using AppKit

import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/react";
import type { BitcoinConnector } from "@reown/appkit-adapter-bitcoin";

// Get the wallet provider with the AppKit hook
const { walletProvider } = useAppKitProvider<BitcoinConnector>("bip122");

// AppKit hook to get the address and check if the user is connected
const { allAccounts, address, isConnected } = useAppKitAccount();

// function to sign a message
const handleSignMsg = async () => {
  // raise the modal to sign the message
  const signature = await walletProvider.signMessage({
    address,
    message: "Hello Reown AppKit!",
  });

  // Print the signed message in console
  console.log(signature);
};

return (
  isConnected && (
    <div>
      <button onClick={handleSignMsg}>Sign Message</button>
    </div>
  )
);

// function to send a TX
const handleSendTx = () => {
    const signature = await walletProvider.sendTransfer({
        recipient: recipientAddress,
        amount: "1000" // amount in satoshis
      })

    // print the Transaction Signature in console
    console.log(signature);
}

return (
  isConnected && (
    <div>
      <button onClick={handleSendTx}>Send Transaction</button>
    </div>
  )
);

const handleGetBalance = () => {
    const isTestnet = true; // change to false if you want to get the balance on mainnet

    // get all the utxos from the address
    const response = await fetch(
        `https://mempool.space${isTestnet ? '/testnet' : ''}/api/address/${address}/utxo`
    );
    const data = await response.json();

    // get the utxos - the list of unspent transactions that the sender has
    const utxos = await getUTXOs(address, isTestnet)
    // return the sum of the utxos ... The balance of the sender
    const balance = utxos.reduce((sum, utxo) => sum + utxo.value, 0)

    // print the balance in console
    console.log(balance);
}

// Get the utxos ... List of unspent transactions that the sender has
const getUTXOs = async (address: string, isTestnet: boolean = false): Promise<UTXO[]> => {
    const response = await fetch(
        `https://mempool.space${isTestnet ? '/testnet' : ''}/api/address/${address}/utxo`
    )
    return await response.json();
}

// Type of the UTXO ... List of unspent transactions that the sender has
type UTXO = {
    txid: string
    vout: number
    value: number
    status: {
        confirmed: boolean
        block_height: number
        block_hash: string
        block_time: number
    }
}

return (
  isConnected && (
    <div>
      <button onClick={handleGetBalance}>Get Balance</button>
    </div>
  )
);

const handleGetPublicKey = async () => {
  // get the public key from the account
  const bip122Account = allAccounts?.find((a) => a.address === address);
  let publicKey = bip122Account?.publicKey || "";

  // print the public key in console
  console.log(publicKey);
};

return (
  isConnected && (
    <div>
      <button onClick={handleGetPublicKey}>Get Public Key</button>
    </div>
  )
);