https://github.com/sablier-labs/sandbox
Front-end sandbox development environments for Sablier V2
https://github.com/sablier-labs/sandbox
money-streaming sablier token-streaming
Last synced: 3 months ago
JSON representation
Front-end sandbox development environments for Sablier V2
- Host: GitHub
- URL: https://github.com/sablier-labs/sandbox
- Owner: sablier-labs
- Created: 2023-08-23T00:47:59.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-20T10:03:50.000Z (7 months ago)
- Last Synced: 2025-01-28T20:27:15.694Z (4 months ago)
- Topics: money-streaming, sablier, token-streaming
- Homepage: https://sablier.com
- Size: 2.81 MB
- Stars: 10
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sablier Sandbox
Front-end sandbox development environments for Sablier. Create streams onchain or source them for preview from indexers
(the graph, envio).
## Background
Sablier is a smart contract protocol that enables trustless streaming of ERC-20 assets, which means the ability to make
payments by the second.
### Lockup
There are three types of lockup streaming 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)
- **LockupTranched**, abbreviated as **LT**, which creates streams with stepper/tranched streaming functions (examples:
monthly, timelocks, step functions)
For more information, please refer to our [documentation](https://docs.sablier.com).
We also support examples of how to **Withdraw** from a Lockup stream.
### Flow
Flow streams work within an open-ended model (no upfront deposits, top-ups, rate adjustments, no end date).
For more information, please refer to our [documentation](https://docs.sablier.com).
The sandbox will showcase how to create a **Flow** stream with a certain rate per second and initial deposit (which can
also be topped up later on).
We also support examples of how to **Withdraw** from a Flow stream.
## Environments and Examples
### Wagmi
The official Sablier interface uses [wagmi](wagmi.sh/) and [viem](https://viem.sh/). Both libraries offer top-notch
support (check the docs and their github) and integrate nicely with wallet managers like RainbowKit or AppKit.
| Flow (Form) | Lockup (Form) |
| -------------------------------------- | ------------------------------------------------ |
|  |  |
| Headless (Form) | Queries |
| ----------------------------------------- | ---------------------------------------- |
|  |  |
#### Features
**↪ Single stream management through Lockup**
- Preview the 10 most recent Lockup (LL, LD or LT) streams using The Graph
- Create an LL, LD or LT stream with Durations using the UI Form
- Create an LL, LD or LT stream with Durations in headless mode (tweak durations in code)
- Create an LL, LD or LT stream with Timestamps in headless mode (tweak timestamps in code)
- Withdraw from any Lockup (LL, LD or LT) stream using the UI Form
**↪ Single stream management through Flow**
- Preview the 10 most recent Flow streams using Envio
- Create a Flow stream using the UI Form
- Withdraw from a Flow stream using the UI Form
**↪ Batch stream creation through Batch Lockup**
- Create group of LL, LD or LT streams with all possible configurations in headless mode, through a dedicated periphery.
Most of the transaction magic happens in [`models/LockupCore.ts`](/examples/wagmi/src/models/LockupCore.ts) and
[`models/FlowCore.ts`](/examples/wagmi/src/models/FlowCore.ts). Have a look to understand how parameters are formatted
(strings to BigInt, padding numbers with decimals, etc.) and sent to the contracts.
For the **headless** mode, see [`constants/data.ts`](/examples/wagmi/src/constants/data.ts). Here, you'll be able to
tweak the parameters to create streams of different values or shapes (segments).
**↪ Misc.**
- Mint [Sepolia DAI](https://sepolia.etherscan.io/token/0x776b6fc2ed15d6bb5fc32e0c89de68683118c62a) tokens
- Approve spending DAI tokens for any Lockup or Flow contract
#### Next steps
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](https://app.sablier.com) interface
with your "sender" wallet to see what the stream [actually looks like](https://docs.sablier.com/apps/features/overview).
| Payload (LD with two segments) | Shape |
| ----------------------------------------- | ------------------------------------------ |
|  |  |
---
### Ethers V6
An integration of Sablier contracts into a frontend environment that uses [Ethers V6](https://docs.ethers.org/v6/). It's
a small app that runs on the Sepolia testnet and provides an injected wallet connection out of the box.
> [!TIP]
>
> The Ethers examples do not include all possible variations, so we invite you to look into the Wagmi examples and
> attempt to convert them yourself.
#### Features
- Create an LL, LD or LT stream with Durations or Timestamps in headless mode (tweak durations in code)