Transaction Button

import { transfer } from "thirdweb/extensions/erc20";
import { TransactionButton, useActiveAccount } from "thirdweb/react";
import { arbitrum } from "thirdweb/chains";
import { getContract, createThirdwebClient } from "thirdweb";
import { ConnectButton } from "thirdweb/react";

const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});

const usdcContract = getContract({
  address: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
  chain: arbitrum,
  client,
});

function App() {
  const account = useActiveAccount();

  if (!account) {
    return <ConnectButton client={client} />;
  }

  return (
    <div>
      <p> Price: 50 USDC </p>
      <TransactionButton
        client={client}
        transaction={() => {
          if (!account) {
            throw new Error("No wallet connected");
          }
          return transfer({
            contract: usdcContract,
            amount: "50",
            to: account.address,
          });
        }}
      >
        Buy VIP Pass
      </TransactionButton>

      <p> Price: 0.1 ETH </p>
      <TransactionButton
        client={client}
        transaction={() => {
          if (!account) {
            throw new Error("No wallet connected");
          }
          return transfer({
            contract: usdcContract,
            amount: "50",
            to: account.address,
          });
        }}
      >
        Buy VIP Pass
      </TransactionButton>
    </div>
  );
}