🧩
Rango Widget
Rango Widget Integration Guide
The Rango Widget offers a simple and efficient solution for enabling cross-chain swaps within your dApp. With its customizable features, you can tailor the widget to meet your specific requirements. We encourage you to explore the full potential of the Rango Widget and leverage its capabilities to enhance your dApp's functionality.
You could play with different widget configurations and themes using this playground:
You could also play with the latest release in this code sandbox:
Rango widget is currently undergoing extensive development. Our primary focus is to ensure that we provide the best possible user experience and customizable options for dApps.
We would greatly appreciate any feedback you may have in terms of specific requirements for functionality and customization. Your input is crucial to our development process, and we will prioritize your needs in our upcoming iterations. Thank you for your continued support.
First you need to add
@rango-dev/widget-embedded dependency to your project.# using yarn
yarn add @rango-dev/widget-embedded
# or using npm
npm install --save @rango-dev/widget-embedded
Then you could use it in your project it using this code:
1
import { Widget, WidgetConfig } from "@rango-dev/widget-embedded";
2
3
export default function App() {
4
const config: WidgetConfig = {
5
// use your own api key
6
apiKey: "c6381a79-2817-4602-83bf-6a641a409e32"
7
};
8
return (
9
<div className="App">
10
<Widget config={config} />
11
</div>
12
);
13
}
14
Also if you are using
react-router in your project, you could use it like this:import { Widget, WidgetConfig } from "@rango-dev/widget-embedded";
export default function App() {
const config: WidgetConfig = {
// use your own api key
apiKey: "c6381a79-2817-4602-83bf-6a641a409e32"
};
return (
<div>
<Routes>
// your other routes ...
// widget route
<Route path="/custom-url" element={<Widget config={config} />} />
</Routes>
</div>
);
}
Here you could explore list of all possible configurations for the widget supported at the moment.
Property | Description |
|---|---|
apiKey | The API key used to communicate with Rango API. |
affiliateRef | The affiliate reference is used to set and track referrals or affiliations for the dApps. |
amount | The default input amount. |
from | Default blockchain, token selected and a filter for supported blockchains and tokens for the source blockchains and tokens. |
to | Default blockchain, token selected and a filter for supported blockchains and tokens for the destination blockchains and tokens. |
liquiditySources | Filter supported dexes and bridges for the routing based on your needs. |
wallets | Use this if you want to filter supported wallets to some limited ones. |
multiWallets | A boolean value that indicates whether the widget should allow the user to select multiple wallets or not. |
theme | It is used to specify the visual theme of the widget. It is of type WidgetTheme, which is an interface that defines the various properties of the theme, such as colors, fonts, and others. |
Last modified 8d ago