⚡
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.
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.
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.
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")
)
Last modified 3mo ago