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.
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.
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.
An identifier of the kind of view section to be provided, possible values outlined in section below.
The text alignment used for Text sections.
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.
Social
section, represents the social provider to be displayed by default.EmailAndPhone
section, represents whether email or phone options are displayed by default ("email"
vs "phone"
).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.
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.
Wallet
section, represents the number of wallet items to be displayed by default.Social
section, represents the number of social providers to be displayed by default.The possible values are:
SdkViewSectionType.Email
SdkViewSectionType.EmailAndPhone
SdkViewSectionType.Phone
SdkViewSectionType.Social
SdkViewSectionType.Separator
SdkViewSectionType.Text
SdkViewSectionType.Wallet
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
to learn how to set whether to show email or phone by default.
The possible values are:
SdkViewSectionAlignment.Center
SdkViewSectionAlignment.Left
SdkViewSectionAlignment.Right
Here’s an example where you are overriding the login view to show only the email login option:
Here is an example where you are overriding the login view to show email or social login options:
There is a more complete example also found here.
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.
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:
Example using Dynamic Iconic icons
Example custom image URL
Example using custom react icon
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"
.
There is a more complete example also found here.
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.
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.
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.
An identifier of the kind of view section to be provided, possible values outlined in section below.
The text alignment used for Text sections.
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.
Social
section, represents the social provider to be displayed by default.EmailAndPhone
section, represents whether email or phone options are displayed by default ("email"
vs "phone"
).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.
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.
Wallet
section, represents the number of wallet items to be displayed by default.Social
section, represents the number of social providers to be displayed by default.The possible values are:
SdkViewSectionType.Email
SdkViewSectionType.EmailAndPhone
SdkViewSectionType.Phone
SdkViewSectionType.Social
SdkViewSectionType.Separator
SdkViewSectionType.Text
SdkViewSectionType.Wallet
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
to learn how to set whether to show email or phone by default.
The possible values are:
SdkViewSectionAlignment.Center
SdkViewSectionAlignment.Left
SdkViewSectionAlignment.Right
Here’s an example where you are overriding the login view to show only the email login option:
Here is an example where you are overriding the login view to show email or social login options:
There is a more complete example also found here.
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.
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:
Example using Dynamic Iconic icons
Example custom image URL
Example using custom react icon
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"
.
There is a more complete example also found here.