wido-widget-v5

🕹 Wido Widget

Wido Widget combines ease of use with great UX. Protocols integrate Wido Widget to accept deposits in any token, from any chain, in a single transaction.

Example use cases supported by Wido Widget:

• Single token deposits into LP pools, with any token, from any chain (Zaps)
• Deposit any token into any farm or vault (works cross-chain)
• Deposit any token from Ethereum into Starknet, including pools, farms or vaults on Starknet (bridge + deposit)
• Deposit any token from Ethereum into ZK Sync, including pools, farms or vaults on Starknet (bridge + deposit)

Wido Widget: Deposit ETH from Ethereum into a JediSwap LP pool on Starknet. All in a single transaction.

Getting started

Integrating Wido Widget only takes few lines of code.

First install the wido-widget npm package which contains React components used to integrate Wido's zap functionality in a small and configurable user interface element. You can customize the theme (colors, fonts, border radius, and more) to match the style of your application.

Install the widget via npm or yarn.

yarn add wido-widget react-redux

npm i --save wido-widget react-redux

After installing, embed the React component in your application.

import React from "react";
import ReactDOM from "react-dom";
import { SwapWidget } from 'wido-widget'

function App() {
  return (
    <SwapWidget
      onConnectWalletClick={handleConnectWalletClick}
      ethProvider={ethersjsInstance}
      snAccount={starknetjsInstance}
      // optional params
      theme={theme}
      onTxSubmit={handleTxSubmit}
      onTxSuccess={handleTxSuccess}
      onTxFail={handleTxFail}
    />
  )
}

ReactDOM.render(
  <App />,
  document.getElementById("my-app")
)

You are expected to handle the onConnectWalletClick callback by integrating with @web3-react/core, @web3-onboard/core or any other way of managing the wallet connection and then pass a Web3Provider instance that comes from the ethers.js. When integrating the Starknet network, you are also expected to pass in the Account instance that you created with starknet.js.

Documentation

• Guide
• API Reference