@particle-network/connectkit
Version:
672 lines (660 loc) • 19.7 kB
JavaScript
"use client";
import {
StyleAddressSection,
StyleChainIcon,
StyleChainName,
StyleChainSection,
StyleConnectedWidgetContainer,
StyleDivider,
StyleInfoBox,
StyleSwitchNetwork,
StyleWalletAddress,
chainDropdown_default,
init_chainDropdown,
init_styles as init_styles2,
init_useEmbeddedWallet,
init_useParticleAuth,
init_usePublicClient,
init_useSwitchAccount,
init_useSwitchChain,
init_useWallets,
useEmbeddedWallet,
useParticleAuth,
usePublicClient,
useSwitchAccount,
useSwitchChain,
useWallets
} from "./chunk-YXNM6WKB.mjs";
import {
getChainDisplayName,
init_chains
} from "./chunk-6YIVRHUS.mjs";
import "./chunk-K64L2X2L.mjs";
import {
init_walletAAIcon,
init_walletIcon,
walletAAIcon_default,
walletIcon_default
} from "./chunk-FKP7HBJF.mjs";
import {
init_useChains,
useChains
} from "./chunk-4KLCPKCQ.mjs";
import {
init_useAddress,
init_useDisconnect,
init_useSmartAccount,
useAddress,
useDisconnect,
useSmartAccount
} from "./chunk-74QFWFRM.mjs";
import {
init_version,
version
} from "./chunk-L5JVQLL4.mjs";
import "./chunk-ONDUNK5K.mjs";
import "./chunk-LPKOMA4X.mjs";
import {
init_useConnect,
useConnect
} from "./chunk-VSGOD64V.mjs";
import "./chunk-FU5MHCAN.mjs";
import "./chunk-XV4TVGGP.mjs";
import "./chunk-3L3TDB2A.mjs";
import {
init_useConnectors,
useConnectors
} from "./chunk-RCAM7PR5.mjs";
import {
MoreOptionsIcon_default
} from "./chunk-HYFKICF4.mjs";
import {
DownArrowIcon_default,
init_DownArrowIcon
} from "./chunk-QZKTRS47.mjs";
import {
ErrorIcon_default,
init_ErrorIcon
} from "./chunk-SQYCLHVZ.mjs";
import "./chunk-BUW2IG4Z.mjs";
import {
socialIcons
} from "./chunk-CKNMMZBO.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 {
wallets_exports
} from "./chunk-CIZ5FPOB.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 {
ConnectKitProvider,
ThemeContainer,
init_context,
init_styles,
init_useAccount,
init_useAppearance,
init_useLocales,
init_useRouter,
init_utils,
shortAddress,
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-TAE2EWSO.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 "./chunk-Y7A564BU.mjs";
// src/components/connectButton/index.tsx
init_useAccount();
init_useAppearance();
init_useLocales();
init_useRouter();
import { useEffect as useEffect2, useState as useState3 } from "react";
init_styles();
// src/components/connectedWidget/index.tsx
init_DownArrowIcon();
init_ErrorIcon();
import { getChainIcon } from "@particle-network/connector-core";
import { useMemo, useRef as useRef2, useState as useState2 } from "react";
init_useAccount();
init_useAddress();
init_useChains();
init_useLocales();
init_useRouter();
init_useSmartAccount();
init_utils();
init_chains();
init_chainDropdown();
// src/components/horizontalResizeAnimation/index.tsx
import { useEffect, useRef, useState } from "react";
import { styled } from "styled-components";
import { jsx } from "react/jsx-runtime";
var AnimationContainer = styled.div`
transition: width 0.3s ease;
overflow: hidden;
`;
var ContentWrapper = styled.div`
display: inline-block;
white-space: nowrap;
`;
var HorizontalResizeAnimation = ({
children,
style,
...props
}) => {
const containerRef = useRef(null);
const contentRef = useRef(null);
const [width, setWidth] = useState(0);
useEffect(() => {
if (containerRef.current && contentRef.current) {
requestAnimationFrame(() => {
const newWidth = contentRef.current?.offsetWidth || 0;
setWidth(newWidth);
});
}
}, [children]);
return /* @__PURE__ */ jsx(AnimationContainer, { ref: containerRef, style: { width: `${width}px` }, children: /* @__PURE__ */ jsx(ContentWrapper, { ref: contentRef, ...props, ...style, children }) });
};
var horizontalResizeAnimation_default = HorizontalResizeAnimation;
// src/components/connectedWidget/index.tsx
init_walletAAIcon();
init_walletIcon();
init_styles2();
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
var ConnectedWidget = () => {
const locales = useLocales();
const { chain } = useAccount();
const walletAddress = useAddress();
const { navigate } = useRouter();
const chains = useChains();
const smartAccount = useSmartAccount();
const aaIconName = smartAccount?.smartAccountContract?.name?.toUpperCase();
const [chainDropdownVisible, setChainDropdownVisible] = useState2(false);
const leftRef = useRef2(null);
const supportChain = useMemo(() => {
return chains.some((item) => item.id === chain?.id);
}, [chain, chains]);
const chainName = useMemo(() => {
const chainName2 = getChainDisplayName(chain);
const maxChainNameLength = window.screen.width < 400 ? 9 : 18;
return chainName2?.length > maxChainNameLength ? `${chainName2.slice(0, maxChainNameLength)}...` : chainName2;
}, [chain]);
return /* @__PURE__ */ jsxs(StyleConnectedWidgetContainer, { children: [
/* @__PURE__ */ jsxs(StyleInfoBox, { children: [
/* @__PURE__ */ jsx2(
StyleChainSection,
{
ref: leftRef,
selected: chains?.length > 1 || !supportChain,
onClick: () => {
if (chains?.length > 1 || !supportChain) {
setChainDropdownVisible(!chainDropdownVisible);
}
},
children: /* @__PURE__ */ jsxs("div", { className: "wrap", children: [
supportChain ? /* @__PURE__ */ jsxs(Fragment, { children: [
chain && /* @__PURE__ */ jsx2(StyleChainIcon, { src: getChainIcon(chain), alt: "" }),
/* @__PURE__ */ jsx2(horizontalResizeAnimation_default, { children: /* @__PURE__ */ jsx2(StyleChainName, { children: chainName }) })
] }) : /* @__PURE__ */ jsxs(StyleSwitchNetwork, { children: [
/* @__PURE__ */ jsx2(ErrorIcon_default, {}),
/* @__PURE__ */ jsx2(horizontalResizeAnimation_default, { children: locales.switchNetwork })
] }),
(chains?.length > 1 || !supportChain) && /* @__PURE__ */ jsx2(
DownArrowIcon_default,
{
width: 10,
height: 10,
spin: !!chainDropdownVisible,
color: supportChain ? "var(--pcm-body-color-secondary)" : "var(--pcm-error-color)"
}
)
] })
}
),
/* @__PURE__ */ jsx2(StyleDivider, {}),
/* @__PURE__ */ jsx2(
StyleAddressSection,
{
style: { cursor: "pointer" },
onClick: () => {
navigate("wallet-info" /* WalletInfo */);
},
children: /* @__PURE__ */ jsxs("div", { className: "wrap", children: [
aaIconName ? /* @__PURE__ */ jsx2(walletAAIcon_default, { size: 20, aaName: aaIconName }) : /* @__PURE__ */ jsx2(walletIcon_default, { size: 20 }),
/* @__PURE__ */ jsx2(horizontalResizeAnimation_default, { children: /* @__PURE__ */ jsx2(StyleWalletAddress, { children: shortAddress(walletAddress || "") }) }),
/* @__PURE__ */ jsx2(MoreOptionsIcon_default, {})
] })
}
)
] }),
/* @__PURE__ */ jsx2(
chainDropdown_default,
{
visible: chainDropdownVisible,
setVisible: setChainDropdownVisible,
clickAwayElements: [leftRef],
supportChain
}
)
] });
};
var connectedWidget_default = ConnectedWidget;
// src/components/connectButton/styles.ts
import { motion } from "framer-motion";
import { styled as styled2 } from "styled-components";
var ButtonContainer = styled2(motion.div)`
height: 48px;
padding: 0 40px;
position: relative;
background-color: var(--pcm-primary-button-bankground);
border-radius: var(--pcm-rounded-lg);
color: var(--pcm-primary-button-color);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 200ms ease;
width: auto;
max-width: 360px;
width: 100%;
`;
// src/components/connectButton/index.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var ConnectButton = (props) => {
const { label } = props;
const { isConnected, status } = useAccount();
const { navigate } = useRouter();
const [loading, setLoading] = useState3(true);
const { appearance } = useAppearance();
const locales = useLocales();
useEffect2(() => {
setLoading(false);
}, [status]);
if (loading) {
return null;
}
return /* @__PURE__ */ jsx3(ThemeContainer, { $useTheme: appearance?.theme, $useMode: appearance?.mode, suppressHydrationWarning: true, children: isConnected ? /* @__PURE__ */ jsx3(connectedWidget_default, {}) : /* @__PURE__ */ jsx3(
ButtonContainer,
{
whileHover: {
scale: 1.05,
boxShadow: "0px 0px 8px rgba(255,255,255,0.2)"
},
whileTap: { scale: 0.95 },
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
transition: {
type: "spring",
stiffness: 260,
damping: 20
},
onClick: () => {
navigate("signup" /* Signup */);
},
children: label ?? locales.connect
}
) });
};
var connectButton_default = ConnectButton;
// src/index.ts
init_context();
init_useAccount();
init_useAddress();
init_useAppearance();
init_useChains();
init_useConnect();
init_useConnectors();
init_useDisconnect();
init_useEmbeddedWallet();
// src/hooks/useModal.ts
init_useAccount();
init_useRouter();
var useModal = ({ onConnect, onDisconnect } = {}) => {
const { navigate, close, isOpen } = useRouter();
const { isConnected } = useAccount();
return {
isOpen,
setOpen: (open) => {
if (open) {
navigate(isConnected ? "wallet-info" /* WalletInfo */ : "signup" /* Signup */);
} else {
close();
}
}
};
};
// src/index.ts
init_useParticleAuth();
init_usePublicClient();
init_useSmartAccount();
init_useSwitchAccount();
init_useSwitchChain();
init_useWallets();
// src/createConfig.ts
init_version();
import {
createStorage,
uid as getUid,
isEVMChain,
isSolanaChain,
noopStorage
} from "@particle-network/connector-core";
import { persist, subscribeWithSelector } from "zustand/middleware";
import { createStore } from "zustand/vanilla";
var createConfig = (options) => {
const { walletConnectors: createWalletConnectorFns, chains, projectId, clientKey, appId, plugins } = options;
if (!createWalletConnectorFns.length) {
throw new Error("Please set at least one connector.");
}
if (!chains.length) {
throw new Error("Please set at least one chain.");
}
if (options.initialChainId?.evm && chains.some(isEVMChain) && !chains.find((chain) => chain.id === options.initialChainId?.evm)) {
throw new Error("`chains` not includes `initialChainId.evm`");
}
if (options.initialChainId?.solana && chains.some(isSolanaChain) && !chains.find((chain) => chain.id === options.initialChainId?.solana)) {
throw new Error("`chains` not includes `initialChainId.solana`");
}
const storage = createStorage({
storage: typeof window !== "undefined" && window.localStorage ? window.localStorage : noopStorage
});
function getInitialState() {
return {
chainId: chains[0].id,
connections: /* @__PURE__ */ new Map(),
current: null,
status: "disconnected"
};
}
const currentVersion = Number(version.replaceAll(".", ""));
const store = createStore(
subscribeWithSelector(
storage ? persist(getInitialState, {
migrate(persistedState, version2) {
return persistedState;
},
name: "store",
partialize(state) {
return {
connections: {
__type: "Map",
value: Array.from(state.connections.entries()).map(([key, connection]) => {
const { id, name, type, uid: uid2, chainType } = connection.connector;
const connector = { id, name, type, uid: uid2, chainType };
return [key, { ...connection, connector }];
})
},
chainId: state.chainId,
current: state.current
};
},
storage,
version: currentVersion
}) : getInitialState
)
);
function change(data) {
store.setState((x) => {
const connection = x.connections.get(data.uid);
if (!connection)
return x;
return {
...x,
connections: new Map(x.connections).set(data.uid, {
accounts: data.accounts ?? connection.accounts,
chainId: data.chainId ?? connection.chainId,
connector: connection.connector
})
};
});
}
async function connect(data) {
const status = store.getState().status;
if (status === "connecting" || status === "reconnecting") {
return;
}
const connector = connectors.getState().find((x) => x.uid === data.uid);
if (!connector)
return;
const isAuthorized = await connector.isAuthorized();
if (!isAuthorized) {
return;
}
store.setState((x) => {
const connector2 = connectors.getState().find((x2) => x2.uid === data.uid);
if (!connector2)
return x;
if (!connector2.emitter.listenerCount("change"))
connector2.emitter.on("change", change);
if (!connector2.emitter.listenerCount("disconnect"))
connector2.emitter.on("disconnect", disconnect);
storage.setItem("recentConnectorId", connector2.id);
return {
...x,
connections: new Map(x.connections).set(data.uid, {
accounts: data.accounts,
chainId: data.chainId,
connector: connector2
}),
current: data.uid,
status: "connected"
};
});
}
function disconnect(data) {
store.setState((x) => {
const connection = x.connections.get(data.uid);
if (connection) {
const connector = connection.connector;
if (connector.emitter.listenerCount("change"))
connection.connector.emitter.off("change", change);
if (connector.emitter.listenerCount("disconnect"))
connection.connector.emitter.off("disconnect", disconnect);
}
x.connections.delete(data.uid);
if (x.connections.size === 0)
return {
...x,
connections: /* @__PURE__ */ new Map(),
current: null,
status: "disconnected"
};
const nextConnection = x.connections.values().next().value;
return {
...x,
connections: new Map(x.connections),
current: nextConnection.connector.uid
};
});
}
const connectors = createStore(() => []);
const connectorSetup = (connector) => {
if (!connector.emitter.listenerCount("connect")) {
}
return connector;
};
const setup = (createFn) => {
const walletConnector = createFn({
chains,
storage,
projectId,
clientKey,
appId
});
const subConnectors = walletConnector.connectors.map(connectorSetup);
connectors.setState((x) => [...x, ...subConnectors], true);
walletConnector.store.subscribe((state) => {
const currentConnectorIds = /* @__PURE__ */ new Map();
for (const connector of connectors.getState()) {
currentConnectorIds.set(connector.id, true);
}
const newConnectors = [];
for (const connector of state) {
if (currentConnectorIds.has(connector.id))
continue;
newConnectors.push(connector);
}
if (newConnectors.length) {
connectors.setState((x) => [...x, ...newConnectors], true);
}
});
return walletConnector;
};
const walletConnectors = createWalletConnectorFns.map(setup);
const getWalletConnector = (type) => {
const walletConnector = walletConnectors.find((item) => item.type === type);
if (walletConnector) {
return walletConnector;
}
return void 0;
};
store.subscribe(
({ connections, current }) => current ? connections.get(current)?.chainId : void 0,
(chainId) => {
const isChainConfigured = chains.some((x) => x.id === chainId);
if (!isChainConfigured)
return;
return store.setState((x) => ({
...x,
chainId: chainId ?? x.chainId
}));
}
);
function setupPlugin(createPluginFn) {
return createPluginFn({
projectConfig: {
projectId,
clientKey,
appId
},
chains
});
}
const _plugins = plugins?.map(setupPlugin);
const uid = getUid();
const _appearance = options.appearance || {};
const appearanceStore = createStore(() => _appearance);
return {
get uid() {
return uid;
},
get plugins() {
return _plugins || [];
},
get options() {
return options;
},
get chains() {
return chains;
},
get connectors() {
return connectors.getState();
},
get appearanceStore() {
return appearanceStore;
},
storage,
get walletConnectors() {
return walletConnectors;
},
getWalletConnector,
get state() {
return store.getState();
},
setState(value) {
let newState;
if (typeof value === "function")
newState = value(store.getState());
else
newState = value;
const initialState = getInitialState();
if (typeof newState !== "object")
newState = initialState;
const isCorrupt = Object.keys(initialState).some((x) => !(x in newState));
if (isCorrupt)
newState = initialState;
store.setState(newState, true);
},
subscribe(selector, listener, options2) {
return store.subscribe(
selector,
listener,
options2 ? { ...options2, fireImmediately: options2.emitImmediately } : void 0
);
},
_internal: {
connectors: {
setup: connectorSetup,
subscribe(listener) {
return connectors.subscribe(listener);
}
},
events: { change, connect, disconnect }
}
};
};
// src/index.ts
init_version();
export {
connectButton_default as ConnectButton,
ConnectKitProvider,
createConfig,
socialIcons,
useAccount,
useAddress,
useAppearance,
useChains,
useConnect,
useConnectors,
useDisconnect,
useEmbeddedWallet,
useModal,
useParticleAuth,
usePublicClient,
useSmartAccount,
useSwitchAccount,
useSwitchChain,
useWallets,
version,
wallets_exports as walletIcons
};
//# sourceMappingURL=index.mjs.map