Approve Button

This button approves the spending of USDC for the given network you gave to the SubbiProvider and the provided subscription contract address. It has the following props:

style (optional): A standard CSS-in-JS style, as seen here. Because Subbi uses styled-components under the hood, this includes pseudo elements.

onError (optional): An optional function that is called if any of the components encounter an error. It is passed one argument: the error object in question.

onApproval (optional): An optional function that is called upon a successful approval. The first argument of the function is a basket of properties pertaining to the user, network they are connected to and the contract they are subscribing to.

subscriptionContractAddress (REQUIRED): The address for your deployed contract.

interface OnActionProps {
  user: string;
  contract: string;
  network: SupportedNetworks;
}

interface Props {
    style?: {
      [x: string]: string | number | {};
    } & React.CSSProperties;
    onError?: (error: any) => void | Promise<void>;
    onApproval?: (arg0: OnActionProps) => void | Promise<void>;
    subscriptionContractAddress: string;
}

Usage

import { ApproveButton } from "@subbi/react";

<ApproveButton
    subscriptionContractAddress="0xadac08d7d5bf608d622a94bfab669b38fdc7bcb2"
    onApproval={() => console.log("Spending approved!")}
    onError={(error: any) => console.log(error)}
    style={{ backgroundColor: "red" }}
/>