UI Customization

Summary

You can customise the look and feel of the wallet to suit the UI of your game. Currently, you can customise the colours of the wallet, however we are constantly working to add more customisation options. If you have any requests, please post it on our Discord and we will look into it.

Reference

You can customise the theme of the wallet using the theme object passed in as an option while initialising the Metafi Component. It is an optional field, and leaving it empty will cause the wallet to use the default theme.

The theme object accepts the following parameters.

Parameter	Type	Definition
fontColors?	Object	Allows you to adjust the font colours of the wallet. Accepts a primary and secondary colour - primary is used for headings, and secondary is used for most other text. Example: fontColors: { primary: '#1f0203', secondary: '#561d19' }
bgColor?	String	Allows you to adjust the background colour of the wallet, as well as the bg colour of menus and popups. Accepts any CSS colour string as input. Example: bgColor: 'linear-gradient(0deg, #f3b344 0%, #d27435 100%)'
ctaButton?	Object	Adjust the colours of CTA Buttons in the wallet. You can adjust the font colour and background colour of the buttons. Example: ctaButton: { color: "#fbe383", // adjusts background color fontColor: "#ffffff", disabled: { color: "rgba(255,255,255,0.2)", fontColor: "rgba(255,255,255, 0.5)", }, },
optionButton?	Object	Adjust the colours of non-CTA Buttons in the wallet. You can adjust the font colour and background colour of the buttons. Example: optionButton: { color: 'rgba(0,0,0,0.2)', fontColor: '#561d19' }
metafiLogoColor?	String	Set the Metafi logo to either light mode or dark mode. For a dark background, please set the Metafi Logo to light colour. the default is dark

Example

import { MetafiProvider, chains } from '@metafi/metafi-react-package';

function App() {
    return (
    <MetafiProvider
        apiKey={"YOUR_API_KEY"}
        secretKey={"YOUR_SECRET_KEY"}
        supportedChains={[chains.eth]}
        customTokens={} // for your custom tokens
        options={
            "logo": "./logo.png", // pass in the URL or path to your logo
            "theme": {
                fontColors: { 
                    primary: '#ffffff', 
                    secondary: '#e8e8e8'
                },
                bgColor: 'linear-gradient(40deg, rgba(209,29,255,1) 0%, rgba(7,52,235,1) 100%)',
                ctaButton: {
                    color: '#430aa0',
                    fontColor: '#ffffff'
                    disabled: {
                        color: "rgba(255,255,255,0.2)",
                        fontColor: "rgba(255,255,255, 0.5)",
                    },
                },
                optionButton: {
                    color: 'rgba(0,0,0,0.1)',
                    fontColor: '#ffffff'
                },
                metafiLogoColor: 'light',
            },
        }
    >
        <YourComponents>
        ...
        </YourComponents>
    </MetafiProvider>
    );
};