WHitelabeldata changes added

docs/pnp/features/whitelabel/login-modal.mdx

@@ -5,11 +5,12 @@ displayed_sidebar: docs
 description: "Login Modal | Documentation - Web3Auth"
 ---
 
+import WhiteLabelData from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx";
 import UIConfig from "@site/src/common/sdk/pnp/web/_ui-config.mdx";
 
 The Web3Auth Plug and Play Modal offers a user-friendly interface that enables your dApp to connect with various login methods and adapters provided
 by Web3Auth. By whitelabeling the Login Modal, your dApp can maintain a consistent user experience. You can customize the theme, choose from 8+
-languages supported, and provide your dApp name and brand logo, along with other options for detailed customization across all our offerings.
+languages supported and provide your dApp name and brand logo, along with other options for detailed customization across all our offerings.
 
 ![Web3Auth Plug and Play Login Modal](/images/whitelabel/modal/whitelable-login-modal.gif)
 
@@ -21,6 +22,10 @@ You can pass the `uiConfig` parameters to `@web3auth/modal` to whitelabel your W
 
 <UIConfig />
 
+`WhiteLabelData`
+
+<WhiteLabelData />
+
 ## Example
 
 ```tsx
@@ -31,12 +36,15 @@ const web3auth = new Web3Auth({
   // type uiConfig
   // highlight-start
   uiConfig: {
-    appName: "W3A", // <-- Your dApp Name
-    appLogo: "https://web3auth.io/images/w3a-L-Favicon-1.svg", // Your dApp Logo URL
-    theme: "light", // "light" | "dark" | "auto"
-    loginMethodsOrder: ["apple", "google", "twitter"],
+    appName: "W3A",
+    theme: {
+      primary: "red",
+    },
+    mode: "dark",
+    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
-    loginGridCol: 3, // 2 | 3
+    loginGridCol: 3,
     primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin"
   },
   // highlight-end

docs/pnp/migration-guides/modal-v6-to-v7.mdx

@@ -21,7 +21,40 @@ connect(): Promise<IProvider | null>;
 // highlight-end
 ```
 
-###
+### `appLogo` is replaced by `logoLight` and `logoDark`
+
+#### `uiConfig` is in line with the `whitelabel` object in `OpenLoginAdapter`.
+
+With v7, the `uiConfig` object now accepts `logoLight` and `logoDark` instead of `appLogo`. This is done to bring consistency to the naming
+convention.
+
+```tsx
+const web3auth = new Web3Auth({
+  clientId,
+  chainConfig: {
+    chainNamespace: CHAIN_NAMESPACES.EIP155,
+    chainId: "0x1",
+    rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
+  },
+  // uiConfig refers to the whitelabeling options, which is available only on Growth Plan and above
+  // Please remove this parameter if you're on the Base Plan
+  uiConfig: {
+    appName: "W3A",
+    theme: {
+      primary: "red",
+    },
+    mode: "dark",
+    // highlight-start
+    logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
+    logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
+    // highlight-end
+    defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
+    loginGridCol: 3,
+    primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin"
+  },
+  web3AuthNetwork: "sapphire_mainnet",
+});
+```
 
 ## OpenLoginAdapter
 

docs/sdk/pnp/react-native/custom-authentication.mdx

@@ -263,8 +263,8 @@ const web3auth = new Web3Auth(WebBrowser, {
 
 ## `ExtraLoginOptions` for special login methods
 
-Additional to the `LoginConfig` you can pass extra options to the `login` function to configure the login flow for cases requiring additional info for
-enabling login. The `ExtraLoginOptions` accepts the following parameters:
+In addition to the `LoginConfig` you can pass extra options to the `login` function to configure the login flow for cases requiring additional info
+for enabling login. The `ExtraLoginOptions` accepts the following parameters:
 
 <Tabs
   defaultValue="table"

docs/sdk/pnp/web/modal/initialize.mdx

@@ -22,17 +22,18 @@ import ModalConfig from "@site/src/common/sdk/pnp/web/_modal-config.mdx";
 import InitModalConfigExample from "@site/src/common/sdk/pnp/web/_init-modal-config-example.mdx";
 import InitiateTopUp from "@site/src/common/sdk/pnp/web/_plugin-initiate-topup.mdx";
 import ShowWCScanner from "@site/src/common/sdk/pnp/web/_plugin-showwcscanner.mdx";
+import WhiteLabelData from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx";
 
-After Installation, the next step to use Web3Auth is to Initialize the SDK. However, the Initialization is a two step process, with additional two
-steps for customisations, ie.
+After Installation, the next step to use Web3Auth is to Initialize the SDK. However, the Initialization is a two-step process, with an additional two
+steps for customizations, i.e.
 
 - [Instantiation of Web3Auth](#instantiating-web3auth)
 - [Configuration of Adapters](#configuring-adapters) _(optional)_
 - [Configuration of Plugins](#configuring-plugins) _(optional)_
 - [Initialization of Modal](#initializing-modal)
 
 Please note that these are the most critical steps where you need to pass on different parameters according to the preference of your project.
-Additionally, If you wish to customise your Web3Auth Instance, Whitelabeling and Custom Authentication have to be configured within this step.
+Additionally, If you wish to customize your Web3Auth Instance, Whitelabeling and Custom Authentication have to be configured within this step.
 
 ## Instantiating Web3Auth
 
@@ -68,7 +69,7 @@ Within the `uiConfig` parameter, you can configure the Web3Auth Modal according
 
 :::tip
 
-This is just one of the aspects of whitelabeling you can achieve with Web3Auth. To know more in depth about how you can Whitelabel your application
+This is just one of the aspects of whitelabeling you can achieve with Web3Auth. To know more in-depth about how you can Whitelabel your application
 with Web3Auth Plug and Play Modal SDK, have a look at our [Whitelabeling SDK Reference](/sdk/pnp/web/modal/whitelabel).
 
 :::
@@ -77,6 +78,10 @@ with Web3Auth Plug and Play Modal SDK, have a look at our [Whitelabeling SDK Ref
 
 <UIConfig />
 
+#### `WhiteLabelData`
+
+<WhiteLabelData />
+
 ### Returns
 
 - `Object`: The web3auth instance with all its methods and events.
@@ -117,15 +122,15 @@ const web3auth = new Web3Auth({
 
 ## Configuring Adapters
 
-Adapter is a pluggable package which implements `IAdapter` interface for a wallet within Web3Auth. An adapter can be plugged in and out of web3auth
-modal. Each adapter exposes provider on successful user login which can be used to invoke RPC calls on wallet and on connected blockchain. Web3Auth's
-modal UI supports a set of default adapters depending on the [`authMode`](/sdk/pnp/web/modal/initialize#web3authoptions) being used.
+An adapter is a pluggable package that implements `IAdapter` interface for a wallet within Web3Auth. An adapter can be plugged in and out of web3auth
+modal. Each adapter exposes the provider on successful user login which can be used to invoke RPC calls on the wallet and on the connected blockchain.
+Web3Auth's modal UI supports a set of default adapters depending on the [`authMode`](/sdk/pnp/web/modal/initialize#web3authoptions) being used.
 
 :::info
 
 This step is generally optional. You don't have to configure any default adapter unless you want to override default configs for the adapter.
 
-Only those adapter which are marked are non default [in this table on the Adapters Documentation](/sdk/pnp/web/adapters#currently-available-adapters)
+Only those adapters that are marked are nondefault [in this table on the Adapters Documentation](/sdk/pnp/web/adapters#currently-available-adapters)
 are required to be configured always based on the `authMode` you are using.
 
 :::
@@ -136,9 +141,9 @@ are required to be configured always based on the `authMode` you are using.
 
 ##### Example
 
-Since we're using the `@web3auth/modal`, ie. the Plug and Play Modal SDK, the `loginConfig` should be corresponding to the socials mentioned in the
-modal. Here, we're customising Google and Facebook to be custom verified, rest all other socials will be default. You can customise other social
-logins or remove them using the whitelabeling option.
+Since we're using the `@web3auth/modal`, ie. the Plug and Play Modal SDK, the `loginConfig` should correspond to the socials mentioned in the modal.
+Here, we're customizing Google and Facebook to be custom verified, rest all other socials will be default. You can customize other social logins or
+remove them using the whitelabeling option.
 
 <CustomAuthenticationWeb3AuthExample />
 
@@ -234,8 +239,8 @@ params?: {
 }
 ```
 
-This `params` object further takes a in `modalConfig` object using which you can configure the visibility of each adapter within the modal. Each modal
-config has following configurations:
+This `params` object further takes a `modalConfig` object using which you can configure the visibility of each adapter within the modal. Each modal
+config has the following configurations:
 
 ##### `modalConfig`
 

docs/sdk/pnp/web/modal/whitelabel.mdx

@@ -43,13 +43,17 @@ Read more about Instantiating Web3Auth in the [Initialization SDK Reference](/sd
 
 :::
 
-While instantiating Web3Auth, the constructor takes an object with `Web3AuthOptions` as input. The `Web3AuthOptions` object further taken in the
+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`
 
 <UIConfig />
 
+#### `WhitelabelData`
+
+<OpenloginWhiteLabelConfig />
+
 #### Example
 
 <UIConfigWhitelabelExample />
@@ -64,7 +68,7 @@ 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 visiblity in the modal.
+the social logins and their visibility in the modal.
 
 #### `initModal()`
 
@@ -78,14 +82,14 @@ the social logins and their visiblity in the modal.
 
 ## Openlogin Adapter
 
-Web3Auth's Social Logins and Email Login runs 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
+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`](/sdk/pnp/web/adapters/openlogin).
 
 :::tip
 
 Checkout the [`openlogin-adapter`](/sdk/pnp/web/adapters/openlogin) SDK Reference for more details on different configurations you can pass for
-customisations.
+customizations.
 
 :::
 

src/common/sdk/pnp/web/_openlogin-adapter-settings.mdx

@@ -172,11 +172,11 @@ export type WhiteLabelData = {
     /**
      * App name to display in the UI
      */
-    name?: string;
+    appName?: string;
     /**
      * App url
      */
-    url?: string;
+    appUrl?: string;
     /**
      * App logo to use in light mode
      */
@@ -186,32 +186,65 @@ export type WhiteLabelData = {
      */
     logoDark?: string;
     /**
-     * Default language to use
+     * 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?: string;
+    defaultLanguage?: LANGUAGE_TYPE;
+    /**
+     theme
+     *
+     * @defaultValue auto
+     */
+    mode?: THEME_MODE_TYPE;
     /**
-     * Whether to enable dark mode
+     * Use logo loader
      *
      * @defaultValue false
      */
-    dark?: boolean;
+    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 | ColorPalette;
-        gray?: string | ColorPalette;
-        red?: string | ColorPalette;
-        green?: string | ColorPalette;
+        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>>;
 };
 
 export type MfaSettings = Partial<Record<MFA_FACTOR_TYPE, MFA_SETTINGS>>;