Comment on page
Provider Initialisation
This function does not trigger any UI elements
The base component for the Metafi SDK which takes in your API Key, unique user ID, and other options as props.
<MetafiProvider
apiKey={apiKey}
secretKey={secretKey}
supportedChains={[supportedChains]}
customTokens={[customTokens]}
options={options}
metafiSSO={metafiSSO}
pwdRecoveryMeta={pwdRecoveryMeta}
>
Parameter | Type | Definition |
|---|---|---|
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, } |
N/A
1
import { MetafiProvider, RegisterToken, chains } from '@metafi/metafi-react-package';
2
3
function App() {
4
const options = {
5
logo: "./logo-reverse.png",
6
theme: {
7
fontColors: {
8
primary: "rgb(219 235 234)",
9
secondary: "#e8e8e8"
10
},
11
bgColor: "linear-gradient(227.3deg, #013742 0%, #192434 100.84%)",
12
ctaButton: {
13
color: "rgba(255,255,255,0.5)",
14
fontColor: "rgba(255,255,255)",
15
disabled: {
16
color: "rgba(255,255,255,0.2)",
17
fontColor: "rgba(255,255,255, 0.5)",
18
}
19
},
20
optionButton: {
21
color: "rgba(255,255,255,0.2)",
22
fontColor: "#fff"
23
},
24
metafiLogoColor: 'light',
25
},
26
}
27
28
const wethToken = RegisterToken(
29
'Wrapped Ethereum',
30
'goerliWETH',
31
chains.goerli,
32
'https://d2qdyxy3mxzsfv.cloudfront.net/images/logo/ethereum.png',
33
'0xb4fbf271143f4fbf7b91a5ded31805e42b2208d6',
34
18,
35
)
36
37
return (
38
<MetafiProvider
39
apiKey={'live-demo-key'}
40
secretKey={'live-secret-key'}
41
supportedChains={[chains.eth,chains.goerli,chains.mumbai,chains.matic]}
42
options={options[0]}
43
customTokens={[wethToken]}
44
metafiSSO={{ enabled:true }}
45
>
46
<div>
47
<header>
48
{childComponents}
49
</header>
50
</div>
51
</MetafiProvider>
52
);
53
}
Last modified 9mo ago