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

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