Checkout Flow

The Subbi library also includes a full drop in checkout flow for you to use if you so desire. It is a single component that has the following props:

styles (optional): An optional object with four optional properties: connect, approve, subscribe, complete. The value of each property is 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.

onSuccessHandlers (optional): An optional object with three optional properties: connect, approve, subscribe. The value of each property is a function that is called on successful web3 connection, spending approval and subscription respectively. The first argument of each function is a basket of properties pertaining to the user, network they are connected to and the contract they are subscribing to.

showWeb3Connection (REQUIRED): A boolean value that dictates whether or not to include the browser wallet connection step. If false assumes that you are handling the connection or passing a signer to the SubbiProvider.

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

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

interface Props {
  subscriptionContractAddress: string;
  showWeb3Connection: boolean;
  onError?: (error: any) => void | Promise<void>;
  styles?: { [key in "connect" | "approve" | "subscribe" | "complete"]?: {
  [x: string]: string | number | {};
} & React.CSSProperties; };
  onSuccessHandlers?: {
    [key in "connect" | "approve" | "subscribe"]?:
      | ((arg0: OnActionProps) => void | Promise<void>)
      | undefined;
  };
}

Usage

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

<CheckoutFlow
    showWeb3Connection
    subscriptionContractAddress="0xadac08d7d5bf608d622a94bfab669b38fdc7bcb2"
    onSuccessHandlers={{
        connect: () => console.log("successful connection!"),
        approve: () => console.log("successful approval!"),
        subscribe: () => console.log("successful subscription!")
    }}
    onError={(error: any) => console.log(error)}
    styles={{
        connect: { backgroundColor: "blue" },
        approve: { color: "green" },
        subscribe: { fontSize: "24px" },
        complete: { textDecoration: "underline" }
    }}
/>