feat: disable back button when only external wallets available

Author: tanguyenvn

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

@@ -25,6 +25,7 @@ function ConnectWallet(props: ConnectWalletProps) {
     deviceDetails,
     buttonRadius = "pill",
     chainNamespace,
+    isExternalWalletModeOnly,
     onBackClick,
     handleExternalWalletClick,
     handleWalletDetailsHeight,
@@ -235,10 +236,18 @@ function ConnectWallet(props: ConnectWalletProps) {
     return walletConnectUri;
   }, [metamaskConnectUri, selectedButton, selectedWallet, walletConnectUri]);
 
+  const disableBackButton = useMemo(() => {
+    // If wallet is selected, show the back button
+    if (selectedWallet) return false;
+    // Otherwise, if external wallet mode only, login screen is skipped so back button is not needed
+    if (isExternalWalletModeOnly) return true;
+    return false;
+  }, [selectedWallet, isExternalWalletModeOnly]);
+
   return (
     <div className="w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4">
       {/* Header */}
-      <ConnectWalletHeader onBackClick={handleBack} currentPage={currentPage} selectedButton={selectedButton} />
+      <ConnectWalletHeader disableBackButton={disableBackButton} onBackClick={handleBack} currentPage={currentPage} selectedButton={selectedButton} />
       {/* Body */}
       {selectedWallet ? (
         <ConnectWalletQrCode

packages/modal/src/ui/components/ConnectWallet/ConnectWallet.type.ts

@@ -14,6 +14,7 @@ export interface ConnectWalletProps {
   deviceDetails: { platform: platform; browser: browser; os: os };
   chainNamespace: ChainNamespaceType[];
   buttonRadius: ButtonRadiusType;
+  isExternalWalletModeOnly: boolean;
   onBackClick?: (flag: boolean) => void;
   handleExternalWalletClick: (params: { connector: string; chainNamespace?: ChainNamespaceType }) => void;
   handleWalletDetailsHeight: () => void;

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

@@ -5,7 +5,7 @@ import i18n from "../../../localeImport";
 import { ConnectWalletHeaderProps } from "./ConnectWalletHeader.type";
 
 function ConnectWalletHeader(props: ConnectWalletHeaderProps) {
-  const { onBackClick, currentPage, selectedButton } = props;
+  const { disableBackButton, onBackClick, currentPage, selectedButton } = props;
   const [t] = useTranslation(undefined, { i18n });
 
   const handleBack = () => {
@@ -16,25 +16,29 @@ function ConnectWalletHeader(props: ConnectWalletHeaderProps) {
 
   return (
     <div className="w3a--flex w3a--items-center w3a--justify-between">
-      <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-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white"
+      {!disableBackButton ? (
+        <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}
         >
-          <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>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 20"
+            className="w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover: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>
+      ) : (
+        <div />
+      )}
       <p className="w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white">
         {currentPage === CONNECT_WALLET_PAGES.SELECTED_WALLET
           ? selectedButton?.displayName

packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.type.ts

@@ -1,6 +1,7 @@
 import { ExternalButton } from "../../../interfaces";
 
 export interface ConnectWalletHeaderProps {
+  disableBackButton?: boolean;
   onBackClick: () => void;
   currentPage: string;
   selectedButton: ExternalButton;

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

@@ -98,6 +98,10 @@ function Root(props: RootProps) {
     if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
   };
 
+  const isExternalWalletModeOnly = useMemo(() => {
+    return !showPasswordLessInput && !areSocialLoginsVisible;
+  }, [areSocialLoginsVisible, showPasswordLessInput]);
+
   // Wallet Details
   const mobileInstallLinks = useMemo<JSX.Element[]>(() => {
     if (deviceDetails.platform === "desktop") return [];
@@ -502,6 +506,7 @@ function Root(props: RootProps) {
                         chainNamespace={chainNamespaces}
                         buttonRadius={buttonRadiusType}
                         handleWalletDetailsHeight={handleWalletDetailsHeight}
+                        isExternalWalletModeOnly={isExternalWalletModeOnly}
                         onBackClick={onBackClick}
                         handleExternalWalletClick={preHandleExternalWalletClick}
                       />