Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/husky-finance/eth-sorbet
Easy L2/side-chain onboarding component for react Dapps
https://github.com/husky-finance/eth-sorbet
arbitrum bsc ethereum l2 layer2-dapp onboarding optimism react xdai
Last synced: 29 days ago
JSON representation
Easy L2/side-chain onboarding component for react Dapps
- Host: GitHub
- URL: https://github.com/husky-finance/eth-sorbet
- Owner: husky-finance
- License: mit
- Created: 2021-04-19T07:02:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-06-10T08:16:12.000Z (over 3 years ago)
- Last Synced: 2024-10-08T19:12:56.579Z (about 1 month ago)
- Topics: arbitrum, bsc, ethereum, l2, layer2-dapp, onboarding, optimism, react, xdai
- Language: TypeScript
- Homepage:
- Size: 998 KB
- Stars: 24
- Watchers: 6
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eth-sorbet
[](https://app.codacy.com/gh/husky-finance/eth-sorbet?utm_source=github.com&utm_medium=referral&utm_content=husky-finance/eth-sorbet&utm_campaign=Badge_Grade_Settings)
[](https://www.npmjs.com/package/@huskyfinance/eth-sorbet)
Smooth transition to L2, just like sorbet before main course
**Winners of Arbitrum 🏆 and Optimism 🏆 for ETHGlobal Scaling Ethereum 2021 Hackathon**
[**Live Demo**](https://eth-sorbet-demo.netlify.app/)
eth-sorbet is a react component that improves DApp users' onboarding experience to L2 networks or sidechains.
When a user lands on the DApp, it will bring up a series of screens that guides the users to switch to the L2 network that the developer selected. Users will no longer need to manually enter the L2 network configs in their wallets and can make deposits and interact with the L2 networks right away.
_eth-sorbet saves you from managing user onboarding!_
_We handle wallet RPC calls to add network for users, instead of asking your users to do that manually._
## Install
```bash
npm install --save @huskyfinance/eth-sorbet
```
## Usage
See [example](./example) for more detailed usage guide.
```tsx
import React, { Component } from 'react'
// import modal and target network config
import { Sorbet, xDai } from '@huskyfinance/eth-sorbet'
// load css
import '@huskyfinance/eth-sorbet/dist/index.css'
// using web3
// const provider = web3.currentProvider
// using ethers
// provider should be type of ethers.ExternalProvider .
// using metamask directly
const provider = window.ethereum
const config = {
targetNetwork: xDai,
dappName: 'Example App',
open: isOpen,
handleClose: handleClose,
// optional
// the user address to check their balance.
address: userAddress,
// logo of your app
dappLogo: 'https://www.kkbox.com/about/img/app_icons/kkbox_app_icon.png',
// theme color
color: '#26EFE6',
// darkmode
darkMode: true
}
class Example extends Component {
render() {
return
}
}
```
## Supported Networks
| Network | Config | Native Deposit Supported |
| ------------------------- | ------ | ------------------------ |
| Arbitrum (Kovan) | ✅ | ✅ |
| Avalanche | ✅ | - |
| Binance Smart Chain | ✅ | - |
| Optimism (Kovan) | ✅ | ✅ |
| Optimism (Mainnet) | ✅ | ✅ |
| Polygon / Matic (Mainnet) | ✅ | ✅ |
| Polygon / Matic (Mumbai) | ✅ | ✅ |
| POA (Sokol) | ✅ | - |
| xDai | ✅ | ✅ |
## Supported Wallets
| Network | Add Network | Switch Network |
| -------- | ----------- | -------------- |
| MetaMask | ✅ | ✅ |
## Run in dev
Run the library:
```shell
cd \eth-sorbet
yarn start
```
In another terminal, run the example App which will refresh if the library changes
```shell
cd \eth-sorbet\example
yarn start
```
---
## License
MIT © 2021 [husky-finance](https://github.com/husky-finance)