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 } from "@r3vl/sdk";
import { WagmiConfig, createClient } from "wagmi";
​
const r3vlClient = createClient();
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>
        </>
    );
};
Last modified 3mo ago