fix: updated bottomsheet for walletregistry app

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

@@ -6,6 +6,11 @@ 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 */}
@@ -15,14 +20,14 @@ function BottomSheet({ isShown, onClose, children, uiConfig, sheetClassName, sho
           "w3a--rounded-2xl": borderRadiusType === "medium",
           "w3a--rounded-none": borderRadiusType === "small",
         })}
-        onClick={onClose}
+        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"}`,

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">

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;
 }

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"

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;
 }

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

@@ -13,7 +13,15 @@ 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 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>(() => {
     if (typeof window === "undefined") return false;
@@ -75,29 +83,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>
   );
 }

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

@@ -1,9 +1,10 @@
-import { type ExternalButton } from "../../../interfaces";
+import { type ExternalButton, platform } from "../../../interfaces";
 
 export interface ConnectWalletQrCodeProps {
   qrCodeValue: string;
   isDark: boolean;
   selectedButton: ExternalButton;
   logoImage?: string;
   primaryColor?: string;
+  platform: platform;
 }

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}
                       />
                     )}
                   </>