@aptos-labs/wallet-adapter-ant-design
Version:
Aptos Wallet Adapter ant-design
257 lines (254 loc) • 12.9 kB
JavaScript
;
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;
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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
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);
// src/index.tsx
var index_exports = {};
__export(index_exports, {
WalletSelector: () => WalletSelector
});
module.exports = __toCommonJS(index_exports);
// src/WalletSelector.tsx
var import_icons = require("@ant-design/icons");
var import_wallet_adapter_react = require("@aptos-labs/wallet-adapter-react");
var import_antd = require("antd");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var { Text } = import_antd.Typography;
function WalletSelector(_a) {
var _b = _a, {
isModalOpen,
setModalOpen
} = _b, walletSortingOptions = __objRest(_b, [
"isModalOpen",
"setModalOpen"
]);
var _a2;
const [walletSelectorModalOpen, setWalletSelectorModalOpen] = (0, import_react.useState)(false);
(0, import_react.useEffect)(() => {
if (isModalOpen !== void 0) {
setWalletSelectorModalOpen(isModalOpen);
}
}, [isModalOpen]);
const {
account,
connected,
disconnect,
wallets = [],
notDetectedWallets = []
} = (0, import_wallet_adapter_react.useWallet)();
const { aptosConnectWallets, availableWallets, installableWallets } = (0, import_wallet_adapter_react.groupAndSortWallets)(
[...wallets, ...notDetectedWallets],
walletSortingOptions
);
const hasAptosConnectWallets = !!aptosConnectWallets.length;
const onWalletButtonClick = () => {
if (connected) {
disconnect();
} else {
setWalletSelectorModalOpen(true);
}
};
const closeModal = () => {
setWalletSelectorModalOpen(false);
if (setModalOpen) {
setModalOpen(false);
}
};
const buttonText = (account == null ? void 0 : account.ansName) || (0, import_wallet_adapter_react.truncateAddress)((_a2 = account == null ? void 0 : account.address) == null ? void 0 : _a2.toString()) || "Unknown";
const modalProps = {
centered: true,
open: walletSelectorModalOpen,
onCancel: closeModal,
footer: null,
zIndex: 9999,
className: "wallet-selector-modal"
};
const renderEducationScreens = (screen) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_antd.Modal,
__spreadProps(__spreadValues({}, modalProps), {
afterClose: screen.cancel,
title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "about-aptos-connect-header", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_antd.Button,
{
type: "text",
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowLeftOutlined, {}),
onClick: screen.cancel
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wallet-modal-title", children: "About Aptos Connect" })
] }),
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "about-aptos-connect-graphic-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(screen.Graphic, {}) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "about-aptos-connect-text-wrapper", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(screen.Title, { className: "about-aptos-connect-title" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(screen.Description, { className: "about-aptos-connect-description" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "about-aptos-connect-footer-wrapper", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_antd.Button,
{
type: "text",
style: { justifySelf: "start" },
onClick: screen.back,
children: "Back"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "about-aptos-connect-screen-indicators-wrapper", children: screen.screenIndicators.map((ScreenIndicator, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ScreenIndicator,
{
className: "about-aptos-connect-screen-indicator",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {})
},
i
)) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_antd.Button,
{
type: "text",
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowRightOutlined, {}),
iconPosition: "end",
style: { justifySelf: "end" },
onClick: screen.next,
children: screen.screenIndex === screen.totalScreens - 1 ? "Finish" : "Next"
}
)
] })
]
})
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { className: "wallet-button", onClick: onWalletButtonClick, children: connected ? buttonText : "Connect Wallet" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AboutAptosConnect, { renderEducationScreen: renderEducationScreens, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_antd.Modal,
__spreadProps(__spreadValues({}, modalProps), {
title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wallet-modal-title", children: hasAptosConnectWallets ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Log in or sign up" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "with Social + Aptos Connect" })
] }) : "Connect Wallet" }),
children: !connected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
hasAptosConnectWallets && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Flex, { vertical: true, gap: 12, children: [
aptosConnectWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
AptosConnectWalletRow,
{
wallet,
onConnect: closeModal
},
wallet.name
)),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "about-aptos-connect-trigger-wrapper", children: [
"Learn more about",
" ",
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_wallet_adapter_react.AboutAptosConnect.Trigger, { className: "about-aptos-connect-trigger", children: [
"Aptos Connect",
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowRightOutlined, {})
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_wallet_adapter_react.AptosPrivacyPolicy, { className: "aptos-connect-privacy-policy-wrapper", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "aptos-connect-privacy-policy-text", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AptosPrivacyPolicy.Disclaimer, {}),
" ",
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AptosPrivacyPolicy.Link, { className: "aptos-connect-privacy-policy-link" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "." })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.AptosPrivacyPolicy.PoweredBy, { className: "aptos-connect-powered-by" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Divider, { children: "Or" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, { vertical: true, gap: 12, children: availableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
WalletRow,
{
wallet,
onConnect: closeModal
},
wallet.name
)) }),
!!installableWallets.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_antd.Collapse,
{
ghost: true,
expandIconPosition: "end",
items: [
{
key: "more-wallets",
label: "More Wallets",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, { vertical: true, gap: 12, children: installableWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
WalletRow,
{
wallet,
onConnect: closeModal
},
wallet.name
)) })
}
]
}
)
] })
})
) })
] });
}
function WalletRow({ wallet, onConnect }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem, { wallet, onConnect, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "wallet-menu-wrapper", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "wallet-name-wrapper", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.Icon, { className: "wallet-selector-icon" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.Name, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { className: "wallet-selector-text", children: wallet.name }) })
] }),
(0, import_wallet_adapter_react.isInstallRequired)(wallet) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.InstallLink, { className: "wallet-connect-install" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.ConnectButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { className: "wallet-connect-button", children: "Connect" }) })
] }) });
}
function AptosConnectWalletRow({ wallet, onConnect }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem, { wallet, onConnect, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.ConnectButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Button, { size: "large", className: "aptos-connect-button", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.Icon, { className: "wallet-selector-icon" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletItem.Name, {})
] }) }) });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
WalletSelector
});