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,
pwdRecoveryMeta: {
storeSecretUrl: "POST-RECOVERY-KEY-URL",
retrieveSecretUrl: "GET-RECOVERY-KEY-URL"
}
}metafiSSO.pwdRecoveryMeta?
Object
Optional. If you would like to self custody the cs share of your customers, Pass in URLs to store and retrieve the share when the user attempts to recover their wallet. If you do not pass in this field, Metafi will custody the cs shares for you.
Please note that if your service is down, users will not be able to recover their wallet on new devices.
{
storeSecretUrl: "POST-RECOVERY-KEY-URL",
retrieveSecretUrl: "GET-RECOVERY-KEY-URL"
}(POST) storeSecretUrl
Request body:
metafiUserId (String)
share (String)
Response: 204 No Content
(GET) retrieveSecretUrl
Request body:
metafiUserId (String)
Response: 200 Ok
body:
share (String)
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