From 3bfbd4f17e87da37012f95f31b8645ce721f5b08 Mon Sep 17 00:00:00 2001 From: hqjang-pepper Date: Wed, 13 Sep 2023 17:46:25 +0900 Subject: [PATCH 1/6] add migration guide for modal sdk v7 --- docs/pnp/migration-guides/modal-v6-to-v7.mdx | 118 +++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 docs/pnp/migration-guides/modal-v6-to-v7.mdx diff --git a/docs/pnp/migration-guides/modal-v6-to-v7.mdx b/docs/pnp/migration-guides/modal-v6-to-v7.mdx new file mode 100644 index 000000000..be4633164 --- /dev/null +++ b/docs/pnp/migration-guides/modal-v6-to-v7.mdx @@ -0,0 +1,118 @@ +--- +title: PnP Modal SDK - v6 to v7 +displayed_sidebar: docs +description: "PnP Modal SDK - v6 to v7 | Documentation - Web3Auth" +--- + +## General + +### `IProvider` is introduced at @web3auth/base + +#### set web3auth provider type as `IProvider` instead of `SafeEventEmitterProvider` + +With V7, users can manage their web3auth provider using `IProvider` instead of `SafeEventEmitterProvider`. If `SafeEventEmitterProvider` compatible +with your existing example, there's nothing wrong with using it. + +```tsx +// With V7 +// highlight-start +const [provider, setProvider] = useState(null); +// highlight-end +``` + +### TypeError: Cannot read properties of undefined (reading 'defaultLanguage') + +In V6, we could initialize Web3Auth without uiConfig. However in V7, if you encounter this kind of problem, this is because you initialized web3auth +without uiConfig + +```tsx +// With V6 +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 + }, + web3AuthNetwork: "cyan", +}); +// With V7 +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 + }, + // add uiConfig + // highlight-start + uiConfig: { + appName: "W3A", + // appLogo: "https://web3auth.io/images/w3a-L-Favicon-1.svg", // Your App Logo Here + 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, + primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin" + }, + // highlight-end + + web3AuthNetwork: "cyan", +}); +``` + +### `rpcTarget` and `chainId` is now a mandatory parameter + +Previously, the Web Modal SDK required `chainConfig` as a parameter which had `rpcTarget` & `chainId` as the optional parameter. But with V6, it's +mandatory to add `rpcTarget` & `chainId` in the `chainConfig` object. + +```tsx +const web3auth = new Web3Auth({ + clientId, + chainConfig: { + chainNamespace: CHAIN_NAMESPACES.EIP155, + // highlight-start + chainId: "0x1", + rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own custom endpoint while creating an app + // highlight-end + }, + web3AuthNetwork: "cyan", +}); +``` + +#### 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({ + 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({ + method: "xrpl_getAccounts", +}); +``` From 05bdafccb28d48659544929f0841311ad3085fcc Mon Sep 17 00:00:00 2001 From: hqjang-pepper Date: Wed, 13 Sep 2023 17:59:58 +0900 Subject: [PATCH 2/6] fix sidebar js --- sidebars.js | 1 + 1 file changed, 1 insertion(+) diff --git a/sidebars.js b/sidebars.js index c474e17a0..743315787 100644 --- a/sidebars.js +++ b/sidebars.js @@ -101,6 +101,7 @@ module.exports = { label: "Migration Guides", items: [ "pnp/migration-guides/modal-v5-to-v6", + "pnp/migration-guides/modal-v6-to-v7", "pnp/migration-guides/no-modal-v5-to-v6", "pnp/migration-guides/rn-v3-to-v4" ] From 0c8605003c592d17b8af822df6de9d5c52ee28a2 Mon Sep 17 00:00:00 2001 From: Maharshi Mishra Date: Mon, 18 Sep 2023 18:33:29 +0800 Subject: [PATCH 3/6] merged from docs-update-v7 --- docs/pnp/migration-guides/modal-v5-to-v6.mdx | 2 +- .../migration-guides/no-modal-v5-to-v6.mdx | 4 +- .../migration-guides/no-modal-v6-to-v7.mdx | 57 +++++++++++++++++++ sidebars.js | 1 + 4 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 docs/pnp/migration-guides/no-modal-v6-to-v7.mdx diff --git a/docs/pnp/migration-guides/modal-v5-to-v6.mdx b/docs/pnp/migration-guides/modal-v5-to-v6.mdx index a30d9b807..53a8b3e3e 100644 --- a/docs/pnp/migration-guides/modal-v5-to-v6.mdx +++ b/docs/pnp/migration-guides/modal-v5-to-v6.mdx @@ -23,7 +23,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 diff --git a/docs/pnp/migration-guides/no-modal-v5-to-v6.mdx b/docs/pnp/migration-guides/no-modal-v5-to-v6.mdx index 192b55938..f54be5f15 100644 --- a/docs/pnp/migration-guides/no-modal-v5-to-v6.mdx +++ b/docs/pnp/migration-guides/no-modal-v5-to-v6.mdx @@ -23,8 +23,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 diff --git a/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx b/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx new file mode 100644 index 000000000..b836332ff --- /dev/null +++ b/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx @@ -0,0 +1,57 @@ +--- +title: PnP No Modal SDK - v6 to v7 +displayed_sidebar: docs +description: "PnP No Modal SDK - v6 to v7 | Documentation - Web3Auth" +--- + +## 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(walletName: WALLET_ADAPTER_TYPE, loginParams?: T): Promise; +// 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, +}); +``` diff --git a/sidebars.js b/sidebars.js index 661695908..1ed38b8ce 100644 --- a/sidebars.js +++ b/sidebars.js @@ -103,6 +103,7 @@ module.exports = { "pnp/migration-guides/modal-v5-to-v6", "pnp/migration-guides/modal-v6-to-v7", "pnp/migration-guides/no-modal-v5-to-v6", + "pnp/migration-guides/no-modal-v6-to-v7", "pnp/migration-guides/rn-v3-to-v4" ] }, From 8dec9325ff503c4a10f911ebe9cea856b07d3e34 Mon Sep 17 00:00:00 2001 From: Maharshi Mishra Date: Tue, 19 Sep 2023 15:12:22 +0800 Subject: [PATCH 4/6] added migration guide --- docs/pnp/migration-guides/modal-v5-to-v6.mdx | 1 + docs/pnp/migration-guides/modal-v6-to-v7.mdx | 95 ++++----- .../migration-guides/no-modal-v5-to-v6.mdx | 1 + .../migration-guides/no-modal-v6-to-v7.mdx | 42 +++- sidebars.js | 188 ++++++++---------- 5 files changed, 167 insertions(+), 160 deletions(-) diff --git a/docs/pnp/migration-guides/modal-v5-to-v6.mdx b/docs/pnp/migration-guides/modal-v5-to-v6.mdx index 53a8b3e3e..e0c59e514 100644 --- a/docs/pnp/migration-guides/modal-v5-to-v6.mdx +++ b/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 diff --git a/docs/pnp/migration-guides/modal-v6-to-v7.mdx b/docs/pnp/migration-guides/modal-v6-to-v7.mdx index be4633164..fccd557bc 100644 --- a/docs/pnp/migration-guides/modal-v6-to-v7.mdx +++ b/docs/pnp/migration-guides/modal-v6-to-v7.mdx @@ -2,88 +2,67 @@ 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 -### `IProvider` is introduced at @web3auth/base +### `web3auth.connect()` now returns a provider of type `IProvider` -#### set web3auth provider type as `IProvider` instead of `SafeEventEmitterProvider` +#### The new provider object now works with the latest version of `web3.js`. -With V7, users can manage their web3auth provider using `IProvider` instead of `SafeEventEmitterProvider`. If `SafeEventEmitterProvider` compatible -with your existing example, there's nothing wrong with using it. +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 -const [provider, setProvider] = useState(null); +connect(): Promise; // highlight-end ``` -### TypeError: Cannot read properties of undefined (reading 'defaultLanguage') +### -In V6, we could initialize Web3Auth without uiConfig. However in V7, if you encounter this kind of problem, this is because you initialized web3auth -without uiConfig +## OpenLoginAdapter -```tsx -// With V6 -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 - }, - web3AuthNetwork: "cyan", -}); -// With V7 -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 - }, - // add uiConfig - // highlight-start - uiConfig: { - appName: "W3A", - // appLogo: "https://web3auth.io/images/w3a-L-Favicon-1.svg", // Your App Logo Here - 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, - primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin" - }, - // highlight-end +### Change in the naming of some whitelabel parameters for `OpenLoginAdapter` - web3AuthNetwork: "cyan", -}); -``` +#### `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. -### `rpcTarget` and `chainId` is now a mandatory parameter +#### Light and dark mode is now toggled by the `mode` parameter instead of `dark`. -Previously, the Web Modal SDK required `chainConfig` as a parameter which had `rpcTarget` & `chainId` as the optional parameter. But with V6, it's -mandatory to add `rpcTarget` & `chainId` in the `chainConfig` object. +`mode` accepts a string from the following options: `auto`, `light` or `dark`. This replaces the `dark` boolean parameter from previous versions. ```tsx -const web3auth = new Web3Auth({ - clientId, - chainConfig: { - chainNamespace: CHAIN_NAMESPACES.EIP155, - // highlight-start - chainId: "0x1", - rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own custom endpoint while creating an app - // highlight-end +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, + }, }, - web3AuthNetwork: "cyan", + 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 diff --git a/docs/pnp/migration-guides/no-modal-v5-to-v6.mdx b/docs/pnp/migration-guides/no-modal-v5-to-v6.mdx index f54be5f15..e62818362 100644 --- a/docs/pnp/migration-guides/no-modal-v5-to-v6.mdx +++ b/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 diff --git a/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx b/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx index b836332ff..a137a74c8 100644 --- a/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx +++ b/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx @@ -2,6 +2,7 @@ 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 @@ -47,11 +48,48 @@ const openloginAdapter = new OpenloginAdapter({ // highlight-next-line mode: "auto", // whether to enable dark mode. defaultValue: false theme: { - primary: "#768729", + 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({ + 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({ + method: "xrpl_getAccounts", +}); +``` diff --git a/sidebars.js b/sidebars.js index 1ed38b8ce..d2e7ca7e9 100644 --- a/sidebars.js +++ b/sidebars.js @@ -26,9 +26,9 @@ module.exports = { "infrastructure/nodes-and-dkg", "infrastructure/glossary", { - type: 'link', - label: 'Compliance, Audits and Trust', // The link label - href: 'https://trust.web3auth.io', // The external URL + type: "link", + label: "Compliance, Audits and Trust", // The link label + href: "https://trust.web3auth.io", // The external URL }, ], }, @@ -100,12 +100,23 @@ module.exports = { type: "category", label: "Migration Guides", items: [ - "pnp/migration-guides/modal-v5-to-v6", - "pnp/migration-guides/modal-v6-to-v7", - "pnp/migration-guides/no-modal-v5-to-v6", - "pnp/migration-guides/no-modal-v6-to-v7", - "pnp/migration-guides/rn-v3-to-v4" - ] + { + type: "category", + label: "PnP Web Modal", + collapsed: true, + collapsible: true, + items: ["pnp/migration-guides/modal-v6-to-v7", "pnp/migration-guides/modal-v5-to-v6"], + }, + { + type: "category", + label: "PnP Web No Modal", + collapsed: true, + collapsible: true, + items: ["pnp/migration-guides/no-modal-v6-to-v7", "pnp/migration-guides/no-modal-v5-to-v6"], + }, + + "pnp/migration-guides/rn-v3-to-v4", + ], }, // Core Kit Section { @@ -157,7 +168,6 @@ module.exports = { "auth-provider-setup/social-providers/line", "auth-provider-setup/social-providers/weibo", "auth-provider-setup/social-providers/kakao", - ], collapsible: true, collapsed: false, @@ -261,12 +271,16 @@ module.exports = { href: "/sdk", }, { - Legal: ["legal/cookie-policy", "legal/privacy-policy", "legal/terms-and-conditions", + Legal: [ + "legal/cookie-policy", + "legal/privacy-policy", + "legal/terms-and-conditions", { - type: 'link', - label: 'Trust Center', // The link label - href: 'https://trust.web3auth.io', // The external URL - },], + type: "link", + label: "Trust Center", // The link label + href: "https://trust.web3auth.io", // The external URL + }, + ], }, ], sdk: [ @@ -345,9 +359,9 @@ module.exports = { }, "sdk/pnp/web/wagmi-connector", { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/Web3Auth/web3auth-web/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/Web3Auth/web3auth-web/releases", // The external URL }, ], }, @@ -364,17 +378,12 @@ module.exports = { collapsible: true, collapsed: false, label: "Additional Settings", - items: [ - "sdk/pnp/android/whitelabel", - "sdk/pnp/android/custom-authentication", - "sdk/pnp/android/mfa", - "sdk/pnp/android/dapp-share", - ], + items: ["sdk/pnp/android/whitelabel", "sdk/pnp/android/custom-authentication", "sdk/pnp/android/mfa", "sdk/pnp/android/dapp-share"], }, { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/Web3Auth/web3auth-android-sdk/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/Web3Auth/web3auth-android-sdk/releases", // The external URL }, ], }, @@ -391,17 +400,12 @@ module.exports = { collapsible: true, collapsed: false, label: "Additional Settings", - items: [ - "sdk/pnp/ios/whitelabel", - "sdk/pnp/ios/custom-authentication", - "sdk/pnp/ios/mfa", - "sdk/pnp/ios/dapp-share", - ], + items: ["sdk/pnp/ios/whitelabel", "sdk/pnp/ios/custom-authentication", "sdk/pnp/ios/mfa", "sdk/pnp/ios/dapp-share"], }, { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/Web3Auth/web3auth-swift-sdk/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/Web3Auth/web3auth-swift-sdk/releases", // The external URL }, ], }, @@ -426,9 +430,9 @@ module.exports = { ], }, { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/Web3Auth/web3auth-react-native-sdk/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/Web3Auth/web3auth-react-native-sdk/releases", // The external URL }, ], }, @@ -445,17 +449,12 @@ module.exports = { collapsible: true, collapsed: false, label: "Additional Settings", - items: [ - "sdk/pnp/flutter/whitelabel", - "sdk/pnp/flutter/custom-authentication", - "sdk/pnp/flutter/mfa", - "sdk/pnp/flutter/dapp-share", - ], + items: ["sdk/pnp/flutter/whitelabel", "sdk/pnp/flutter/custom-authentication", "sdk/pnp/flutter/mfa", "sdk/pnp/flutter/dapp-share"], }, { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/Web3Auth/web3auth-flutter-sdk/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/Web3Auth/web3auth-flutter-sdk/releases", // The external URL }, ], }, @@ -472,17 +471,12 @@ module.exports = { collapsible: true, collapsed: false, label: "Additional Settings", - items: [ - "sdk/pnp/unity/whitelabel", - "sdk/pnp/unity/custom-authentication", - "sdk/pnp/unity/mfa", - "sdk/pnp/unity/dapp-share", - ], + items: ["sdk/pnp/unity/whitelabel", "sdk/pnp/unity/custom-authentication", "sdk/pnp/unity/mfa", "sdk/pnp/unity/dapp-share"], }, { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/Web3Auth/web3auth-unity-sdk/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/Web3Auth/web3auth-unity-sdk/releases", // The external URL }, ], }, @@ -499,16 +493,12 @@ module.exports = { collapsible: true, collapsed: false, label: "Additional Settings", - items: [ - "sdk/pnp/unreal/whitelabel", - "sdk/pnp/unreal/custom-authentication", - "sdk/pnp/unreal/mfa", - ], + items: ["sdk/pnp/unreal/whitelabel", "sdk/pnp/unreal/custom-authentication", "sdk/pnp/unreal/mfa"], }, { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/Web3Auth/web3auth-unreal-sdk/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/Web3Auth/web3auth-unreal-sdk/releases", // The external URL }, ], }, @@ -525,7 +515,7 @@ module.exports = { "sdk/core-kit/mpc-core-kit/install", "sdk/core-kit/mpc-core-kit/initialize", "sdk/core-kit/mpc-core-kit/authentication", - "sdk/core-kit/mpc-core-kit/usage" + "sdk/core-kit/mpc-core-kit/usage", ], }, { @@ -558,15 +548,13 @@ module.exports = { label: "Additional Reading", collapsible: true, collapsed: false, - items: [ - "sdk/core-kit/tkey/intrinsic-flow", - ], + items: ["sdk/core-kit/tkey/intrinsic-flow"], }, { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/tkey/tkey/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/tkey/tkey/releases", // The external URL }, ], }, @@ -591,9 +579,9 @@ module.exports = { ], }, { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/tkey/tkey-ios/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/tkey/tkey-ios/releases", // The external URL }, ], }, @@ -618,9 +606,9 @@ module.exports = { ], }, { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/tkey/tkey-android/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/tkey/tkey-android/releases", // The external URL }, ], }, @@ -640,9 +628,9 @@ module.exports = { "sdk/core-kit/sfa-web/authentication", "sdk/core-kit/sfa-web/usage", { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/web3auth/single-factor-auth-web/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/web3auth/single-factor-auth-web/releases", // The external URL }, ], }, @@ -656,9 +644,9 @@ module.exports = { "sdk/core-kit/sfa-node/authentication", "sdk/core-kit/sfa-node/usage", { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/web3auth/web3auth-backend/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/web3auth/web3auth-backend/releases", // The external URL }, ], }, @@ -672,9 +660,9 @@ module.exports = { "sdk/core-kit/sfa-android/authentication", "sdk/core-kit/sfa-android/usage", { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/web3auth/single-factor-auth-android/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/web3auth/single-factor-auth-android/releases", // The external URL }, ], }, @@ -688,9 +676,9 @@ module.exports = { "sdk/core-kit/sfa-ios/authentication", "sdk/core-kit/sfa-ios/usage", { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/web3auth/single-factor-auth-swift/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/web3auth/single-factor-auth-swift/releases", // The external URL }, ], }, @@ -702,7 +690,7 @@ module.exports = { "sdk/core-kit/sfa-react-native/install", "sdk/core-kit/sfa-react-native/initialize", "sdk/core-kit/sfa-react-native/authentication", - "sdk/core-kit/sfa-react-native/usage" + "sdk/core-kit/sfa-react-native/usage", ], }, { @@ -715,9 +703,9 @@ module.exports = { "sdk/core-kit/sfa-flutter/authentication", "sdk/core-kit/sfa-flutter/usage", { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/web3auth/single-factor-auth-flutter/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/web3auth/single-factor-auth-flutter/releases", // The external URL }, ], }, @@ -738,9 +726,9 @@ module.exports = { "sdk/helper-sdks/providers/xrpl", "sdk/helper-sdks/providers/common", { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/Web3Auth/web3auth-web/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/Web3Auth/web3auth-web/releases", // The external URL }, ], }, @@ -752,9 +740,9 @@ module.exports = { "sdk/helper-sdks/plugins/evm-wallet", "sdk/helper-sdks/plugins/solana-wallet", { - type: 'link', - label: 'Release Notes', // The link label - href: 'https://github.com/Web3Auth/web3auth-web/releases', // The external URL + type: "link", + label: "Release Notes", // The link label + href: "https://github.com/Web3Auth/web3auth-web/releases", // The external URL }, ], }, From 093453f104d29e91a77517c9327415fad1803e6c Mon Sep 17 00:00:00 2001 From: Maharshi Mishra Date: Tue, 19 Sep 2023 15:17:18 +0800 Subject: [PATCH 5/6] Update no-modal-v6-to-v7.mdx --- docs/pnp/migration-guides/no-modal-v6-to-v7.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx b/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx index a137a74c8..e98f37ccd 100644 --- a/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx +++ b/docs/pnp/migration-guides/no-modal-v6-to-v7.mdx @@ -63,7 +63,7 @@ const openloginAdapter = new OpenloginAdapter({ #### For Solana -For Solana, SolanaWallet in package "@web3auth/solana-provider", the request typings require both input and output now use `string[]` when input +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 @@ -77,7 +77,7 @@ 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 +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 From eb71988e0b8bc1b16f179ea1550fd22613860eef Mon Sep 17 00:00:00 2001 From: Maharshi Mishra Date: Tue, 19 Sep 2023 16:13:15 +0800 Subject: [PATCH 6/6] WHitelabeldata changes added --- docs/pnp/features/whitelabel/login-modal.mdx | 20 ++- docs/pnp/migration-guides/modal-v6-to-v7.mdx | 35 ++++- .../react-native/custom-authentication.mdx | 4 +- docs/sdk/pnp/web/modal/initialize.mdx | 31 ++-- docs/sdk/pnp/web/modal/whitelabel.mdx | 14 +- .../pnp/web/_openlogin-adapter-settings.mdx | 53 +++++-- .../pnp/web/_openlogin-whitelabel-config.mdx | 146 +++++++++--------- src/common/sdk/pnp/web/_ui-config.mdx | 54 +------ 8 files changed, 200 insertions(+), 157 deletions(-) diff --git a/docs/pnp/features/whitelabel/login-modal.mdx b/docs/pnp/features/whitelabel/login-modal.mdx index 8043ba58c..d9c575a84 100644 --- a/docs/pnp/features/whitelabel/login-modal.mdx +++ b/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 +`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 diff --git a/docs/pnp/migration-guides/modal-v6-to-v7.mdx b/docs/pnp/migration-guides/modal-v6-to-v7.mdx index fccd557bc..31ae5585f 100644 --- a/docs/pnp/migration-guides/modal-v6-to-v7.mdx +++ b/docs/pnp/migration-guides/modal-v6-to-v7.mdx @@ -21,7 +21,40 @@ connect(): Promise; // 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 diff --git a/docs/sdk/pnp/react-native/custom-authentication.mdx b/docs/sdk/pnp/react-native/custom-authentication.mdx index 961061e25..2be37e8da 100644 --- a/docs/sdk/pnp/react-native/custom-authentication.mdx +++ b/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: +#### `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. @@ -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` diff --git a/docs/sdk/pnp/web/modal/whitelabel.mdx b/docs/sdk/pnp/web/modal/whitelabel.mdx index c64e50eee..852cd3f76 100644 --- a/docs/sdk/pnp/web/modal/whitelabel.mdx +++ b/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` +#### `WhitelabelData` + + + #### Example @@ -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. ::: diff --git a/src/common/sdk/pnp/web/_openlogin-adapter-settings.mdx b/src/common/sdk/pnp/web/_openlogin-adapter-settings.mdx index b5b82cb8a..8166357e7 100644 --- a/src/common/sdk/pnp/web/_openlogin-adapter-settings.mdx +++ b/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>; + /** + * 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>; }; export type MfaSettings = Partial>; diff --git a/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx b/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx index 354fa946b..263943100 100644 --- a/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx +++ b/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx @@ -35,85 +35,83 @@ The whitelabel parameter takes `WhitelabelData` as input. The `WhitelabelData` o ```tsx 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; - /** + /** + * 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>; - /** - * 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>; + 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>; + /** + * 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>; }; - -} ``` diff --git a/src/common/sdk/pnp/web/_ui-config.mdx b/src/common/sdk/pnp/web/_ui-config.mdx index fba83f53f..d50e3f4dc 100644 --- a/src/common/sdk/pnp/web/_ui-config.mdx +++ b/src/common/sdk/pnp/web/_ui-config.mdx @@ -11,81 +11,43 @@ import Tabs from "@theme/Tabs"; -| Parameter | Type | Description | Mandatory | Default | -| -------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `appName?` | `string` | The name of your app. | No | `Web3Auth` | -| `appLogo?` | `string` | A link to preferred logo. | No | [`web3auth-logo.svg`](https://images.web3auth.io/web3auth-logo.svg) | -| `theme?` | `enum` - (`light`, `dark` or `auto`) | Theme for the modal, can be set to light, dark or auto. | No | `light` | -| `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"]` | -| `defaultLanguage?` | `string` | The displayed language that will be used in the Web3Auth Modal.
Choose from:
  • `en` - English
  • `de` - German
  • `ja` - Japanese
  • `ko` - Korean
  • `zh` - Mandarin
  • `es` - Spanish
  • `fr` - French
  • `pt` - Portuguese
  • `nl` - Dutch
| No | `en`: English | -| `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` | +| 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` | ```tsx -interface UIConfig { - /** - * App name to display in the UI. - */ - appName?: string; - - /** - * Logo for your app. - */ - appLogo?: string; - - /** - * theme for the modal - * - * @defaultValue `auto` - */ - theme?: "light" | "dark" | "auto"; - +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[]; - - /** - * 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 - * - */ - defaultLanguage?: 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