DynamicContextProvider

Settings

Passed in using the “settings” prop, available when you first initialize DynamicContextProvider in your App.

Method	Description
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.”
accessDeniedButton?: AccessDeniedCustomButton;	Custom secondary error button text and action when a wallet attempts to authenticate via Dynamic and is rejected because it does not have access. Defaults to “Try another method” and allow user to choose another login option. Please see: AccessDeniedCustomButton
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.
displaySiweStatement?: boolean;	When enabled, this will show a message on terms of service and privacy policy in the signing message on the authentication step.
enableForcedNetworkValidation?: boolean;	Tells Dynamic to force user’s wallets to be on a supported network via our network switch prompt.
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 the main SDK reference
evmNetworks?: []EvmNetwork	An array of EvmNetwork, more defails in the custom networks guide.
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.
walletConnectors?: []walletConnector	When provided, will enable whatever connectors you pass so that your end user can signup/login using those wallets. For the list of available connectors, see the walletConnectors section below.
walletConnectorExtensions?: []WalletConnectorExtension	Currently only used to enable Ethers instead of Viem which is the default, for example see examples section below. For more info on Ethers instead of viem please see here
walletConnectPreferredChains	Relevant to Wallet Connect only, used to determine which chains to establish a connection with first. The value must be an array containing CAIP-2 chain ID’s. The format for this is ’:’. Currently we only support Ethereum, so it will always be ‘eip155:’. For example, Ethereum mainnet being [‘eip155:1’]
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.
walletsByChain?: WalletsByChain	Mainly used for bridging, this array of wallets
socialProvidersFilter?: (providers: SocialOAuthProvider[]) => SocialOAuthProvider[];	When specified, this is a custom function that allows clients of Dynamic SDK using social auth to filter or modify the order of the social options displayed to the user. For example, we can only show github oauth option: `socialProvidersFilter: (providers) => ([‘github’]).
overrides: {views: SdkView[]}	Used only for passing in Views right now. You can find examples in the view page previously mentioned or a more complete example here.

walletConnectors

Here are the possible options for the walletConnectors array. For each one, you must make sure you have installed the package first:

Please note that @dynamic-labs/ethereum (EthereumWalletConnectors) contains all EVM chains, not just Ethereum. It also includes Dynamic Embedded Wallets, as these are EVM based too.

Package Name	Chain	WalletConnector to include
@dynamic-labs/ethereum	EVM	`EthereumWalletConnectors`
@dynamic-labs/algorand	ALGO	`AlgorandWalletConnectors`
@dynamic-labs/solana	SOL	`SolanaWalletConnectors`
@dynamic-labs/flow	FLOW	`FlowWalletConnectors`
@dynamic-labs/starknet	STARK	`StarknetWalletConnectors`
@dynamic-labs/cosmos	COSMOS	`CosmosWalletConnectors`

EVM Addon Wallets

Package Name	Which Wallets	WalletConnector to include
@dynamic-labs/magic	magic	`MagicWalletConnectors`
@dynamic-labs/blocto	blocto	`BloctoEvmWalletConnectors`

Locale

This prop is for editing copy and adding translations to the SDK. For more information, please see the customizing copy guide and reference.

Examples

Initiate Dynamic using only defaults

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

Initiate Dynamic with Ethereum and Starknet wallets enabled

import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import { StarknetWalletConnectors } from "@dynamic-labs/starknet";

<DynamicContextProvider
    settings={{
      environmentId: 'YOUR_ENVIRONMENT_ID',
      walletConnectors: [EthereumWalletConnectors, StarknetWalletConnectors]
  }}>
  <MyChildComponents />
</DynamicContextProvider>

Initiate Dynamic using Ethers instead of Viem


import { EthersExtension } from "@dynamic-labs/ethers-v5";

<DynamicContextProvider
  settings={{
    environmentId: "XXXXX",
    walletConnectorExtensions: [EthersExtension],
  }}
>
  <App />
</DynamicContextProvider>

Initiate Dynamic using all available methods

<DynamicContextProvider
    settings={{
      environmentId: 'YOUR_ENVIRONMENT_ID',
      accessDeniedMessagePrimary: 'Custom main error message',
      accessDeniedMessageSecondary: 'Custom secondary error message',
      cssOverrides: ".wallet-list-item__tile { background-color: lightblue; }",
      debugError: true,
      displaySiweStatement: true,
      enableVisitTrackingOnConnectOnly: true,
      eventsCallbacks: {
        onAuthFlowClose: () => {
          console.log('in onAuthFlowClose');
        },
        onAuthFlowOpen: () => {
          console.log('in onAuthFlowOpen');
        },
        onAuthSuccess: () => {
          navigate('/dashboard/overview');
        },
        onLogout: () => {
          console.log('in onLogout');
        },
      },
      initialAuthenticationMode: 'connect-only',
      logLevel: 'DEBUG',
      newToWeb3WalletChainMap: {
        1: ['metamask', 'walletconnect'],
        137: ['metamask', 'walletconnect'],
        56: ['metamask', 'walletconnect'],
        80001: ['metamask', 'walletconnect'],
      },
      onboardingImageUrl: 'https://i.imgur.com/3g7nmJC.png',
      policiesConsentInnerComponent: (
        <div>
          <p>
            By clicking “Connect”, you agree to our{' '}
            <a href="https://www.dynamic.xyz/terms-of-service" target="_blank">
              Terms of Service
            </a>{' '}
            and{' '}
            <a href="https://www.dynamic.xyz/privacy-policy" target="_blank">
              Privacy Policy
            </a>
            .
          </p>
        </div>
      ),
      privacyPolicyUrl: 'https://www.dynamic.xyz/privacy-policy',
      shadowDOMEnabled: true,
      signWithEmailWalletName: 'walletx',
      siweStatement: 'Custom message to sign',
      termsOfServiceUrl: 'https://www.dynamic.xyz/terms-of-service',
      walletsFilter: (wallets) => wallets.filter((w) => w.key !== 'walletx'),
  }}>
  <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>

React SDK

​Settings

​walletConnectors

EVM Addon Wallets

​Locale

​Examples

​Initiate Dynamic using only defaults

​Initiate Dynamic with Ethereum and Starknet wallets enabled

​Initiate Dynamic using Ethers instead of Viem

​Initiate Dynamic using all available methods

​Do not show walletx on the wallet list

​With events callbacks

​More Reading