@aptos-labs/wallet-adapter-mui-design 5.1.3 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @aptos-labs/wallet-adapter-mui-design
 
+## 5.2.0
+
+### Minor Changes
+
+- 7cfd347: Add cross chain wallet support to MUI wallet selector
+
 ## 5.1.3
 
 ### Patch Changes

package/dist/index.d.mts

@@ -7,7 +7,12 @@ interface WalletConnectorProps extends WalletSortingOptions {
     handleNavigate?: () => void;
     /** The max width of the wallet selector modal. Defaults to `xs`. */
     modalMaxWidth?: Breakpoint;
+    crossChainWallets?: {
+        evm: boolean;
+        solana: boolean;
+    };
 }
-declare function WalletConnector({ networkSupport, handleNavigate, modalMaxWidth, ...walletSortingOptions }: WalletConnectorProps): react_jsx_runtime.JSX.Element;
 
-export { WalletConnector, type WalletConnectorProps };
+declare function WalletConnector({ networkSupport, handleNavigate, modalMaxWidth, crossChainWallets, ...walletSortingOptions }: WalletConnectorProps): react_jsx_runtime.JSX.Element;
+
+export { WalletConnector };

package/dist/index.d.ts

@@ -7,7 +7,12 @@ interface WalletConnectorProps extends WalletSortingOptions {
     handleNavigate?: () => void;
     /** The max width of the wallet selector modal. Defaults to `xs`. */
     modalMaxWidth?: Breakpoint;
+    crossChainWallets?: {
+        evm: boolean;
+        solana: boolean;
+    };
 }
-declare function WalletConnector({ networkSupport, handleNavigate, modalMaxWidth, ...walletSortingOptions }: WalletConnectorProps): react_jsx_runtime.JSX.Element;
 
-export { WalletConnector, type WalletConnectorProps };
+declare function WalletConnector({ networkSupport, handleNavigate, modalMaxWidth, crossChainWallets, ...walletSortingOptions }: WalletConnectorProps): react_jsx_runtime.JSX.Element;
+
+export { WalletConnector };

package/dist/index.js

@@ -1,6 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -17,6 +19,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -225,21 +228,95 @@ function WalletsModal(_a) {
     handleClose,
     modalOpen,
     networkSupport,
-    modalMaxWidth
+    modalMaxWidth,
+    crossChainWallets
   } = _b, walletSortingOptions = __objRest(_b, [
     "handleClose",
     "modalOpen",
     "networkSupport",
-    "modalMaxWidth"
+    "modalMaxWidth",
+    "crossChainWallets"
   ]);
   const theme = (0, import_material3.useTheme)();
   const [expanded, setExpanded] = (0, import_react3.useState)(false);
+  const [tabValue, setTabValue] = (0, import_react3.useState)(0);
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
   const { wallets = [], notDetectedWallets = [] } = (0, import_wallet_adapter_react3.useWallet)();
   const { aptosConnectWallets, availableWallets, installableWallets } = (0, import_wallet_adapter_react3.groupAndSortWallets)(
     [...wallets, ...notDetectedWallets],
     walletSortingOptions
   );
   const hasAptosConnectWallets = !!aptosConnectWallets.length;
+  const crossChainMode = crossChainWallets && (crossChainWallets.evm || crossChainWallets.solana);
+  const { evmWallets, solanaWallets, aptosWallets } = crossChainMode ? availableWallets.reduce(
+    (acc, wallet) => {
+      if (wallet.name.includes("Ethereum")) {
+        acc.evmWallets.push(wallet);
+      } else if (wallet.name.includes("Solana")) {
+        acc.solanaWallets.push(wallet);
+      } else {
+        acc.aptosWallets.push(wallet);
+      }
+      return acc;
+    },
+    { evmWallets: [], solanaWallets: [], aptosWallets: [] }
+  ) : { evmWallets: [], solanaWallets: [], aptosWallets: availableWallets };
+  const {
+    evmInstallableWallets,
+    solanaInstallableWallets,
+    aptosInstallableWallets
+  } = crossChainMode ? installableWallets.reduce(
+    (acc, wallet) => {
+      if (wallet.name.includes("Ethereum")) {
+        acc.evmInstallableWallets.push(wallet);
+      } else if (wallet.name.includes("Solana")) {
+        acc.solanaInstallableWallets.push(wallet);
+      } else {
+        acc.aptosInstallableWallets.push(wallet);
+      }
+      return acc;
+    },
+    {
+      evmInstallableWallets: [],
+      solanaInstallableWallets: [],
+      aptosInstallableWallets: []
+    }
+  ) : {
+    evmInstallableWallets: [],
+    solanaInstallableWallets: [],
+    aptosInstallableWallets: installableWallets
+  };
+  const tabsConfig = crossChainMode ? [
+    { key: "aptos", label: "Aptos", enabled: true },
+    { key: "solana", label: "Solana", enabled: crossChainWallets.solana },
+    { key: "evm", label: "Ethereum", enabled: crossChainWallets.evm }
+  ].filter((tab) => tab.enabled) : [];
+  const getTabIndex = (key) => tabsConfig.findIndex((tab) => tab.key === key);
+  const renderWalletList = (wallets2, installableWallets2) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    wallets2.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WalletRow, { wallet, onConnect: handleClose }, wallet.name)),
+    !!installableWallets2.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_material3.Button,
+        {
+          variant: "text",
+          size: "small",
+          onClick: () => setExpanded((prev) => !prev),
+          endIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ExpandMore, { sx: { height: "20px", width: "20px" } }),
+          children: "More Wallets"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Stack, { sx: { gap: 1 }, children: installableWallets2.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        WalletRow,
+        {
+          wallet,
+          onConnect: handleClose
+        },
+        wallet.name
+      )) }) })
+    ] })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_material3.Dialog,
     {
@@ -422,36 +499,26 @@ function WalletsModal(_a) {
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Divider, { sx: { color: grey[400], pt: 2 }, children: "Or" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Stack, { sx: { gap: 1 }, children: [
-                availableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  WalletRow,
+              crossChainMode ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_material3.Tabs,
                   {
-                    wallet,
-                    onConnect: handleClose
-                  },
-                  wallet.name
-                )),
-                !!installableWallets.length && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    import_material3.Button,
-                    {
-                      variant: "text",
-                      size: "small",
-                      onClick: () => setExpanded((prev) => !prev),
-                      endIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ExpandMore, { sx: { height: "20px", width: "20px" } }),
-                      children: "More Wallets"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Stack, { sx: { gap: 1 }, children: installableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    WalletRow,
-                    {
-                      wallet,
-                      onConnect: handleClose
-                    },
-                    wallet.name
-                  )) }) })
-                ] })
-              ] })
+                    value: tabValue,
+                    onChange: handleTabChange,
+                    textColor: "secondary",
+                    indicatorColor: "secondary",
+                    variant: "fullWidth",
+                    "aria-label": "cross chain wallets tabs",
+                    children: tabsConfig.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tab, __spreadValues({ label: tab.label }, a11yProps(index)), tab.key))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TabPanel, { value: tabValue, index: getTabIndex("aptos"), children: renderWalletList(aptosWallets, aptosInstallableWallets) }),
+                crossChainWallets.solana && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TabPanel, { value: tabValue, index: getTabIndex("solana"), children: renderWalletList(solanaWallets, solanaInstallableWallets) }),
+                crossChainWallets.evm && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TabPanel, { value: tabValue, index: getTabIndex("evm"), children: renderWalletList(evmWallets, evmInstallableWallets) })
+              ] }) : (
+                // Simple list mode (original WalletModel behavior)
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Stack, { sx: { gap: 1 }, children: renderWalletList(availableWallets, installableWallets) })
+              )
             ] })
           ]
         }
@@ -640,6 +707,26 @@ function renderEducationScreen(screen) {
     )
   ] });
 }
+function TabPanel(props) {
+  const _a = props, { children, value, index } = _a, other = __objRest(_a, ["children", "value", "index"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      role: "tabpanel",
+      hidden: value !== index,
+      id: `simple-tabpanel-${index}`,
+      "aria-labelledby": `simple-tab-${index}`
+    }, other), {
+      children: value === index && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Stack, { sx: { gap: 1 }, children })
+    })
+  );
+}
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`
+  };
+}
 
 // src/WalletConnector.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -647,11 +734,13 @@ function WalletConnector(_a) {
   var _b = _a, {
     networkSupport,
     handleNavigate,
-    modalMaxWidth
+    modalMaxWidth,
+    crossChainWallets
   } = _b, walletSortingOptions = __objRest(_b, [
     "networkSupport",
     "handleNavigate",
-    "modalMaxWidth"
+    "modalMaxWidth",
+    "crossChainWallets"
   ]);
   const [modalOpen, setModalOpen] = (0, import_react4.useState)(false);
   const handleModalOpen = () => setModalOpen(true);
@@ -670,7 +759,8 @@ function WalletConnector(_a) {
         handleClose,
         modalOpen,
         networkSupport,
-        modalMaxWidth
+        modalMaxWidth,
+        crossChainWallets
       }, walletSortingOptions)
     )
   ] });

package/dist/index.mjs

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -200,6 +203,8 @@ import {
   ListItem as ListItem2,
   ListItemText as ListItemText2,
   Stack,
+  Tab,
+  Tabs,
   Typography as Typography2,
   useTheme
 } from "@mui/material";
@@ -234,21 +239,95 @@ function WalletsModal(_a) {
     handleClose,
     modalOpen,
     networkSupport,
-    modalMaxWidth
+    modalMaxWidth,
+    crossChainWallets
   } = _b, walletSortingOptions = __objRest(_b, [
     "handleClose",
     "modalOpen",
     "networkSupport",
-    "modalMaxWidth"
+    "modalMaxWidth",
+    "crossChainWallets"
   ]);
   const theme = useTheme();
   const [expanded, setExpanded] = useState3(false);
+  const [tabValue, setTabValue] = useState3(0);
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
   const { wallets = [], notDetectedWallets = [] } = useWallet3();
   const { aptosConnectWallets, availableWallets, installableWallets } = groupAndSortWallets(
     [...wallets, ...notDetectedWallets],
     walletSortingOptions
   );
   const hasAptosConnectWallets = !!aptosConnectWallets.length;
+  const crossChainMode = crossChainWallets && (crossChainWallets.evm || crossChainWallets.solana);
+  const { evmWallets, solanaWallets, aptosWallets } = crossChainMode ? availableWallets.reduce(
+    (acc, wallet) => {
+      if (wallet.name.includes("Ethereum")) {
+        acc.evmWallets.push(wallet);
+      } else if (wallet.name.includes("Solana")) {
+        acc.solanaWallets.push(wallet);
+      } else {
+        acc.aptosWallets.push(wallet);
+      }
+      return acc;
+    },
+    { evmWallets: [], solanaWallets: [], aptosWallets: [] }
+  ) : { evmWallets: [], solanaWallets: [], aptosWallets: availableWallets };
+  const {
+    evmInstallableWallets,
+    solanaInstallableWallets,
+    aptosInstallableWallets
+  } = crossChainMode ? installableWallets.reduce(
+    (acc, wallet) => {
+      if (wallet.name.includes("Ethereum")) {
+        acc.evmInstallableWallets.push(wallet);
+      } else if (wallet.name.includes("Solana")) {
+        acc.solanaInstallableWallets.push(wallet);
+      } else {
+        acc.aptosInstallableWallets.push(wallet);
+      }
+      return acc;
+    },
+    {
+      evmInstallableWallets: [],
+      solanaInstallableWallets: [],
+      aptosInstallableWallets: []
+    }
+  ) : {
+    evmInstallableWallets: [],
+    solanaInstallableWallets: [],
+    aptosInstallableWallets: installableWallets
+  };
+  const tabsConfig = crossChainMode ? [
+    { key: "aptos", label: "Aptos", enabled: true },
+    { key: "solana", label: "Solana", enabled: crossChainWallets.solana },
+    { key: "evm", label: "Ethereum", enabled: crossChainWallets.evm }
+  ].filter((tab) => tab.enabled) : [];
+  const getTabIndex = (key) => tabsConfig.findIndex((tab) => tab.key === key);
+  const renderWalletList = (wallets2, installableWallets2) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    wallets2.map((wallet) => /* @__PURE__ */ jsx3(WalletRow, { wallet, onConnect: handleClose }, wallet.name)),
+    !!installableWallets2.length && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(
+        Button2,
+        {
+          variant: "text",
+          size: "small",
+          onClick: () => setExpanded((prev) => !prev),
+          endIcon: /* @__PURE__ */ jsx3(ExpandMore, { sx: { height: "20px", width: "20px" } }),
+          children: "More Wallets"
+        }
+      ),
+      /* @__PURE__ */ jsx3(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx3(Stack, { sx: { gap: 1 }, children: installableWallets2.map((wallet) => /* @__PURE__ */ jsx3(
+        WalletRow,
+        {
+          wallet,
+          onConnect: handleClose
+        },
+        wallet.name
+      )) }) })
+    ] })
+  ] });
   return /* @__PURE__ */ jsx3(
     Dialog,
     {
@@ -431,36 +510,26 @@ function WalletsModal(_a) {
                 ),
                 /* @__PURE__ */ jsx3(Divider, { sx: { color: grey[400], pt: 2 }, children: "Or" })
               ] }),
-              /* @__PURE__ */ jsxs3(Stack, { sx: { gap: 1 }, children: [
-                availableWallets.map((wallet) => /* @__PURE__ */ jsx3(
-                  WalletRow,
+              crossChainMode ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                /* @__PURE__ */ jsx3(
+                  Tabs,
                   {
-                    wallet,
-                    onConnect: handleClose
-                  },
-                  wallet.name
-                )),
-                !!installableWallets.length && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                  /* @__PURE__ */ jsx3(
-                    Button2,
-                    {
-                      variant: "text",
-                      size: "small",
-                      onClick: () => setExpanded((prev) => !prev),
-                      endIcon: /* @__PURE__ */ jsx3(ExpandMore, { sx: { height: "20px", width: "20px" } }),
-                      children: "More Wallets"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx3(Stack, { sx: { gap: 1 }, children: installableWallets.map((wallet) => /* @__PURE__ */ jsx3(
-                    WalletRow,
-                    {
-                      wallet,
-                      onConnect: handleClose
-                    },
-                    wallet.name
-                  )) }) })
-                ] })
-              ] })
+                    value: tabValue,
+                    onChange: handleTabChange,
+                    textColor: "secondary",
+                    indicatorColor: "secondary",
+                    variant: "fullWidth",
+                    "aria-label": "cross chain wallets tabs",
+                    children: tabsConfig.map((tab, index) => /* @__PURE__ */ jsx3(Tab, __spreadValues({ label: tab.label }, a11yProps(index)), tab.key))
+                  }
+                ),
+                /* @__PURE__ */ jsx3(TabPanel, { value: tabValue, index: getTabIndex("aptos"), children: renderWalletList(aptosWallets, aptosInstallableWallets) }),
+                crossChainWallets.solana && /* @__PURE__ */ jsx3(TabPanel, { value: tabValue, index: getTabIndex("solana"), children: renderWalletList(solanaWallets, solanaInstallableWallets) }),
+                crossChainWallets.evm && /* @__PURE__ */ jsx3(TabPanel, { value: tabValue, index: getTabIndex("evm"), children: renderWalletList(evmWallets, evmInstallableWallets) })
+              ] }) : (
+                // Simple list mode (original WalletModel behavior)
+                /* @__PURE__ */ jsx3(Stack, { sx: { gap: 1 }, children: renderWalletList(availableWallets, installableWallets) })
+              )
             ] })
           ]
         }
@@ -649,6 +718,26 @@ function renderEducationScreen(screen) {
     )
   ] });
 }
+function TabPanel(props) {
+  const _a = props, { children, value, index } = _a, other = __objRest(_a, ["children", "value", "index"]);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    __spreadProps(__spreadValues({
+      role: "tabpanel",
+      hidden: value !== index,
+      id: `simple-tabpanel-${index}`,
+      "aria-labelledby": `simple-tab-${index}`
+    }, other), {
+      children: value === index && /* @__PURE__ */ jsx3(Stack, { sx: { gap: 1 }, children })
+    })
+  );
+}
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`
+  };
+}
 
 // src/WalletConnector.tsx
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -656,11 +745,13 @@ function WalletConnector(_a) {
   var _b = _a, {
     networkSupport,
     handleNavigate,
-    modalMaxWidth
+    modalMaxWidth,
+    crossChainWallets
   } = _b, walletSortingOptions = __objRest(_b, [
     "networkSupport",
     "handleNavigate",
-    "modalMaxWidth"
+    "modalMaxWidth",
+    "crossChainWallets"
   ]);
   const [modalOpen, setModalOpen] = useState4(false);
   const handleModalOpen = () => setModalOpen(true);
@@ -679,7 +770,8 @@ function WalletConnector(_a) {
         handleClose,
         modalOpen,
         networkSupport,
-        modalMaxWidth
+        modalMaxWidth,
+        crossChainWallets
       }, walletSortingOptions)
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aptos-labs/wallet-adapter-mui-design",
-  "version": "5.1.3",
+  "version": "5.2.0",
   "description": "Aptos Wallet Adapter mui design",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/WalletConnector.tsx

@@ -1,20 +1,13 @@
-import { WalletSortingOptions } from "@aptos-labs/wallet-adapter-react";
-import { Breakpoint } from "@mui/material";
 import { useState } from "react";
 import WalletButton from "./WalletButton";
 import WalletsModal from "./WalletModel";
-
-export interface WalletConnectorProps extends WalletSortingOptions {
-  networkSupport?: string;
-  handleNavigate?: () => void;
-  /** The max width of the wallet selector modal. Defaults to `xs`. */
-  modalMaxWidth?: Breakpoint;
-}
+import { WalletConnectorProps } from "./types";
 
 export function WalletConnector({
   networkSupport,
   handleNavigate,
   modalMaxWidth,
+  crossChainWallets,
   ...walletSortingOptions
 }: WalletConnectorProps) {
   const [modalOpen, setModalOpen] = useState(false);
@@ -32,6 +25,7 @@ export function WalletConnector({
         modalOpen={modalOpen}
         networkSupport={networkSupport}
         modalMaxWidth={modalMaxWidth}
+        crossChainWallets={crossChainWallets}
         {...walletSortingOptions}
       />
     </>

package/src/WalletModel.tsx

@@ -20,6 +20,8 @@ import {
   ListItem,
   ListItemText,
   Stack,
+  Tab,
+  Tabs,
   Typography,
   useTheme,
 } from "@mui/material";
@@ -32,14 +34,19 @@ import {
   ExpandMore,
   LanOutlined as LanOutlinedIcon,
 } from "@mui/icons-material";
-import { useState } from "react";
-import { WalletConnectorProps } from "./WalletConnector";
+import { SyntheticEvent, useState } from "react";
+import { WalletConnectorProps } from "./types";
 
 interface WalletsModalProps
   extends Pick<WalletConnectorProps, "networkSupport" | "modalMaxWidth">,
     WalletSortingOptions {
   handleClose: () => void;
   modalOpen: boolean;
+  // Make crossChainWallets optional - if not provided, shows single list
+  crossChainWallets?: {
+    evm: boolean;
+    solana: boolean;
+  };
 }
 
 export default function WalletsModal({
@@ -47,21 +54,131 @@ export default function WalletsModal({
   modalOpen,
   networkSupport,
   modalMaxWidth,
+  crossChainWallets,
   ...walletSortingOptions
 }: WalletsModalProps): JSX.Element {
   const theme = useTheme();
   const [expanded, setExpanded] = useState(false);
+  const [tabValue, setTabValue] = useState<number>(0);
+
+  const handleTabChange = (event: SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
 
   const { wallets = [], notDetectedWallets = [] } = useWallet();
 
   const { aptosConnectWallets, availableWallets, installableWallets } =
     groupAndSortWallets(
       [...wallets, ...notDetectedWallets],
-      walletSortingOptions,
+      walletSortingOptions
     );
 
   const hasAptosConnectWallets = !!aptosConnectWallets.length;
 
+  // Determine if we should show tabs (cross-chain mode)
+  const crossChainMode =
+    crossChainWallets && (crossChainWallets.evm || crossChainWallets.solana);
+
+  // Group wallets by chain if in cross-chain mode
+  const { evmWallets, solanaWallets, aptosWallets } = crossChainMode
+    ? availableWallets.reduce<{
+        evmWallets: AdapterWallet[];
+        solanaWallets: AdapterWallet[];
+        aptosWallets: AdapterWallet[];
+      }>(
+        (acc, wallet) => {
+          if (wallet.name.includes("Ethereum")) {
+            acc.evmWallets.push(wallet);
+          } else if (wallet.name.includes("Solana")) {
+            acc.solanaWallets.push(wallet);
+          } else {
+            acc.aptosWallets.push(wallet);
+          }
+          return acc;
+        },
+        { evmWallets: [], solanaWallets: [], aptosWallets: [] }
+      )
+    : { evmWallets: [], solanaWallets: [], aptosWallets: availableWallets };
+
+  const {
+    evmInstallableWallets,
+    solanaInstallableWallets,
+    aptosInstallableWallets,
+  } = crossChainMode
+    ? installableWallets.reduce<{
+        evmInstallableWallets: AdapterNotDetectedWallet[];
+        solanaInstallableWallets: AdapterNotDetectedWallet[];
+        aptosInstallableWallets: AdapterNotDetectedWallet[];
+      }>(
+        (acc, wallet) => {
+          if (wallet.name.includes("Ethereum")) {
+            acc.evmInstallableWallets.push(wallet);
+          } else if (wallet.name.includes("Solana")) {
+            acc.solanaInstallableWallets.push(wallet);
+          } else {
+            acc.aptosInstallableWallets.push(wallet);
+          }
+          return acc;
+        },
+        {
+          evmInstallableWallets: [],
+          solanaInstallableWallets: [],
+          aptosInstallableWallets: [],
+        }
+      )
+    : {
+        evmInstallableWallets: [],
+        solanaInstallableWallets: [],
+        aptosInstallableWallets: installableWallets,
+      };
+
+  // Calculate dynamic indices for tabs
+  const tabsConfig = crossChainMode
+    ? [
+        { key: "aptos", label: "Aptos", enabled: true },
+        { key: "solana", label: "Solana", enabled: crossChainWallets!.solana },
+        { key: "evm", label: "Ethereum", enabled: crossChainWallets!.evm },
+      ].filter((tab) => tab.enabled)
+    : [];
+
+  const getTabIndex = (key: string) =>
+    tabsConfig.findIndex((tab) => tab.key === key);
+
+  // Render wallet list for a specific chain
+  const renderWalletList = (
+    wallets: AdapterWallet[],
+    installableWallets: AdapterNotDetectedWallet[]
+  ) => (
+    <>
+      {wallets.map((wallet) => (
+        <WalletRow key={wallet.name} wallet={wallet} onConnect={handleClose} />
+      ))}
+      {!!installableWallets.length && (
+        <>
+          <Button
+            variant="text"
+            size="small"
+            onClick={() => setExpanded((prev) => !prev)}
+            endIcon={<ExpandMore sx={{ height: "20px", width: "20px" }} />}
+          >
+            More Wallets
+          </Button>
+          <Collapse in={expanded} timeout="auto" unmountOnExit>
+            <Stack sx={{ gap: 1 }}>
+              {installableWallets.map((wallet) => (
+                <WalletRow
+                  key={wallet.name}
+                  wallet={wallet}
+                  onConnect={handleClose}
+                />
+              ))}
+            </Stack>
+          </Collapse>
+        </>
+      )}
+    </>
+  );
+
   return (
     <Dialog
       open={modalOpen}
@@ -92,6 +209,7 @@ export default function WalletsModal({
         >
           <CloseIcon />
         </IconButton>
+
         <AboutAptosConnect renderEducationScreen={renderEducationScreen}>
           <Typography
             align="center"
@@ -112,6 +230,7 @@ export default function WalletsModal({
               "Connect Wallet"
             )}
           </Typography>
+
           {networkSupport && (
             <Box
               sx={{
@@ -139,6 +258,7 @@ export default function WalletsModal({
               </Typography>
             </Box>
           )}
+
           {hasAptosConnectWallets && (
             <Stack gap={1}>
               {aptosConnectWallets.map((wallet) => (
@@ -213,40 +333,45 @@ export default function WalletsModal({
               <Divider sx={{ color: grey[400], pt: 2 }}>Or</Divider>
             </Stack>
           )}
-          <Stack sx={{ gap: 1 }}>
-            {availableWallets.map((wallet) => (
-              <WalletRow
-                key={wallet.name}
-                wallet={wallet}
-                onConnect={handleClose}
-              />
-            ))}
-            {!!installableWallets.length && (
-              <>
-                <Button
-                  variant="text"
-                  size="small"
-                  onClick={() => setExpanded((prev) => !prev)}
-                  endIcon={
-                    <ExpandMore sx={{ height: "20px", width: "20px" }} />
-                  }
-                >
-                  More Wallets
-                </Button>
-                <Collapse in={expanded} timeout="auto" unmountOnExit>
-                  <Stack sx={{ gap: 1 }}>
-                    {installableWallets.map((wallet) => (
-                      <WalletRow
-                        key={wallet.name}
-                        wallet={wallet}
-                        onConnect={handleClose}
-                      />
-                    ))}
-                  </Stack>
-                </Collapse>
-              </>
-            )}
-          </Stack>
+
+          {/* Conditional rendering: Tabs for cross-chain, simple list for single-chain */}
+          {crossChainMode ? (
+            <>
+              <Tabs
+                value={tabValue}
+                onChange={handleTabChange}
+                textColor="secondary"
+                indicatorColor="secondary"
+                variant="fullWidth"
+                aria-label="cross chain wallets tabs"
+              >
+                {tabsConfig.map((tab, index) => (
+                  <Tab key={tab.key} label={tab.label} {...a11yProps(index)} />
+                ))}
+              </Tabs>
+
+              <TabPanel value={tabValue} index={getTabIndex("aptos")}>
+                {renderWalletList(aptosWallets, aptosInstallableWallets)}
+              </TabPanel>
+
+              {crossChainWallets!.solana && (
+                <TabPanel value={tabValue} index={getTabIndex("solana")}>
+                  {renderWalletList(solanaWallets, solanaInstallableWallets)}
+                </TabPanel>
+              )}
+
+              {crossChainWallets!.evm && (
+                <TabPanel value={tabValue} index={getTabIndex("evm")}>
+                  {renderWalletList(evmWallets, evmInstallableWallets)}
+                </TabPanel>
+              )}
+            </>
+          ) : (
+            // Simple list mode (original WalletModel behavior)
+            <Stack sx={{ gap: 1 }}>
+              {renderWalletList(availableWallets, installableWallets)}
+            </Stack>
+          )}
         </AboutAptosConnect>
       </Stack>
     </Dialog>
@@ -432,3 +557,32 @@ function renderEducationScreen(screen: AboutAptosConnectEducationScreen) {
     </>
   );
 }
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Stack sx={{ gap: 1 }}>{children}</Stack>}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}

package/src/types.ts

@@ -0,0 +1,13 @@
+import { WalletSortingOptions } from "@aptos-labs/wallet-adapter-react";
+import { Breakpoint } from "@mui/material";
+
+export interface WalletConnectorProps extends WalletSortingOptions {
+  networkSupport?: string;
+  handleNavigate?: () => void;
+  /** The max width of the wallet selector modal. Defaults to `xs`. */
+  modalMaxWidth?: Breakpoint;
+  crossChainWallets?: {
+    evm: boolean;
+    solana: boolean;
+  };
+}