Log in

DynamicContextProvider

Suggest Edits

Settings

Settings available when you first initialize DynamicContextProvider in your App.

MethodDescription
accessDeniedMessagePrimary?: string;Custom main error message used when a wallet attempts to authenticate via Dynamic and is rejected because it does not have access. Defaults to “Access denied”
accessDeniedMessageSecondary?: string;Custom secondary error message used when a wallet attempts to authenticate via Dynamic and is rejected because it does not have access. Defaults to “We couldn't find your wallet address on our access list of customers.”
cssOverrides?: string | JSX.Element;Allows for custom CSS overrides via ShadowDom. Please see: Custom CSS]
debugError?: boolean;When enabled, errors caught during the authentication step and their stack trace will be set in a state and displayed in the front end.
displayTermsOfService?: boolean;When enabled, this will show a message on terms of service and privacy policy in the signing message on the authentication step.
enableVisitTrackingOnConnectOnly?: boolean;When the Dynamic SDK is being used with auth mode = connect-only, we require this to be set to “true” to track visits of connected wallets in this environment.
environmentId: string;You will need to specify your app’s environment ID, which refers to a unique environment and its settings in Dynamic. To get your environment ID, go to dashboard’s API tab
eventsCallbacks?: DynamicEventsCallbacks;This prop allows custom event callbacks after important events during the authentication flows for Dynamic's React SDK. For more information, please see: Callbacks
initialAuthenticationMode?: AuthModeType;Sets the initial SDK authentication mode to either connect-only or connect-and-sign. connect-only does not require users to authenticate to prove ownership of their wallet. connect-and-sign will require an additional step for users to prove ownership of their wallet. Defaults to connect-and-sign.
logLevel?: keyof typeof LogLevel;The log level to use for client side logging with our SDK. Defaults to WARN
newToWeb3WalletChainMap?: ChainToWalletMap;When provided, this is used in the Get your first wallet view in the wallet list modal. This can be helpful to steer initial customers who do not have a wallet to download and use a specific chain and wallet.
onboardingImageUrl?: string;When provided, this image will be shown during the customer information capture step after a wallet successfully authenticates with Dynamic and the environment requires additional information from the user.
policiesConsentInnerComponent?: ReactNode | ReactNode[];For environments with the username setting enabled, you will need to pass in a value for this prop to show a custom prompt or label for the policies contest checkboxes displayed during customer information capture after signing.
privacyPolicyUrl?: string;When provided, this will display a privacy policy URL on the signing step. This should be set to a URL of your organization’s privacy policy web page.
shadowDOMEnabled?: boolean;Shadow DOM allows the SDK to look as intended wherever it is hosted and it plays nicely with your existing styling system. For more information, please see: Custom CSS
signWithEmailWalletName?: string;Wallet key to set a custodial wallet as a sign in with email button
siweStatement?: string;When provided, this custom message will be shown on the message to sign for the wallet signing step.
termsOfServiceUrl?: string;When provided, this will display a terms of service URL on the signing step. This should be set to a URL of your organization’s terms of service web page.
walletsFilter?: (options: WalletOption[]) => WalletOption[];When specified, this is a custom function that allows clients of Dynamic SDK to filter out wallet options based on a function on the wallet options. For example: walletsFilter: (wallets) => wallets.filter((w) => w.key !== 'walletx') will exclude walletx from showing up on the wallet list.

Examples

Initiate Dynamic using only defaults

  <DynamicContextProvider
     settings={{
       environmentId: '<<sandboxEnvironmentId>>'
    }}>
    <MyChildComponents /> 
  </DynamicContextProvider>

Do not show walletx on the wallet list

    <DynamicContextProvider
      settings={{
        environmentId: '<<sandboxEnvironmentId>>'
        walletsFilter: (wallets) => wallets.filter((w) => w.key !== 'walletx'),
      }}
    >
      <MyChildComponents /> 
    </DynamicContextProvider>

With events callbacks

  <DynamicContextProvider
     settings={{
       environmentId: '<<sandboxEnvironmentId>>',
           eventsCallbacks: {
         onAuthFlowClose: () => {
           console.log('in onAuthFlowClose');
         },
         onAuthFlowOpen: () => {
           console.log('in onAuthFlowOpen');
         },
         onAuthSuccess: () => {
           navigate('/dashboard/overview');
         },
         onLogout: () => {
           console.log('in onLogout');
         },
       },
    }}>
    <MyChildComponents /> 
  </DynamicContextProvider>

Updated about 2 months ago

What’s Next