⚡Zap Widget

Wido Widget enables protocols to accept deposits in any token, from any chain, in a single transaction. Wido Widget combines ease of integration with great UX.

Pivot alert: Wido has become Walnut. This docs as well as the Wido Zap API will be discontinued. Read full announcement.

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 { WidoWidget } from 'wido-widget'

function App() {
  return (
    <WidoWidget
      onConnectWalletClick={handleConnectWalletClick}
      ethProvider={ethersjsInstance}
      snAccount={starknetjsInstance}
      // optional params
      partner={partnerAddr} // integrating partner address
      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.

Note: To support Ethereum to Starknet, both wallets need to be connected: the Ethereum wallet for signing transactions and the Starknet wallet for getting the recipient address.

Presetting a token or a token list

In the following example, we are narrowing the fromTokens list to only show tokens on Ethereum, as well as narrowing the toTokens list to only show LP tokens for the Jediswap protocol on Starknet.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { WidoWidget } from 'wido-widget'

function App() {
  const [fromTokens, setFromTokens] = useState<{ chainId: number; address: string }[]>([])
  const [toTokens, setToTokens] = useState<{ chainId: number; address: string }[]>([])

  useEffect(() => {
      getSupportedTokens({ chainId: [1] }).then(setFromTokens)
      getSupportedTokens({ chainId: [15366], protocol: ['jediswap.xyz'] }).then(setToTokens)
  }, [setFromTokens, setToTokens])

  return (
    <WidoWidget
      onConnectWalletClick={handleConnectWalletClick}
      ethProvider={ethersjsInstance}
      snAccount={starknetjsInstance}
      fromTokens={fromTokens}
      toTokens={toTokens}
    />
  )
}

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

Documentation

• Guide

• API Reference