Whitelabel Plug n Play Modal

Web3Auth is fully whitelabel with application branding to have a consistent user experience. For Whitelabeling, there are three different aspects available for you. Web3Auth gives you the ability to define a custom UI, branding, and translations for your applications. All our SDKs support Whitelabeling, giving granular customization capability across all our offerings.

Within the Web3Auth Plug and Play Modal SDK, whitelabeling can happen in 3 different places,

• Web3Auth Modal: You can whitelabel the Web3Auth Modal according to your needs, for this, you need to pass on the following parameters:
  • Within the uiConfig parameter while instantiating Web3Auth, you can configure the Web3Auth Modal according to your application's requirements.
  • Change the visibility and order of methods appearing in Web3Auth modal by passing the modalConfig in initModal function, while initializing the SDK.
• Openlogin Adapter: The redirect screens while logging in and constructing the key, can be customised according to your common as well. For this, you need to pass on the whiteLabel configuration parameter to the openlogin-adapter.
• Torus Wallet Plugin: The Torus Wallet Plugin can be customized according to your needs for helping you make wallet flows within your application. For this, you need to pass on the torusWalletOpts configuration.

Web3Auth Modal

Whitelabeling while Web3Auth Instantiation

tip

Read more about Instantiating Web3Auth in the Initialization SDK Reference

While instantiating Web3Auth, the constructor takes an object with Web3AuthOptions as input. The Web3AuthOptions object is further taken in the parameter of uiConfig which is the configuration for whitelabeling the Modal UI display properties.

uiConfig

Table

Parameter	Type	Description	Mandatory	Default
loginMethodsOrder?	string[]	The list of login methods can be reordered with this parameter. Those methods specified will be first on the list.	No	["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]
modalZIndex?	string	Z-index of the modal and iframe	No	"99998"
displayErrorsOnModal?	boolean	Whether to show errors on Web3Auth modal.	No	true
loginGridCol?	2 or 3	Number of columns to display the Social Login buttons.	No	3
primaryButton?	enum - (externalLogin, socialLogin or emailLogin)	Decides which button will be displayed as primary button in modal. Only one button will be primary and other buttons in modal will be secondary.	No	socialLogin

Interface

interface UIConfig extends WhiteLabelData {
  /**
   * order of how login methods are shown
   *
   * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
   */
  loginMethodsOrder?: string[];
  /**
   * Z-index of the modal and iframe
   * @defaultValue 99998
   */
  modalZIndex?: string;
  /**
   * Whether to show errors on Web3Auth modal.
   *
   * @defaultValue `true`
   */
  displayErrorsOnModal?: boolean;
  /**
   * number of columns to display the Social Login buttons
   *
   * @defaultValue `3`
   */
  loginGridCol?: 2 | 3;
  /**
   * decides which button will be displayed as primary button in modal
   * only one button will be primary and other buttons in modal will be secondary
   *
   * @defaultValue `socialLogin`
   */
  primaryButton?: "externalLogin" | "socialLogin" | "emailLogin";
}

WhitelabelData

whiteLabel?: WhiteLabelData;

The whitelabel parameter takes WhitelabelData as input. The WhitelabelData object takes the following parameters:

Table

WhiteLabelData

Parameter	Type	Description	Default	Mandatory
appName?	string	App name to be displayed in the User Flow Screens.	dApp's Website URL	No
appUrl?	string	App URL to be displayed in the User Flow Screens.	dApp's Website URL	No
logoLight?	string	App logo to be shown on the dark background (dark theme)	web3auth-logo.svg	No
logoDark?	string	App logo to be shown on the light background (light theme)	web3auth-logo.svg	No
defaultLanguage?	string	Default Language to use. Choose from: en - English de - German ja - Japanese ko - Korean zh - Mandarin es - Spanish fr - French pt - Portuguese nl - Dutch	en - English	No
mode?	string	Choose between auto, light or dark modes.	auto	No
theme?	{ [P in string]: string; }	Used to customize the theme of the login modal with the following options 'primary' - To customize the primary color of the modal's content	#0364FF	No
tncLink?	Partial<Record<LANGUAGE_TYPE, string>>	Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure e.g. tncLink: {en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja"}	none	No
privacyPolicy?	Partial<Record<LANGUAGE_TYPE, string>>	Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure e.g. privacyPolicy: { en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja", }	none	No

Interface

export type WhiteLabelData = {
  /**
   * App name to display in the UI
   */
  appName?: string;
  /**
   * App url
   */
  appUrl?: string;
  /**
   * App logo to use in light mode
   */
  logoLight?: string;
  /**
   * App logo to use in dark mode
   */
  logoDark?: string;
  /**
   * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
   * en: english
   * de: german
   * ja: japanese
   * ko: korean
   * zh: mandarin
   * es: spanish
   * fr: french
   * pt: portuguese
   * nl: dutch
   *
   * @defaultValue en
   */
  defaultLanguage?: LANGUAGE_TYPE;
  /**
     theme
     *
     * @defaultValue auto
     */
  mode?: THEME_MODE_TYPE;
  /**
   * Use logo loader
   *
   * @defaultValue false
   */
  useLogoLoader?: boolean;
  /**
   * Used to customize theme of the login modal with following options
   * `'primary'` - To customize primary color of modal's content.
   */
  theme?: {
    primary?: string;
    gray?: string;
    red?: string;
    green?: string;
    success?: string;
    warning?: string;
    error?: string;
    info?: string;
    white?: string;
  };
  /**
   * Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
   * e.g.
   * tncLink: {
   *  en: "http://example.com/tnc/en",
   *  ja: "http://example.com/tnc/ja",
   * }
   */
  tncLink?: Partial<Record<LANGUAGE_TYPE, string>>;
  /**
   * Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure
   * e.g.
   * privacyPolicy: {
   *  en: "http://example.com/tnc/en",
   *  ja: "http://example.com/tnc/ja",
   * }
   */
  privacyPolicy?: Partial<Record<LANGUAGE_TYPE, string>>;
};

Example

const web3auth = new Web3Auth({
  clientId: "", // Get your Client ID from the Web3Auth Dashboard
  web3AuthNetwork: "sapphire_mainnet",
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth", // This is the mainnet RPC we have added, please pass on your own endpoint while creating an app
  },
  uiConfig: {
    theme: "dark",
    loginMethodsOrder: ["facebook", "google"],
    appLogo: "https://web3auth.io/images/w3a-L-Favicon-1.svg", // Your App Logo Here
  },
  defaultLanguage: "en",
  modalZIndex: "99998",
});

Whitelabeling while Modal Initialization

tip

Read more about Initializing Web3Auth Modal in the Initialization SDK Reference

While initializing the Web3Auth Modal, the initModal() function takes an object with modalConfig as input. This object helps you configure the different adapters available in the Web3Auth Modal. Further, the modalConfig object takes the parameter of loginMethods which helps you configure the social logins and their visibility in the modal.

initModal()

modalConfig

Table

modalConfig: { ADAPTER : { params } }

Parameter	Type	Description	Default	Mandatory
label	string	Label of the adapter you want to configure	NA - identifier for corresponding adapter	Yes
showOnModal?	boolean	Whether to show an adapter in modal or not.	true	No
showOnDesktop?	boolean	Whether to show an adapter in desktop or not.	true	No
showOnMobile?	boolean	Whether to show an adapter in mobile or not.	true	No

Additionally, to configure the Openlogin Adapter's each login method, we have the loginMethods? parameter.

Parameter	Type	Description	Default	Mandatory
loginMethods?	LoginMethodConfig	To configure visibility of each social login method for the openlogin adapter.	Default LoginMethod for each social login	No

Interface

initModal(params?: {
    modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
}): Promise<void>;

interface ModalConfig extends BaseAdapterConfig {
    loginMethods?: LoginMethodConfig;
}

interface BaseAdapterConfig {
    label: string;
    showOnModal?: boolean;
    showOnMobile?: boolean;
    showOnDesktop?: boolean;
}

loginMethods: { label: { params } }

In loginMethods, you can configure the visibility of each social login method for the openlogin adapter. The social login is corresponded by the label parameter. Below is the table indicating the different params available for customization.

For labels you can choose between these options: google, facebook, twitter, reddit, discord, twitch, apple, line, github, kakao, linkedin, weibo, wechat, email_passwordless

Table

params

Parameter	Type	Description	Default	Mandatory
name	string	Display Name	Default for Openlogin App	No
description?	string	Description for button. If provided, it renders as a full length button. else, icon button	Just an icon rendered	No
logoHover?	string	Logo to be shown on mouse hover	web3auth-logo.svg	No
logoLight?	string	Logo to be shown on dark background (dark theme)	web3auth-logo.svg	No
logoDark?	string	Logo to be shown on light background (light theme)	web3auth-logo.svg	No
mainOption?	boolean	Show login button on the main list	Default for Openlogin App	No
showOnModal?	string	Whether to show the login button on modal or not	Default for Openlogin App	No
showOnDesktop?	string	Whether to show the login button on desktop	Default for Openlogin App	No
showOnMobile?	string	Whether to show the login button on mobile	Default for Openlogin App	No

Type Declaration

declare type LoginMethodConfig = Record<
  string,
  {
    /**
     * Display Name. If not provided, we use the default for openlogin app
     */
    name: string;
    /**
     * Description for button. If provided, it renders as a full length button. else, icon button
     */
    description?: string;
    /**
     * Logo to be shown on mouse hover. If not provided, we use the default for openlogin app
     */
    logoHover?: string;
    /**
     * Logo to be shown on dark background (dark theme). If not provided, we use the default for openlogin app
     */
    logoLight?: string;
    /**
     * Logo to be shown on light background (light theme). If not provided, we use the default for openlogin app
     */
    logoDark?: string;
    /**
     * Show login button on the main list
     */
    mainOption?: boolean;
    /**
     * Whether to show the login button on modal or not
     */
    showOnModal?: boolean;
    /**
     * Whether to show the login button on desktop
     */
    showOnDesktop?: boolean;
    /**
     * Whether to show the login button on mobile
     */
    showOnMobile?: boolean;
  }
>;

Example

await web3auth.initModal({
  modalConfig: {
    [WALLET_ADAPTERS.OPENLOGIN]: {
      label: "openlogin",
      loginMethods: {
        google: {
          name: "google login",
          logoDark: "url to your custom logo which will shown in dark mode",
        },
        facebook: {
          // it will hide the facebook option from the Web3Auth modal.
          name: "facebook login",
          showOnModal: false,
        },
      },
      // setting it to false will hide all social login methods from modal.
      showOnModal: true,
    },
  },
});

Openlogin Adapter

Web3Auth's Social Logins and Email Login run using the OpenLogin Flow. The whole OpenLogin user experience can also be whitelabeled using OpenLogin Adapter settings. For this, you need to pass on the whiteLabel configuration parameter to the adapterSettings property of the openlogin-adapter.

tip

Checkout the openlogin-adapter SDK Reference for more details on different configurations you can pass for customizations.

whiteLabel?: WhiteLabelData;

The whitelabel parameter takes WhitelabelData as input. The WhitelabelData object takes the following parameters:

Table

WhiteLabelData

Parameter	Type	Description	Default	Mandatory
appName?	string	App name to be displayed in the User Flow Screens.	dApp's Website URL	No
appUrl?	string	App URL to be displayed in the User Flow Screens.	dApp's Website URL	No
logoLight?	string	App logo to be shown on the dark background (dark theme)	web3auth-logo.svg	No
logoDark?	string	App logo to be shown on the light background (light theme)	web3auth-logo.svg	No
defaultLanguage?	string	Default Language to use. Choose from: en - English de - German ja - Japanese ko - Korean zh - Mandarin es - Spanish fr - French pt - Portuguese nl - Dutch	en - English	No
mode?	string	Choose between auto, light or dark modes.	auto	No
theme?	{ [P in string]: string; }	Used to customize the theme of the login modal with the following options 'primary' - To customize the primary color of the modal's content	#0364FF	No
tncLink?	Partial<Record<LANGUAGE_TYPE, string>>	Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure e.g. tncLink: {en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja"}	none	No
privacyPolicy?	Partial<Record<LANGUAGE_TYPE, string>>	Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure e.g. privacyPolicy: { en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja", }	none	No

Interface

export type WhiteLabelData = {
  /**
   * App name to display in the UI
   */
  appName?: string;
  /**
   * App url
   */
  appUrl?: string;
  /**
   * App logo to use in light mode
   */
  logoLight?: string;
  /**
   * App logo to use in dark mode
   */
  logoDark?: string;
  /**
   * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
   * en: english
   * de: german
   * ja: japanese
   * ko: korean
   * zh: mandarin
   * es: spanish
   * fr: french
   * pt: portuguese
   * nl: dutch
   *
   * @defaultValue en
   */
  defaultLanguage?: LANGUAGE_TYPE;
  /**
     theme
     *
     * @defaultValue auto
     */
  mode?: THEME_MODE_TYPE;
  /**
   * Use logo loader
   *
   * @defaultValue false
   */
  useLogoLoader?: boolean;
  /**
   * Used to customize theme of the login modal with following options
   * `'primary'` - To customize primary color of modal's content.
   */
  theme?: {
    primary?: string;
    gray?: string;
    red?: string;
    green?: string;
    success?: string;
    warning?: string;
    error?: string;
    info?: string;
    white?: string;
  };
  /**
   * Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
   * e.g.
   * tncLink: {
   *  en: "http://example.com/tnc/en",
   *  ja: "http://example.com/tnc/ja",
   * }
   */
  tncLink?: Partial<Record<LANGUAGE_TYPE, string>>;
  /**
   * Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure
   * e.g.
   * privacyPolicy: {
   *  en: "http://example.com/tnc/en",
   *  ja: "http://example.com/tnc/ja",
   * }
   */
  privacyPolicy?: Partial<Record<LANGUAGE_TYPE, string>>;
};

Example

import OpenloginAdapter from "@web3auth/openlogin-adapter";

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    network: "sapphire_mainnet", // Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    uxMode: "popup",
    whiteLabel: {
      appName: "W3A Heroes",
      appUrl: "https://web3auth.io",
      logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
      logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
      defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
      mode: "dark", // whether to enable dark mode. defaultValue: auto
      theme: {
        primary: "#00D1B2",
      },
      useLogoLoader: true,
    },
  },
  privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);

Torus Wallet Plugin

The Torus Wallet Plugins help you get the functionalities of the Torus Wallets into your Web3Auth Instance. They help you get the UI of the Torus Wallet Embedded Interface into your dApp, giving your user an overview of their wallet.

tip

Read more about Initializing the Torus EVM Wallet Plugin in the Torus Wallet Connector Plugin SDK Reference

While initializing the plugin, you need to pass on the following parameters to the constructor:

Table

Parameter	Type	Description	Mandatory
torusWalletOpts?	TorusCtorArgs	Configuration options for Torus Wallet	No
walletInitOptions	Partial<TorusParams> & Required<Pick<TorusParams, "whiteLabel">>	Parameters to customise your Torus Wallet Embed UI within the application	Yes

Interface

constructor(options: {
    torusWalletOpts?: TorusCtorArgs;
    walletInitOptions: Partial<TorusParams> & Required<Pick<TorusParams, "whiteLabel">>;
});

torusWalletOpts

torusWalletOpts is an optional parameter that allows you to pass in the configuration options for Torus Wallet. It takes the TorusCtorArgs object as input which contains the following parameters:

Table

TorusCtorArgs

Parameter	Type	Description	Default Value	Mandatory
buttonPosition?	enum - (bottom-left, top-left, bottom-right, top-right)	Determines where the torus widget is visible on the page.	bottom-left	No
modalZIndex?	number	Z-index of the modal and iframe	99999	No
buttonSize	number	Size of the widget button	56	No
apiKey?	string	Torus Wallet API Key - Get it from Web3Auth Dashboard		No

Interface

export interface TorusCtorArgs {
  /**
   * Determines where the torus widget is visible on the page.
   * @defaultValue bottom-left
   */
  buttonPosition?: BUTTON_POSITION_TYPE;

  /**
   * Size of the widget button
   * @defaultValue 56
   */
  buttonSize?: number;

  /**
   * Z-index of the modal and iframe
   * @defaultValue 99999
   */
  modalZIndex?: number;

  /**
   * Api key
   * Get yours today at {@link https://developer.tor.us | Dashboard}
   */
  apiKey?: string;
}

declare const BUTTON_POSITION: {
  readonly BOTTOM_LEFT: "bottom-left";
  readonly TOP_LEFT: "top-left";
  readonly BOTTOM_RIGHT: "bottom-right";
  readonly TOP_RIGHT: "top-right";
};

walletInitOptions

The walletInitOptions from Torus Wallet is a required parameter that allows you to customise your Torus Wallet Embed Modal UI within the application. It takes the objet TorusParams as input which contains multiple parameters mentioned in the Torus Wallet Documentation.

Out of those mentioned parameters, the following 3 parameters are important for whitelabeling the plugin:

Table

TorusParams

Parameter	Type	Mandatory	Description	Default
whiteLabel	WhiteLabelParams	Yes	Params to enable whitelabelling of torus website and widget. Know more about whitelabeling options for Torus Wallet here.	N/A
showTorusButton	boolean	No	Determines whether to show/hide torus widget.	true
useWalletConnect	boolean	No	Setting useWalletConnect to true allows to display wallet connect qr scanner from torus-embed.	false

Interface

export interface TorusParams {
  /**
   * Torus Network Object
   */
  network?: NetworkInterface;
  /**
   * Build Environment of Torus.
   *
   * production uses https://app.tor.us,
   *
   * development uses http://localhost:4050 (expects torus-website to be run locally),
   *
   * binance uses https://binance.tor.us,
   *
   * lrc uses https://lrc.tor.us,
   *
   * beta uses https://beta.tor.us, (currently supports tkey)
   *
   * testing uses https://testing.tor.us (latest internal build)
   * @defaultValue production
   */
  buildEnv?: TORUS_BUILD_ENV_TYPE;
  /**
   * Enables or disables logging.
   *
   * Defaults to false in prod and true in other environments
   */
  enableLogging?: boolean;
  /**
   * whether to show/hide torus widget.
   *
   * Defaults to true
   * @defaultValue true
   */
  showTorusButton?: boolean;
  /**
   * setting false, hides those verifiers from login modal
   * @deprecated
   * Please use loginConfig instead
   */
  enabledVerifiers?: VerifierStatus;
  /**
   * Array of login config items. Used to modify the default logins/ add new logins
   */
  loginConfig?: LoginConfig;
  /**
   * Params to enable integrity checks and load specific versions of torus-website
   */
  integrity?: IntegrityParams;
  /**
   * Params to enable whitelabelling of torus website and widget
   */
  whiteLabel?: WhiteLabelParams;
  /**
   * Skips TKey onboarding for new users
   *
   * Defaults to false
   * @defaultValue false
   */
  skipTKey?: boolean;

  /**
   * Setting `useWalletConnect` to true allows to display wallet connect qr scanner from torus-embed.
   *
   * Defaults to false
   * @defaultValue false
   */
  useWalletConnect?: boolean;

  /**
   * Setting mfa level to `default` will present mfa screen to user on every third login
   * Setting mfa level to `optional` will present mfa screen to user on every login but user can skip it
   * Setting mfa level to `mandatory` will make it mandatory for user to setup mfa after login
   * Setting mfa level to`none` will make the user skip the mfa setup screen
   *
   * Defaults to default
   * @defaultValue default
   */
  mfaLevel?: "none" | "default" | "optional" | "mandatory";
}

While initializing the plugin, you need to pass on the following parameters to the constructor:

whiteLabel

As you can see, the whiteLabel parameter is a required parameter within the plugin. This is because this plugin needs you to incorporate basic whitelabel to avoid showing the Torus Wallet branding on your website.

The whiteLabel parameter takes WhiteLabelParams object as input which contains the following parameters:

Table

Parameter	Type	Mandatory	Description	Default
theme	ThemeParams (contains two params, isDark: boolean & colors: Record<string, string>)	Yes	Params to customise the theme for the wallet embed. You can enable darkMode and use the colours of your choice for the modal.	N/A
logoDark	string	Yes	Logo to be shown on dark background (dark theme)	N/A
logoLight	string	Yes	Logo to be shown on light background (light theme)	N/A
defaultLanguage?	string	No	Language of whitelabel	Order of preference: Whitelabel language > user language (in torus-website) > browser language
topupHide?	boolean	No	Shows/hides topup option in torus-website/widget.	false
featuredBillboardHide?	boolean	No	Shows/hides billboard in torus-website.	false
disclaimerHide?	boolean	No	Shows/hides disclaimers on login page. Only works if special logins are hidden	false
tncLink?	string	No	Language specific link for terms and conditions on torus-website. Choose between: en - English de - German ja - Japanese ko - Korean zh - Mandarin es - Spanish fr - French pt - Portuguese nl - Dutch	en - English
privacyPolicy?	string	No	Language specific link for privacy policy on torus-website.	en - English
contactLink?	string	No	Language specific link for contact links on torus-website.	en - English
customTranslations?	string	No	Custom translations.	en - English

Interface

interface WhiteLabelParams {
  /**
   * Whitelabel theme
   */
  theme: ThemeParams;
  /**
   * Language of whitelabel.
   *
   * order of preference: Whitelabel language \> user language (in torus-website) \> browser language
   */
  defaultLanguage?: string;
  /**
   * Logo Url to be used in light mode (dark logo)
   */
  logoDark: string;
  /**
   * Logo Url to be used in dark mode (light logo)
   */
  logoLight: string;
  /**
   * Shows/hides topup option in torus-website/widget.
   * Defaults to false
   * @defaultValue false
   */
  topupHide?: boolean;
  /**
   * Shows/hides billboard in torus-website.
   * Defaults to false
   * @defaultValue false
   */
  featuredBillboardHide?: boolean;
  /**
   * Shows/hides disclaimers on login page. Only works if special logins are hidden
   * Defaults to false
   * @defaultValue false
   */
  disclaimerHide?: boolean;
  /**
   * Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure
   */
  tncLink?: LocaleLinks<string>;
  /**
   * Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure
   */
  privacyPolicy?: LocaleLinks<string>;
  /**
   * Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure
   */
  contactLink?: LocaleLinks<string>;
  /**
   * Custom translations. See (examples/vue-app) to configure
   */
  customTranslations?: LocaleLinks<unknown>;
}

interface ThemeParams {
  /**
   * If true, enables dark mode
   * Defaults to false
   * @defaultValue false
   */
  isDark: boolean;
  /**
   * Colors object to customize colors in torus theme.
   *
   * Contact us for whitelabel. Example provided in `examples/vue-app`
   */
  colors: Record<string, string>;
}

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

export interface LocaleLinks<T> {
  /**
   * Item corresponding to english
   */
  en?: T;
  /**
   * Item corresponding to japanese
   */
  ja?: T;
  /**
   * Item corresponding to korean
   */
  ko?: T;
  /**
   * Item corresponding to german
   */
  de?: T;
  /**
   * Item corresponding to chinese (simplified)
   */
  zh?: T;
  /**
   * Item corresponding to spanish
   */
  es?: T;
}

Example

In this example we're adding the TorusWalletConnectorPlugin with a very basic configuration.

import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";

const torusPlugin = new TorusWalletConnectorPlugin({
  torusWalletOpts: {},
  walletInitOptions: {
    whiteLabel: {
      theme: { isDark: true, colors: { primary: "#00a8ff" } },
      logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
      logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
    },
    useWalletConnect: true,
    enableLogging: true,
  },
});
await web3auth.addPlugin(torusPlugin);