@particle-network/connectkit 2.1.3 → 3.0.0-alpha.0

package/dist/esm/index.mjs

@@ -1,671 +0,0 @@
-"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