From c2fd121e1c4a66db48658249cfe08dba85adb703 Mon Sep 17 00:00:00 2001
From: Ganesh Suresh Patra <ganesh.patra@consensys.net>
Date: Tue, 27 Jan 2026 17:54:48 +0530
Subject: [PATCH 1/2] fix: updated bottomsheet for walletregistry app

---
 .../ui/components/BottomSheet/BottomSheet.tsx | 22 +++++---
 .../ConnectWallet/ConnectWallet.tsx           | 12 ++++-
 .../ConnectWallet/ConnectWallet.type.ts       |  1 +
 .../ConnectWalletHeader.tsx                   |  9 ++--
 .../ConnectWalletHeader.type.ts               |  1 +
 .../ConnectWalletQrCode.tsx                   | 51 +++++++++++--------
 .../ConnectWalletQrCode.type.ts               |  3 +-
 .../modal/src/ui/components/Root/Root.tsx     |  2 +
 8 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx b/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx
index ab37aa60a..d4fc8497c 100644
--- a/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx
+++ b/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx
@@ -6,23 +6,31 @@ import { BottomSheetProps } from "./BottomSheet.type";
  */
 function BottomSheet({ isShown, onClose, children, uiConfig, sheetClassName, showCloseButton = true }: BottomSheetProps) {
   const { borderRadiusType = "large" } = uiConfig;
+
+  const handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    if (onClose) onClose();
+  };
   return (
     <>
       {/* Backdrop */}
       <div
-        className={cn("w3a--bottom-sheet-bg w3a--fixed w3a--left-0 w3a--top-0 w3a--size-full w3a--transition-opacity w3a--duration-300", {
-          "w3a--rounded-[30px]": borderRadiusType === "large",
-          "w3a--rounded-2xl": borderRadiusType === "medium",
-          "w3a--rounded-none": borderRadiusType === "small",
-        })}
-        onClick={onClose}
+        className={cn(
+          "w3a--bottom-sheet-bg w3a--fixed w3a--left-0 w3a--top-0 w3a--size-full w3a--transition-opacity w3a--duration-300 w3a--pointer-events-none",
+          {
+            "w3a--rounded-[30px]": borderRadiusType === "large",
+            "w3a--rounded-2xl": borderRadiusType === "medium",
+            "w3a--rounded-none": borderRadiusType === "small",
+          }
+        )}
+        onClick={handleClose}
         aria-hidden="true"
         role="button"
       />
       {/* Bottom Sheet */}
       <div
         className={cn(
-          `w3a--fixed w3a--bottom-2 w3a--left-2 w3a--mx-auto w3a--flex w3a--w-[96%] w3a--flex-col 
+          `w3a--fixed w3a--bottom-2 w3a--left-2 w3a--mx-auto w3a--flex w3a--w-[96%] w3a--flex-col
       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"}`,
diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx b/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx
index 99a7e1fd1..4cf7dbfbc 100644
--- a/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx
+++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx
@@ -29,6 +29,7 @@ function ConnectWallet(props: ConnectWalletProps) {
     onBackClick,
     handleExternalWalletClick,
     handleWalletDetailsHeight,
+    disableBackButton,
   } = props;
 
   const { bodyState, setBodyState } = useContext(RootContext);
@@ -246,7 +247,7 @@ function ConnectWallet(props: ConnectWalletProps) {
     return walletConnectUri;
   }, [metamaskConnectUri, selectedButton, selectedWallet, walletConnectUri]);
 
-  const disableBackButton = useMemo(() => {
+  const hideBackButton = 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
@@ -257,7 +258,13 @@ function ConnectWallet(props: ConnectWalletProps) {
   return (
     <div className="w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4">
       {/* Header */}
-      <ConnectWalletHeader disableBackButton={disableBackButton} onBackClick={handleBack} currentPage={currentPage} selectedButton={selectedButton} />
+      <ConnectWalletHeader
+        hideBackButton={hideBackButton}
+        disableBackButton={disableBackButton}
+        onBackClick={handleBack}
+        currentPage={currentPage}
+        selectedButton={selectedButton}
+      />
       {/* Body */}
       {selectedWallet ? (
         <ConnectWalletQrCode
@@ -266,6 +273,7 @@ function ConnectWallet(props: ConnectWalletProps) {
           selectedButton={selectedButton}
           primaryColor={selectedButton.walletRegistryItem?.primaryColor}
           logoImage={`https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`}
+          platform={deviceDetails.platform}
         />
       ) : (
         <div className="w3a--flex w3a--flex-col w3a--gap-y-2">
diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.type.ts b/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.type.ts
index 108d72215..a3a284abc 100644
--- a/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.type.ts
+++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.type.ts
@@ -18,4 +18,5 @@ export interface ConnectWalletProps {
   onBackClick?: (flag: boolean) => void;
   handleExternalWalletClick: (params: { connector: string; chainNamespace?: ChainNamespaceType }) => void;
   handleWalletDetailsHeight: () => void;
+  disableBackButton?: boolean;
 }
diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.tsx b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.tsx
index 2a86afd80..1901a0610 100644
--- a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.tsx
+++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.tsx
@@ -5,28 +5,29 @@ import i18n from "../../../localeImport";
 import { ConnectWalletHeaderProps } from "./ConnectWalletHeader.type";
 
 function ConnectWalletHeader(props: ConnectWalletHeaderProps) {
-  const { disableBackButton, onBackClick, currentPage, selectedButton } = props;
+  const { hideBackButton, disableBackButton, onBackClick, currentPage, selectedButton } = props;
   const [t] = useTranslation(undefined, { i18n });
 
   const handleBack = () => {
-    if (onBackClick) {
+    if (onBackClick && !disableBackButton) {
       onBackClick();
     }
   };
 
   return (
     <div className="w3a--flex w3a--items-center w3a--justify-between">
-      {!disableBackButton ? (
+      {!hideBackButton ? (
         <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}
+          disabled={disableBackButton}
         >
           <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"
+            className={`w3a--text-app-gray-500 dark:w3a--text-app-gray-200 ${disableBackButton ? "w3a--cursor-not-allowed w3a--opacity-50" : "hover:w3a--text-app-gray-900 dark:hover:w3a--text-app-white"}`}
           >
             <path
               fill="currentColor"
diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.type.ts b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.type.ts
index 339fe58aa..af71b20c6 100644
--- a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.type.ts
+++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.type.ts
@@ -5,4 +5,5 @@ export interface ConnectWalletHeaderProps {
   onBackClick: () => void;
   currentPage: string;
   selectedButton: ExternalButton;
+  hideBackButton?: boolean;
 }
diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.tsx b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.tsx
index 6b312bc37..13304217c 100644
--- a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.tsx
+++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.tsx
@@ -13,7 +13,12 @@ import { ConnectWalletQrCodeProps } from "./ConnectWalletQrCode.type";
 function ConnectWalletQrCode(props: ConnectWalletQrCodeProps) {
   const [t] = useTranslation(undefined, { i18n });
   const { bodyState, setBodyState, setToast } = useContext(RootContext);
-  const { qrCodeValue, isDark, selectedButton, logoImage, primaryColor } = props;
+  const { qrCodeValue, isDark, selectedButton, logoImage, primaryColor, platform } = props;
+
+  const showGetWalletComponent = useMemo(() => {
+    const appKeys = Object.keys(selectedButton?.walletRegistryItem?.app || {});
+    return appKeys.length > 0 && (platform === "desktop" ? appKeys.includes("browser") : appKeys.includes("ios") || appKeys.includes("android"));
+  }, [platform, selectedButton?.walletRegistryItem?.app]);
 
   const isDesktop = useMemo<boolean>(() => {
     if (typeof window === "undefined") return false;
@@ -75,29 +80,31 @@ function ConnectWalletQrCode(props: ConnectWalletQrCodeProps) {
         </div>
       )}
 
-      <div
-        className="w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50 
+      {showGetWalletComponent && (
+        <div
+          className="w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50 
       w3a--px-4 w3a--py-2 w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white"
-      >
-        <p className="w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white">
-          {t("modal.external.dont-have")} <span>{selectedButton?.displayName}</span>?
-        </p>
-        <button
-          type="button"
-          className="w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-200 w3a--bg-transparent w3a--px-5 w3a--py-2 w3a--text-base w3a--font-normal w3a--text-app-gray-700 w3a--transition-all w3a--duration-150 hover:w3a--border-transparent hover:w3a--shadow-light active:w3a--scale-95 dark:w3a--border-app-gray-700 dark:w3a--text-app-gray-300 dark:hover:w3a--border-transparent dark:hover:w3a--shadow-dark"
-          onClick={() => {
-            setBodyState({
-              ...bodyState,
-              installLinks: {
-                show: true,
-                wallet: selectedButton,
-              },
-            });
-          }}
         >
-          {t("modal.external.get-wallet")}
-        </button>
-      </div>
+          <p className="w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white">
+            {t("modal.external.dont-have")} <span>{selectedButton?.displayName}</span>?
+          </p>
+          <button
+            type="button"
+            className="w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-200 w3a--bg-transparent w3a--px-5 w3a--py-2 w3a--text-base w3a--font-normal w3a--text-app-gray-700 w3a--transition-all w3a--duration-150 hover:w3a--border-transparent hover:w3a--shadow-light active:w3a--scale-95 dark:w3a--border-app-gray-700 dark:w3a--text-app-gray-300 dark:hover:w3a--border-transparent dark:hover:w3a--shadow-dark"
+            onClick={() => {
+              setBodyState({
+                ...bodyState,
+                installLinks: {
+                  show: true,
+                  wallet: selectedButton,
+                },
+              });
+            }}
+          >
+            {t("modal.external.get-wallet")}
+          </button>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.type.ts b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.type.ts
index 0e2c28fbb..0f0622558 100644
--- a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.type.ts
+++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.type.ts
@@ -1,4 +1,4 @@
-import { type ExternalButton } from "../../../interfaces";
+import { type ExternalButton, platform } from "../../../interfaces";
 
 export interface ConnectWalletQrCodeProps {
   qrCodeValue: string;
@@ -6,4 +6,5 @@ export interface ConnectWalletQrCodeProps {
   selectedButton: ExternalButton;
   logoImage?: string;
   primaryColor?: string;
+  platform: platform;
 }
diff --git a/packages/modal/src/ui/components/Root/Root.tsx b/packages/modal/src/ui/components/Root/Root.tsx
index 17b6bde87..c134e381f 100644
--- a/packages/modal/src/ui/components/Root/Root.tsx
+++ b/packages/modal/src/ui/components/Root/Root.tsx
@@ -469,6 +469,7 @@ function Root(props: RootProps) {
                       selectedButton={bodyState.metamaskQrCode.wallet}
                       primaryColor={bodyState.metamaskQrCode.wallet.walletRegistryItem?.primaryColor}
                       logoImage={`https://images.web3auth.io/login-${bodyState.metamaskQrCode.wallet.name}.${bodyState.metamaskQrCode.wallet.imgExtension}`}
+                      platform={deviceDetails.platform}
                     />
                   </div>
                 ) : (
@@ -522,6 +523,7 @@ function Root(props: RootProps) {
                         isExternalWalletModeOnly={isExternalWalletModeOnly}
                         onBackClick={onBackClick}
                         handleExternalWalletClick={preHandleExternalWalletClick}
+                        disableBackButton={bodyState.installLinks?.show || bodyState.multiChainSelector?.show}
                       />
                     )}
                   </>

From 470d069a7acb49d4287b3539b8e57c88cf1849db Mon Sep 17 00:00:00 2001
From: Ganesh Suresh Patra <ganesh.patra@consensys.net>
Date: Tue, 27 Jan 2026 20:59:37 +0530
Subject: [PATCH 2/2] fix: comment review update

---
 .../src/ui/components/BottomSheet/BottomSheet.tsx   | 13 +++++--------
 .../ConnectWalletQrCode/ConnectWalletQrCode.tsx     |  7 +++++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx b/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx
index d4fc8497c..a5010c528 100644
--- a/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx
+++ b/packages/modal/src/ui/components/BottomSheet/BottomSheet.tsx
@@ -15,14 +15,11 @@ function BottomSheet({ isShown, onClose, children, uiConfig, sheetClassName, sho
     <>
       {/* Backdrop */}
       <div
-        className={cn(
-          "w3a--bottom-sheet-bg w3a--fixed w3a--left-0 w3a--top-0 w3a--size-full w3a--transition-opacity w3a--duration-300 w3a--pointer-events-none",
-          {
-            "w3a--rounded-[30px]": borderRadiusType === "large",
-            "w3a--rounded-2xl": borderRadiusType === "medium",
-            "w3a--rounded-none": borderRadiusType === "small",
-          }
-        )}
+        className={cn("w3a--bottom-sheet-bg w3a--fixed w3a--left-0 w3a--top-0 w3a--size-full w3a--transition-opacity w3a--duration-300", {
+          "w3a--rounded-[30px]": borderRadiusType === "large",
+          "w3a--rounded-2xl": borderRadiusType === "medium",
+          "w3a--rounded-none": borderRadiusType === "small",
+        })}
         onClick={handleClose}
         aria-hidden="true"
         role="button"
diff --git a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.tsx b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.tsx
index 13304217c..834dc0fd7 100644
--- a/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.tsx
+++ b/packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.tsx
@@ -16,8 +16,11 @@ function ConnectWalletQrCode(props: ConnectWalletQrCodeProps) {
   const { qrCodeValue, isDark, selectedButton, logoImage, primaryColor, platform } = props;
 
   const showGetWalletComponent = useMemo(() => {
-    const appKeys = Object.keys(selectedButton?.walletRegistryItem?.app || {});
-    return appKeys.length > 0 && (platform === "desktop" ? appKeys.includes("browser") : appKeys.includes("ios") || appKeys.includes("android"));
+    const app = selectedButton?.walletRegistryItem?.app || {};
+    const desktopKeys = ["browser", "chrome", "firefox", "edge"] as const;
+    const mobileKeys = ["ios", "android"] as const;
+    const targetKeys = platform === "desktop" ? desktopKeys : mobileKeys;
+    return targetKeys.some((key) => Boolean(app[key]));
   }, [platform, selectedButton?.walletRegistryItem?.app]);
 
   const isDesktop = useMemo<boolean>(() => {