@aptos-labs/wallet-adapter-mui-design
Version:
Aptos Wallet Adapter mui design
711 lines (701 loc) • 28.5 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.tsx
var index_exports = {};
__export(index_exports, {
WalletConnector: () => WalletConnector
});
module.exports = __toCommonJS(index_exports);
// src/WalletConnector.tsx
var import_react4 = require("react");
// src/WalletButton.tsx
var import_wallet_adapter_react2 = require("@aptos-labs/wallet-adapter-react");
var import_icons_material = require("@mui/icons-material");
var import_material2 = require("@mui/material");
var import_react2 = require("react");
// src/WalletMenu.tsx
var import_wallet_adapter_react = require("@aptos-labs/wallet-adapter-react");
var import_material = require("@mui/material");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
function WalletMenu({
popoverAnchor,
handlePopoverClose,
handleNavigate
}) {
const { account, disconnect } = (0, import_wallet_adapter_react.useWallet)();
const popoverOpen = Boolean(popoverAnchor);
const id = popoverOpen ? "wallet-popover" : void 0;
const onAccountOptionClicked = () => {
handleNavigate?.();
handlePopoverClose();
};
const handleLogout = () => {
disconnect();
handlePopoverClose();
};
const [tooltipOpen, setTooltipOpen] = (0, import_react.useState)(false);
const copyAddress = async () => {
await navigator.clipboard.writeText(account?.address?.toString() ?? "");
setTooltipOpen(true);
setTimeout(() => {
setTooltipOpen(false);
}, 2e3);
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_material.Popover,
{
id,
open: popoverOpen,
anchorEl: popoverAnchor,
onClose: handlePopoverClose,
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.List, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_material.Tooltip,
{
title: "Copied",
placement: "bottom-end",
open: tooltipOpen,
disableFocusListener: true,
disableHoverListener: true,
disableTouchListener: true,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItem, { disablePadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemButton, { onClick: copyAddress, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemText, { primary: "Copy Address" }) }) })
}
),
!!handleNavigate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItem, { disablePadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemButton, { onClick: onAccountOptionClicked, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemText, { primary: "Account" }) }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItem, { disablePadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemButton, { onClick: handleLogout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemText, { primary: "Logout" }) }) })
] })
}
);
}
// src/WalletButton.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function WalletButton({
handleModalOpen,
handleNavigate
}) {
const { connected, account, wallet } = (0, import_wallet_adapter_react2.useWallet)();
const [popoverAnchor, setPopoverAnchor] = (0, import_react2.useState)(
null
);
const handleClick = (event) => {
setPopoverAnchor(event.currentTarget);
};
const handlePopoverClose = () => {
setPopoverAnchor(null);
};
const onConnectWalletClick = () => {
handlePopoverClose();
handleModalOpen();
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_material2.Button,
{
size: "large",
variant: "contained",
onClick: connected ? handleClick : onConnectWalletClick,
className: "wallet-button",
sx: { borderRadius: "10px" },
children: connected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_material2.Avatar,
{
alt: wallet?.name,
src: wallet?.icon,
sx: { width: 24, height: 24 }
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { noWrap: true, ml: 2, children: account?.ansName || (0, import_wallet_adapter_react2.truncateAddress)(account?.address?.toString()) || "Unknown" })
] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.AccountBalanceWalletOutlined, { sx: { marginRight: 1 } }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { noWrap: true, children: "Connect Wallet" })
] })
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
WalletMenu,
{
popoverAnchor,
handlePopoverClose,
handleNavigate
}
)
] });
}
// src/WalletModel.tsx
var import_wallet_adapter_react3 = require("@aptos-labs/wallet-adapter-react");
var import_icons_material2 = require("@mui/icons-material");
var import_material3 = require("@mui/material");
var import_react3 = require("react");
// src/aptosColorPalette.ts
var grey = {
50: "#fafafa",
100: "#f4f4f5",
200: "#e4e4e7",
300: "#d4d4d8",
400: "#a1a1aa",
450: "#909099",
500: "#4f5352",
600: "#363a39",
700: "#272b2a",
800: "#1b1f1e",
900: "#121615"
};
// src/WalletModel.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function WalletsModal({
handleClose,
modalOpen,
networkSupport,
modalMaxWidth,
crossChainWallets,
...walletSortingOptions
}) {
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,
{
open: modalOpen,
onClose: handleClose,
"aria-label": "wallet selector modal",
sx: { borderRadius: `${theme.shape.borderRadius}px` },
maxWidth: modalMaxWidth ?? "xs",
fullWidth: true,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Stack,
{
sx: {
top: "50%",
left: "50%",
bgcolor: "background.paper",
boxShadow: 24,
p: 3,
gap: 2
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.IconButton,
{
onClick: handleClose,
sx: {
position: "absolute",
right: 12,
top: 12,
color: grey[450]
},
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.Close, {})
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_wallet_adapter_react3.AboutAptosConnect, { renderEducationScreen, children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Typography,
{
align: "center",
variant: "h5",
component: "h2",
pt: 2,
sx: {
display: "flex",
flexDirection: "column"
},
children: hasAptosConnectWallets ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Log in or sign up" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "with Social + Petra Web" })
] }) : "Connect Wallet"
}
),
networkSupport && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Box,
{
sx: {
display: "flex",
gap: 0.5,
alignItems: "center",
justifyContent: "center"
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_icons_material2.LanOutlined,
{
sx: {
fontSize: "0.9rem",
color: grey[400]
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Typography,
{
sx: {
display: "inline-flex",
fontSize: "0.9rem",
color: grey[400]
},
align: "center",
children: [
networkSupport,
" only"
]
}
)
]
}
),
hasAptosConnectWallets && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Stack, { gap: 1, children: [
aptosConnectWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
AptosConnectWalletRow,
{
wallet,
onConnect: handleClose
},
wallet.name
)),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Typography,
{
component: "p",
fontSize: "14px",
sx: {
display: "flex",
gap: 0.5,
justifyContent: "center",
alignItems: "center",
color: grey[400]
},
children: [
"Learn more about",
" ",
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Box,
{
component: import_wallet_adapter_react3.AboutAptosConnect.Trigger,
sx: {
background: "none",
border: "none",
fontFamily: "inherit",
fontSize: "inherit",
cursor: "pointer",
display: "flex",
gap: 0.5,
px: 0,
py: 1.5,
alignItems: "center",
color: theme.palette.text.primary,
appearance: "none"
},
children: [
"Petra Web ",
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ArrowForward, { sx: { height: 16, width: 16 } })
]
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Stack,
{
component: import_wallet_adapter_react3.AptosPrivacyPolicy,
alignItems: "center",
py: 0.5,
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Typography, { component: "p", fontSize: "12px", lineHeight: "20px", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_adapter_react3.AptosPrivacyPolicy.Disclaimer, {}),
" ",
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Box,
{
component: import_wallet_adapter_react3.AptosPrivacyPolicy.Link,
sx: {
color: grey[400],
textDecoration: "underline",
textUnderlineOffset: "4px"
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "." })
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Box,
{
component: import_wallet_adapter_react3.AptosPrivacyPolicy.PoweredBy,
sx: {
display: "flex",
alignItems: "center",
gap: 0.75,
fontSize: "12px",
lineHeight: "20px",
color: grey[400]
}
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Divider, { sx: { color: grey[400], pt: 2 }, children: "Or" })
] }),
crossChainMode ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Tabs,
{
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, { 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) })
)
] })
]
}
)
}
);
}
function WalletRow({ wallet, onConnect }) {
const theme = (0, import_material3.useTheme)();
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_adapter_react3.WalletItem, { wallet, onConnect, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.ListItem, { disablePadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Box,
{
sx: {
display: "flex",
alignItems: "center",
width: "100%",
px: 2,
py: 1.5,
gap: 2,
border: "solid 1px",
borderColor: theme.palette.mode === "dark" ? grey[700] : grey[200],
borderRadius: `${theme.shape.borderRadius}px`
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Box, { component: import_wallet_adapter_react3.WalletItem.Icon, sx: { width: 32, height: 32 } }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.ListItemText,
{
primary: wallet.name,
primaryTypographyProps: { fontSize: "1.125rem" }
}
),
(0, import_wallet_adapter_react3.isInstallRequired)(wallet) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_adapter_react3.WalletItem.InstallLink, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Button,
{
LinkComponent: "a",
size: "small",
className: "wallet-connect-install",
children: "Install"
}
) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_adapter_react3.WalletItem.ConnectButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Button,
{
variant: "contained",
size: "small",
className: "wallet-connect-button",
children: "Connect"
}
) })
]
}
) }) });
}
function AptosConnectWalletRow({ wallet, onConnect }) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_adapter_react3.WalletItem, { wallet, onConnect, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_adapter_react3.WalletItem.ConnectButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Button,
{
size: "large",
variant: "outlined",
sx: { display: "flex", alignItems: "center", gap: 1.5 },
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Box, { component: import_wallet_adapter_react3.WalletItem.Icon, sx: { width: 20, height: 20 } }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_wallet_adapter_react3.WalletItem.Name, {})
]
}
) }) });
}
function renderEducationScreen(screen) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Box,
{
sx: {
display: "grid",
gridTemplateColumns: "1fr 4fr 1fr",
alignItems: "center",
justifyItems: "start"
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.IconButton, { onClick: screen.cancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ArrowBack, {}) }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Typography, { variant: "body1", component: "h2", width: "100%", align: "center", children: "About Petra Web" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Box,
{
sx: {
display: "flex",
pb: 1.5,
alignItems: "end",
justifyContent: "center",
height: "162px"
},
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(screen.Graphic, {})
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Stack, { sx: { gap: 1, textAlign: "center", pb: 2 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Typography, { component: screen.Title, variant: "h6" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Typography,
{
component: screen.Description,
variant: "body2",
color: (theme) => theme.palette.text.secondary,
sx: {
"&>a": {
color: (theme) => theme.palette.text.primary,
textDecoration: "underline",
textUnderlineOffset: "4px"
}
}
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
import_material3.Box,
{
sx: {
display: "grid",
gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
alignItems: "center"
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Button,
{
size: "small",
variant: "text",
onClick: screen.back,
sx: { justifySelf: "start" },
children: "Back"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Box,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1,
placeSelf: "center"
},
children: screen.screenIndicators.map((ScreenIndicator, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Box,
{
component: ScreenIndicator,
sx: {
px: 0,
py: 2,
background: "none",
border: "none",
cursor: "pointer"
},
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Box,
{
sx: {
height: "2px",
width: "24px",
bgcolor: (theme) => theme.palette.text.disabled,
"[data-active]>&": {
bgcolor: (theme) => theme.palette.text.primary
}
}
}
)
},
i
))
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_material3.Button,
{
size: "small",
variant: "text",
onClick: screen.next,
sx: { justifySelf: "end" },
endIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons_material2.ArrowForward, { sx: { height: 16, width: 16 } }),
children: screen.screenIndex === screen.totalScreens - 1 ? "Finish" : "Next"
}
)
]
}
)
] });
}
function TabPanel(props) {
const { children, value, index, ...other } = props;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"div",
{
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");
function WalletConnector({
networkSupport,
handleNavigate,
modalMaxWidth,
crossChainWallets,
...walletSortingOptions
}) {
const [modalOpen, setModalOpen] = (0, import_react4.useState)(false);
const handleModalOpen = () => setModalOpen(true);
const handleClose = () => setModalOpen(false);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
WalletButton,
{
handleModalOpen,
handleNavigate
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
WalletsModal,
{
handleClose,
modalOpen,
networkSupport,
modalMaxWidth,
crossChainWallets,
...walletSortingOptions
}
)
] });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
WalletConnector
});