Provider Initialisation

This function does not trigger any UI elements

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

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, 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>
    );
}