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>
);
};

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>
</>
);
};