@aptos-labs/wallet-adapter-mui-design
Version:
Aptos Wallet Adapter mui design
682 lines (672 loc) • 26.9 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
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);
var __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
// 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 && handleNavigate();
handlePopoverClose();
};
const handleLogout = () => {
disconnect();
handlePopoverClose();
};
const [tooltipOpen, setTooltipOpen] = (0, import_react.useState)(false);
const copyAddress = () => __async(this, null, function* () {
var _a;
yield navigator.clipboard.writeText((_a = account == null ? void 0 : account.address) == null ? void 0 : _a.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
}) {
var _a;
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 == null ? void 0 : wallet.name,
src: wallet == null ? void 0 : wallet.icon,
sx: { width: 24, height: 24 }
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { noWrap: true, ml: 2, children: (account == null ? void 0 : account.ansName) || (0, import_wallet_adapter_react2.truncateAddress)((_a = account == null ? void 0 : account.address) == null ? void 0 : _a.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_material3 = require("@mui/material");
// 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_icons_material2 = require("@mui/icons-material");
var import_react3 = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
function WalletsModal(_a) {
var _b = _a, {
handleClose,
modalOpen,
networkSupport,
modalMaxWidth
} = _b, walletSortingOptions = __objRest(_b, [
"handleClose",
"modalOpen",
"networkSupport",
"modalMaxWidth"
]);
const theme = (0, import_material3.useTheme)();
const [expanded, setExpanded] = (0, import_react3.useState)(false);
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;
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 != null ? 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 + Aptos Connect" })
] }) : "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: [
"Aptos Connect ",
/* @__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" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Stack, { sx: { gap: 1 }, children: [
availableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
WalletRow,
{
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
)) }) })
] })
] })
] })
]
}
)
}
);
}
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 Aptos Connect" })
]
}
),
/* @__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"
}
)
]
}
)
] });
}
// src/WalletConnector.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function WalletConnector(_a) {
var _b = _a, {
networkSupport,
handleNavigate,
modalMaxWidth
} = _b, walletSortingOptions = __objRest(_b, [
"networkSupport",
"handleNavigate",
"modalMaxWidth"
]);
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,
__spreadValues({
handleClose,
modalOpen,
networkSupport,
modalMaxWidth
}, walletSortingOptions)
)
] });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
WalletConnector
});