> ## 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.

# Adapt UI With Views

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

## What is it?

Views are used to customize the kind of UI that shows up at any point in time in your application, specifically giving you complete control over the signup/login options you show your user.

## How does it work?

Views are used primarily in the overrides prop of the [DynamicContextProvider](/react/reference/providers/dynamiccontextprovider). You pass in an array of configurations for each view you want to customize, each view has its own set of options.

## Types of Views

### Authentication Method Options (Login)

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.

### SdkViewSection structure

<ParamField path="type" type="SdkViewSectionType" required="true">
  An identifier of the kind of view section to be provided, possible values outlined in section below.
</ParamField>

<ParamField path="alignment" type="SdkViewSectionAlignment">
  The text alignment used for Text sections.
</ParamField>

<ParamField path="defaultItem" type="string">
  The option to be displayed as the main one.
  The default item will be displayed in a more prominent way than the rest of the items in the section.

  * For `Social` section, represents the social provider to be displayed by default.
  * For `EmailAndPhone` section, represents whether email or phone options are displayed by default (`"email"` vs `"phone"`).
</ParamField>

<ParamField path="label" type="string">
  The label for the section.
  This will be displayed above the section or as part of the separator component if it is a `Separator` section.
</ParamField>

<ParamField path="numOfItemsToDisplay" type="number">
  The default number of items to display in the section.
  User has to click a button to view more options if any are left out.

  * For `Wallet` section, represents the number of wallet items to be displayed by default.
  * For `Social` section, represents the number of social providers to be displayed by default.
</ParamField>

### SdkViewSectionType

The possible values are:

* `SdkViewSectionType.Email`
* `SdkViewSectionType.EmailAndPhone`
* `SdkViewSectionType.Phone`
* `SdkViewSectionType.Social`
* `SdkViewSectionType.Separator`
* `SdkViewSectionType.Text`
* `SdkViewSectionType.Wallet`

<Note>
  The `EmailAndPhone` section is what you get by default when you enable both
  email and phone in our dashboard without using login view overrides. It's a
  section where the user has the option to toggle between email and phone number
  input. Read about `defaultItem` [here](/react/using-our-ui/design-customizations/views#sdkviewsection-structure)
  to learn how to set whether to show email or phone by default.
</Note>

### SdkViewSectionAlignment

The possible values are:

* `SdkViewSectionAlignment.Center`
* `SdkViewSectionAlignment.Left`
* `SdkViewSectionAlignment.Right`

#### Example snippets

Here's an example where you are overriding the login view to show only the email login option:

```jsx theme={"system"}
import { SdkViewSectionType, SdkViewType } from "@dynamic-labs/sdk-api";

<DynamicContextProvider
  settings={{
    overrides: {
      views: [
        {
          type: SdkViewType.Login,
          sections: [
            {
              type: SdkViewSectionType.Email,
            },
          ],
        },
      ]
    }
  }}
>
  <App />
</DynamicContextProvider>;
```

Here is an example where you are overriding the login view to show email or social login options:

```jsx theme={"system"}
import { SdkViewSectionType, SdkViewType } from "@dynamic-labs/sdk-api";

<DynamicContextProvider
  settings={{
    overrides: {
      views: [
        {
          type: SdkViewType.Login,
          sections: [
            {
              type: SdkViewSectionType.Email,
            },
            {
              type: SdkViewSectionType.Separator,
              label: "Or",
            },
            {
              type: SdkViewSectionType.Social,
              defaultItem: "google",
            },
          ],
        },
      ]
    }
  }}
>
  <App />
</DynamicContextProvider>;
```

#### Complete example

There is a more complete example also found [here](/react/using-our-ui/design-customizations/tutorials/login-views-guide).

### Branded Wallet Signup/Login (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.

#### 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
    <Accordion title="Example using Dynamic Iconic icons">
      ```tsx theme={"system"}
      import { BitcoinIcon } from '@dynamic-labs/iconic';

      <DynamicContextProvider
        settings={{
          overrides: {
            views: [
              {
                type: 'wallet-list',
                tabs: {
                  items: [
                    {
                      text: 'Ethereum',
                      icon: <BitcoinIcon />
                    }
                  ]
                }
              }
            ]
          }
        }}
      />
      ```
    </Accordion>
  * A image URL
    <Accordion title="Example custom image URL">
      ```tsx theme={"system"}
      <DynamicContextProvider
        settings={{
          overrides: {
            views: [
              {
                type: 'wallet-list',
                tabs: {
                  items: [
                    {
                      text: 'My own tab',
                      icon: 'https://example.org/my-image.png'
                    }
                  ]
                }
              }
            ]
          }
        }}
      />
      ```
    </Accordion>
  * Or you can bring your own React icon
    <Accordion title="Example using custom react icon">
      ```tsx theme={"system"}
      <DynamicContextProvider
        settings={{
          overrides: {
            views: [
              {
                type: 'wallet-list',
                tabs: {
                  items: [
                    {
                      text: 'My own tab',
                      icon: <i />
                    }
                  ]
                }
              }
            ]
          }
        }}
      />
      ```
    </Accordion>

* **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](/react/wallets/external-wallets/sort-and-filter-wallets) doc

* **Recommended Wallets**: Specify recommended wallets for each tab by providing [wallet option](/react/reference/objects/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"`.

#### Complete example

There is a more complete example also found [here](/react/using-our-ui/design-customizations/tutorials/wallet-list-views-guide).

### Transaction Confirmation

The `transaction-confirmation` view configures how the SDK generates block explorer links after a smart wallet (ERC-4337) transaction is sent.

By default, the SDK uses `/op/{userOpHash}` links only for block explorers known to support UserOperation lookups (Blockscout-based explorers). For all other explorers, it falls back to the standard `/tx/{hash}` path.

Use `userOpSupportedExplorers` to add additional block explorer domains that support the `/op/` route:

```tsx theme={"system"}
<DynamicContextProvider
  settings={{
    overrides: {
      views: [
        {
          type: 'transaction-confirmation',
          userOpSupportedExplorers: [
            'my-custom-explorer.com',
          ],
        },
      ],
    },
  }}
>
  <App />
</DynamicContextProvider>
```

For full details and the list of built-in supported explorers, see the [Transaction Confirmation reference](/react/reference/objects/views#transaction-confirmation).