Merge pull request #1980 from Web3Auth/feat/hide-wallet-discovery

Add hide wallet discovery param in Modal
Web3Auth · Oct 10, 2024 · 41865b7 · 41865b7
2 parents 8021cbb + f8c1b95
commit 41865b7
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 111 deletions.
diff --git a/demo/vue-app-new/package-lock.json b/demo/vue-app-new/package-lock.json
diff --git a/demo/vue-app-new/src/MainView.vue b/demo/vue-app-new/src/MainView.vue
@@ -196,6 +196,7 @@ onBeforeMount(() => {
         formData.chain = json.chain;
         formData.chainNamespace = json.chainNamespace;
         formData.loginProviders = json.loginProviders;
+        formData.showWalletDiscovery = json.showWalletDiscovery;
         formData.network = json.network;
         formData.whiteLabel = json.whiteLabel;
         formData.walletPlugin = json.walletPlugin;
@@ -232,6 +233,7 @@ const configs = computed(() => {
     web3AuthOptions: options.value,
     plugins: walletPlugins.value,
     modalConfig: modalParams.value,
+    hideWalletDiscovery: !formData.showWalletDiscovery,
   };
 });
 </script>

diff --git a/demo/vue-app-new/src/components/AppSettings.vue b/demo/vue-app-new/src/components/AppSettings.vue
@@ -138,6 +138,15 @@ const onChainNamespaceChange = (value: string) => {
           multiple
           :show-check-box="true"
         />
+        <Toggle
+          v-model="formData.showWalletDiscovery"
+          data-testid="showWalletDiscovery"
+          :show-label="true"
+          :size="'small'"
+          :label-disabled="$t('app.showWalletDiscovery')"
+          :label-enabled="$t('app.showWalletDiscovery')"
+          class="mb-2"
+        />
       </Card>
       <Card v-if="isActiveTab(1)" class="grid grid-cols-1 gap-2 px-4 py-4 sm:grid-cols-2" :shadow="false">
         <Toggle

diff --git a/demo/vue-app-new/src/config.ts b/demo/vue-app-new/src/config.ts
@@ -158,6 +158,7 @@ export type FormData = {
   };
   loginProviders: LOGIN_PROVIDER_TYPE[];
   adapters: string[];
+  showWalletDiscovery: boolean;
   loginMethods: Record<LOGIN_PROVIDER_TYPE, FormConfigSettings>;
   walletPlugin: {
     enable: boolean;

diff --git a/demo/vue-app-new/src/store/form.ts b/demo/vue-app-new/src/store/form.ts
@@ -15,6 +15,7 @@ export const formDataStore = reactive<FormData>({
   },
   loginProviders: [],
   adapters: [],
+  showWalletDiscovery: true,
   loginMethods: defaultLoginMethod,
   walletPlugin: {
     enable: false,

diff --git a/demo/vue-app-new/src/translations/en.json b/demo/vue-app-new/src/translations/en.json
@@ -8,6 +8,7 @@
     "chain": "Chain",
     "loginProviders": "Login provider",
     "adapters": "Adapters",
+    "showWalletDiscovery": "Show Wallet Discovery",
     "greeting": "Let's configure Web3Auth!",
     "enableWalletServicePlugin": "Enable Wallet Service Plugin",
     "walletPlugin": {

diff --git a/packages/composables/modal-vue-composables/src/Web3AuthProvider.ts b/packages/composables/modal-vue-composables/src/Web3AuthProvider.ts
@@ -127,9 +127,9 @@ export const Web3AuthProvider = defineComponent({
           try {
             initError.value = null;
             isInitializing.value = true;
-            const { modalConfig } = props.config;
+            const { modalConfig, hideWalletDiscovery } = props.config;
             if (modalConfig) {
-              await newWeb3Auth.initModal({ modalConfig });
+              await newWeb3Auth.initModal({ modalConfig, hideWalletDiscovery });
             } else {
               await newWeb3Auth.initModal();
             }

diff --git a/packages/composables/modal-vue-composables/src/interfaces.ts b/packages/composables/modal-vue-composables/src/interfaces.ts
@@ -6,6 +6,7 @@ import { Ref, ShallowRef } from "vue";
 export type Web3AuthContextConfig = {
   web3AuthOptions: Web3AuthOptions;
   modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
+  hideWalletDiscovery?: boolean;
   adapters?: IAdapter<unknown>[];
   plugins?: IPlugin[];
 };

diff --git a/packages/hooks/modal-react-hooks/src/context/Web3AuthInnerContext.ts b/packages/hooks/modal-react-hooks/src/context/Web3AuthInnerContext.ts
@@ -141,9 +141,9 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
       try {
         setInitError(null);
         setIsInitializing(true);
-        const { modalConfig } = config;
+        const { modalConfig, hideWalletDiscovery } = config;
         if (modalConfig) {
-          await web3Auth.initModal({ modalConfig });
+          await web3Auth.initModal({ modalConfig, hideWalletDiscovery });
         } else {
           await web3Auth.initModal();
         }

diff --git a/packages/hooks/modal-react-hooks/src/interfaces.ts b/packages/hooks/modal-react-hooks/src/interfaces.ts
@@ -4,6 +4,7 @@ import { type ModalConfig, type Web3Auth, type Web3AuthOptions } from "@web3auth
 export type Web3AuthContextConfig = {
   web3AuthOptions: Web3AuthOptions;
   modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
+  hideWalletDiscovery?: boolean;
   adapters?: IAdapter<unknown>[];
   plugins?: IPlugin[];
 };

diff --git a/packages/modal/src/interface.ts b/packages/modal/src/interface.ts
@@ -8,7 +8,12 @@ export interface AdaptersModalConfig {
   adapters?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
 }
 
+export interface ModalConfigParams {
+  modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
+  hideWalletDiscovery?: boolean;
+}
+
 export interface IWeb3AuthModal extends IWeb3Auth {
-  initModal(params?: { modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig> }): Promise<void>;
+  initModal(params?: ModalConfigParams): Promise<void>;
   connect(): Promise<IProvider | null>;
 }
diff --git a/packages/modal/src/modalManager.ts b/packages/modal/src/modalManager.ts
@@ -36,7 +36,7 @@ import { WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter";
 import deepmerge from "deepmerge";
 
 import { defaultOtherModalConfig, walletRegistryUrl } from "./config";
-import { AdaptersModalConfig, IWeb3AuthModal, ModalConfig } from "./interface";
+import { AdaptersModalConfig, IWeb3AuthModal, ModalConfig, ModalConfigParams } from "./interface";
 
 export interface Web3AuthOptions extends IWeb3AuthCoreOptions {
   /**
@@ -70,7 +70,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     this.modalConfig = modalConfig;
   }
 
-  public async initModal(params?: { modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig> }): Promise<void> {
+  public async initModal(params?: ModalConfigParams): Promise<void> {
     super.checkInitRequirements();
 
     let projectConfig: PROJECT_CONFIG_RESPONSE;
@@ -87,10 +87,12 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
 
     let walletRegistry: WalletRegistry = { others: {}, default: {} };
-    try {
-      walletRegistry = await fetchWalletRegistry(walletRegistryUrl);
-    } catch (e) {
-      log.error("Failed to fetch wallet registry", e);
+    if (!params?.hideWalletDiscovery) {
+      try {
+        walletRegistry = await fetchWalletRegistry(walletRegistryUrl);
+      } catch (e) {
+        log.error("Failed to fetch wallet registry", e);
+      }
     }
     this.loginModal = new LoginModal({
       ...this.options.uiConfig,
@@ -337,6 +339,8 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     }
 
     const hasExternalWallets = allAdapters.some((adapterName) => {
+      // if wallet connect adapter is available but hideWalletDiscovery is true then don't consider it as external wallet
+      if (adapterName === WALLET_ADAPTERS.WALLET_CONNECT_V2 && params?.hideWalletDiscovery) return false;
       return this.walletAdapters[adapterName]?.type === ADAPTER_CATEGORY.EXTERNAL && this.modalConfig.adapters?.[adapterName].showOnModal;
     });
 

diff --git a/packages/ui/src/components/ExternalWallets.tsx b/packages/ui/src/components/ExternalWallets.tsx
@@ -52,8 +52,7 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
   const [t] = useTranslation(undefined, { i18n });
 
   const walletDiscoverySupported = useMemo(() => {
-    // console.log("config", config);
-    const supported = walletRegistry && Object.keys(walletRegistry).length > 0;
+    const supported = walletRegistry && Object.keys(walletRegistry.default).length > 0 && Object.keys(walletRegistry.others).length > 0;
     return supported;
   }, [walletRegistry]);