🕹
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.
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.Last modified 26d ago