@coin-voyage/paykit 2.2.4 → 2.2.6

package/dist/assets/chains.d.ts

@@ -1,4 +1,4 @@
-import { ChainId } from "@coin-voyage/shared/common";
+import { ChainId } from "@coin-voyage/shared/types";
 import { JSX } from "react";
 type Logo = {
     testnet?: boolean;

package/dist/assets/chains.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChainId } from "@coin-voyage/shared/common";
+import { ChainId } from "@coin-voyage/shared/types";
 const KnownChain = ({ testnet, ...props }) => (_jsxs("svg", { ...props, "aria-hidden": "true", width: props?.width ?? "44", height: props?.height ?? "44", viewBox: "0 0 44 44", xmlns: "http://www.w3.org/2000/svg", style: {
         background: testnet ? "linear-gradient(180deg, #8995A9 0%, #424D5F 99.48%)" : "black",
     }, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.5611 8.12948C21.0082 7.90729 21.5007 7.79167 22 7.79167C22.4993 7.79167 22.9919 7.90729 23.439 8.12948L23.4408 8.1304L33.0387 12.9293C33.577 13.197 34.031 13.61 34.3478 14.121C34.6649 14.6323 34.833 15.2218 34.8333 15.8234V27.2595C34.833 27.8611 34.6649 28.4511 34.3478 28.9624C34.031 29.4733 33.578 29.8858 33.0398 30.1535L23.4411 34.9528C22.9919 35.1775 22.4963 35.2947 21.994 35.2947C21.4918 35.2947 20.9964 35.1777 20.5472 34.9529L10.9475 30.1531L10.9452 30.1519C10.4071 29.8808 9.95535 29.4646 9.6411 28.9504C9.32739 28.437 9.16312 27.8464 9.16673 27.2448L9.16675 27.2417L10.0004 27.2475H9.16673V27.2448V15.8239C9.16705 15.2223 9.33518 14.6322 9.65222 14.121C9.96906 13.61 10.4221 13.1976 10.9604 12.9298L20.5592 8.1304L20.5611 8.12948ZM21.3031 9.62267L11.8706 14.3389L22 19.4036L32.1294 14.3389L22.697 9.62267C22.4806 9.51531 22.2416 9.45905 22 9.45905C21.7585 9.45905 21.5194 9.51534 21.3031 9.62267ZM10.8341 15.8241C10.8341 15.7785 10.8362 15.733 10.8401 15.6878L21.1663 20.8509V33.3983L11.6955 28.6629C11.4352 28.5315 11.2159 28.3297 11.0638 28.0809C10.9116 27.8318 10.8321 27.5452 10.8341 27.2533L10.8341 27.2475V15.8241ZM22.8337 33.3923L32.2967 28.6608C32.5576 28.5312 32.7772 28.3313 32.9308 28.0836C33.0844 27.836 33.1658 27.5504 33.166 27.259V15.8243C33.1659 15.7786 33.1639 15.7331 33.1599 15.6878L22.8337 20.8509V33.3923Z", fill: "url(#paint0_linear_3546_7073)" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.8341 15.8241C10.8341 15.7785 10.8362 15.733 10.8401 15.6878L21.1663 20.8509V33.3983L11.6955 28.6629C11.4352 28.5315 11.2159 28.3297 11.0638 28.0809C10.9116 27.8318 10.8321 27.5452 10.8341 27.2533L10.8341 27.2475V15.8241Z", fill: "url(#paint1_linear_3546_7073)", fillOpacity: "0.3" }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_3546_7073", x1: "22", y1: "7.79167", x2: "22", y2: "35.2947", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "white" }), _jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.7" })] }), _jsxs("linearGradient", { id: "paint1_linear_3546_7073", x1: "22", y1: "7.79167", x2: "22", y2: "35.2947", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "white" }), _jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.7" })] })] })] }));

package/dist/components/Pages/Confirmation/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getChainExplorerTxUrl, PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/common";
+import { getChainExplorerTxUrl } from "@coin-voyage/shared/common";
+import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { useEffect, useMemo } from "react";
 import { ExternalLinkIcon } from "../../../assets/icons";
 import useLocales from "../../../hooks/useLocales";

package/dist/components/Pages/MobileConnectors/index.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container, WalletIcon, WalletItem, WalletLabel, WalletList } from "./styles";
-import { ModalContent, PageContent } from "../../ui/Modal/styles";
-import { ChainType } from "@coin-voyage/shared/common";
+import { ChainType } from "@coin-voyage/shared/types";
 import { useCallback } from "react";
 import useLocales from "../../../hooks/useLocales";
 import { useWalletConnectModal } from "../../../hooks/useWalletConnectModal";
 import { useWalletConnectUri } from "../../../hooks/useWalletConnectUri";
 import { useWallets } from "../../../hooks/useWallets";
 import { walletConfigs } from "../../../lib/config/wallet";
+import { ROUTES } from "../../../types/routes";
 import usePayContext from "../../contexts/pay";
+import { ModalContent, PageContent } from "../../ui/Modal/styles";
 import { ScrollArea } from "../../ui/ScrollArea";
 import { Spinner } from "../../ui/Spinner";
-import { ROUTES } from "../../../types/routes";
+import { Container, WalletIcon, WalletItem, WalletLabel, WalletList } from "./styles";
 const MoreIcon = (_jsx("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" }) }));
 export default function MobileConnectors() {
     const { paymentState } = usePayContext();

package/dist/components/Pages/PayWithToken/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAccount } from "@coin-voyage/crypto/hooks";
-import { assert, ChainType, getChainTypeByChainId, PayOrderMode, PayOrderStatus, } from "@coin-voyage/shared/common";
+import { assert, getChainTypeByChainId } from "@coin-voyage/shared/common";
+import { ChainType, PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useMemo, useState } from "react";
 import { useChainId, useSwitchChain } from "wagmi";

package/dist/components/Pages/SwitchNetworks/index.d.ts

@@ -1,3 +1,2 @@
-import type React from "react";
-declare const SwitchNetworks: React.FC;
+declare const SwitchNetworks: () => import("react/jsx-runtime").JSX.Element;
 export default SwitchNetworks;

package/dist/components/Pages/SwitchNetworks/index.js

@@ -1,14 +1,14 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ChainType } from "@coin-voyage/shared/types";
 import { useAccount, useConnect, useDisconnect } from "wagmi";
-import ChainSelectList from "../../ui/ChainSelectList";
-import { ModalBody, ModalContent, PageContent } from "../../ui/Modal/styles";
-import useLocales from "../../../hooks/useLocales";
-import { ChainType } from "@coin-voyage/shared/common";
 import { DisconnectIcon } from "../../../assets/icons";
 import { useChainIsSupported } from "../../../hooks/useChainIsSupported";
+import useLocales from "../../../hooks/useLocales";
 import { isSafeConnector } from "../../../utils";
 import Button from "../../ui/Button";
+import ChainSelectList from "../../ui/ChainSelectList";
 import { OrDivider } from "../../ui/Divider/OrDivider";
+import { ModalBody, ModalContent, PageContent } from "../../ui/Modal/styles";
 const SwitchNetworks = () => {
     const { reset } = useConnect();
     const { disconnect } = useDisconnect();

package/dist/components/pay-button/index.d.ts

@@ -1,4 +1,4 @@
-import { ChainId, PayOrderConfirmingEvent, PayOrderMetadata, PayOrderRefundedEvent, type PayOrderCompletedEvent, type PayOrderCreationErrorEvent } from "@coin-voyage/shared/common";
+import type { ChainId, PayOrderCompletedEvent, PayOrderConfirmingEvent, PayOrderCreationErrorEvent, PayOrderMetadata, PayOrderRefundedEvent } from "@coin-voyage/shared/types";
 import type { CustomTheme, Mode, PayModalOptions, Theme } from "../../types";
 type DepositPayButtonParams = {
     /**

package/dist/components/pay-button/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsClient } from "@coin-voyage/shared/hooks";
 import { useQuery } from "@tanstack/react-query";
 import { AnimatePresence } from "framer-motion";
 import { useCallback, useEffect, useRef } from "react";
-import useIsClient from "../../hooks/useIsClient";
 import { usePaymentLifecycle } from "../../hooks/usePaymentLifecycle";
 import { ResetContainer } from "../../styles";
 import usePayContext from "../contexts/pay";

package/dist/components/pay-modal/ConnectWithInjector/index.js

@@ -9,7 +9,7 @@ import Tooltip from "../../ui/Tooltip";
 import SquircleSpinner from "../../spinners/SquircleSpinner";
 import { useUniversalConnect } from "@coin-voyage/crypto/hooks";
 import { getConnectorId } from "@coin-voyage/crypto/lib/utils/connector";
-import { detectBrowser } from "@coin-voyage/shared/utils";
+import { detectBrowser } from "@coin-voyage/shared/common";
 import { AlertIcon, RetryIconCircle, TickIcon } from "../../../assets/icons";
 import useLocales from "../../../hooks/useLocales";
 import { ROUTES } from "../../../types/routes";

package/dist/components/ui/BrowserIcon/index.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { detectBrowser } from "@coin-voyage/shared/utils";
+import { detectBrowser } from "@coin-voyage/shared/common";
 import { BrowserIconContainer } from "./styles";
 import browsers from "../../../assets/browsers";
 const BrowserIcon = React.forwardRef(({ browser }, _ref) => {

package/dist/components/ui/Button/index.d.ts

@@ -1,4 +1,3 @@
-import type React from "react";
 import type { ButtonProps } from "./types";
-declare const Button: React.FC<ButtonProps>;
+declare const Button: ({ children, variant, disabled, icon, iconPosition, roundedIcon, waiting, arrow, download, href, style, onClick, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/ui/Button/index.js

@@ -11,12 +11,12 @@ const transition = {
 const Button = ({ children, variant = "secondary", // unique aspect to how we're handling buttons
 disabled, icon, iconPosition = "left", roundedIcon, waiting, arrow, download, href, style, onClick, }) => {
     const key = typeof children === "string" ? children : flattenChildren(children).join(""); // Need to generate a string for the key so we can automatically animate between content
-    const hrefUrl = typeof href === "string" ? href : flattenChildren(href).join(""); // Need to have a flat string for the href
+    const hrefUrl = typeof href === "string" ? href : href && flattenChildren(href).join("");
     return (_jsx(ButtonContainer, { as: href ? "a" : undefined, onClick: (event) => {
             if (!disabled && onClick) {
                 onClick(event);
             }
-        }, href: hrefUrl, target: href && "_blank", rel: href && "noopener noreferrer", disabled: disabled, "$variant": variant, style: style, children: _jsxs(AnimatePresence, { initial: false, children: [_jsxs(ButtonContainerInner, { initial: { opacity: 0, y: -10 }, animate: {
+        }, href: hrefUrl, target: href ? "_blank" : undefined, rel: href ? "noopener noreferrer" : undefined, disabled: disabled, "$variant": variant, style: style, children: _jsxs(AnimatePresence, { initial: false, children: [_jsxs(ButtonContainerInner, { initial: { opacity: 0, y: -10 }, animate: {
                         opacity: 1,
                         y: -1,
                     }, exit: {

package/dist/components/ui/ChainSelectList/index.js

@@ -5,7 +5,7 @@ import Alert from "../Alert";
 import { ChainButton, ChainButtonBg, ChainButtonContainer, ChainButtonStatus, ChainButtons, ChainIcon, ChainLogoContainer, ChainLogoSpinner, SwitchNetworksContainer, } from "./styles";
 import { AnimatePresence, motion } from "framer-motion";
 import { isCoinbaseWalletConnector } from "../../../utils";
-import { isMobile } from "@coin-voyage/shared/utils";
+import { isMobile } from "@coin-voyage/shared/common";
 import ChainIcons from "../../../assets/chains";
 import useLocales from "../../../hooks/useLocales";
 import { chainConfigs } from "../../../lib/config/chain";

package/dist/components/ui/ConnectorList/index.js

@@ -6,7 +6,7 @@ import { ScrollArea } from "../ScrollArea";
 import { useLastConnector, useUniversalConnect } from "@coin-voyage/crypto/hooks";
 import { isWalletInstalled } from "@coin-voyage/crypto/lib/utils/is-wallet-installed";
 import { useIsMobile } from "@coin-voyage/shared/hooks";
-import { detectBrowser } from "@coin-voyage/shared/utils";
+import { detectBrowser } from "@coin-voyage/shared/common";
 import { useCallback, useMemo } from "react";
 import useLocales from "../../../hooks/useLocales";
 import { useWalletConnectUri } from "../../../hooks/useWalletConnectUri";
@@ -24,7 +24,7 @@ export default function ConnectorList() {
     const installedWallets = useWallets();
     const { lastConnectorId } = useLastConnector();
     const walletsToDisplay = useMemo(() => {
-        let wallets = [...installedWallets];
+        const wallets = [...installedWallets];
         const mobileWallet = walletConfigs["mobileWallet"];
         if (isMobile && connectorChainType && mobileWallet.chainTypes?.includes(connectorChainType)) {
             wallets.push({

package/dist/components/ui/CopyToClipboard/index.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
-declare const CopyToClipboard: React.FC<{
+declare const CopyToClipboard: ({ text, children, variant, }: {
     text?: string;
     children?: React.ReactNode;
     variant?: "button" | "left";
-}>;
+}) => import("react/jsx-runtime").JSX.Element;
 export default CopyToClipboard;

package/dist/components/ui/CopyToClipboard/index.js

@@ -27,7 +27,7 @@ const Container = styled.div `
           }
         `}
 `;
-const CopyToClipboard = ({ text, children, variant }) => {
+const CopyToClipboard = ({ text, children, variant, }) => {
     const [clipboard, setClipboard] = useState(false);
     const onCopy = async () => {
         if (!text)

package/dist/components/ui/CustomQRCode/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogoContainer, LogoIcon, QRCodeContainer, QRCodeContent, QRPlaceholder } from "./styles";
+import { useWindowSize } from "@coin-voyage/shared/hooks";
 import { AnimatePresence, motion } from "framer-motion";
 import Tooltip from "../Tooltip";
-import useWindowSize from "../../../hooks/useWindowSize";
 import { QRCode } from "./QRCode";
+import { LogoContainer, LogoIcon, QRCodeContainer, QRCodeContent, QRPlaceholder } from "./styles";
 function CustomQRCode({ value, image, imageBackground, imagePosition = "center", tooltipMessage }) {
     const windowSize = useWindowSize();
     const Logo = windowSize.width > 920 && tooltipMessage ? (_jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image })) : (image);

package/dist/components/ui/DynamicContainer/index.d.ts

@@ -3,5 +3,5 @@ type DynamicContainerProps = {
     id: string;
     children?: React.ReactNode;
 };
-declare const DynamicContainer: React.FC<DynamicContainerProps>;
+declare const DynamicContainer: ({ id, children }: DynamicContainerProps) => import("react/jsx-runtime").JSX.Element;
 export default DynamicContainer;

package/dist/components/ui/Modal/index.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getChainTypeName } from "@coin-voyage/shared/common";
-import { isMobile } from "@coin-voyage/shared/utils";
-import FocusTrap from "../../../hooks/useFocusTrap";
+import { getChainTypeName, isMobile } from "@coin-voyage/shared/common";
+import { FocusTrap, usePrevious } from "@coin-voyage/shared/hooks";
 import useLocales from "../../../hooks/useLocales";
-import usePrevious from "../../../hooks/usePrevious";
 import { useThemeContext } from "../../../providers/theme/provider";
 import { ResetContainer } from "../../../styles";
 import { ROUTES } from "../../../types/routes";

package/dist/components/ui/OrderHeader/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAccount } from "@coin-voyage/crypto/hooks";
-import { shortenAddress } from "@coin-voyage/shared/utils";
+import { truncateAddress } from "@coin-voyage/shared/common";
 import { motion } from "framer-motion";
 import { Arbitrum, Bitcoin, Ethereum, Optimism, Solana, Sui } from "../../../assets/chains";
 import { USDC } from "../../../assets/coins";
@@ -14,7 +14,6 @@ export const OrderHeader = ({ minified = false, showConnectedWallet = false }) =
         selectedWallet,
         chainType: connectorChainType,
     });
-    const fulfillment = payOrder?.fulfillment;
     const renderIcon = (icon, name, size = 32) => {
         if (!icon) {
             return null;
@@ -22,9 +21,9 @@ export const OrderHeader = ({ minified = false, showConnectedWallet = false }) =
         return (_jsx(LogoContainer, { "$size": size, "$zIndex": 1, style: { borderRadius: "22.5%" }, children: typeof icon === "string" ? (_jsx("img", { src: icon, alt: name || "wallet", style: { maxWidth: "100%", maxHeight: "100%" } })) : (icon) }));
     };
     if (minified) {
-        return (_jsxs(MinifiedContainer, { children: [_jsx(MinifiedTitleAmount, { children: _jsx(TitleAmountContent, { fulfillment: fulfillment }) }), showConnectedWallet ? (_jsx(ConnectedWallet, { account: account, senderEnsName: senderEnsName, renderIcon: renderIcon })) : (_jsx(CoinLogos, { "$size": 32 }))] }));
+        return (_jsxs(MinifiedContainer, { children: [_jsx(MinifiedTitleAmount, { children: _jsx(TitleAmountContent, { fulfillment: payOrder?.fulfillment }) }), showConnectedWallet ? (_jsx(ConnectedWallet, { account: account, senderEnsName: senderEnsName, renderIcon: renderIcon })) : (_jsx(CoinLogos, { "$size": 32 }))] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(TitleAmount, { children: _jsx(TitleAmountContent, { fulfillment: fulfillment }) }), _jsxs(AnyChainAnyCoinContainer, { children: [showConnectedWallet ? (_jsx(ConnectedWallet, { account: account, senderEnsName: senderEnsName, renderIcon: renderIcon })) : (_jsx(CoinLogos, {})), _jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TitleAmount, { children: _jsx(TitleAmountContent, { fulfillment: payOrder?.fulfillment }) }), _jsxs(AnyChainAnyCoinContainer, { children: [showConnectedWallet ? (_jsx(ConnectedWallet, { account: account, senderEnsName: senderEnsName, renderIcon: renderIcon })) : (_jsx(CoinLogos, {})), _jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
 };
 const TitleAmountContent = ({ fulfillment }) => {
     if (!fulfillment)
@@ -37,7 +36,7 @@ const TitleAmountContent = ({ fulfillment }) => {
 const ConnectedWallet = ({ account, senderEnsName, renderIcon }) => {
     if (!account?.address)
         return null;
-    return (_jsxs(SubtitleContainer, { children: [_jsx(Subtitle, { children: senderEnsName ?? shortenAddress(account.address) }), renderIcon(account.connector?.icon, account.connector?.name)] }));
+    return (_jsxs(SubtitleContainer, { children: [_jsx(Subtitle, { children: senderEnsName ?? truncateAddress(account.address) }), renderIcon(account.connector?.icon, account.connector?.name)] }));
 };
 const TitleAmount = styled(motion.h1) `
   margin: 0;

package/dist/components/ui/TokenChainLogo/index.d.ts

@@ -1,4 +1,4 @@
-import type { ChainId } from "@coin-voyage/shared/common";
+import type { ChainId } from "@coin-voyage/shared/types";
 interface TokenChainLogoProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
     chainId: ChainId;
 }

package/dist/hooks/useChainIsSupported.d.ts

@@ -1,2 +1,2 @@
-import { ChainType } from "@coin-voyage/shared/common";
+import { ChainType } from "@coin-voyage/shared/types";
 export declare function useChainIsSupported(chainType: ChainType, chainId?: number): boolean | null;

package/dist/hooks/useChainIsSupported.js

@@ -1,5 +1,6 @@
 import { useAccount, useConfig as useBigmiConfig } from "@bigmi/react";
-import { ChainType, isBitcoinAddress } from "@coin-voyage/shared/common";
+import { isBitcoinAddress } from "@coin-voyage/shared/common";
+import { ChainType } from "@coin-voyage/shared/types";
 import { useConfig } from "wagmi";
 export function useChainIsSupported(chainType, chainId) {
     const { chains } = useConfig();

package/dist/hooks/useFitText.d.ts

@@ -7,6 +7,6 @@ export type TOptions = {
 };
 declare const useFitText: ({ maxFontSize, minFontSize, onFinish, onStart, resolution }?: TOptions) => {
     fontSize: number;
-    ref: import("react").RefObject<HTMLDivElement>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
 };
 export default useFitText;

package/dist/hooks/useFitText.js

@@ -4,8 +4,8 @@ const useIsoLayoutEffect = typeof window !== "undefined" && window.document && w
     ? useLayoutEffect
     : useEffect;
 const useFitText = ({ maxFontSize = 100, minFontSize = 20, onFinish, onStart, resolution = 5 } = {}) => {
-    const onStartRef = useRef();
-    const onFinishRef = useRef();
+    const onStartRef = useRef(null);
+    const onFinishRef = useRef(null);
     useEffect(() => {
         onStartRef.current = onStart;
     }, [onStart]);

package/dist/hooks/useMethodOptions.d.ts

@@ -1,5 +1,5 @@
 import { Account } from "@coin-voyage/crypto/hooks";
-import { ChainType, PayOrderMode } from "@coin-voyage/shared/common";
+import { ChainType, PayOrderMode } from "@coin-voyage/shared/types";
 import { type Option } from "../components/ui/OptionsList/types";
 interface UseMethodOptionsProps {
     account: Account;

package/dist/hooks/useMethodOptions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useConfig as useBigmiConfig } from "@bigmi/react";
-import { ChainType, PayOrderMode } from "@coin-voyage/shared/common";
-import { shortenAddress } from "@coin-voyage/shared/utils";
+import { truncateAddress, truncateENSName } from "@coin-voyage/shared/common";
+import { ChainType, PayOrderMode } from "@coin-voyage/shared/types";
 import { useWallets } from "@mysten/dapp-kit";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { useCallback, useMemo } from "react";
@@ -22,7 +22,11 @@ export function useMethodOptions({ account, mode, onClick }) {
     const { wallets: solanaWallets } = useWallet();
     const isDeposit = mode === PayOrderMode.DEPOSIT;
     const isConnected = account.isConnected;
-    const displayName = useMemo(() => paymentState.senderEnsName ?? (account.address ? shortenAddress(account.address) : "wallet"), [paymentState.senderEnsName, account.address]);
+    const displayName = useMemo(() => paymentState.senderEnsName
+        ? truncateENSName(paymentState.senderEnsName, 14)
+        : account.address
+            ? truncateAddress(account.address)
+            : "wallet", [paymentState.senderEnsName, account.address]);
     const handleConnectedWalletClick = useCallback(() => {
         paymentState.setConnectorChainType(account.chainType);
         setRoute(ROUTES.SELECT_TOKEN);

package/dist/hooks/usePayOrderQuotes.d.ts

@@ -1,4 +1,4 @@
-import { type ChainType, type CurrencyWithBalance, type PayOrder } from "@coin-voyage/shared/common";
+import { type ChainType, type CurrencyWithBalance, type PayOrder } from "@coin-voyage/shared/types";
 interface PayOrderQuotesProps {
     payOrder: PayOrder | undefined;
     address: string | undefined;

package/dist/hooks/usePayOrderQuotes.js

@@ -1,4 +1,4 @@
-import { PayOrderStatus } from "@coin-voyage/shared/common";
+import { PayOrderStatus } from "@coin-voyage/shared/types";
 import { useQuery } from "@tanstack/react-query";
 import { useBackendApi } from "../components/contexts/api";
 export function usePayOrderQuotes({ payOrder, address, chainType }) {

package/dist/hooks/usePayStatus.d.ts

@@ -1,4 +1,4 @@
-import { PayOrderStatus } from "@coin-voyage/shared/common";
+import type { PayOrderStatus } from "@coin-voyage/shared/types";
 /** Returns the current payment, or undefined if there is none.
  *
  * Status values:

package/dist/hooks/usePayWithToken.d.ts

@@ -1,4 +1,4 @@
-import { ChainType, CurrencyWithAmount, PayOrder } from "@coin-voyage/shared/common";
+import type { ChainType, CurrencyWithAmount, PayOrder } from "@coin-voyage/shared/types";
 interface PayWithTokenParams {
     senderAddr: string | undefined;
     payOrder: PayOrder | undefined;

package/dist/hooks/usePaymentLifecycle.d.ts

@@ -1,4 +1,4 @@
-import { PayOrder, PayOrderCompletedEvent, PayOrderConfirmingEvent, PayOrderRefundedEvent } from "@coin-voyage/shared/common";
+import { PayOrder, PayOrderCompletedEvent, PayOrderConfirmingEvent, PayOrderRefundedEvent } from "@coin-voyage/shared/types";
 type PaymentLifecycleHandlers = {
     onPaymentStarted: ((event: PayOrderConfirmingEvent) => void) | undefined;
     onPaymentCompleted: ((event: PayOrderCompletedEvent) => void) | undefined;

package/dist/hooks/usePaymentLifecycle.js

@@ -1,4 +1,4 @@
-import { PayOrderMode, PayOrderStatus, } from "@coin-voyage/shared/common";
+import { PayOrderMode, PayOrderStatus, } from "@coin-voyage/shared/types";
 import { useEffect, useMemo, useRef } from "react";
 /**
  *  Handles payment lifecycle events of an order, such as started, completed, and bounced.
@@ -47,15 +47,13 @@ export function usePaymentLifecycle(order, handlers) {
     useEffect(() => {
         if (sentComplete.current || !order?.payment || !isFinalized)
             return;
-        const payment = order.payment;
-        const dstChainId = payment.dst.chain_id;
         sentComplete.current = true;
         if (order.status === PayOrderStatus.REFUNDED) {
             onPaymentBounced?.({
                 type: "payorder_refunded",
                 payorder_id: order.id,
                 metadata: order.metadata,
-                refund_address: payment.refund_address,
+                refund_address: order.payment.refund_address,
                 refund_tx_hash: order.refund_tx_hash ?? "",
             });
             return;
@@ -64,7 +62,7 @@ export function usePaymentLifecycle(order, handlers) {
             type: "payorder_completed",
             payorder_id: order.id,
             metadata: order.metadata,
-            payment_data: payment,
+            payment_data: order.payment,
         });
     }, [order, isFinalized, onPaymentCompleted, onPaymentBounced]);
     return { isStarted, isFinalized, order };

package/dist/hooks/usePaymentState.d.ts

@@ -1,5 +1,5 @@
 import { WalletProps } from "@coin-voyage/crypto/types/wallet";
-import { ChainType, CurrencyWithAmount, PayOrder } from "@coin-voyage/shared/common";
+import { ChainType, type CurrencyWithAmount, type PayOrder } from "@coin-voyage/shared/types";
 import { PayOrderParams } from "@coin-voyage/shared/types/api";
 import { ROUTES } from "../types/routes";
 import { usePayOrderQuotes } from "./usePayOrderQuotes";

package/dist/hooks/usePaymentState.js

@@ -1,5 +1,6 @@
 import { useAccount } from "@coin-voyage/crypto/hooks";
-import { ChainType, PayOrderMode, zPayOrder, } from "@coin-voyage/shared/common";
+import { zPayOrder } from "@coin-voyage/shared/common";
+import { ChainType, PayOrderMode, } from "@coin-voyage/shared/types";
 import { useResolveSuiNSName } from "@mysten/dapp-kit";
 import { useCallback, useState } from "react";
 import { mainnet } from "viem/chains";

package/dist/hooks/useWalletConnectModal.js

@@ -1,10 +1,10 @@
-import { useState } from "react";
-import { useConnect as wagmiUseConnect } from "wagmi";
 import { useUniversalConnect } from "@coin-voyage/crypto/hooks";
 import { createWalletConnectConnector } from "@coin-voyage/crypto/lib/connectors/walletConnect";
 import { extendsWalletAdapter } from "@coin-voyage/crypto/solana/utils";
-import { ChainType } from "@coin-voyage/shared/common";
+import { ChainType } from "@coin-voyage/shared/types";
 import { useWallet } from "@solana/wallet-adapter-react";
+import { useState } from "react";
+import { useConnect as wagmiUseConnect } from "wagmi";
 import usePayContext from "../components/contexts/pay";
 import { ROUTES } from "../types/routes";
 import { isWalletConnectConnector } from "../utils";

package/dist/hooks/useWalletConnectUri.js

@@ -1,5 +1,5 @@
 import { useAccount, useUniversalConnect } from "@coin-voyage/crypto/hooks";
-import { ChainType } from "@coin-voyage/shared/common";
+import { ChainType } from "@coin-voyage/shared/types";
 import { useEffect, useRef, useState } from "react";
 import usePayContext from "../components/contexts/pay";
 import { ROUTES } from "../types/routes";

package/dist/lib/config/wallet.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChainType } from "@coin-voyage/shared/common";
-import { isAndroid } from "@coin-voyage/shared/utils";
+import { isAndroid } from "@coin-voyage/shared/common";
+import { ChainType } from "@coin-voyage/shared/types";
 import Logos from "../../assets/logos";
 import MobileWithLogos from "../../assets/mobile-with-logos";
 // Organised in alphabetical order by key

package/dist/providers/paykit-provider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useInWagmiContext } from "@coin-voyage/crypto/evm/provider/provider";
 import { useAccount, useConnectCallback } from "@coin-voyage/crypto/hooks";
-import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/common";
+import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { Buffer } from "buffer";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ThemeProvider as StyledThemeProvider } from "styled-components";
@@ -54,8 +54,8 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
     const [modalOptions, setModalOptions] = useState();
     const [errorMessage, setErrorMessage] = useState("");
     const [resize, onResize] = useState(0);
-    const onOpenRef = useRef();
-    const onCloseRef = useRef();
+    const onOpenRef = useRef(undefined);
+    const onCloseRef = useRef(undefined);
     const setOnOpen = useCallback((fn) => {
         onOpenRef.current = fn;
     }, []);

package/dist/server.d.ts

@@ -1,3 +1,3 @@
-export { ChainId, ChainType } from "@coin-voyage/shared/common/chains";
+export { ChainId, ChainType } from "@coin-voyage/shared/types";
 export { ApiClient } from "./lib/api";
 export type { APIError, APIResponse, APIEnvironment } from "@coin-voyage/shared/api";

package/dist/server.js

@@ -1,2 +1,2 @@
-export { ChainId, ChainType } from "@coin-voyage/shared/common/chains";
+export { ChainId, ChainType } from "@coin-voyage/shared/types";
 export { ApiClient } from "./lib/api";

package/dist/types/state.d.ts

@@ -1,4 +1,4 @@
-import { ChainType } from "@coin-voyage/shared/common";
+import type { ChainType } from "@coin-voyage/shared/types";
 import { ROUTES } from "./routes";
 export type InitState = {
     payOrderId: string;

package/dist/types.d.ts

@@ -5,8 +5,8 @@ import type { ReactNode } from "react";
 import type { Languages as Lang } from "./lib/localizations";
 export type APIEnvironment = APIEnvironmentShared;
 export type WalletConfiguration = WalletConfigurationImport;
-export type { PayOrder, PayOrderMetadata, PayOrderEvent } from "@coin-voyage/shared/common";
-export { PayOrderStatus, WebhookEventType } from "@coin-voyage/shared/common";
+export type { PayOrder, PayOrderMetadata, ParsedPayOrderMetadata, PayOrderEvent } from "@coin-voyage/shared/types";
+export { PayOrderStatus, WebhookEventType } from "@coin-voyage/shared/types";
 export type PayKitConfig = {
     children?: ReactNode;
     apiKey: string;

package/dist/types.js

@@ -1 +1 @@
-export { PayOrderStatus, WebhookEventType } from "@coin-voyage/shared/common";
+export { PayOrderStatus, WebhookEventType } from "@coin-voyage/shared/types";

package/dist/utils/index.d.ts

@@ -1,9 +1,6 @@
 import React from "react";
-declare const truncateEthAddress: (address?: string, separator?: string) => string;
-declare const truncateENSAddress: (ensName: string, maxLength: number) => string;
-declare const nFormatter: (num: number, digits?: number) => string;
 type ReactChildArray = ReturnType<typeof React.Children.toArray>;
-declare function flattenChildren(children: React.ReactNode): ReactChildArray;
+export declare function flattenChildren(children: React.ReactNode): ReactChildArray;
 export declare const isMobileWalletConnector: (connectorId?: string) => connectorId is "mobileWallet";
 export declare const isWalletConnectConnector: (connectorId?: string) => boolean;
 export declare const isMetaMaskConnector: (connectorId?: string) => connectorId is "metaMaskSDK";
@@ -11,4 +8,4 @@ export declare const isCoinbaseWalletConnector: (connectorId?: string) => connec
 export declare const isLedgerConnector: (connectorId?: string) => connectorId is "ledger";
 export declare const isSafeConnector: (connectorId?: string) => connectorId is "safe";
 export declare const isInjectedConnector: (connectorId?: string) => connectorId is "injected";
-export { flattenChildren, nFormatter, truncateENSAddress, truncateEthAddress };
+export {};

package/dist/utils/index.js

@@ -1,42 +1,5 @@
 import React from "react";
-const truncateRegex = /^(0x[a-zA-Z0-9]{4})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/;
-const truncateEthAddress = (address, separator = "••••") => {
-    if (!address) {
-        return "";
-    }
-    const match = address.match(truncateRegex);
-    if (!match) {
-        return address;
-    }
-    return `${match[1]}${separator}${match[2]}`;
-};
-const truncateENSAddress = (ensName, maxLength) => {
-    if (ensName.length > maxLength) {
-        return `${ensName.replace(".eth", "").slice(0, maxLength)}...`;
-    }
-    return ensName;
-};
-const nFormatter = (num, digits = 2) => {
-    if (num < 10000) {
-        return num.toFixed(2);
-    }
-    const lookup = [
-        { value: 1, symbol: "" },
-        { value: 1e3, symbol: "k" },
-        { value: 1e6, symbol: "m" },
-        { value: 1e9, symbol: "g" },
-        { value: 1e12, symbol: "t" },
-        { value: 1e15, symbol: "p" },
-        { value: 1e18, symbol: "e" },
-    ];
-    const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
-    const item = lookup
-        .slice()
-        .reverse()
-        .find((item) => num >= item.value);
-    return item ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol : "0";
-};
-function flattenChildren(children) {
+export function flattenChildren(children) {
     const childrenArray = React.Children.toArray(children);
     return childrenArray.reduce((flatChildren, child) => {
         if (child.type === React.Fragment) {
@@ -57,4 +20,3 @@ export const isCoinbaseWalletConnector = (connectorId) => connectorId === "coinb
 export const isLedgerConnector = (connectorId) => connectorId === "ledger";
 export const isSafeConnector = (connectorId) => connectorId === "safe";
 export const isInjectedConnector = (connectorId) => connectorId === "injected";
-export { flattenChildren, nFormatter, truncateENSAddress, truncateEthAddress };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coin-voyage/paykit",
   "description": "Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -62,7 +62,7 @@
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
     "@coin-voyage/crypto": "2.2.2",
-    "@coin-voyage/shared": "2.2.2"
+    "@coin-voyage/shared": "2.2.4"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",

package/dist/hooks/useFocusTrap.d.ts

@@ -1,9 +0,0 @@
-/**
- * Component that traps focus within its children.
- */
-interface FocusTrapProps {
-    children: React.ReactNode;
-    className?: string;
-}
-export default function FocusTrap({ children, className }: FocusTrapProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/hooks/useFocusTrap.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useCallback } from "react";
-const KEYCODE_TAB = 9;
-function useFocusTrap() {
-    const elRef = useRef(null);
-    const handleFocus = useCallback((e) => {
-        if (!elRef.current)
-            return;
-        const focusableEls = elRef.current.querySelectorAll(`
-      a[href]:not(:disabled),
-      button:not(:disabled),
-      textarea:not(:disabled),
-      input[type="text"]:not(:disabled),
-      input[type="radio"]:not(:disabled),
-      input[type="checkbox"]:not(:disabled),
-      select:not(:disabled)
-    `);
-        const firstFocusableEl = focusableEls[0];
-        const lastFocusableEl = focusableEls[focusableEls.length - 1];
-        const isTabPressed = e.key === "Tab" || e.keyCode === KEYCODE_TAB;
-        if (!isTabPressed)
-            return;
-        if (e.shiftKey) {
-            // shift + tab
-            if (document.activeElement === firstFocusableEl) {
-                lastFocusableEl?.focus();
-                e.preventDefault();
-            }
-        }
-        else {
-            // tab
-            if (document.activeElement === lastFocusableEl) {
-                firstFocusableEl?.focus();
-                e.preventDefault();
-            }
-        }
-    }, []);
-    useEffect(() => {
-        const el = elRef.current;
-        if (!el)
-            return;
-        el.focus({ preventScroll: true });
-        el.addEventListener("keydown", handleFocus);
-        return () => {
-            el.removeEventListener("keydown", handleFocus);
-        };
-    }, [handleFocus]);
-    return elRef;
-}
-export default function FocusTrap({ children, className }) {
-    const elRef = useFocusTrap();
-    return (_jsx("div", { ref: elRef, tabIndex: -1, className: className, children: children }));
-}

package/dist/hooks/useIsClient.d.ts

@@ -1 +0,0 @@
-export default function useIsClient(): boolean;

package/dist/hooks/useIsClient.js

@@ -1,5 +0,0 @@
-import { useSyncExternalStore } from "react";
-const emptySubscribe = () => () => { };
-export default function useIsClient() {
-    return useSyncExternalStore(emptySubscribe, () => true, () => false);
-}

package/dist/hooks/usePrevious.d.ts

@@ -1 +0,0 @@
-export default function usePrevious<T>(value: T, initial: T): T;

package/dist/hooks/usePrevious.js

@@ -1,8 +0,0 @@
-import { useState } from "react";
-export default function usePrevious(value, initial) {
-    const [[previous, current], setState] = useState([initial, value]);
-    if (value !== current) {
-        setState([current, value]);
-    }
-    return previous;
-}

package/dist/hooks/useWindowSize.d.ts

@@ -1,4 +0,0 @@
-export default function useWindowSize(): {
-    width: number;
-    height: number;
-};

package/dist/hooks/useWindowSize.js

@@ -1,19 +0,0 @@
-import { useEffect, useState } from "react";
-export default function useWindowSize() {
-    const [windowSize, setWindowSize] = useState({
-        width: 0,
-        height: 0,
-    });
-    useEffect(() => {
-        function handleResize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowSize;
-}

package/dist/utils/platform.d.ts

@@ -1,2 +0,0 @@
-import type { PlatformType } from "@coin-voyage/shared/common";
-export declare function detectPlatform(ua: string): PlatformType;

package/dist/utils/platform.js

@@ -1,10 +0,0 @@
-export function detectPlatform(ua) {
-    // From https://dev.to/konyu/using-javascript-to-determine-whether-the-client-is-ios-or-android-4i1j
-    if (/android/i.test(ua)) {
-        return "android";
-    }
-    if (/iPhone|iPod|iPad/.test(ua)) {
-        return "ios";
-    }
-    return "other";
-}