Subbi
  • What is Subbi?
  • Getting Started
    • Setting up your first subscription
    • Supported tokens
    • Contract links
  • Hosted Checkout
    • Introduction
    • Configuring URLs
  • Self Hosted Checkout
    • Installation
    • Components
      • Subbi Provider
      • Buttons
        • Metamask Button
        • Approve Button
        • Subscribe Button
        • Cancel Button
      • Checkout Flow
    • Hooks
  • Direct contract interaction
    • Introduction
    • Contract ABIs
  • Extras
    • Fee sharing
Powered by GitBook
On this page
  • useUSDCContract
  • useSubscriptionContract
  1. Self Hosted Checkout

Hooks

PreviousCheckout FlowNextIntroduction

Last updated 3 years ago

The Subbi library exposes two 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 together with some other functions you can call on the respective contracts that the hooks expose.

Remember to either use the included to connect a given user or handle your own connection and pass the to the .

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>
        </>
    );
};
hooks
ethers Contract object
Metamask button
Signer
SubbiProvider