@perkos/ui-payment-thirdweb

Thirdweb wallet adapter for @perkos/ui-payment.

Installation

npm install @perkos/ui-payment @perkos/ui-payment-thirdweb thirdweb

Usage

import { PaymentButton } from "@perkos/ui-payment";
import { useThirdwebWallet } from "@perkos/ui-payment-thirdweb";

function Checkout({ paymentOptions }) {
  const wallet = useThirdwebWallet();

  return (
    <PaymentButton
      wallet={wallet}
      accepts={paymentOptions}
      onPaymentSigned={(envelope) => {
        // Retry your API request with the signed payment
        fetch("/api/paid-service", {
          headers: {
            "PAYMENT-SIGNATURE": btoa(JSON.stringify(envelope)),
          },
        });
      }}
      onError={(error) => console.error(error)}
    />
  );
}

Requirements

This package requires:

• @perkos/ui-payment >= 1.0.0
• thirdweb >= 5.0.0
• react >= 18.0.0

Your app must be wrapped in Thirdweb's ThirdwebProvider.

API

useThirdwebWallet()

Returns a WalletAdapter compatible with @perkos/ui-payment.

const wallet = useThirdwebWallet();

// wallet.address - Connected wallet address
// wallet.chainId - Current chain ID
// wallet.isConnected - Whether wallet is connected
// wallet.signTypedData() - Sign EIP-712 data
// wallet.switchChain() - Switch to a different chain

getThirdwebChain(chainId)

Get Thirdweb chain object from chain ID.

import { getThirdwebChain } from "@perkos/ui-payment-thirdweb";

const chain = getThirdwebChain(43114); // Returns avalanche chain object

isChainSupported(chainId)

Check if a chain ID is supported.

import { isChainSupported } from "@perkos/ui-payment-thirdweb";

isChainSupported(43114); // true (Avalanche)
isChainSupported(999);   // false

Supported Chains

| Chain | Chain ID | |-------|----------| | Ethereum | 1 | | Avalanche | 43114 | | Avalanche Fuji | 43113 | | Base | 8453 | | Base Sepolia | 84532 | | Celo | 42220 | | Celo Sepolia | 11142220 |

License

MIT