show registry at all times

Author: chaitanyapotti

demo/vue-app-new/package-lock.json

@@ -27,6 +27,7 @@ export interface WalletRegistryItem {
     sdks: string[];
   };
   app?: {
+    browser?: string;
     android?: string;
     ios?: string;
     chrome?: string;

packages/base/src/utils.ts

@@ -38,8 +38,8 @@
       "prettier --write"
     ]
   },
-  "main": "dist/modal.cjs.js",
-  "module": "dist/modal.esm.js",
+  "main": "dist/lib.cjs/index.js",
+  "module": "dist/lib.esm/index.js",
   "name": "@web3auth/modal",
   "peerDependencies": {
     "@babel/runtime": "^7.x",

packages/modal/package.json

@@ -380,7 +380,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     Object.keys(this.walletAdapters).forEach(async (adapterName) => {
       const adapter = this.walletAdapters[adapterName];
       if (adapter?.type === ADAPTER_CATEGORY.EXTERNAL) {
-        log.debug("init external wallet", this.cachedAdapter, adapterName);
+        log.debug("init external wallet", this.cachedAdapter, adapterName, adapter.status);
         this.subscribeToAdapterEvents(adapter);
         // we are not initializing cached adapter here as it is already being initialized in initModal before.
         if (this.cachedAdapter === adapterName) {
@@ -396,7 +396,8 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
               return undefined;
             })
             .catch((error) => log.error(error, "error while initializing adapter", adapterName));
-        } else if (adapter.status === ADAPTER_STATUS.READY) {
+        } else if (adapter.status === ADAPTER_STATUS.READY || adapter.status === ADAPTER_STATUS.CONNECTING) {
+          // we use connecting status for wallet connect
           const adapterModalConfig = (this.modalConfig.adapters as Record<WALLET_ADAPTER_TYPE, ModalConfig>)[adapterName];
           adaptersConfig[adapterName] = { ...adapterModalConfig, isInjected: adapter.isInjected };
           this.loginModal.addWalletLogins(adaptersConfig, { showExternalWalletsOnly: !!options?.showExternalWalletsOnly });

packages/modal/src/modalManager.ts

@@ -111,7 +111,9 @@ export default function ExternalWalletInstall(props: ExternalWalletInstallProps)
     // if browser is brave, use chrome extension
     const browserType = deviceDetails.browser === "brave" ? "chrome" : deviceDetails.browser;
     const browserExtensionConfig = connectButton.walletRegistryItem.app || {};
-    const browserExtensionId = browserExtensionConfig[browserType];
+    const extensionForCurrentBrowser =
+      browserExtensionConfig.browser && browserExtensionConfig.browser.includes(browserType) ? browserExtensionConfig.browser : undefined;
+    const browserExtensionId = browserExtensionConfig[browserType] || extensionForCurrentBrowser;
     const browserExtensionUrl = browserExtensionId ? getBrowserExtensionUrl(browserType, browserExtensionId) : null;
     const installLink = browserExtensionUrl ? (
       <li key={deviceDetails.browser}>

packages/ui/src/components/ExternalWallet/ExternalWalletInstall.tsx

@@ -52,10 +52,10 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
   const [t] = useTranslation(undefined, { i18n });
 
   const walletDiscoverySupported = useMemo(() => {
-    const walletConnectSupported = Object.keys(config || {}).some((adapter) => adapter === WALLET_ADAPTERS.WALLET_CONNECT_V2);
-    const supported = walletRegistry && Object.keys(walletRegistry).length > 0 && walletConnectSupported;
+    // console.log("config", config);
+    const supported = walletRegistry && Object.keys(walletRegistry).length > 0;
     return supported;
-  }, [config, walletRegistry]);
+  }, [walletRegistry]);
 
   const deviceDetails = useMemo<{ platform: platform; os: os; browser: browser }>(() => {
     const browser = bowser.getParser(window.navigator.userAgent);
@@ -127,7 +127,7 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
             walletRegistryItem,
             imgExtension: walletRegistryItem.imgExtension || "svg",
           };
-
+          // const isBrowserExtensionAvailable = walletRegistryItem.app?.chrome || walletRegistryItem.app?.firefox || walletRegistryItem.app?.edge;
           if (!button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks) return acc;
 
           const chainNamespaces = new Set(walletRegistryItem.chains?.map((chain) => chain.split(":")[0]));