> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# DynamicContextProvider

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

## Settings

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

### accessDeniedMessagePrimary

**Type:** `string`

**Description:** 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". For how access is determined, see [Access Control](/overview/access-control/overview).

### accessDeniedMessageSecondary

**Type:** `string`

**Description:** 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

**Type:** `AccessDeniedCustomButton`

**Description:** 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](/react/reference/objects/access-denied-custom-button)

### coinbaseWalletPreference

**Type:** `'all' | 'smartWalletOnly' | 'eoaOnly'`

**Description:** Determines which connection options users will see. Defaults to all. Please see: [https://www.smartwallet.dev/sdk/makeWeb3Provider#options-optional](https://www.smartwallet.dev/sdk/makeWeb3Provider#options-optional)

### cspNonce

**Type:** `string`

**Description:** A nonce value applied to all inline `<style>` and `<link>` tags injected by the SDK, including those inside Shadow DOM. Required when enforcing a strict Content Security Policy (CSP) that disallows `'unsafe-inline'` for styles. The nonce must match the value in your CSP header's `style-src` or `style-src-elem` directive. See the [Content Security Policy guide](/overview/security/content-security-policy) for full setup instructions.

### cssOverrides

**Type:** `string | JSX.Element`

**Description:** Allows for custom CSS overrides via ShadowDom. Please see: [Custom CSS](/react/using-our-ui/design-customizations/css/custom-css)]

### debugError

**Type:** `boolean`

**Description:** When enabled, errors caught during the authentication step and their stack trace will be set in a state and displayed in the front end.

### deepLinkPreference

**Type:** `'native' | 'universal'`

**Description:** Controls the type of deep link used when connecting a mobile wallet. Defaults to 'native'. This is useful for example if your app is running in a webview of a native mobile app, and you want to be able to link out to any wallet without having to modify your iOS build config. In this case, you can set this to 'universal'.

### displaySiweStatement

**Type:** `boolean`

**Description:** When enabled, this will show a message on terms of service and privacy policy in the signing message on the authentication step.

### enableVisitTrackingOnConnectOnly

**Type:** `boolean`

**Description:** 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

**Type:** `string`

**Description:** 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](https://app.dynamic.xyz/dashboard/api)

### events

**Type:** `DynamicEvents`

**Description:** 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 React SDK reference](/react/reference/quickstart)

### initialAuthenticationMode

**Type:** `AuthModeType`

**Description:** 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. See also the [setAuthMode](/react/reference/hooks/usedynamiccontext) method, which allows you to toggle this after the app has loaded.

### logLevel

**Type:** `keyof typeof LogLevel`

**Description:** The log level to use for client side logging with our SDK. Defaults to WARN

### mobileExperience

**Type:** `'in-app-browser' | 'redirect'`

**Description:** This setting determines how users connect on mobile devices. By default, it is set to 'in-app-browser', which means the connection will open within the wallet's in-app browser. If you prefer to have users connect via WalletConnect, set this option to 'redirect'. This will prompt users to accept connection requests in their wallet app and, for Phantom users, automatically redirect them back to their mobile browser. [See here for examples](#setting-mobile-experience)

### newToWeb3WalletChainMap

**Type:** `ChainToWalletMap`

**Description:** 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.

### networkValidationMode

**Type:** `'always' | 'sign-in' | 'never'`

**Description:** Note: Supported only in connect-only. Defines how the Dynamic SDK will enforce the wallet network.

* **always** - requires the wallet to be on an enabled network while connecting and while the session is active
* **sign-in** - will only enforce the network on connect
* **never** - completely turn off the network validation. Defaults to `sign-in`.

### onboardingImageUrl

**Type:** `string`

**Description:** 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

**Type:** `ReactNode | ReactNode[]`

**Description:** 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

**Type:** `string`

**Description:** 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.

### recommendedWallets

**Type:** `RecommendedWallet[]`

**Description:** Available from V1.2 only. An array of wallet keys that will be recommended to the user. See more in [our section on recommending wallets](/react/wallets/external-wallets/recommend-wallets).

### redirectUrl

**Type:** `string`

**Description:** When provided, this will redirect the user to the specified URL after the user has successfully gone through an oauth flow (social login or social account linking).

### shadowDOMEnabled

**Type:** `boolean`

**Description:** 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](/react/using-our-ui/design-customizations/css/custom-css)

### siweStatement

**Type:** `string`

**Description:** When provided, this custom message will be shown on the message to sign for the wallet signing step.

### termsOfServiceUrl

**Type:** `string`

**Description:** 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

**Type:** `[]walletConnector`

**Description:** 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.

### walletConnectPreferredChains

**Type:** Not specified

**Description:** 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](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-2.md) chain ID's. The format for this is `{namespace-goes-here}:{reference-goes-here}`. Currently we only support Ethereum, so it will always be `eip155:{reference-goes-here}`. For example, Ethereum mainnet being \['eip155:1']

### walletsFilter

**Type:** `(options: WalletOption[]) => WalletOption[]`

**Description:** 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.

### bridgeChains

**Type:** `WalletsByChain`

**Description:** (Only use with bridging) Which chains should be used for bridging.

### socialProvidersFilter

**Type:** `(providers: SocialOAuthProvider[]) => SocialOAuthProvider[]`

**Description:** 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

**Type:** `{ views: SdkView[], evmNetworks: EvmNetwork[] }`

**Description:** Used for passing in [Views](/react/reference/objects/views) or [evmNetworks](/react/chains/using-networks).

### enableConnectOnlyFallback

**Type:** `boolean`

**Description:** When `true`, enables the SDK to fallback to wallet connect-only auth mode if connection to Dynamic's servers is not possible. Available in version 1.1 and above

### defaultPhoneInputIso2

**Type:** `string`

**Description:** Used to define which phone number country code should be used as the default in all phone inputs, ex: `defaultPhoneInputIso2: "fr"`

### social

**Type:** `{ strategy: 'redirect' | 'popup' }`

**Description:** Allow to customize the default social behavior from 'redirect' to 'popup'

### tokenFilter

**Type:** `(tokens: TokenBalance[]) => TokenBalance[]`

**Description:** Allows filtering which tokens show in the widget balance view. Hidden tokens will not count towards the total balance.

## walletConnectors

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

<Tip>
  Please note that @dynamic-labs/ethereum (EthereumWalletConnectors) contains
  all EVM chains, not just Ethereum. It also includes Dynamic-powered embedded
  wallets, as these are EVM based too.
</Tip>

| 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](/react/using-our-ui/design-customizations/customizing-copy-translations) and [reference](/react/reference/objects/locale).

## Examples

#### Initiate Dynamic using only defaults

```JavaScript theme={"system"}
<DynamicContextProvider
    settings={{
      environmentId: 'YOUR_ENVIRONMENT_ID'
  }}>
  <MyChildComponents />
</DynamicContextProvider>
```

#### Initiate Dynamic with Ethereum and Starknet wallets enabled

```JavaScript theme={"system"}
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 all available methods

```JavaScript theme={"system"}
<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,
      events: {
        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,
      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

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

#### With events callbacks

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

#### Setting mobile experience

##### Globally for all wallets

```JavaScript theme={"system"}
<DynamicContextProvider
    settings={{
      environmentId: '<<sandboxEnvironmentId>>',
      mobileExperience: 'redirect' | 'in-app-browser'
  }}>
  <MyChildComponents />
</DynamicContextProvider>
```

##### On a wallet by wallet basis with optional default for all non-specified wallets

**Note**: The walletKey can be found on the chains and networks page of the dashboard [here](https://app.dynamic.xyz/dashboard/chains-and-networks#evm)

```JavaScript theme={"system"}
<DynamicContextProvider
    settings={{
      environmentId: '<<sandboxEnvironmentId>>',
      mobileExperience: {
        '<<walletKey>>': 'redirect' | 'in-app-browser',
        default: 'in-app-browser'
      }
  }}>
  <MyChildComponents />
</DynamicContextProvider>
```