Provider Initialisation
Description
The base component for the Metafi SDK which takes in your API Key, unique user ID, and other options as props.
Details
Signature
<MetafiProvider
apiKey={apiKey}
secretKey={secretKey}
supportedChains={[supportedChains]}
customTokens={[customTokens]}
options={options}
metafiSSO={metafiSSO}
pwdRecoveryMeta={pwdRecoveryMeta}
>
Arguments
apiKey
String
Your API Key. This can be displayed publicly
secretKey
String
Your Secret Key. Keep this securely and do not expose.
supportedChains
Array
An array of chains supported by your application. Please refer to the section on Chains for more information on what chains we support.
customTokens
Array
An array of custom tokens that you want supported in your users wallet. Please refer to the section on registering a custom token for more information.
options
Object
A list of options to customise the look and feel of how the Metafi wallet looks. Here you can pass in a custom logo, as well as theme styling options. More information can be found in the UI customisation section.
{
"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'
},
"optionButton": {
"color": 'rgba(0,0,0,0.1)',
"fontColor": '#ffffff'
},
"metafiLogoColor": 'light',
},
}
metafiSSO
Object
Specify options related to metafiSSO. Sample object:
{
enabled: true,
}
Return Value
N/A
Example
import { MetafiProvider, RegisterToken, chains } from '@metafi/metafi-react-package';
function App() {
const options = {
logo: "./logo-reverse.png",
theme: {
fontColors: {
primary: "rgb(219 235 234)",
secondary: "#e8e8e8"
},
bgColor: "linear-gradient(227.3deg, #013742 0%, #192434 100.84%)",
ctaButton: {
color: "rgba(255,255,255,0.5)",
fontColor: "rgba(255,255,255)",
disabled: {
color: "rgba(255,255,255,0.2)",
fontColor: "rgba(255,255,255, 0.5)",
}
},
optionButton: {
color: "rgba(255,255,255,0.2)",
fontColor: "#fff"
},
metafiLogoColor: 'light',
},
}
const wethToken = RegisterToken(
'Wrapped Ethereum',
'goerliWETH',
chains.goerli,
'https://d2qdyxy3mxzsfv.cloudfront.net/images/logo/ethereum.png',
'0xb4fbf271143f4fbf7b91a5ded31805e42b2208d6',
18,
)
return (
<MetafiProvider
apiKey={'live-demo-key'}
secretKey={'live-secret-key'}
supportedChains={[chains.eth,chains.goerli,chains.mumbai,chains.matic]}
options={options[0]}
customTokens={[wethToken]}
metafiSSO={{ enabled:true }}
>
<div>
<header>
{childComponents}
</header>
</div>
</MetafiProvider>
);
}
Last updated