Adapt UI With Views

​

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

​

SdkViewSectionType

The possible values are:

• SdkViewSectionType.Email
• SdkViewSectionType.EmailAndPhone
• SdkViewSectionType.Phone
• SdkViewSectionType.Social
• SdkViewSectionType.Separator
• SdkViewSectionType.Text
• SdkViewSectionType.Wallet

​

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:

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:

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.

​

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
    Example using Dynamic Iconic icons

    import { BitcoinIcon } from '@dynamic-labs/iconic';
    
    <DynamicContextProvider
      settings={{
        overrides: {
          views: [
            {
              type: 'wallet-list',
              tabs: {
                items: [
                  {
                    text: 'Ethereum',
                    icon: <BitcoinIcon />
                  }
                ]
              }
            }
          ]
        }
      }}
    />
    

  • A image URL
    Example custom 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
    Example using custom 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".

​

Complete example

There is a more complete example also found here.