⚙️Customization
Rango Widget Config
Here you could explore list of all possible configurations for the widget supported at the moment.
// sample widget config
const config = {
// your dapp api key in Rango
// this API key is only for test purpose. Don't use it in production.
apiKey: 'c6381a79-2817-4602-83bf-6a641a409e32',
// your project wallet connect project id
// Get your Wallet Connect project id from https://cloud.walletconnect.com/
walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b'
// override the widget title
title: "My App",
// affiliate configs
affiliate: {
// check widget monetization guide
key: "your affiliate key",
percent: 1
},
// the default amount for the swap input
amount: 1,
// configuration related to the source blockchain/token input
from: {
// limiting blockchains to some specific ones
blockchains: [
'BTC',
'LTC',
'BCH',
'DASH'
],
// the default blockchain for the source input
blockchain: 'BTC',
// the default token for the source input
token: {
blockchain: 'BTC',
address: null,
symbol: 'BTC'
}
},
// same as above but for the destination blockchain and token
to: {
blockchains: [
'ETH'
],
blockchain: 'ETH',
token: {
blockchain: 'ETH',
address: null,
symbol: 'ETH'
}
},
// all theme configuration goes here
theme: {
// the default theme for the widget
mode: 'dark',
// overriding the theme colors for dark/light modes
colors: {
dark: {
neutral: '#434965',
primary: '#1C3CF1',
secondary: '#2284ED',
background: '#070917',
foreground: '#FDFDFD',
info: '#5BABFF'
},
light: {
primary: '#1C3CF1',
secondary: '#469BF5',
neutral: '#e6e6e5',
background: '#FDFDFD',
foreground: '#010101',
info: '#5BABFF'
}
},
// widget box border radius
borderRadius: 0,
// widget buttons border radius
secondaryBorderRadius: 0,
// passing true for singleTheme will limit the theme only to
// dark or light based on value passed in 'mode'
singleTheme: false
},
// You could filter supported wallets here
wallets: [
'metamask',
'wallet-connect-2',
'trust-wallet',
'keplr',
'phantom'
],
// change the default language to spanish
language: 'es',
}
Last updated