1.0 React Hooks

Overview

Our React Hooks library uses react-query under the hood & will expose request parameters & response objects that mimic react-query functionality. For instance, in the request parameters you can pass the { enabled: boolean } object and other request parameters found in react-query's documentation. The response objects will also mimic react-query with { data, isLoading, isSuccess } etc.

Since we are mimicking react-query Reveel's SDK integration should feel familiar to many react devs. This also means we are essentially mimicking the request parameter & response objects used by wagmi which should also feel familiar to web3 Devs.

Functions with example uses are shown below. All the examples below use wagmi functions alongside @r3vl/sdk, but this is not a requirement.

Integrating the sdk into your frontend

Add the package to your frontend app:

yarn add @r3vl/sdk

--------- or ---------

npm install @r3vl/sdk

Add the provider to your frontend (below is a next.js example):

import { R3vlProvider, createClient as r3vlCreateClient } from "@r3vl/sdk";
import { WagmiConfig, createClient } from "wagmi";

const r3vlClient = r3vlCreateClient();
const wagmiClient = createClient({
  // per wagmi instructions: https://wagmi.sh/examples/connect-wallet
});
const App = ({ Component, pageProps }: AppProps) => {
  return (
    <WagmiConfig client={wagmiClient}>
      <R3vlProvider client={r3vlClient}>
        <Component {...pageProps} />
      </R3vlProvider>
    </WagmiConfig>
  )
}

Creating Revenue Path (code subject to change)

see Creating Revenue Path for example createArgs parameters

import { useCreateRevenuePath, useR3vlClient } from "@r3vl/sdk/hooks";
import { ethers } from "ethers";
import { useProvider, useNetwork, useSigner } from "wagmi";

interface ICreateArgs {
  walletList: string[][];
  distribution: number[][];
  tiers: { [token: 'ETH' | 'WETH' | 'DAI' | 'USDC']: BigNumberish }[]
  name: string;
  mutabilityEnabled: boolean;
}

export const CreatePathButton = ({ createArgs }: { ICreateArgs }) => {
    const { chain } = useNetwork();
    const provider = useProvider();
    const { data: signer } = useSigner();

    useR3vlClient({
        chainId: chain?.id,
        provider,
        signer
    });

    const { mutate: createRevenuePath } = useCreateRevenuePath();
    
    const handleSubmit = () => {
        createRevenuePath(createArgs);
    };
    
    return (
        <button onClick={handleSubmit}>Create Path</button>
    );
};

At the moment @r3vl/sdk is compatible with the chains in the next list

• Ethereum (mainnet & goerli)

• Polygon (mainnet & mumbai)

• Arbitrum (one & testnet)

• Optimism (mainnet & goerli)

• Aurora (mainnet & testnet)

Here a live example of a NextJS implementing R3VL SDK

Withdrawing From Revenue Path

import { useWithdraw } from "@r3vl/sdk/hooks";
import { useAccount, useProvider, useNetwork, useSigner } from "wagmi";
import { ethers } from "ethers";

const revPathAddress = '0xSomeAddress'

export const WithdrawRevenueButton = () => {
    const { chain } = useNetwork();
    const provider = useProvider();
    const { data: signer } = useSigner();

    useR3vlClient({
        chainId: chain?.id,
        provider,
        signer,
        revPathAddress  // the path address you are withdrawing from
    });

    const withdraw = useWithdraw(revPathAddress);
    const { address } = useAccount();
    
    const handleWithdraw = () => {
        withdraw.mutate({
            walletAddress: address,
            isERC20: 'someTokenAddress' // OPTIONAL - Address of specific erc20 token
        });
    };
    
    return (
        <button onClick={handleWithdraw}>Withdraw Revenue</button>
    );
};

Get Revenue Path Balances

a simple hook to display a user's available balances

import { useBalances } from "@r3vl/sdk/hooks";
import { useAccount, useProvider, useNetwork, useSigner } from "wagmi";
import { ethers } from "ethers";

const revPathAddress = '0xSomeAddress'

export const DisplayBalances = () => {
    const { chain } = useNetwork();
    const provider = useProvider();
    const { data: signer } = useSigner();

    useR3vlClient({
        chainId: chain?.id,
        provider,
        signer,
        revPathAddress // the path address you are querying
    });

    const { address } = useAccount();
    const { data: balances } = useBalances(
        revPathAddress,
        {
            walletAddress: address, // OPTIONAL - Address of specific user wallet
            isERC20: 'someTokenAddress' // OPTIONAL - Address of specific erc20 token
        }, { enabled: !!address }
    );
    
    return (
        // earnings - withdrawn = withdrawable
        <div display="flex">
            <div className="total-earnings">{balances.earnings}</div>
            <div className="total-withdrawn">{balances.withdrawn}</div>
            <div className="total-withdrawable">{balances.withdrawable}</div>
        </div>
    );
};

Get Revenue Path Tiers

a simple hook to fetch tier data from an existing revenue path

import { useBalances } from "@r3vl/sdk/hooks";
import { useAccount, useProvider, useNetwork, useSigner } from "wagmi";
import { ethers } from "ethers";

const revPathAddress = '0xSomeAddress'

export const DisplayBalances = () => {
    const { chain } = useNetwork();
    const provider = useProvider();
    const { data: signer } = useSigner();

    useR3vlClient({
        chainId: chain?.id,
        provider,
        signer,
        revPathAddress // the path address you are querying
    });

    const { address } = useAccount();
    const { data: tiers, isFetched: tiersFetched } =
        useRevenuePathTiers(revPathAddress)
    const tier = tiers?.[0] || {}

    if (tiersFetched) console.log(
        "Revenue path data:",
        Object.keys(tier.proportions: {
           [address: string]: number 
        }).reduce((prev, curr) => {
            return [
                ...prev, {
                    address: curr,
                    share: tier.proportions[curr] * 10000000000000 
                }
            ]
        }, [])
    )
)
    return null
};

Updating Revenue Path

hook to update an existing revenue path in case user's wallet owns that revenue path and it's mutability is enabled

import { useUpdateRevenuePath, useR3vlClient } from "@r3vl/sdk/hooks";
import { ethers } from "ethers";
import { useProvider, useNetwork, useSigner } from "wagmi";

interface IUpdateLimitsArgs {
  tokens: string[],
  newLimits: number[], 
  tier: number
}

interface IAddRevenueTierArgs {
  walletList: string[][]
  distribution: number[][]
  newAddedTierLimits: number[]
  finalFundWalletList: string[]
  finalFundDistribution: number[]
  finalFundIndex: number
}

export const UpdateRevenuePath = (
  {
    updateLimitsArgs,
    addRevenueTierArgs
  }: {
    updateLimitsArgs: IUpdateLimitsArgs
    addRevenueTierArgs: IAddRevenueTierArgs
  }) => {
    const { chain } = useNetwork();
    const provider = useProvider();
    const { data: signer } = useSigner();

    useR3vlClient({
        chainId: chain?.id,
        provider,
        signer
    });

    const {
      updateLimits,
      addRevenueTier
    } = useUpdateRevenuePath();
    
    const updateLimitsBtn = () => {
      updateLimits(updateLimitsArgs);
    };
    const addRevenueTierBtn = () => {
      addRevenueTier(addRevenueTierArgs);
    };

    return (
        <>
          <button onClick={updateLimitsBtn}>Update Tier Limits</button>
          <button onClick={updateLimitsBtn}>Add New Tier</button>
        </>
    );
};