tpikachu / eth-sorbet

Easy L2/side-chain onboarding component for react Dapps

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

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

npm install --save @huskyfinance/eth-sorbet

Usage

See example for more detailed usage guide.

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'

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 <Sorbet config={config} walletProvider={provider} />
  }
}

Supported Networks

Network	Config	Native Deposit Supported
Arbitrum (Kovan)	✅	✅
Avalanche	✅	-
Binance Smart Chain	✅	-
Polygon / Matic (Mainnet)	✅	✅
Polygon / Matic (Mumbai)	✅	✅
Optimism (Kovan)	✅	✅
Optimism (Mainnet)	✅	✅
POA (Sokol)	✅	-
xDai	✅	✅

Supported Wallets

Network	Add Network	Switch Network
MetaMask	✅	✅

Run in dev

Run the library:

cd \eth-sorbet
yarn start

In another terminal, run the example App which will refresh if the library changes

cd \eth-sorbet\example
yarn start

---

License

MIT © 2021 husky-finance