@particle-network/connectkit
Version:
626 lines (622 loc) • 21.6 kB
JavaScript
"use client";
import {
StyleActionIcon,
StyleActionText,
StyleActions,
StyleBalance,
StyleChainName,
StyleDisconnectContent,
StyleDisconnectLoading,
StyleFooter,
StyleFooterLabel,
StyleModalContainer,
StyleTextButton2,
StyleWalletIcon,
StyleWalletInfo,
StyleWalletInfoLeft,
StyleWalletInfoRight,
StyleWalletText,
init_styles as init_styles4
} from "./chunk-S6VSJLH4.mjs";
import {
SocialItem,
init_styles as init_styles2
} from "./chunk-TT5EWHLM.mjs";
import "./chunk-AHPYJJP6.mjs";
import {
FlexBetween,
FlexCenter,
FlexLeft,
PageContent,
init_styles
} from "./chunk-QH6JFFQS.mjs";
import {
WalletIcon_default,
init_WalletIcon
} from "./chunk-ZEM635ZF.mjs";
import {
PlusIcon_default,
init_PlusIcon
} from "./chunk-NNPC3E5U.mjs";
import {
ReceiveIcon_default,
init_ReceiveIcon
} from "./chunk-Y6TDUBYX.mjs";
import {
DisconnectIcon_default,
init_DisconnectIcon
} from "./chunk-LPPQUOON.mjs";
import {
BuyIcon_default,
init_BuyIcon
} from "./chunk-QVB3QYZI.mjs";
import {
AccountSecurityIcon_default,
init_AccountSecurityIcon
} from "./chunk-RIP2J6QM.mjs";
import {
StyleSwitchNetwork,
chainDropdown_default,
init_chainDropdown,
init_styles as init_styles3,
init_useEmbeddedWallet,
init_useParticleAuth,
init_usePublicClient,
init_useWallets,
useEmbeddedWallet,
useParticleAuth,
usePublicClient,
useWallets
} from "./chunk-YXNM6WKB.mjs";
import {
getChainDisplayName,
init_chains
} from "./chunk-6YIVRHUS.mjs";
import "./chunk-K64L2X2L.mjs";
import {
init_useChains,
init_useWalletConnections,
useChains,
useWalletConnections
} from "./chunk-4KLCPKCQ.mjs";
import {
init_useAddress,
init_useDisconnect,
useAddress,
useDisconnect
} from "./chunk-74QFWFRM.mjs";
import {
circleSpinner_default,
init_circleSpinner
} from "./chunk-LPKOMA4X.mjs";
import "./chunk-VSGOD64V.mjs";
import "./chunk-FU5MHCAN.mjs";
import "./chunk-XV4TVGGP.mjs";
import "./chunk-3L3TDB2A.mjs";
import "./chunk-RCAM7PR5.mjs";
import {
DownArrowIcon_default,
init_DownArrowIcon
} from "./chunk-QZKTRS47.mjs";
import {
ErrorIcon_default,
init_ErrorIcon
} from "./chunk-SQYCLHVZ.mjs";
import "./chunk-BUW2IG4Z.mjs";
import "./chunk-ON5I6GRO.mjs";
import "./chunk-HHRMRRBG.mjs";
import "./chunk-PFSREVNX.mjs";
import "./chunk-T5IXQ3WH.mjs";
import "./chunk-O2XXZ2OM.mjs";
import "./chunk-6HN76VJ7.mjs";
import "./chunk-AFFXZE7O.mjs";
import "./chunk-TLQNBRI7.mjs";
import "./chunk-ID34LUQZ.mjs";
import "./chunk-DK64ZGDR.mjs";
import "./chunk-KF7FBOIG.mjs";
import "./chunk-CPHPRGFM.mjs";
import {
formatTokenAmount,
getBuyUrl,
init_useAccount,
init_useAppearance,
init_useLocales,
init_useRouter,
init_utils,
popupWindow,
useAccount,
useAppearance,
useLocales,
useRouter
} from "./chunk-TYWUWWWK.mjs";
import "./chunk-CVABX3CN.mjs";
import "./chunk-N5ZSWBVC.mjs";
import "./chunk-D7QF5CYD.mjs";
import "./chunk-TVDFKXAV.mjs";
import "./chunk-4YAFPODW.mjs";
import "./chunk-NITEP4FF.mjs";
import "./chunk-WYWSNAPC.mjs";
import "./chunk-X3AHMJH4.mjs";
import "./chunk-VM42Y624.mjs";
import "./chunk-3CZRO6RQ.mjs";
import "./chunk-2LQKVNKI.mjs";
import "./chunk-CNE7WI2P.mjs";
import "./chunk-HKMLJP4P.mjs";
import "./chunk-VW7L52Q6.mjs";
import "./chunk-BG2VLRRD.mjs";
import "./chunk-5TAT3MVW.mjs";
import "./chunk-AOBFG4R6.mjs";
import "./chunk-KD3UOOP5.mjs";
import "./chunk-VYUWVCC2.mjs";
import "./chunk-HHHJM4FL.mjs";
import "./chunk-743HT6GA.mjs";
import "./chunk-3JW6NUP7.mjs";
import "./chunk-Y2AM7F32.mjs";
import "./chunk-4EX26J4C.mjs";
import "./chunk-QT4CBCFK.mjs";
import "./chunk-3OVTLX5O.mjs";
import "./chunk-5VTAF6IK.mjs";
import "./chunk-5KG67Q3H.mjs";
import "./chunk-PSUGDD7L.mjs";
import "./chunk-MEE5TGUN.mjs";
import {
__esm
} from "./chunk-Y7A564BU.mjs";
// src/components/refreshIcon/index.tsx
import { motion, useAnimation } from "framer-motion";
import { useEffect, useState } from "react";
import { styled } from "styled-components";
import { jsx, jsxs } from "react/jsx-runtime";
var StyleRefreshIcon, RefreshIcon, refreshIcon_default;
var init_refreshIcon = __esm({
"src/components/refreshIcon/index.tsx"() {
"use strict";
StyleRefreshIcon = styled.div`
color: var(--pcm-body-color-secondary);
width: 20px;
min-width: 20px;
display: flex;
align-items: center;
@media (hover: hover) and (pointer: fine) {
&:hover {
color: var(--pcm-body-color);
}
}
`;
RefreshIcon = ({ spin, ...props }) => {
const controls = useAnimation();
const [isSpinning, setIsSpinning] = useState(false);
useEffect(() => {
let animation;
const startSpinning = async () => {
if (isSpinning) {
animation = await controls.start({
rotate: [0, 360],
transition: { repeat: Infinity, duration: 1, ease: "linear" }
});
}
};
if (spin) {
setIsSpinning(true);
startSpinning();
} else {
setIsSpinning(false);
controls.stop();
}
return () => {
if (animation) {
animation.stop();
}
};
}, [spin, controls, isSpinning]);
return /* @__PURE__ */ jsx(StyleRefreshIcon, { children: /* @__PURE__ */ jsxs(
motion.svg,
{
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
...props,
animate: controls,
children: [
/* @__PURE__ */ jsx(
"path",
{
d: "M18.6187 5.63377C18.3947 5.52181 18.0589 5.63377 17.9469 5.96963L17.4991 7.20111C16.8274 5.52181 15.8198 4.17837 14.2525 3.28275C12.3493 2.16321 10.2221 1.7154 8.09503 2.27517C5.07229 2.94689 2.83323 5.18595 2.04955 8.20869C1.9376 8.54455 2.16151 8.76846 2.38541 8.88041C2.72127 8.88041 2.94518 8.76846 3.05713 8.4326C3.72885 5.74572 5.74401 3.73056 8.43089 3.17079C10.3341 2.72298 12.2373 3.05884 13.8047 4.06642C15.1481 4.85009 16.1557 6.08158 16.7154 7.53697L15.372 6.97721C15.1481 6.86525 14.8122 6.97721 14.7003 7.31307C14.5883 7.53697 14.7003 7.87283 14.9242 7.98479L17.1633 8.88041C17.2752 8.99237 17.3872 8.99237 17.4991 8.99237H17.6111C17.6111 8.99237 17.6111 8.99237 17.723 8.99237C17.835 8.99237 17.9469 8.88041 17.9469 8.76846L18.9545 6.19353C19.0665 5.96963 18.8426 5.74572 18.6187 5.63377Z",
fill: "currentColor",
stroke: "currentColor",
strokeWidth: "0.3"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M17.6111 11.1195C17.3872 11.0076 17.0513 11.2315 17.0513 11.4554C16.3796 14.1423 14.3644 16.1574 11.6776 16.7172C9.77434 17.165 7.87114 16.8291 6.30379 15.8216C4.96035 15.0379 3.95277 13.8064 3.393 12.351L4.73644 12.9108C4.96035 13.0227 5.29621 12.9108 5.40816 12.5749C5.52012 12.351 5.40816 12.0151 5.18426 11.9032L2.83324 11.1195C2.72128 11.1195 2.60933 11.0076 2.49738 11.0076H2.38542C2.38542 11.0076 2.38542 11.0076 2.27347 11.0076C2.16152 11.1195 2.04956 11.2315 2.04956 11.3434L1.04198 13.8064C0.930029 14.0303 1.04198 14.3662 1.37784 14.4781C1.60175 14.5901 1.93761 14.4781 2.04956 14.1423L2.49738 12.9108C3.1691 14.4781 4.17668 15.8216 5.74402 16.7172C7.64723 17.8367 9.77434 18.2845 11.9015 17.7248C14.9242 17.053 17.2752 14.702 17.9469 11.6793C18.0589 11.4554 17.835 11.2315 17.6111 11.1195Z",
fill: "currentColor",
stroke: "currentColor",
strokeWidth: "0.3"
}
)
]
}
) });
};
refreshIcon_default = RefreshIcon;
}
});
// src/pages/walletInfo/index.tsx
import { getChainIcon, getChainType } from "@particle-network/connector-core";
import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var Page, walletInfo_default;
var init_walletInfo = __esm({
"src/pages/walletInfo/index.tsx"() {
init_AccountSecurityIcon();
init_BuyIcon();
init_DisconnectIcon();
init_DownArrowIcon();
init_ErrorIcon();
init_PlusIcon();
init_ReceiveIcon();
init_WalletIcon();
init_chainDropdown();
init_circleSpinner();
init_styles3();
init_styles();
init_refreshIcon();
init_styles2();
init_useAccount();
init_useAddress();
init_useAppearance();
init_useChains();
init_useDisconnect();
init_useEmbeddedWallet();
init_useLocales();
init_useParticleAuth();
init_usePublicClient();
init_useRouter();
init_useWalletConnections();
init_useWallets();
init_utils();
init_chains();
init_styles4();
Page = () => {
const chainList = useChains();
const { chain, chainId: currentChainId, isConnected } = useAccount();
const locales = useLocales();
const chains = useChains();
const [walletConnection] = useWalletConnections();
const client = usePublicClient();
const [primaryWallet] = useWallets();
const { openAccountAndSecurity, openLinkLoginAccount, getUserInfo, openSetSecurityAccount } = useParticleAuth();
const embeddedWallet = useEmbeddedWallet();
const address = useAddress();
const { close, navigate } = useRouter();
const { disconnectAsync } = useDisconnect({
onSettled(data, error) {
}
});
const [refreshBalance, setRefreshBalance] = useState2(false);
const [chainDropdownVisible, setChainDropdownVisible] = useState2(false);
const [balance, setBalance] = useState2(null);
const timer = useRef(void 0);
const walletInfoLeftRef = useRef(null);
const [disconnectLoading, setDisconnectLoading] = useState2(false);
const currentChainType = useMemo(() => {
if (chainList && chainList?.length && currentChainId) {
const chain2 = chainList.find((item) => item.id === currentChainId);
if (chain2) {
return getChainType(chain2);
}
return "";
} else {
return "";
}
}, [chainList, currentChainId]);
const supportChain = useMemo(() => {
return chains.some((item) => item.id === chain?.id);
}, [chain, chains]);
const getBalance = async () => {
if (!currentChainType) {
return;
}
const params = currentChainType === "evm" ? { address } : primaryWallet?.getWalletClient?.()?.publicKey;
if (address && params && client) {
client.getBalance(params).then((res) => {
const { decimals = 1 } = chain?.nativeCurrency || {};
const balance2 = formatTokenAmount(BigInt(res), decimals, 5) || "0";
setBalance(balance2);
const key = `${chain?.id}-${address}-balance`?.toLowerCase();
localStorage.setItem(key, balance2);
}).catch((e) => {
});
}
};
const isParticle = useMemo(() => {
return Boolean(walletConnection && walletConnection.walletProps.connector.walletConnectorType === "particleAuth");
}, [walletConnection]);
const getCachedBalance = () => {
const key = `${chain?.id}-${address}-balance`?.toLowerCase();
return localStorage.getItem(key) || "0";
};
const { appearance } = useAppearance();
const buyUrl = useMemo(() => {
if (address) {
return getBuyUrl(currentChainId, address, "", appearance.mode);
}
return void 0;
}, [address, currentChainId, appearance.mode]);
useEffect2(() => {
if (address && chain && client && primaryWallet) {
setBalance(getCachedBalance());
getBalance();
}
}, [address, client, chain, primaryWallet]);
useEffect2(() => {
if (chain?.id && address) {
setBalance(getCachedBalance());
}
}, [chain?.id, address, balance]);
return /* @__PURE__ */ jsx2(PageContent, { children: /* @__PURE__ */ jsxs2(StyleModalContainer, { children: [
/* @__PURE__ */ jsxs2(StyleWalletInfo, { children: [
/* @__PURE__ */ jsx2(
StyleWalletInfoLeft,
{
ref: walletInfoLeftRef,
selected: chains?.length > 1 || !supportChain,
onClick: () => {
if (chains?.length > 1 || !supportChain) {
setChainDropdownVisible(!chainDropdownVisible);
}
},
children: isConnected && /* @__PURE__ */ jsxs2(Fragment, { children: [
supportChain ? /* @__PURE__ */ jsxs2(Fragment, { children: [
chain && /* @__PURE__ */ jsx2(StyleWalletIcon, { src: getChainIcon(chain), alt: "" }),
/* @__PURE__ */ jsx2(StyleChainName, { children: getChainDisplayName(chain) })
] }) : /* @__PURE__ */ jsxs2(StyleSwitchNetwork, { children: [
/* @__PURE__ */ jsx2(ErrorIcon_default, {}),
locales.switchNetwork
] }),
(chains?.length > 1 || !supportChain) && /* @__PURE__ */ jsx2(StyleWalletText, { children: /* @__PURE__ */ jsx2(
DownArrowIcon_default,
{
width: 12,
height: 12,
spin: !!chainDropdownVisible,
color: supportChain ? "var(--pcm-body-color-secondary)" : "var(--pcm-error-color)"
}
) })
] })
}
),
supportChain && /* @__PURE__ */ jsxs2(StyleWalletInfoRight, { children: [
/* @__PURE__ */ jsxs2(StyleBalance, { children: [
balance || 0,
" \xA0",
chain?.nativeCurrency.symbol?.replace("tBNB", "BNB")
] }),
/* @__PURE__ */ jsx2(
refreshIcon_default,
{
style: { cursor: "pointer" },
spin: refreshBalance,
onClick: async () => {
clearTimeout(timer.current);
const start = new Date().getTime();
setRefreshBalance(true);
await getBalance();
const remain = 1e3 - (new Date().getTime() - start);
timer.current = setTimeout(
() => {
setRefreshBalance(false);
},
remain > 0 ? remain : 0
);
}
}
)
] }),
/* @__PURE__ */ jsx2(
chainDropdown_default,
{
visible: chainDropdownVisible,
setVisible: setChainDropdownVisible,
clickAwayElements: [walletInfoLeftRef],
maxHeight: 200,
supportChain,
top: 50
}
)
] }),
/* @__PURE__ */ jsxs2(StyleActions, { children: [
/* @__PURE__ */ jsx2(
SocialItem,
{
$isDisabled: Boolean(!buyUrl),
$felxRow: false,
onClick: () => {
if (!buyUrl)
return;
const height = parseInt((window.innerHeight * 0.8).toString());
let width = height * 0.6;
if (width > 1e3) {
width = 1e3;
}
if (width > window.innerWidth) {
width = parseInt((window.innerWidth * 0.9).toString());
}
popupWindow(buyUrl, "Particle Network", width, height);
close();
},
children: /* @__PURE__ */ jsxs2(
FlexCenter,
{
style: {
width: "100%",
gap: "6px"
},
children: [
/* @__PURE__ */ jsx2(
BuyIcon_default,
{
className: StyleActionIcon,
style: {
width: "20px"
}
}
),
/* @__PURE__ */ jsx2(StyleActionText, { children: locales.buy })
]
}
)
}
),
/* @__PURE__ */ jsx2(
SocialItem,
{
$felxRow: false,
$isDisabled: Boolean(!address) || !chain,
onClick: () => {
navigate("receive" /* Receive */);
},
children: /* @__PURE__ */ jsxs2(
FlexCenter,
{
style: {
width: "100%",
gap: "6px"
},
children: [
/* @__PURE__ */ jsx2(
ReceiveIcon_default,
{
className: StyleActionIcon,
style: {
width: "18px"
}
}
),
/* @__PURE__ */ jsx2(StyleActionText, { children: locales.receive })
]
}
)
}
),
embeddedWallet && embeddedWallet.isCanOpen && /* @__PURE__ */ jsx2(
SocialItem,
{
$felxRow: false,
$isDisabled: Boolean(!address),
onClick: () => {
embeddedWallet.openWallet();
close();
},
children: /* @__PURE__ */ jsxs2(
FlexCenter,
{
style: {
width: "100%",
gap: "6px"
},
children: [
/* @__PURE__ */ jsx2(
WalletIcon_default,
{
className: StyleActionIcon,
style: {
width: "20px"
}
}
),
/* @__PURE__ */ jsx2(StyleActionText, { children: locales.wallet })
]
}
)
}
),
isParticle && /* @__PURE__ */ jsx2(
SocialItem,
{
$felxRow: false,
onClick: () => {
openAccountAndSecurity();
close();
},
children: /* @__PURE__ */ jsxs2(
FlexCenter,
{
style: {
width: "100%",
gap: "6px"
},
children: [
/* @__PURE__ */ jsx2(
AccountSecurityIcon_default,
{
className: StyleActionIcon,
style: {
width: "20px"
}
}
),
/* @__PURE__ */ jsx2(StyleActionText, { children: locales.accountAndSecurity })
]
}
)
}
)
] }),
/* @__PURE__ */ jsx2(StyleFooter, { children: /* @__PURE__ */ jsxs2(FlexBetween, { children: [
isParticle ? /* @__PURE__ */ jsx2(
StyleTextButton2,
{
onClick: () => {
const useInfo = getUserInfo();
const { email, phone } = useInfo.security_account || {};
if (!email && !phone) {
openSetSecurityAccount();
close();
} else {
openLinkLoginAccount();
close();
}
},
children: /* @__PURE__ */ jsxs2(FlexLeft, { gap: 5, children: [
/* @__PURE__ */ jsx2(PlusIcon_default, { className: StyleActionIcon }),
/* @__PURE__ */ jsx2(StyleFooterLabel, { children: locales.linkLoginAccount })
] })
}
) : /* @__PURE__ */ jsx2("div", {}),
/* @__PURE__ */ jsx2(StyleTextButton2, { $disconnectLoading: disconnectLoading, children: /* @__PURE__ */ jsxs2(
FlexLeft,
{
gap: 5,
onClick: () => {
setDisconnectLoading(true);
disconnectAsync().finally(() => {
setTimeout(() => {
setDisconnectLoading(false);
}, 300);
});
},
children: [
/* @__PURE__ */ jsxs2(StyleDisconnectContent, { children: [
disconnectLoading && /* @__PURE__ */ jsx2(StyleDisconnectLoading, { children: /* @__PURE__ */ jsx2(circleSpinner_default, { width: 16, inset: 0, height: 16, logo: /* @__PURE__ */ jsx2(Fragment, {}) }) }),
/* @__PURE__ */ jsx2(DisconnectIcon_default, { className: StyleActionIcon })
] }),
/* @__PURE__ */ jsx2(StyleFooterLabel, { children: locales.disconnect })
]
}
) })
] }) })
] }) });
};
walletInfo_default = Page;
}
});
init_walletInfo();
export {
walletInfo_default as default
};
//# sourceMappingURL=walletInfo-JSCOSP5J.mjs.map