@aptos-labs/wallet-adapter-ant-design
Version:
Aptos Wallet Adapter ant-design
244 lines (243 loc) • 9.26 kB
JavaScript
// src/WalletSelector.tsx
import {
ArrowLeftOutlined,
ArrowRightOutlined,
CopyOutlined,
DisconnectOutlined
} from "@ant-design/icons";
import {
AboutAptosConnect,
AptosPrivacyPolicy,
groupAndSortWallets,
isInstallRequired,
truncateAddress,
useWallet,
WalletItem
} from "@aptos-labs/wallet-adapter-react";
import {
Button,
Collapse,
Divider,
Dropdown,
Flex,
Modal,
message,
Typography
} from "antd";
import { useEffect, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var { Text } = Typography;
function WalletSelector({
isModalOpen,
setModalOpen,
...walletSortingOptions
}) {
const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
useEffect(() => {
if (isModalOpen !== void 0) {
setWalletSelectorModalOpen(isModalOpen);
}
}, [isModalOpen]);
const {
account,
connected,
disconnect,
wallets = [],
notDetectedWallets = []
} = useWallet();
const { aptosConnectWallets, availableWallets, installableWallets } = groupAndSortWallets(
[...wallets, ...notDetectedWallets],
walletSortingOptions
);
const hasAptosConnectWallets = !!aptosConnectWallets.length;
const onWalletButtonClick = () => {
if (connected) {
disconnect();
} else {
setWalletSelectorModalOpen(true);
}
};
const handleCopyAddress = () => {
if (account?.address) {
navigator.clipboard.writeText(account.address.toString());
message.success("Address copied to clipboard");
}
};
const handleDisconnect = () => {
disconnect();
};
const dropdownItems = [
{
key: "copy",
label: "Copy Address",
icon: /* @__PURE__ */ jsx(CopyOutlined, {}),
onClick: handleCopyAddress
},
{
key: "disconnect",
label: "Disconnect",
icon: /* @__PURE__ */ jsx(DisconnectOutlined, {}),
onClick: handleDisconnect
}
];
const closeModal = () => {
setWalletSelectorModalOpen(false);
if (setModalOpen) {
setModalOpen(false);
}
};
const buttonText = account?.ansName || truncateAddress(account?.address?.toString()) || "Unknown";
const modalProps = {
centered: true,
open: walletSelectorModalOpen,
onCancel: closeModal,
footer: null,
zIndex: 9999,
className: "wallet-selector-modal"
};
const renderEducationScreens = (screen) => /* @__PURE__ */ jsxs(
Modal,
{
...modalProps,
afterClose: screen.cancel,
title: /* @__PURE__ */ jsxs("div", { className: "about-aptos-connect-header", children: [
/* @__PURE__ */ jsx(
Button,
{
type: "text",
icon: /* @__PURE__ */ jsx(ArrowLeftOutlined, {}),
onClick: screen.cancel
}
),
/* @__PURE__ */ jsx("div", { className: "wallet-modal-title", children: "About Petra Web" })
] }),
children: [
/* @__PURE__ */ jsx("div", { className: "about-aptos-connect-graphic-wrapper", children: /* @__PURE__ */ jsx(screen.Graphic, {}) }),
/* @__PURE__ */ jsxs("div", { className: "about-aptos-connect-text-wrapper", children: [
/* @__PURE__ */ jsx(screen.Title, { className: "about-aptos-connect-title" }),
/* @__PURE__ */ jsx(screen.Description, { className: "about-aptos-connect-description" })
] }),
/* @__PURE__ */ jsxs("div", { className: "about-aptos-connect-footer-wrapper", children: [
/* @__PURE__ */ jsx(
Button,
{
type: "text",
style: { justifySelf: "start" },
onClick: screen.back,
children: "Back"
}
),
/* @__PURE__ */ jsx("div", { className: "about-aptos-connect-screen-indicators-wrapper", children: screen.screenIndicators.map((ScreenIndicator, i) => /* @__PURE__ */ jsx(
ScreenIndicator,
{
className: "about-aptos-connect-screen-indicator",
children: /* @__PURE__ */ jsx("div", {})
},
i
)) }),
/* @__PURE__ */ jsx(
Button,
{
type: "text",
icon: /* @__PURE__ */ jsx(ArrowRightOutlined, {}),
iconPosition: "end",
style: { justifySelf: "end" },
onClick: screen.next,
children: screen.screenIndex === screen.totalScreens - 1 ? "Finish" : "Next"
}
)
] })
]
}
);
return /* @__PURE__ */ jsxs(Fragment, { children: [
connected ? /* @__PURE__ */ jsx(Dropdown, { menu: { items: dropdownItems }, trigger: ["click"], children: /* @__PURE__ */ jsx(Button, { className: "wallet-button", children: buttonText }) }) : /* @__PURE__ */ jsx(Button, { className: "wallet-button", onClick: onWalletButtonClick, children: "Connect Wallet" }),
/* @__PURE__ */ jsx(AboutAptosConnect, { renderEducationScreen: renderEducationScreens, children: /* @__PURE__ */ jsx(
Modal,
{
...modalProps,
title: /* @__PURE__ */ jsx("div", { className: "wallet-modal-title", children: hasAptosConnectWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { children: "Log in or sign up" }),
/* @__PURE__ */ jsx("span", { children: "with Social + Petra Web" })
] }) : "Connect Wallet" }),
children: !connected && /* @__PURE__ */ jsxs(Fragment, { children: [
hasAptosConnectWallets && /* @__PURE__ */ jsxs(Flex, { vertical: true, gap: 12, children: [
aptosConnectWallets.map((wallet) => /* @__PURE__ */ jsx(
AptosConnectWalletRow,
{
wallet,
onConnect: closeModal
},
wallet.name
)),
/* @__PURE__ */ jsxs("p", { className: "about-aptos-connect-trigger-wrapper", children: [
"Learn more about",
" ",
/* @__PURE__ */ jsxs(AboutAptosConnect.Trigger, { className: "about-aptos-connect-trigger", children: [
"Petra Web",
/* @__PURE__ */ jsx(ArrowRightOutlined, {})
] })
] }),
/* @__PURE__ */ jsxs(AptosPrivacyPolicy, { className: "aptos-connect-privacy-policy-wrapper", children: [
/* @__PURE__ */ jsxs("p", { className: "aptos-connect-privacy-policy-text", children: [
/* @__PURE__ */ jsx(AptosPrivacyPolicy.Disclaimer, {}),
" ",
/* @__PURE__ */ jsx(AptosPrivacyPolicy.Link, { className: "aptos-connect-privacy-policy-link" }),
/* @__PURE__ */ jsx("span", { children: "." })
] }),
/* @__PURE__ */ jsx(AptosPrivacyPolicy.PoweredBy, { className: "aptos-connect-powered-by" })
] }),
/* @__PURE__ */ jsx(Divider, { children: "Or" })
] }),
/* @__PURE__ */ jsx(Flex, { vertical: true, gap: 12, children: availableWallets.map((wallet) => /* @__PURE__ */ jsx(
WalletRow,
{
wallet,
onConnect: closeModal
},
wallet.name
)) }),
!!installableWallets.length && /* @__PURE__ */ jsx(
Collapse,
{
ghost: true,
expandIconPosition: "end",
items: [
{
key: "more-wallets",
label: "More Wallets",
children: /* @__PURE__ */ jsx(Flex, { vertical: true, gap: 12, children: installableWallets.map((wallet) => /* @__PURE__ */ jsx(
WalletRow,
{
wallet,
onConnect: closeModal
},
wallet.name
)) })
}
]
}
)
] })
}
) })
] });
}
function WalletRow({ wallet, onConnect }) {
return /* @__PURE__ */ jsx(WalletItem, { wallet, onConnect, asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "wallet-menu-wrapper", children: [
/* @__PURE__ */ jsxs("div", { className: "wallet-name-wrapper", children: [
/* @__PURE__ */ jsx(WalletItem.Icon, { className: "wallet-selector-icon" }),
/* @__PURE__ */ jsx(WalletItem.Name, { asChild: true, children: /* @__PURE__ */ jsx(Text, { className: "wallet-selector-text", children: wallet.name }) })
] }),
isInstallRequired(wallet) ? /* @__PURE__ */ jsx(WalletItem.InstallLink, { className: "wallet-connect-install" }) : /* @__PURE__ */ jsx(WalletItem.ConnectButton, { asChild: true, children: /* @__PURE__ */ jsx(Button, { className: "wallet-connect-button", children: "Connect" }) })
] }) });
}
function AptosConnectWalletRow({ wallet, onConnect }) {
return /* @__PURE__ */ jsx(WalletItem, { wallet, onConnect, asChild: true, children: /* @__PURE__ */ jsx(WalletItem.ConnectButton, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size: "large", className: "aptos-connect-button", children: [
/* @__PURE__ */ jsx(WalletItem.Icon, { className: "wallet-selector-icon" }),
/* @__PURE__ */ jsx(WalletItem.Name, {})
] }) }) });
}
export {
WalletSelector
};