# 2.0 Async Javascript

### Creating Revenue Path (code subject to change)

{% hint style="info" %}
see [here](https://docs.r3vl.xyz/reveel-protocol-v2-documentation/sdk/1.0-react-hooks) for example `createArgs` parameters
{% endhint %}

<pre class="language-typescript"><code class="lang-typescript">import { R3vlClient } from "@r3vl/sdk";
import { ethers } from "ethers";

<strong>interface ICreateArgs {
</strong>  addressList: string[][];
  distributionsList: number[][];
  tokenList: string[];
  limitSequence: ethers.BigNumberish[][];
  pathName: string;
  isImmutable: boolean;
}

export const CreatePathButton = ({ createArgs }: { ICreateArgs }) => {
    
<strong>    const handleSubmit = async () => {
</strong>        client = new R3vlClient.v2;
        try {
          await client.createRevenuePath(createArgs);
        } catch (e) {
          console.log(e);
        }
    };
    
    return (
        &#x3C;button onClick={handleSubmit}>Create Path&#x3C;/button>
    );
};
</code></pre>

### Withdrawing From Revenue Path

```typescript
import { R3vlClient } from "@r3vl/sdk";
import { useAccount } from "wagmi";
import { ethers } from "ethers";

export const WithdrawRevenueButton = () => {
    const { address } = useAccount();
    
    const handleWithdraw = () => {
        client = new R3vlClient.v2;
        try {
          await client.withdraw(address);
        } catch (e) {
          console.log(e);
        }
    };
    
    return (
        <button onClick={handleWithdraw}>Withdraw Revenue</button>
    );
};
```

### Get Revenue Path Balances

{% hint style="info" %}
a simple hook to display a user's available balances
{% endhint %}

```typescript
import { useBalances } from "@r3vl/sdk/hooks";
import { useAccount } from "wagmi";
import { ethers } from "ethers";
import { useEffect, useState } from "React";

interface IBalances {
  earnings: number;
  withdrawn: number;
  withdrawable: number;
}

export const DisplayBalances = () => {
    const { address } = useAccount();
    const [balances, setBalances] = useState<IBalances>()
    useEffect(() => {
        client = new R3vlClient.v2;
        try {
          const withdrawn = await client.withdrawn(address);
          const withdrawable = await client.withdrawable(address);
          const earnings = withdrawn + withdrawable;
          setBalances({earnings, withdrawn, withdrawable});
        } catch (e) {
          console.log(e);
        }
    }, []);
    
    return (
        // earnings - withdrawn = withdrawable
        <div display="flex">
            {!!balances && (
                <div className="total-earnings">{balances.earnings}</div>
                <div className="total-withdrawn">{balances.withdrawn}</div>
                <div className="total-withdrawable">{balances.withdrawable}</div>
            )}
        </div>
    );
};
```