Skip to main content

Recommended: JavaScript SDK with React Hooks

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) to get started.
Views are a new feature as of SDK V0.19, please be aware there may be breaking changes in the future.

​
What is it?

Views are used to customize the kind of UI that shows up at any point in time in your application.

​
How does it work?

Views are used primarily in the overrides prop of the DynamicContextProvider. You pass in an array of configurations for each view you want to customize, each view has its own set of options.

​
Supported views:

​
Login View

The SdkViewType.Login is used to adjust the login/signup UI options programmatically. When using the login view, you add an object to the views array. This object should have type: SdkViewType.Login and sections which is an array of SdkViewSection objects. Please read here for a comprehensive guide on using this feature.

​
Wallet List

The wallet-list configuration enables you to define tabs with predetermined labels, icons, filters, and recommended wallets, enhancing your application’s wallet selection interface. This feature is particularly useful for grouping wallets.
Available from version 2.0.0+

​
Configuring Wallet List Tabs

In the DynamicContextProvider setup, the overrides field is used to configure each tab in the wallet list. The configuration options available for each tab allow for detailed customization:
  • Label and Icon: Customize the tab’s appearance with a label for text and an icon for visual representation. The icon can be one of the following options:
    • A icon from the dynamic iconic package 
      import { BitcoinIcon } from '@dynamic-labs/iconic';

<DynamicContextProvider
  settings={{
    overrides: {
      views: [
        {
          type: 'wallet-list',
          tabs: {
            items: [
              {
                text: 'Ethereum',
                icon: <BitcoinIcon />
              }
            ]
          }
        }
      ]
    }
  }}
/>
    • A image URL 
      <DynamicContextProvider
  settings={{
    overrides: {
      views: [
        {
          type: 'wallet-list',
          tabs: {
            items: [
              {
                text: 'My own tab',
                icon: 'https://example.org/my-image.png'
              }
            ]
          }
        }
      ]
    }
  }}
/>
    • Or you can bring your own React icon 
      <DynamicContextProvider
  settings={{
    overrides: {
      views: [
        {
          type: 'wallet-list',
          tabs: {
            items: [
              {
                text: 'My own tab',
                icon: <i />
              }
            ]
          }
        }
      ]
    }
  }}
/>
  • Wallets Filter: This option enables to dynamic display of wallets based on the selected tab. Clients have the flexibility to write custom filter functions or utilize predefined ones, for more information read the sort and filter wallets doc
  • Recommended Wallets: Specify recommended wallets for each tab by providing wallet option keys and optional labels. This feature is designed to highlight preferred wallets, steering users towards secure and suitable options for their specific needs.
  • Style: An optional field that determines how the tabs are displayed within the wallet list. Currently, the only supported style is "grid".

​
Example Configuration

Below is an example showcasing the setup for tabs that categorize wallets by blockchain network, utilizing both custom and predefined filter functions: 
import { DynamicContextProvider, FilterChain } from '@dynamic-labs/sdk-react-core'
import {
  BitcoinIcon,
  EthereumIcon,
  FlowIcon,
  SolanaIcon,
} from '@dynamic-labs/iconic';

const App = () => {
  return (
    <DynamicContextProvider
      settings={{
        environmentId: 'env-id',
        // Additional settings...

        overrides: {
          views: [
            {
              type: 'wallet-list',
              tabs: {
                items: [
                  {
                    label: { text: 'All chains' },
                  },
                  {
                    label: { icon: <EthereumIcon /> },
                    walletsFilter: FilterChain('EVM'),
                    recommendedWallets: [
                      {
                        walletKey: 'phantomevm',
                      },
                    ],
                  },
                  {
                    label: { icon: <SolanaIcon /> },
                    walletsFilter: FilterChain('SOL'),
                  },
                  {
                    label: { icon: <BitcoinIcon /> },
                    walletsFilter: FilterChain('BTC'),
                  },
                  {
                    label: { icon: <FlowIcon /> },
                    walletsFilter: FilterChain('FLOW'),
                  },
                ]
              }
            }
          ]
        }
      }}
    >

    </DynamicContextProvider>
  )
}
This is the wallet list view with the tabs
All chains tab selectedEthereum selected

​
Transaction Confirmation

The transaction-confirmation view controls how the SDK generates block explorer links after a transaction is sent from a smart wallet (ERC-4337). When an Account Abstraction connector (e.g. ZeroDev) sends a transaction, it returns a UserOperation hash rather than a regular transaction hash. Some block explorers support looking up UserOperations at /op/{userOpHash}, while others only support /tx/{hash}. By default, the SDK uses /op/ links only for explorers known to support it (Blockscout-based explorers). For all other explorers, it falls back to /tx/.

​
userOpSupportedExplorers

Use this property to add additional block explorer domains that support the /op/{userOpHash} route. These are merged with the built-in list.
​
userOpSupportedExplorers
string[]
Additional block explorer domains that support the /op/{userOpHash} route for ERC-4337 UserOperation lookups. Merged with the SDK’s built-in list of supported explorers.

​
Built-in supported explorers

The SDK includes these domains by default:
  • blockscout.com (covers all *.blockscout.com subdomains)
  • scrollscan.com
  • explorer.optimism.io

​
Example

<DynamicContextProvider
  settings={{
    environmentId: 'your-environment-id',
    overrides: {
      views: [
        {
          type: 'transaction-confirmation',
          userOpSupportedExplorers: [
            'my-custom-explorer.com',
            'my-l2-explorer.xyz',
          ],
        },
      ],
    },
  }}
>
  <App />
</DynamicContextProvider>
With this configuration, the SDK generates /op/{hash} links for any explorer whose URL contains one of the built-in domains or your additional domains. For all other explorers, it uses the standard /tx/{hash} path.
Last modified on June 30, 2026