@particle-network/connectkit
Version:
358 lines (352 loc) • 13.1 kB
JavaScript
"use client";
import {
SocialItem,
SocialLoginContainer,
ToggleContainer,
init_styles as init_styles2
} from "./chunk-TT5EWHLM.mjs";
import {
init_useWalletConnectors,
useWalletConnector
} from "./chunk-QXMKCDWX.mjs";
import {
ForwardContainer,
WalletIconContainer,
WalletItem,
WalletLable,
WalletsContainer,
init_styles
} from "./chunk-AHPYJJP6.mjs";
import {
init_useConnectWithWallet,
useConnectWithWallet
} from "./chunk-O2UGP222.mjs";
import {
button_default,
init_button
} from "./chunk-G4I34CN4.mjs";
import {
Forward_default,
init_Forward
} from "./chunk-UB6FPNMP.mjs";
import {
Icons_default,
init_Icons
} from "./chunk-FU5MHCAN.mjs";
import {
init_useLastConnectorId,
useLastConnectorId
} from "./chunk-XV4TVGGP.mjs";
import {
init_useWalletsProps,
useWalletProps,
useWalletsProps_default
} from "./chunk-3L3TDB2A.mjs";
import {
init_context,
init_useAppearance,
init_useLocales,
init_useRouter,
useAppearance,
useContext,
useLocales,
useRouter
} from "./chunk-TYWUWWWK.mjs";
import {
__esm
} from "./chunk-Y7A564BU.mjs";
// src/utils/social.ts
var socialAuthTypes, isSocialAuthType;
var init_social = __esm({
"src/utils/social.ts"() {
"use strict";
socialAuthTypes = [
"facebook",
"google",
"apple",
"twitter",
"discord",
"github",
"twitch",
"microsoft",
"linkedin"
];
isSocialAuthType = (authType) => {
return socialAuthTypes.includes(authType);
};
}
});
// src/assets/toggle.tsx
import { motion } from "framer-motion";
import { jsx } from "react/jsx-runtime";
var ToggleIcon, toggle_default;
var init_toggle = __esm({
"src/assets/toggle.tsx"() {
"use strict";
ToggleIcon = () => {
return /* @__PURE__ */ jsx(motion.svg, { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: /* @__PURE__ */ jsx(
"path",
{
d: "M5.20833 10.4167C4.0625 10.4167 3.125 11.3542 3.125 12.5C3.125 13.6459 4.0625 14.5834 5.20833 14.5834C6.35417 14.5834 7.29167 13.6459 7.29167 12.5C7.29167 11.3542 6.35417 10.4167 5.20833 10.4167ZM19.7917 10.4167C18.6458 10.4167 17.7083 11.3542 17.7083 12.5C17.7083 13.6459 18.6458 14.5834 19.7917 14.5834C20.9375 14.5834 21.875 13.6459 21.875 12.5C21.875 11.3542 20.9375 10.4167 19.7917 10.4167ZM12.5 10.4167C11.3542 10.4167 10.4167 11.3542 10.4167 12.5C10.4167 13.6459 11.3542 14.5834 12.5 14.5834C13.6458 14.5834 14.5833 13.6459 14.5833 12.5C14.5833 11.3542 13.6458 10.4167 12.5 10.4167Z",
fill: "var(--pcm-body-action-color)"
}
) });
};
toggle_default = ToggleIcon;
}
});
// src/components/socialLogin/index.tsx
import { isEVMChain } from "@particle-network/connector-core";
import { Fragment, useMemo } from "react";
import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
var SocialLogin, socialLogin_default;
var init_socialLogin = __esm({
"src/components/socialLogin/index.tsx"() {
"use strict";
init_Forward();
init_toggle();
init_context();
init_useAppearance();
init_useConnectWithWallet();
init_useLastConnectorId();
init_useLocales();
init_useRouter();
init_useWalletConnectors();
init_useWalletsProps();
init_social();
init_styles();
init_Icons();
init_styles2();
SocialLogin = ({ expandList }) => {
const { config } = useContext();
const { navigate } = useRouter();
const locales = useLocales();
const { appearance } = useAppearance();
const wallet = useWalletProps(isEVMChain(config.chains[0]) ? "particleEVM" : "particleSolana");
const walletConnector = useWalletConnector("particleAuth");
const evmWalletConnector = useWalletConnector("evmWallet");
const { lastConnectorId } = useLastConnectorId();
const connectWallet = useConnectWithWallet();
const recentConnectSocialAuthType = useMemo(() => {
if (lastConnectorId !== "particleSolana" && lastConnectorId !== "particleEVM") {
return lastConnectorId;
}
const lastAuthType = walletConnector.auth.getLatestAuthType();
return lastAuthType;
}, [lastConnectorId, walletConnector.auth]);
const authTypes = useMemo(() => {
if (!walletConnector) {
return [];
}
const hasPasskeyConnector = evmWalletConnector?.connectors.some(
(connector) => connector.id === "passkeySmartWallet"
);
const enablePasskey = Boolean(config.plugins.some((plugin) => plugin.id === "aa") && hasPasskeyConnector) && appearance.collapsePasskeyButton === "as-social";
if (enablePasskey) {
return walletConnector.supportAuthTypes.concat("passkeySmartWallet");
}
return walletConnector.supportAuthTypes;
}, [walletConnector, evmWalletConnector, appearance.collapsePasskeyButton, config.plugins]);
const socialAuthTypes2 = useMemo(() => {
return authTypes.filter((item) => isSocialAuthType(item) || item === "passkeySmartWallet");
}, [authTypes]);
const _expandList = useMemo(() => {
const evmConnector = config.getWalletConnector("evmWallet");
const solanaConnector = config.getWalletConnector("solanaWallet");
return expandList || !authTypes.includes("email") && !authTypes.includes("phone") && !evmConnector && !solanaConnector;
}, [expandList, authTypes, config]);
const renderAuthTypes = useMemo(() => {
if (_expandList) {
return socialAuthTypes2;
}
if (socialAuthTypes2.length > 5) {
return socialAuthTypes2.slice(0, 4);
}
return socialAuthTypes2;
}, [_expandList, socialAuthTypes2]);
const onSocialLogin = (authType) => {
if (wallet && isSocialAuthType(authType)) {
const name = authType.charAt(0).toUpperCase() + authType.slice(1);
connectWallet(
{
...wallet,
name,
shortName: name,
iconShape: authType === "microsoft" || authType === "twitch" ? "squircle" : "circle",
icon: /* @__PURE__ */ jsx2(Icons_default, { authType })
},
{
authParams: {
socialType: authType,
prompt: "select_account"
}
}
);
} else if (authType === "passkeySmartWallet") {
navigate("login-passkey" /* LoginPasskey */);
}
};
const felxRow = useMemo(() => {
if (_expandList) {
return false;
}
return socialAuthTypes2.length > 3;
}, [_expandList, socialAuthTypes2]);
return /* @__PURE__ */ jsx2(SocialLoginContainer, { $felxRow: felxRow, children: renderAuthTypes.map((authType, index) => {
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(SocialItem, { $felxRow: felxRow, onClick: () => onSocialLogin(authType), children: [
/* @__PURE__ */ jsx2(Icons_default, { authType }),
/* @__PURE__ */ jsx2("span", { children: authType === "passkeySmartWallet" ? "Passkey" : authType }),
!felxRow && /* @__PURE__ */ jsxs(Fragment2, { children: [
recentConnectSocialAuthType === authType && /* @__PURE__ */ jsx2(WalletLable, { children: locales.lastUsed }),
/* @__PURE__ */ jsx2(ForwardContainer, { children: /* @__PURE__ */ jsx2(Forward_default, {}) })
] })
] }),
!_expandList && index == 3 && socialAuthTypes2.length > 5 && /* @__PURE__ */ jsx2(ToggleContainer, { onClick: () => navigate("connectors" /* Connectors */, { type: "social" }), children: /* @__PURE__ */ jsx2(toggle_default, {}) })
] }, authType);
}) });
};
socialLogin_default = SocialLogin;
}
});
// src/components/wallets/index.tsx
import { useMemo as useMemo2 } from "react";
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var Wallets, wallets_default;
var init_wallets = __esm({
"src/components/wallets/index.tsx"() {
"use strict";
init_Forward();
init_useAppearance();
init_useConnectWithWallet();
init_useLastConnectorId();
init_useLocales();
init_useRouter();
init_useWalletsProps();
init_button();
init_styles();
Wallets = ({ expandList }) => {
const { navigate } = useRouter();
const wallets = useWalletsProps_default();
const locales = useLocales();
const { lastConnectorId } = useLastConnectorId();
const connectWallet = useConnectWithWallet();
const { appearance } = useAppearance();
const walletData = useMemo2(() => {
const _wallets = wallets.filter(
(wallet) => wallet.connector.type !== "particleAuth" && wallet.connector.id !== "passkeySmartWallet"
);
const datas = [];
for (const wallet of _wallets) {
const key = wallet.groupId || wallet.connector.id;
const itemData = datas.find((w) => w.key === key);
if (itemData) {
itemData.props.push(wallet);
} else {
datas.push({
key,
props: [wallet],
rankingWeight: 0
});
}
}
const recommendedWallets = appearance?.recommendedWallets || [];
datas.forEach((data) => {
const ids = data.key.split(",").map((id) => id.trim());
if (data.props.length > 1) {
data.lable = locales.multichain;
}
if (data.props.some((item) => item.isInstalled)) {
data.lable = locales.installed;
data.rankingWeight = 100;
}
const recommended = recommendedWallets.find((item) => ids.includes(item.walletId));
if (recommended) {
if (recommended.label !== "none") {
if (recommended.label?.toLowerCase() === "recommended") {
data.lable = locales.recommended;
} else if (recommended.label?.toLowerCase() === "popular") {
data.lable = locales.popular;
} else {
data.lable = recommended.label || locales.recommended;
}
data.customLable = true;
} else {
data.customLable = void 0;
}
const recommendedIndex = recommendedWallets.indexOf(recommended);
data.rankingWeight = 200 + (99 - recommendedIndex);
}
if (lastConnectorId && ids.includes(lastConnectorId)) {
data.lable = locales.lastUsed;
data.rankingWeight = 500;
data.customLable = void 0;
}
});
datas.sort((a, b) => {
if (a.rankingWeight > b.rankingWeight) {
return -1;
}
if (a.rankingWeight < b.rankingWeight) {
return 1;
}
return 0;
});
return datas;
}, [locales, wallets, appearance?.recommendedWallets, lastConnectorId]);
const renderWallets = useMemo2(() => {
if (expandList) {
return walletData;
}
if (appearance?.collapseWalletList) {
return [];
}
if (walletData.length > 3) {
return walletData.slice(0, 3);
}
return walletData;
}, [walletData, expandList, appearance?.collapseWalletList]);
const displayActionBtn = useMemo2(() => {
return !expandList && (appearance?.collapseWalletList || walletData.length > 3);
}, [expandList, appearance?.collapseWalletList, walletData]);
const onWalletClick = (data) => {
if (data.props.length > 1) {
navigate("select-chain" /* SelectChain */, { walletData: data });
} else {
const walletProps = data.props[0];
connectWallet(walletProps);
}
};
return /* @__PURE__ */ jsxs2(WalletsContainer, { children: [
renderWallets.map((walletData2) => {
return /* @__PURE__ */ jsxs2(WalletItem, { onClick: () => onWalletClick(walletData2), children: [
/* @__PURE__ */ jsx3(WalletIconContainer, { children: walletData2.props[0].icon }),
walletData2.props[0].name,
walletData2.lable && /* @__PURE__ */ jsx3(WalletLable, { $customLable: walletData2.customLable, children: walletData2.lable }),
/* @__PURE__ */ jsx3(ForwardContainer, { children: /* @__PURE__ */ jsx3(Forward_default, {}) })
] }, walletData2.key);
}),
displayActionBtn && /* @__PURE__ */ jsx3(
button_default,
{
onClick: () => {
navigate("connectors" /* Connectors */);
},
color: "secondary",
children: appearance?.collapseWalletList ? locales.continueWithWallet : locales.viewAllWallets
}
)
] });
};
wallets_default = Wallets;
}
});
export {
isSocialAuthType,
init_social,
socialLogin_default,
init_socialLogin,
wallets_default,
init_wallets
};
//# sourceMappingURL=chunk-UMISGEDB.mjs.map