⚙️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',
}