@coin-voyage/paykit 2.4.4-beta.0 → 2.4.4

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

@@ -3,7 +3,7 @@ import { getFiatPaymentData } from "@coin-voyage/shared/payment";
 import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { loadStripeOnramp } from "@stripe/crypto/pure";
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { AlertIcon } from "../../../assets/icons";
 import useLocales from "../../../hooks/useLocales";
 import styled from "../../../styles/styled";
@@ -44,14 +44,17 @@ function CardPaymentContent({ paymentData, isLoading, error, onRetry, }) {
 }
 function ExpiredCardPayment() {
     const locales = useLocales();
-    const { paymentState, setRoute } = usePayContext();
+    const { paymentState, setOpen } = usePayContext();
     const isDeposit = paymentState.payOrder?.mode === PayOrderMode.DEPOSIT;
-    return (_jsx(StatusCard, { warning: true, title: locales.payWithTokenScreen_expired_h1, body: locales.payWithTokenScreen_expired_p, actionLabel: isDeposit ? locales.refresh : locales.selectTokenScreen_selectAnotherMethod, onAction: () => {
+    const body = isDeposit
+        ? locales.payWithTokenScreen_expired_p
+        : "This checkout has expired. Please restart checkout from the merchant.";
+    return (_jsx(StatusCard, { warning: true, title: locales.payWithTokenScreen_expired_h1, body: body, actionLabel: isDeposit ? locales.refresh : locales.close, onAction: () => {
             if (isDeposit) {
                 void paymentState.copyDepositPayOrder();
                 return;
             }
-            setRoute(ROUTE.SELECT_METHOD);
+            setOpen(false);
         } }));
 }
 function StatusCard({ title, body, actionLabel, onAction, loading = false, warning = false, }) {
@@ -100,7 +103,7 @@ function StripeOnrampCheckout({ paymentData }) {
     }
     return (_jsxs(OnrampShell, { children: [isLoading ? (_jsx(OnrampOverlay, { children: _jsx(Spinner, {}) })) : null, stripeOnramp ? (_jsx(OnrampSession, { stripeOnramp: stripeOnramp, clientSecret: paymentData.client_secret, theme: theme, onUiLoaded: triggerResize, onSessionUpdate: handleSessionUpdate }, paymentData.client_secret)) : null] }));
 }
-function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessionUpdate, }) {
+const OnrampSession = memo(function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessionUpdate, }) {
     const mountNodeRef = useRef(null);
     const onUiLoadedRef = useLatestRef(onUiLoaded);
     const onSessionUpdateRef = useLatestRef(onSessionUpdate);
@@ -130,7 +133,7 @@ function OnrampSession({ stripeOnramp, clientSecret, theme, onUiLoaded, onSessio
         };
     }, [clientSecret, onSessionUpdateRef, onUiLoadedRef, stripeOnramp, theme]);
     return _jsx(OnrampMount, { ref: mountNodeRef });
-}
+});
 function useCardPaymentData() {
     const { paymentState } = usePayContext();
     const { payOrder, payWithCard } = paymentState;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PayOrderMode } from "@coin-voyage/shared/types";
+import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { useCallback, useEffect, useMemo } from "react";
 import { AlertIcon } from "../../../assets/icons";
 import { useCountdown } from "../../../hooks/useCountdown";
@@ -17,61 +17,60 @@ import TokenChainLogo from "../../ui/TokenChainLogo";
 import { CopyableInfo } from "./copyable-info";
 import { LogoRow, QRWrap } from "./styles";
 export default function PayToAddress() {
-    return (_jsxs(PageContent, { children: [_jsx(PayToAddressView, {}), _jsx(PoweredByFooter, {})] }));
+    return (_jsxs(PageContent, { children: [_jsx(PayToAddressContent, {}), _jsx(PoweredByFooter, {})] }));
 }
-function PayToAddressView() {
+function PayToAddressContent() {
     const { paymentState, triggerResize } = usePayContext();
-    const { payToAddressChainId: payToAddressChain, payToAddressCurrency } = paymentState;
-    const { data, isLoading, isError } = useDepositAddressQuery({
-        enabled: payToAddressCurrency != undefined,
+    const { payToAddressChainId, payToAddressCurrency, payOrder } = paymentState;
+    const depositAddressQuery = useDepositAddressQuery({
+        enabled: payToAddressCurrency != null,
     });
-    if (isError) {
-        return payToAddressChain ? _jsx(DepositFailed, {}) : null;
+    if (depositAddressQuery.isError) {
+        return payToAddressChainId ? _jsx(DepositAddressUnavailable, {}) : null;
     }
-    if (isLoading || !data) {
+    if (depositAddressQuery.isLoading || !depositAddressQuery.data) {
         return _jsx(DepositAddressLoading, {});
     }
-    return (_jsx(DepositAddressInfo, { details: data, triggerResize: triggerResize, isDeposit: paymentState.payOrder?.mode === PayOrderMode.DEPOSIT }));
+    return (_jsx(DepositAddressDetails, { details: depositAddressQuery.data, isDeposit: payOrder?.mode === PayOrderMode.DEPOSIT, isPayOrderExpired: payOrder?.status === PayOrderStatus.EXPIRED, onResizeNeeded: triggerResize, onRefreshDepositOrder: paymentState.copyDepositPayOrder }));
 }
 function DepositAddressLoading() {
     const locales = useLocales();
     return (_jsxs(ModalContent, { "$center": true, style: { paddingTop: 32, paddingBottom: 32 }, children: [_jsx(Spinner, {}), _jsx(ModalBody, { style: { marginTop: 12 }, children: locales.payToAddressScreen_generatingDepositAddress })] }));
 }
-function DepositAddressInfo({ details, triggerResize, isDeposit, }) {
-    const locales = useLocales();
+function DepositAddressDetails({ details, isDeposit, isPayOrderExpired, onResizeNeeded, onRefreshDepositOrder, }) {
     const [remainingS, totalS] = useCountdown(details.expirationS);
-    const isExpired = details.expirationS != null && remainingS === 0;
-    useEffect(triggerResize, [details, isExpired, triggerResize]);
-    const logoElement = useMemo(() => (_jsx(TokenChainLogo, { chainId: details.chainId, src: details.logoURI, alt: details.ticker }, `${details.ticker}-${details.chainId}`)), [details.chainId, details.ticker, details.logoURI]);
-    return (_jsxs(ModalContent, { children: [_jsx(DepositAddressView, { isExpired: isExpired, isDeposit: isDeposit, depositAddress: details.depositAddress, logoElement: logoElement, localesRefreshLabel: locales.refresh }), _jsx("div", { style: { height: 8 } }), _jsx(CopyableInfo, { details: details, remainingS: remainingS, totalS: totalS })] }));
+    const isExpired = isPayOrderExpired || (details.expirationS != null && remainingS === 0);
+    const effectiveRemainingS = isExpired ? 0 : remainingS;
+    useEffect(() => {
+        onResizeNeeded();
+    }, [details, isExpired, onResizeNeeded]);
+    const tokenChainLogo = useMemo(() => (_jsx(TokenChainLogo, { chainId: details.chainId, chainStyle: { borderRadius: 9999, bottom: 6, right: 4, height: "20px", width: "20px" }, src: details.logoURI, alt: details.ticker })), [details.chainId, details.ticker, details.logoURI]);
+    return (_jsxs(ModalContent, { children: [_jsx(DepositAddressPrimaryContent, { depositAddress: details.depositAddress, isExpired: isExpired, isDeposit: isDeposit, tokenChainLogo: tokenChainLogo, onRefreshDepositOrder: onRefreshDepositOrder }), _jsx("div", { style: { height: 8 } }), _jsx(CopyableInfo, { details: details, remainingS: effectiveRemainingS, totalS: totalS })] }));
 }
-function DepositAddressView({ isExpired, isDeposit, depositAddress, logoElement, localesRefreshLabel, }) {
-    const locales = useLocales();
-    const { paymentState } = usePayContext();
-    if (isExpired) {
-        if (!isDeposit) {
-            return (_jsxs(ModalContent, { "$center": true, style: { paddingTop: 32, paddingBottom: 32 }, children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] }));
-        }
-        return (_jsx(LogoRow, { children: _jsx(Button, { onClick: () => {
-                    // Create a new deposit pay order and trigger a refetch of the payment details query
-                    paymentState.copyDepositPayOrder();
-                }, style: { width: 128 }, children: localesRefreshLabel }) }));
+function DepositAddressPrimaryContent({ depositAddress, isExpired, isDeposit, tokenChainLogo, onRefreshDepositOrder, }) {
+    if (!isExpired) {
+        return (_jsx(QRWrap, { children: _jsx(CustomQRCode, { value: depositAddress, image: tokenChainLogo }) }));
     }
-    return (_jsx(QRWrap, { children: _jsx(CustomQRCode, { value: depositAddress, image: logoElement }) }));
+    if (isDeposit) {
+        return _jsx(RefreshExpiredDepositAddress, { onRefresh: onRefreshDepositOrder });
+    }
+    return _jsx(ExpiredPaymentAddressMessage, {});
+}
+function RefreshExpiredDepositAddress({ onRefresh }) {
+    const locales = useLocales();
+    return (_jsx(LogoRow, { children: _jsx(Button, { onClick: onRefresh, style: { width: 128 }, children: locales.refresh }) }));
+}
+function ExpiredPaymentAddressMessage() {
+    const locales = useLocales();
+    return (_jsxs(ModalContent, { "$center": true, style: { paddingTop: 32, paddingBottom: 32 }, children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] }));
 }
-function DepositFailed() {
+function DepositAddressUnavailable() {
     const locales = useLocales();
     const { setRoute, paymentState } = usePayContext();
-    const { setPayToAddressChainId: setPayToAddressChain, setPayToAddressCurrency } = paymentState;
     const onSelectAnotherMethod = useCallback(() => {
-        setPayToAddressChain(undefined);
-        setPayToAddressCurrency(undefined);
+        paymentState.setPayToAddressChainId(undefined);
+        paymentState.setPayToAddressCurrency(undefined);
         setRoute(ROUTE.ADDRESS_CHAIN_SELECT);
-    }, [setRoute, setPayToAddressChain, setPayToAddressCurrency]);
-    return (_jsxs(ModalContent, { "$center": true, style: {
-            marginLeft: 24,
-            marginRight: 24,
-            paddingTop: 16,
-            paddingBottom: 16,
-        }, children: [_jsx(ModalH1, { children: locales.selectPayToAddressWaitingScreen_unavailable_h1 }), _jsx(ModalBody, { children: locales.selectPayToAddressWaitingScreen_unavailable_p }), _jsx(SelectAnotherMethod, { buttonText: locales.selectTokenScreen_selectAnotherMethod, onSelectAnotherMethod: onSelectAnotherMethod })] }));
+    }, [paymentState, setRoute]);
+    return (_jsxs(ModalContent, { "$center": true, style: { marginLeft: 24, marginRight: 24, paddingTop: 16, paddingBottom: 16 }, children: [_jsx(ModalH1, { children: locales.selectPayToAddressWaitingScreen_unavailable_h1 }), _jsx(ModalBody, { children: locales.selectPayToAddressWaitingScreen_unavailable_p }), _jsx(SelectAnotherMethod, { buttonText: locales.selectTokenScreen_selectAnotherMethod, onSelectAnotherMethod: onSelectAnotherMethod })] }));
 }

package/dist/components/pay-modal/ConnectUsing.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "framer-motion";
 import { isWalletConnectConnector } from "../../utils";
 import usePayContext from "../contexts/pay";
 import Alert from "../ui/Alert";
-import { contentVariants } from "../ui/Modal";
 import ConnectWithInjector from "./ConnectWithInjector";
 import ConnectWithQRCode from "./ConnectWithQRCode";
 export default function ConnectUsing() {
@@ -14,5 +12,5 @@ export default function ConnectUsing() {
     }
     // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it
     const isQrCode = isWalletConnectConnector(wallet?.id) && wallet?.getWalletDeeplink;
-    return (_jsx(AnimatePresence, { children: isQrCode ? (_jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: _jsx(ConnectWithQRCode, {}) }, "QRCODE")) : (_jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: _jsx(ConnectWithInjector, {}) })) }));
+    return isQrCode ? _jsx(ConnectWithQRCode, {}) : _jsx(ConnectWithInjector, {});
 }

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

@@ -100,7 +100,6 @@ export default function ConnectWithInjector({ forceState }) {
         },
         onSuccess(_, variables) {
             if (variables?.connector) {
-                setStatus(states.CONNECTED);
                 setRoute(ROUTE.WALLET_TOKEN_SELECT);
             }
         },

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getChainTypeName } from "@coin-voyage/shared/chain";
+import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
 import { useCallback, useMemo } from "react";
 import { routeConfig } from "../../config/route-config";
 import useLocales from "../../hooks/useLocales";
@@ -17,7 +18,9 @@ export function PayModal({ onExited }) {
         CHAIN_TYPE: getChainTypeName(connectorChainType),
     });
     const config = routeConfig[route];
-    const showBackButton = config?.showBackButton !== false;
+    const isExpiredPayment = paymentState.payOrder?.status === PayOrderStatus.EXPIRED &&
+        paymentState.payOrder.mode === PayOrderMode.SALE;
+    const showBackButton = config?.showBackButton !== false && !isExpiredPayment;
     const showInfoButton = config?.showInfoButton !== false;
     const depth = config?.depth ?? 1;
     const headingCtx = {

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

@@ -32,7 +32,14 @@ export function useModalTransition({ open, positionInside, onClose, resizeDepend
         // laid out yet. ResizeObserver or a subsequent contentRef attachment will re-measure
         // once the node reports a real size.
         if (w > 0 && h > 0) {
-            setDimensions({ width: `${w}px`, height: `${h}px` });
+            const nextDimensions = { width: `${w}px`, height: `${h}px` };
+            setDimensions((currentDimensions) => {
+                if (currentDimensions.width === nextDimensions.width &&
+                    currentDimensions.height === nextDimensions.height) {
+                    return currentDimensions;
+                }
+                return nextDimensions;
+            });
         }
     }, []);
     // Re-measure when callers update `resizeDependency` (used by pages to force a re-measure

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

@@ -1,6 +1,8 @@
 import type { ChainId } from "@coin-voyage/shared/types";
-interface TokenChainLogoProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+import type { CSSProperties, DetailedHTMLProps, ImgHTMLAttributes } from "react";
+interface TokenChainLogoProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
     chainId: ChainId;
+    chainStyle?: CSSProperties;
 }
-export default function TokenChainLogo({ chainId, ...props }: TokenChainLogoProps): import("react/jsx-runtime").JSX.Element;
+export default function TokenChainLogo({ chainId, chainStyle, style, ...props }: TokenChainLogoProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getChainLogo } from "@coin-voyage/shared/chain";
+import { cloneElement } from "react";
 import { ChainContainer, TokenChainContainer } from "./styles";
-export default function TokenChainLogo({ chainId, ...props }) {
-    return (_jsxs(TokenChainContainer, { children: [_jsx("img", { ...props, style: { borderRadius: "22.5%" } }), _jsx(ChainContainer, { children: getChainLogo(chainId) })] }));
+export default function TokenChainLogo({ chainId, chainStyle, style, ...props }) {
+    const chainLogo = getChainLogo(chainId);
+    return (_jsxs(TokenChainContainer, { children: [_jsx("img", { ...props, style: {
+                    ...style,
+                    borderRadius: style?.borderRadius ?? "22.5%",
+                } }), _jsx(ChainContainer, { style: chainStyle, children: chainLogo && cloneElement(chainLogo) })] }));
 }

package/dist/components/ui/TokenChainLogo/styles.js

@@ -1,6 +1,7 @@
-import styled from "../../../styles/styled";
 import { motion } from "framer-motion";
+import styled from "../../../styles/styled";
 export const TokenChainContainer = styled(motion.div) `
+  position: relative;
   width: 100%;
   height: 100%;
 `;
@@ -12,4 +13,10 @@ export const ChainContainer = styled(motion.div) `
   overflow: hidden;
   bottom: 0px;
   right: 0px;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 `;

package/dist/hooks/useCountdown.js

@@ -1,23 +1,25 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 export function useCountdown(expirationS) {
-    const [nowS, setNowS] = useState(0);
-    const [initialRemaining] = useState(() => {
-        if (!expirationS)
-            return 0;
-        return Math.max(0, expirationS - Math.floor(Date.now() / 1000));
-    });
+    const [nowS, setNowS] = useState(getNowS);
+    const initialRemaining = useMemo(() => computeRemaining(expirationS, getNowS()), [expirationS]);
+    const remainingS = computeRemaining(expirationS, nowS);
     useEffect(() => {
-        if (!expirationS)
+        if (expirationS == null)
             return;
-        const tick = () => {
-            setNowS(Math.floor(Date.now() / 1000));
-        };
+        const tick = () => setNowS(getNowS());
         tick();
+        if (expirationS <= getNowS())
+            return;
         const id = setInterval(tick, 1000);
         return () => clearInterval(id);
     }, [expirationS]);
-    if (!expirationS || nowS === 0)
-        return [0, 0];
-    const remainingS = Math.max(0, expirationS - nowS);
     return [remainingS, initialRemaining];
 }
+function getNowS() {
+    return Math.floor(Date.now() / 1000);
+}
+function computeRemaining(expirationS, nowS) {
+    if (expirationS == null)
+        return 0;
+    return Math.max(0, expirationS - nowS);
+}

package/dist/hooks/usePayToAddressTokens.d.ts

@@ -1,9 +1,5 @@
+import type { Option } from "../components/ui/OptionsList/types";
 export declare function usePayToAddressTokens(): {
-    options: {
-        id: string;
-        title: string;
-        icons: import("react/jsx-runtime").JSX.Element[];
-        onClick: () => void;
-    }[];
+    options: Option[];
     isLoading: boolean;
 };

package/dist/hooks/usePayToAddressTokens.js

@@ -15,6 +15,7 @@ export function usePayToAddressTokens() {
         icons: token.logoURI
             ? [_jsx(SquircleIcon, { icon: token.logoURI, alt: token.name }, token.address ?? token.ticker)]
             : [],
+        iconShape: "circle",
         onClick: () => {
             const currency = tokenToCurrency(token);
             setPayToAddressCurrency(currency);

package/dist/hooks/useTokenOptions.js

@@ -33,7 +33,7 @@ export function useTokenOptions(disabled) {
             disabled: isDisabled,
             iconShape: "squircle",
             icons: [
-                _jsx(TokenChainLogo, { src: quote.image_uri, alt: `${quote.ticker} logo`, chainId: quote.chain_id }, `${quote.ticker}-${quote.chain_id}`),
+                _jsx(TokenChainLogo, { src: quote.image_uri, alt: `${quote.ticker} logo`, chainId: quote.chain_id, style: { borderRadius: 9999 }, chainStyle: { bottom: -1, right: -1 } }, `${quote.ticker}-${quote.chain_id}`),
             ],
             onClick: () => {
                 setSelectedCurrencyOption(quote);

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.4.4-beta.0",
+  "version": "2.4.4",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -60,8 +60,8 @@
     "@stripe/crypto": "0.0.4",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/shared": "2.4.4-beta.1",
-    "@coin-voyage/crypto": "2.4.3"
+    "@coin-voyage/crypto": "2.4.4",
+    "@coin-voyage/shared": "2.4.4"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",