🔸Customisation

Step by step guide to set up the Marswap Aggregator Widget

Widget Title

OPTIONAL

Set a custom widget title using plain text, HTML or ReactNode element.

Text

React

<MarswapWidget 
    title={'🚀 Marswap'}
/>

HTML/JS

InitMarswapWidget({widgetElementId: 'marswap-widget'}, {
    title: '🚀 Marswap'
})

HTML

React

<MarswapWidget 
    title={<div>🚀 Marswap'</div>}
/>

HTML/JS

InitMarswapWidget({widgetElementId: 'marswap-widget'}, {
    title: <div>🚀 Marswap'</div>
})

React Element

React

//Create swap title React component
const SwapTitle = () => {
    return (
        <div style={{ display: 'flex', alignItems: 'center' }}>
            <img 
                src='https://agg.marswap.exchange/marswap-logo-modified.png'  // Replace this URL with the URL of the logo you wish to display
                style={{ width: 32, height: 32, marginRight: 10 }} 
                alt='Marswap Logo'
            />
            <p style={{ margin: 0, fontSize: 24 }}>Swap Title</p> // Replace 'Swap Title' with the text you want to display
        </div>
    );
}

<MarswapWidget 
    title={<SwapTitle />} //Pass the swap title component into the Widget
/>

HTML/JS

InitMarswapWidget({widgetElementId: 'marswap-widget'}, {
    title: MarswapReact.createElement('div', {
        style: { 
            display: 'flex',
            alignItems: 'center'
        }},
        MarswapReact.createElement('img', {
            src: 'https://agg.marswap.exchange/marswap-logo-modified.png', // Replace this URL with the URL of the logo you wish to display
            style: { width: 32, height: 32, marginRight: 10 },
        }),
        MarswapReact.createElement('p', { 
        style: { 
            margin: 0,
            fontSize: 24
        }},
        'Swap Title'), // Replace 'Swap Title' with the text you want to display
    ),
})

Theme

OPTIONAL

Customise the color scheme, font and border properties of the widget.

All colors are configured using hex codes.

React

<MarswapWidget 
    theme={{
        //Text colors
        text: '#FFFFFF',
        subText: '#a2a2a2',
        buttonText: '#212121',
        cardTitle: '#FFFFFF',
        
        //Font
        fontFamily: 'Roboto',
        
        //Component colors
        primary: '#090909', //Card background
        dialog: '#ff890b', //Pop-up card background and main button text
        secondary: '#1C1C1C', //Inner boxes
        interactive: '#FFFFFF',
        stroke: '#505050',
        accent: '#ff890b', //Main button and refresh logo
        success: '#189470',
        warning: '#FF9901',
        error: '#F84242',
        
        //Radii and Shadow
        borderRadius: '8px',
        buttonRadius: '5px',
        boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.04)'
    }}
/>

HTML/JS

InitMarswapWidget({widgetElementId: 'marswap-widget'}, {
    theme: {
        //Text colors
        text: '#FFFFFF',
        subText: '#a2a2a2',
        buttonText: '#212121',
        cardTitle: '#FFFFFF',
        
        // Font
        fontFamily: 'Roboto',
        
        //Component colors
        primary: '#090909', //Card background
        dialog: '#ff890b', //Pop-up card background and main button text
        secondary: '#1C1C1C', //Inner boxes
        interactive: '#FFFFFF',
        stroke: '#505050',
        accent: '#ff890b', //Main button, refresh logo and links
        success: '#189470',
        warning: '#FF9901',
        error: '#F84242',
        
        //Radii and Shadow
        borderRadius: '8px',
        buttonRadius: '5px',
        boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.04)',
    }
})