Comment on page
Hooks

The Subbi library exposes two hooks which the components use under the hood, but you can use in your app if you want even more control over the look and UX of your checkout. The hooks are useUSDCContract and useSubscriptionContract. Each hook returns a single object that exposes all the properties of an ethers Contract object together with some other functions you can call on the respective contracts that the hooks expose.
Remember to either use the included Metamask button to connect a given user or handle your own connection and pass the Signer to the SubbiProvider.
useUSDCContract
This hook exposes two extra ERC20 specific functions for you to use:
approve(spender: <your subscription contract address>, amount: <recommended to use the maximum uint>) => Promise<void> : This approves your contract to spend on your users behalf. It returns a promise.
allowance(owner: <your subscribers address>, spender: <your subscription contract address>) => Promise<number> : Returns a promise that resolves to the allowance for an approved spender for a given user.
import { ContractTransaction, ethers } from "ethers";
​
interface USDCHookResult extends ethers.Contract {
  approve: (spender: string, amount: string) => Promise<ContractTransaction>;
  allowance: (owner: string, spender: string) => Promise<number>;
}
Usage
import { ethers } from "ethers";
import { useUSDCContract, MAX_UINT } from "@subbi/react";
​
// MAX_UINT = ethers.BigNumber.from("2").pow(ethers.BigNumber.from("256").sub(ethers.BigNumber.from("1"))).toString();
const subscriptionContractAddress = "0xadac08d7d5bf608d622a94bfab669b38fdc7bcb2";
​
const MyComponent = () => {
  const usdc = useUSDCContract();
  
  return (
    <button
      onClick={usdc.approve(subscriptionContractAddress, MAX_UINT)}
    >
      Click me
    </button>
  );
};
useSubscriptionContract
This hook takes a single argument: the address of your subscription contract:
import { useSubscriptionContract } from "@subbi/react"
​
const subscriptionContract = useSubscriptionContract("0xadac08d7d5bf608d622a94bfab669b38fdc7bcb2")
It exposes three functions for managing subscriptions:
subscribe() => Promise<void>: Subscribes the connected user to your subscription contract.
isSubscribed(address: <address of the user you want to check>) => Promise<boolean> : Returns a promise that resolves to a boolean denoting the subscription status of a given address.
cancelSubscription() => Promise<void> : Cancels the subscription of the connected user.
import { ContractTransaction, ethers } from "ethers";
​
export interface SubscriptionContractResult extends ethers.Contract {
  subscribe: () => Promise<ContractTransaction>;
  isSubscribed: (address: string) => Promise<boolean>;
  cancelSubscription: () => Promise<ContractTransaction>;
}
Usage
import { useSubscriptionContract } from "@subbi/react";
​
const MyComponent = () => {
    const subscription = useSubscriptionContract("0xadac08d7d5bf608d622a94bfab669b38fdc7bcb2");
    
    return (
        <>
            <button onClick={subscription.subscribe}>Subscribe!</button>
            <button onClick={subscription.cancelSubscription}>Cancel</button>
        </>
    );
};
Checkout Flow
Next - Direct contract interaction
Introduction
Last modified 1yr ago