deSwap 🔁
deSwap Widget
Getting Started with the deSwap Widget
With just a few lines of code, all projects and developers can embed a cross-chain exchange between arbitrary assets within your app (mobile app, website, dApp, etc.) based on the deBridge protocol. You can make the widget part of your app and you're fully free to customize colors, fonts, chains, and tokens according to your design and preferences. Here's an example:
Requirements
The widget is based on web technology, that's why your app must support technology such as JavaScript, HTML, CSS or use webView to add the widget.
You can use any type of framework for the web app. The launch of the widget is going on through iframe embedded on the page. The API integration is based on JavaScript.
Widget embedding
Here are the different steps to add the widget:
- Connect js script to your app
1
<script src="
2
https://https://app.debridge.finance/assets/scripts/widget.js
3
"></script>
Copied!
- Add html element with unique id on page
- Generate js object with the description of the widget settings. You can use the builder of deSwap Widget for auto-generation js object.
- Initialize deBridge.widget(initObject) , where initObject. - object with all settings.
Initializing must be executed after connection from step 1.
Widget object settings description:
- 1.element: string (mandatory) - unique id of Html element on page
- 2.v: string - widget version( possible value '1')
- 3.mode: string - type of project (possible value ‘deswap’)
- 4.title: string - widget header
- 5.width: number - width of widget
- 6.height: number - height of widget
- 7.inputChain: number - id of inputChain (possible value: 1, 56, 137, 42161, 43114)
- 8.outputChain: number - id of outputChain (possible value: 1, 56, 137, 42161, 43114)
- 9.inputCurrency: string - address of input token
- 10.outputCurrency:string - address of output token
- 11.address: string - address of receiver
- 12.amount: - amount of exchange
- 13.lang: string - default language of widget( possible value: 'en', 'fr', 'jp', 'ko', 'ru', 'vi', 'zh')
- 14.styles: string - base64 view of styles object. Described below
- 15.theme: string - day/night theme (possible value ’dark’,’light’)
- 16.r: string - refferal address
At this moment only the "element" attribute is mandatory
Example:
1
{
2
"element": "debridgeWidget",
3
“v”: ‘1’,
4
“mode”: ‘deswap’,
5
"title": "deSwap",
6
"width": "600",
7
"height": "800",
8
must be "inputChain": "56",
9
"outputChain": "1",
10
"inputCurrency": "0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d",
11
"outputCurrency": "0xdac17f958d2ee523a2206206994597c13d831ec7",
12
"address": "0x64023dEcf09f20bA403305F5A2946b5b33d1933B",
13
"amount": "10",
14
"lang": "en",
15
"mode": "deswap",
16
"styles": "eyJmb250RmFtaWx5IjoiQWJlbCJ9",
17
"theme": "dark",
18
“r”: ‘3981’
19
}
Copied!
object Styles consist of the following fields:
1
{
2
appBackground: string,
3
appAccentBg: string,
4
chartBg:string,
5
primary: string,
6
secondary: string,
7
badge: string,
8
borderColor: string,
9
borderRadius: number,
10
fontColor:string,
11
fontColorAccent:string,
12
fontFamily: string
13
}
Copied!
deSwap Widget builder
- 1.Widget settings fields.
- 2.Widget preview.
- 3.Field with source code for embedding in the application
Algorithm of work
- 1.Fill in the fields of widget settings to see your future widget. All field changes are updated in real-time.
- 2.Once UI and other settings suit your requirements, you can just copy the source code to your project to embed the widget according to the "Widget embedding" section.
Last modified 21d ago