Merge pull request #485 from Web3Auth/migration-guide

Migration guide

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-v5-to-v6.mdx

@@ -2,6 +2,7 @@
 title: PnP Modal SDK - v5 to v6
 displayed_sidebar: docs
 description: "PnP Modal SDK - v5 to v6 | Documentation - Web3Auth"
+sidebar_label: v5 to v6
 ---
 
 ## General
@@ -23,7 +24,7 @@ if (web3auth.connected) {
 
 ### `provider` is now always available
 
-In V5, we used to add a check for setting the `provider` only if the `web3auth.provider` was present. But now with V6 we always have provider
+In V5, we used to add a check for setting the `provider` only if the `web3auth.provider` was present. But now with V6 we always have a provider
 available even if the user is not logged in.
 
 ```tsx

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

@@ -0,0 +1,130 @@
+---
+title: PnP Modal SDK - v6 to v7
+displayed_sidebar: docs
+description: "PnP Modal SDK - v6 to v7 | Documentation - Web3Auth"
+sidebar_label: v6 to v7
+---
+
+## General
+
+### `web3auth.connect()` now returns a provider of type `IProvider`
+
+#### The new provider object now works with the latest version of `web3.js`.
+
+With V7, the type for the provider has been changed to `IProvider` which is compatible with the latest version of `web3.js` instead of the old type
+`SafeEventEmitterProvider`. The type `Iprovider` can be imported from the `@web3auth/base` package.
+
+```tsx
+// With V7
+// highlight-start
+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
+
+### Change in the naming of some whitelabel parameters for `OpenLoginAdapter`
+
+#### `name` and `url` are now `appName` and `appUrl`, respectively.
+
+In `adapterSettings`, the `whitelabel` object now accepts `appName` and `appUrl` instead of `name` and `url`, respectively. This is done to bring
+consistency to the naming convention.
+
+#### Light and dark mode is now toggled by the `mode` parameter instead of `dark`.
+
+`mode` accepts a string from the following options: `auto`, `light` or `dark`. This replaces the `dark` boolean parameter from previous versions.
+
+```tsx
+const openloginAdapter = new OpenloginAdapter({
+  adapterSettings: {
+    whiteLabel: {
+      // highlight-start
+      appName: "W3A Heroes",
+      appUrl: "https://web3auth.io",
+      // highlight-end
+      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
+      // highlight-next-line
+      mode: "auto", // whether to enable dark mode. defaultValue: false
+      theme: {
+        primary: "#768729",
+      },
+      useLogoLoader: true,
+    },
+  },
+  privateKeyProvider,
+});
+```
+
+## Other changes
+
+### Extra parameters for `solana-provider` and `xrpl-provider`
+
+#### For Solana
+
+For Solana, SolanaWallet in package "@web3auth/solana-provider", the request typings require both input and output now use `string[]` when input
+placeholder is needed
+
+```tsx
+// With V7
+const connectionConfig = await solanaWallet.request<string[], CustomChainConfig>({
+  method: "solana_provider_config",
+  params: [],
+});
+const conn = new Connection(connectionConfig.rpcTarget);
+```
+
+#### For XRPL
+
+For XRPL, after the change of "@web3auth/xrpl-provider" version to v7, the request typings require both input and output now so use `never` when input
+or output placeholder is needed
+
+```tsx
+// With V7
+const txSign = await this.provider.request<{ signature: string }, never>({
+  method: "xrpl_signMessage",
+  params: {
+    signature: hexMsg,
+  },
+});
+
+const accounts = await this.provider.request<never, string[]>({
+  method: "xrpl_getAccounts",
+});
+```

docs/pnp/migration-guides/no-modal-v5-to-v6.mdx

@@ -2,6 +2,7 @@
 title: PnP No Modal SDK - v5 to v6
 displayed_sidebar: docs
 description: "PnP No Modal SDK - v5 to v6 | Documentation - Web3Auth"
+sidebar_label: v5 to v6
 ---
 
 ## General
@@ -23,8 +24,8 @@ if (web3auth.connected) {
 
 ### `provider` is now always available
 
-In V5, we used to add a check for setting the `provider` only if the `web3auth.provider` was present. But now with V6 we always have provider
-available even if the user is not logged-in.
+In V5, we used to add a check for setting the `provider` only if the `web3auth.provider` was present. But now with V6 we always have a provider
+available even if the user is not logged in.
 
 ```tsx
 // With V5

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

@@ -0,0 +1,95 @@
+---
+title: PnP No Modal SDK - v6 to v7
+displayed_sidebar: docs
+description: "PnP No Modal SDK - v6 to v7 | Documentation - Web3Auth"
+sidebar_label: v6 to v7
+---
+
+## General
+
+### `web3auth.connectTo()` now returns a provider of type `IProvider`
+
+#### The new provider object now works with the latest version of `web3.js`.
+
+With V7, the type for the provider has been changed to `IProvider` which is compatible with the latest version of `web3.js` instead of the old type
+`SafeEventEmitterProvider`. The type `Iprovider` can be imported from the `@web3auth/base` package.
+
+```tsx
+// With V7
+// highlight-start
+connectTo<T>(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise<IProvider | null>;
+// highlight-end
+```
+
+## OpenLoginAdapter
+
+### Change in the naming of some whitelabel parameters for `OpenLoginAdapter`
+
+#### `name` and `url` are now `appName` and `appUrl`, respectively.
+
+In `adapterSettings`, the `whitelabel` object now accepts `appName` and `appUrl` instead of `name` and `url`, respectively. This is done to bring
+consistency to the naming convention.
+
+#### Light and dark mode is now toggled by the `mode` parameter instead of `dark`.
+
+`mode` accepts a string from the following options: `auto`, `light` or `dark`. This replaces the `dark` boolean parameter from previous versions.
+
+```tsx
+const openloginAdapter = new OpenloginAdapter({
+  adapterSettings: {
+    whiteLabel: {
+      // highlight-start
+      appName: "W3A Heroes",
+      appUrl: "https://web3auth.io",
+      // highlight-end
+      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
+      // highlight-next-line
+      mode: "auto", // whether to enable dark mode. defaultValue: false
+      theme: {
+        primary: "#768729",
+      },
+      useLogoLoader: true,
+    },
+  },
+  privateKeyProvider,
+});
+```
+
+## Other changes
+
+### Extra parameters for `solana-provider` and `xrpl-provider`
+
+#### For Solana
+
+For Solana, SolanaWallet in package `@web3auth/solana-provider`, the request typings require both input and output now use `string[]` when input
+placeholder is needed
+
+```tsx
+// With V7
+const connectionConfig = await solanaWallet.request<string[], CustomChainConfig>({
+  method: "solana_provider_config",
+  params: [],
+});
+const conn = new Connection(connectionConfig.rpcTarget);
+```
+
+#### For XRPL
+
+For XRPL, after the change of `@web3auth/xrpl-provider` version to v7, the request typings require both input and output now so use `never` when input
+or output placeholder is needed
+
+```tsx
+// With V7
+const txSign = await this.provider.request<{ signature: string }, never>({
+  method: "xrpl_signMessage",
+  params: {
+    signature: hexMsg,
+  },
+});
+
+const accounts = await this.provider.request<never, string[]>({
+  method: "xrpl_getAccounts",
+});
+```

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"