UI Customization
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.
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 |
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>
);
};
Last modified 7mo ago