Merge pull request #2129 from Web3Auth/fix/v10-ui-p2

Fix/v10 UI p2

Author: chaitanyapotti

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

@@ -5,7 +5,6 @@ import {
   coinbaseConnector,
   type ConnectorFn,
   type CustomChainConfig,
-  getChainConfig,
   nftCheckoutPlugin,
   type PluginFn,
   storageAvailable,
@@ -27,6 +26,7 @@ import AppSettings from "./components/AppSettings.vue";
 import { clientIds, NFT_CHECKOUT_CLIENT_ID } from "./config";
 import { FormConfigSettings } from "./interfaces";
 import { formDataStore } from "./store/form";
+import { getChainConfig } from "./utils/chainconfig";
 
 const formData = formDataStore;
 

demo/vue-app-new/src/MainView.vue

@@ -1,6 +1,6 @@
 import type { BaseConnectorConfig, IProvider, IWeb3Auth, LoginMethodConfig, WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
 
-export interface ModalConfig extends Omit<BaseConnectorConfig, "isInjected"> {
+export interface ModalConfig extends Omit<BaseConnectorConfig, "isInjected" | "chainNamespaces"> {
   loginMethods?: LoginMethodConfig;
 }
 

packages/modal/src/interface.ts

@@ -8,6 +8,7 @@ import {
   CONNECTOR_CATEGORY,
   CONNECTOR_EVENTS,
   CONNECTOR_NAMES,
+  CONNECTOR_NAMESPACES,
   CONNECTOR_STATUS,
   fetchProjectConfig,
   fetchWalletRegistry,
@@ -80,7 +81,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
         connectorListener: this,
         web3authClientId: this.options.clientId,
         web3authNetwork: this.options.web3AuthNetwork,
-        chainNamespaces: [...new Set(this.coreOptions.chains?.map((x) => x.chainNamespace) || [])],
+        chainNamespaces: this.getChainNamespaces(),
         walletRegistry: filteredWalletRegistry,
       },
       {
@@ -422,38 +423,47 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     options: { externalWalletsInitialized: boolean; showExternalWalletsOnly?: boolean; externalWalletsVisibility?: boolean }
   ): Promise<void> {
     const connectorsConfig: Record<string, BaseConnectorConfig> = {};
+    const connectorChainNamespaceMap: Record<string, Set<ChainNamespaceType>> = {};
+
     // we do it like this because we don't want one slow connector to delay the load of the entire external wallet section.
     externalConnectors.forEach(async (connector) => {
       const connectorName = connector.name;
       log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
-      if (connector.status === CONNECTOR_STATUS.NOT_READY) {
-        // we are not initializing cached connector here as it is already being initialized in initModal before.
-        if (this.cachedConnector === connectorName) return;
+
+      // a wallet can support multiple chain namespaces e.g. Phantom has EvmInjected connector and WalletStandard connector.
+      if (!connectorChainNamespaceMap[connectorName]) connectorChainNamespaceMap[connectorName] = new Set();
+      if (connector.connectorNamespace === CONNECTOR_NAMESPACES.MULTICHAIN) {
+        this.getChainNamespaces().forEach((x) => connectorChainNamespaceMap[connectorName].add(x));
+      } else {
+        connectorChainNamespaceMap[connectorName].add(connector.connectorNamespace as ChainNamespaceType);
+      }
+
+      // initialize connectors
+      // skip initializing cached connector here as it is already being initialized in initModal before.
+      if (connector.status === CONNECTOR_STATUS.NOT_READY && this.cachedConnector !== connectorName) {
         try {
           this.subscribeToConnectorEvents(connector);
           const initialChain = this.getInitialChainIdForConnector(connector);
           await connector.init({ autoConnect: this.cachedConnector === connectorName, chainId: initialChain.chainId });
-          const connectorModalConfig = (this.modalConfig.connectors as Record<WALLET_CONNECTOR_TYPE, ModalConfig>)[connectorName];
-          connectorsConfig[connectorName] = { ...connectorModalConfig, isInjected: connector.isInjected, icon: connector.icon };
-          this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
-            externalWalletsVisibility: !!options.externalWalletsVisibility,
-            externalWalletsInitialized: !!options.externalWalletsInitialized,
-          });
         } catch (error) {
           log.error(error, "error while initializing connector", connectorName);
         }
-      } else {
-        if (connector.status === CONNECTOR_STATUS.READY || connector.status === CONNECTOR_STATUS.CONNECTING) {
-          // we use connecting status for wallet connect
-          const connectorModalConfig = (this.modalConfig.connectors as Record<WALLET_CONNECTOR_TYPE, ModalConfig>)[connectorName];
-          connectorsConfig[connectorName] = { ...connectorModalConfig, isInjected: connector.isInjected, icon: connector.icon };
-          this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
-            externalWalletsVisibility: !!options.externalWalletsVisibility,
-            externalWalletsInitialized: !!options.externalWalletsInitialized,
-          });
-        }
+      }
+
+      // update connector config
+      if (([CONNECTOR_STATUS.NOT_READY, CONNECTOR_STATUS.READY, CONNECTOR_STATUS.CONNECTING] as string[]).includes(connector.status)) {
+        const connectorModalConfig = (this.modalConfig.connectors as Record<WALLET_CONNECTOR_TYPE, ModalConfig>)[connectorName];
+        connectorsConfig[connectorName] = {
+          ...connectorModalConfig,
+          isInjected: connector.isInjected,
+          icon: connector.icon,
+          chainNamespaces: Array.from(connectorChainNamespaceMap[connectorName]),
+        };
+        this.loginModal.addWalletLogins(connectorsConfig, {
+          showExternalWalletsOnly: !!options.showExternalWalletsOnly,
+          externalWalletsVisibility: !!options.externalWalletsVisibility,
+          externalWalletsInitialized: !!options.externalWalletsInitialized,
+        });
       }
     });
   }
@@ -514,4 +524,8 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
       }
     }
   };
+
+  private getChainNamespaces = (): ChainNamespaceType[] => {
+    return [...new Set(this.coreOptions.chains?.map((x) => x.chainNamespace) || [])];
+  };
 }

packages/modal/src/modalManager.ts

@@ -5,7 +5,7 @@ import { BottomSheetProps } from "./BottomSheet.type";
  * @returns BottomSheet component
  */
 function BottomSheet({ isShown, onClose, children, uiConfig }: BottomSheetProps) {
-  const { borderRadiusType } = uiConfig;
+  const { borderRadiusType = "large" } = uiConfig;
   return (
     <>
       {/* Backdrop */}
@@ -23,7 +23,7 @@ function BottomSheet({ isShown, onClose, children, uiConfig }: BottomSheetProps)
       <div
         className={cn(
           `w3a--fixed w3a--bottom-2 w3a--left-2 w3a--mx-auto w3a--flex w3a--w-[96%] w3a--flex-col 
-      w3a--gap-y-2 w3a--rounded-3xl w3a--border w3a--border-app-gray-100 w3a--bg-app-white w3a--p-4 w3a--shadow-lg w3a--transition-transform w3a--duration-500 
+      w3a--gap-y-2 w3a--border w3a--border-app-gray-100 w3a--bg-app-white w3a--p-4 w3a--shadow-lg w3a--transition-transform w3a--duration-500 
       w3a--ease-out dark:w3a--border-app-gray-600 dark:w3a--bg-app-dark-surface-main
       ${isShown ? "w3a--translate-y-0 w3a--delay-700" : "w3a--translate-y-full"}`,
           {

packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx

@@ -41,9 +41,9 @@ function ConnectWalletChainFilter(props: ConnectWalletChainFilterProps) {
           type="button"
           key={chain.id}
           className={cn(
-            "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 w3a--h-12",
+            "w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-1 w3a--text-xs w3a--font-medium w3a--px-4 w3a--py-3 w3a--text-app-gray-500 dark:w3a--text-app-gray-300 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--h-12 w3a--rounded-2xl",
             {
-              "w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--rounded-2xl hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white":
+              "w3a--bg-app-gray-100 dark:w3a--bg-app-gray-800 w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white":
                 selectedChain === chain.id,
             }
           )}
@@ -52,7 +52,7 @@ function ConnectWalletChainFilter(props: ConnectWalletChainFilterProps) {
           {chain.icon && (
             <img src={getIcons(isDark ? `${chain.icon}-dark` : `${chain.icon}-light`)} alt={chain.name} className="w3a--size-5 w3a--object-contain" />
           )}
-          {t(chain.name)}
+          <span className="first-letter:w3a--capitalize">{t(chain.name)}</span>
         </button>
       ))}
     </div>

packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainFilter/ConnectWalletChainFilter.tsx

@@ -23,20 +23,6 @@ const ConnectWalletChainNamespaceSelect = (props: ConnectWalletChainNamespaceSel
     <div>
       {/* Header */}
       <div className="w3a--flex w3a--items-center w3a--justify-center">
-        {/* <button
-          type="button"
-          className="w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full"
-          onClick={handleBack}
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" className="w3a--text-app-gray-900 dark:w3a--text-app-white">
-            <path
-              fill="currentColor"
-              fillRule="evenodd"
-              d="M9.707 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l4.293 4.293a1 1 0 0 1 0 1.414"
-              clipRule="evenodd"
-            />
-          </svg>
-        </button> */}
         <p className="w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white">{t("modal.external.select-chain")}</p>
       </div>
 
@@ -64,14 +50,19 @@ const ConnectWalletChainNamespaceSelect = (props: ConnectWalletChainNamespaceSel
           <li key={chainNamespace}>
             <button
               type="button"
-              className="w3a--btn w3a--size-xl w3a--w-full w3a--items-center !w3a--justify-between w3a--rounded-full"
+              className="w3a--btn w3a-external-wallet-btn w3a--h-12 w3a--w-full w3a--items-center !w3a--justify-between w3a--rounded-full"
               onClick={() => handleExternalWalletClick({ connector: wallet.name, chainNamespace })}
             >
               <div className="w3a--flex w3a--items-center">
                 <Image imageId={imageId} hoverImageId={imageId} fallbackImageId="wallet" height="24" width="24" isButton extension="svg" />
                 <p className="w3a--ml-2 w3a--text-left w3a--text-sm first-letter:w3a--capitalize">{displayName}</p>
               </div>
-              <img id="external-wallet-arrow" src={getIcons(isDark ? "chevron-right-dark" : "chevron-right-light")} alt="arrow" />
+              <img
+                id="external-wallet-arrow"
+                className="w3a--icon-animation"
+                src={getIcons(isDark ? "chevron-right-dark" : "chevron-right-light")}
+                alt="arrow"
+              />
             </button>
           </li>
         ))}

packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainNamespaceSelect/ConnectWalletChainNamespaceSelect.tsx

@@ -256,20 +256,25 @@ function Root(props: RootProps) {
           href = universalLink || deepLink;
         }
 
+        // determine the chain namespaces supported by the wallet
+        const connectorConfig = config[wallet];
+        const connectorChainNamespaces = connectorConfig?.chainNamespaces || [];
         const registryNamespaces = new Set(walletRegistryItem.chains?.map((chain) => chain.split(":")[0]));
         const injectedChainNamespaces = new Set(walletRegistryItem.injected?.map((injected) => injected.namespace));
-        const availableChainNamespaces = chainNamespaces.filter((x) => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
-        const connector = config[wallet];
+        const availableChainNamespaces = chainNamespaces.filter(
+          (x) => registryNamespaces.has(x) || injectedChainNamespaces.has(x) || connectorChainNamespaces.includes(x)
+        );
+
         const button: ExternalButton = {
           name: wallet,
           displayName: walletRegistryItem.name,
           href,
-          hasInjectedWallet: connector?.isInjected || false,
+          hasInjectedWallet: connectorConfig?.isInjected || false,
           hasWalletConnect: isWalletConnectConnectorIncluded && walletRegistryItem.walletConnect?.sdks?.includes("sign_v2"),
           hasInstallLinks: Object.keys(walletRegistryItem.app || {}).length > 0,
           walletRegistryItem,
           imgExtension: walletRegistryItem.imgExtension || "svg",
-          icon: connector?.icon,
+          icon: connectorConfig?.icon,
           chainNamespaces: availableChainNamespaces,
         };
 
@@ -286,29 +291,22 @@ function Root(props: RootProps) {
   const installedConnectorButtons = useMemo(() => {
     const installedConnectors = Object.keys(config).reduce((acc, connector) => {
       if ([WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(connector) || !connectorVisibilityMap[connector]) return acc;
-
-      // determine chain namespaces based on wallet registry
-      const walletRegistryItem = walletRegistry.default[connector];
-      const registryNamespaces = new Set(walletRegistryItem?.chains?.map((chain) => chain.split(":")[0]));
-      const injectedChainNamespaces = new Set(walletRegistryItem?.injected?.map((injected) => injected.namespace));
-      const availableChainNamespaces = chainNamespaces.filter((x) => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
-
+      const connectorConfig = config[connector];
       acc.push({
         name: connector,
-        displayName: config[connector].label || connector,
-        hasInjectedWallet: config[connector]?.isInjected || false,
+        displayName: connectorConfig?.label || connector,
+        hasInjectedWallet: connectorConfig?.isInjected || false,
         hasWalletConnect: false,
         hasInstallLinks: false,
-        walletRegistryItem,
-        icon: config[connector]?.icon,
-        chainNamespaces: availableChainNamespaces,
+        icon: connectorConfig?.icon,
+        chainNamespaces: connectorConfig?.chainNamespaces || [],
       });
       return acc;
     }, [] as ExternalButton[]);
 
     // make metamask the first button and limit the number of buttons
     return installedConnectors;
-  }, [config, connectorVisibilityMap, walletRegistry.default, chainNamespaces]);
+  }, [config, connectorVisibilityMap]);
 
   const customConnectorButtons = useMemo(() => {
     return installedConnectorButtons.filter((button) => !button.hasInjectedWallet);

packages/modal/src/ui/components/Root/Root.tsx

@@ -61,7 +61,7 @@ function Widget(props: WidgetProps) {
       log.debug("state updated", newModalState);
 
       setModalState((prevState) => {
-        const mergedState = cloneDeep(deepmerge(prevState, newModalState));
+        const mergedState = cloneDeep(deepmerge(prevState, newModalState, { arrayMerge: (_prevState, newState) => newState }));
         return mergedState;
       });
     });

packages/modal/src/ui/components/Widget/Widget.tsx

@@ -14,11 +14,11 @@ import {
   type WEB3AUTH_NETWORK_TYPE,
 } from "@web3auth/auth";
 
-import { ConnectorNamespaceType, CustomChainConfig } from "../chain/IChainInterface";
-import { IWeb3AuthCoreOptions } from "../core/IWeb3Auth";
+import type { ChainNamespaceType, ConnectorNamespaceType, CustomChainConfig } from "../chain/IChainInterface";
+import type { IWeb3AuthCoreOptions } from "../core/IWeb3Auth";
 import { Web3AuthError } from "../errors";
-import { ProjectConfig } from "../interfaces";
-import { ProviderEvents, SafeEventEmitterProvider } from "../provider/IProvider";
+import type { ProjectConfig } from "../interfaces";
+import type { ProviderEvents, SafeEventEmitterProvider } from "../provider/IProvider";
 import { CONNECTOR_CATEGORY, CONNECTOR_EVENTS, CONNECTOR_STATUS } from "./constants";
 
 export type UserInfo = AuthUserInfo;
@@ -113,6 +113,7 @@ export interface BaseConnectorConfig {
   label: string;
   icon?: string;
   isInjected?: boolean;
+  chainNamespaces?: ChainNamespaceType[];
   showOnModal?: boolean;
   showOnMobile?: boolean;
   showOnDesktop?: boolean;