Front-end sandbox development environments for Sablier V2.

Sablier is a smart contract protocol that enables trustless streaming of ERC-20 assets, which means the ability to make payments by the second.

There are two types of streaming models in Sablier:

• LockupLinear, abbreviated as LL, which creates streams with linear streaming functions
• LockupDynamic, abbreviated as LD, which creates streams with dynamic streaming functions (examples: exponentials, logarithms, step functions)

For more information, please refer to our documentation.

It is worth noting that you can charge a service fee when creating a stream. This fee is a percentage of the stream's total value and is paid to your designated broker address. Check out the "broker" references in the code to see how this works, as well as this guide from our docs.

An integration of the Sablier V2 Core contracts into a frontend environment that uses Ethers V6. It's a small app that runs on the Goerli testnet and provides a wallet connection out of the box (Injected / Metamask).

Lockup Linear (Form)	Lockup Dynamic (Form)	Headless

• Create a LL stream with Durations using the UI Form
• Create a LD stream with Deltas using the UI Form
• Create a LL stream with Durations in headless mode (tweak durations in code)
• Create a LL stream with Range in headless mode (tweak dates/ranges in code)
• Create a LD stream with Deltas in headless mode (tweak deltas in code)
• Create a LD stream with Milestones in headless mode (tweak milestones in code)
• Mint testnet DAI tokens
• Approve spending DAI tokens for both the LL and LD contracts

Most of the transaction magic happens in models/Transaction.ts. Have a look to understand how parameters are formatted (strings to Big Int, padding numbers with decimals, etc.) and sent to the contracts.

For the headless mode, see constants/data.ts. Here, you'll be able to tweak the parameters to create streams of different values or shapes (segments).

In the UI Forms, you may find Prefill form buttons. Clicking on them will add pre-configured data into the fields as an example of what the data should look like.

After you create a test stream, make sure to connect to our main app.sablier.com interface with your "sender" wallet to see what the stream actually looks like.

Payload (LD with two segments)	Shape

The official Sablier interface uses wagmi and viem. Both libraries offer top-notch support (check the docs and their github) and integrate nicely with things like RainbowKit.

Same as the ones implemented in the Ethers V6 sandbox.

This current sandbox uses wagmi's react context and configuration to set up the wallet connection (through an Injected Provider / Metamask). It then makes use of wagmi's core actions to bundle contract interactions under the Transaction model.

While this helps keep things similar to the way they're implemented in the Ethers V6 Sandbox, keep in mind that you can always choose to implement them differently. For example, using:

• Viem, the Typescript library. It's pretty much a 1:1 replacement for ethers (see migration guide here). The aforementioned wagmi/actions (core actions) are more or less a wrapper around viem's utilities, with the additional benefit that the wallet and public clients are automatically sourced behind the scenes (you don't have to pass them manually).
• Wagmi's hooks, for a more effect oriented React application

The feat/permit2 branch includes an example of a create linear stream flow using:

• Permit2 signatures
• The PRB Proxy
• A dedicated Sablier V2 Proxy Target