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 SdkViewType, which is covered below.

​
Types & Options

​
SdkView type

FieldDescription
type: SdkViewTypeAn identifier of the intended view type.
sections: SdkViewSection[]An array of sections to be displayed in the view.

​
SdkViewType values

The only supported SdkViewType is “login”, accessed as such: SdkViewType.Login.

​
SdkViewSection structure

FieldDescription
type: SdkViewSectionTypeAn identifier of the kind of view section to be provided, possible values outlined in section below.
label?: stringThe label for the section. This will be displayed above the section or as part of the separator component if it is a Separator section.
numOfItemsToDisplay?: number;The default number of items to display in the section. For Wallet section, represents the number of wallet items to be displayed by default. User has to click a button to view more options if there are any. For Social section, represents the number of social providers to be displayed by default. User has to click a button to view more options if there are any.
defaultItem?: 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.

​
SdkViewSectionType

The possible values are:

  • SdkViewSectionType.Email
  • SdkViewSectionType.Social
  • SdkViewSectionType.Separator
  • SdkViewSectionType.Wallet

​
Login View

This is currently the only available type of view. It 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.

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

​
Example snippets

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.

Was this page helpful?

WalletsByChainOverview