@coin-voyage/paykit 2.2.7-beta.2 → 2.2.7-beta.3

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Dot, Dots, ImageContainer, ImageContainerInner, MobileImageContainer, Slide, Slider, Slides } from "./styles";
 import { ModalBody, ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
 import { AnimatePresence, MotionConfig } from "framer-motion";
@@ -9,6 +9,10 @@ import Button from "../../ui/Button/index";
 import { OrDivider } from "../../ui/Divider/OrDivider";
 import FitText from "../../ui/FitText/index";
 import { SlideOne, SlideThree, SlideTwo } from "./graphics";
+const ANIMATION_EASE = [0.16, 1, 0.3, 1];
+const ANIMATION_DURATION = 600;
+const AUTOPLAY_DELAY = 5100;
+const SLIDE_COUNT = 3;
 export default function About() {
     const locales = useLocales({
     //CONNECTORNAME: connector.name,
@@ -18,85 +22,88 @@ export default function About() {
     const [slider, setSlider] = useState(0);
     const interacted = useRef(false);
     const scrollPos = useRef(0);
-    const animationEase = [0.16, 1, 0.3, 1];
-    const animationDuration = 600;
-    const autoplayDelay = 5100;
-    const intervalRef = useRef(null);
-    useEffect(() => {
-        return () => {
-            if (intervalRef.current) {
-                clearInterval(intervalRef.current);
-            }
-        };
-    }, []);
-    const isSwipe = () => {
+    const sliderRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const isSwipe = useCallback(() => {
         if (sliderRef.current) {
             const { overflow } = getComputedStyle(sliderRef.current);
             return overflow !== "visible";
         }
         return false;
-    };
-    const gotoSlide = (index) => {
-        if (isSwipe()) {
-            scrollToSlide(index);
-        }
-        else {
-            setSlider(index);
-        }
-    };
-    const _nextSlide = () => {
-        if (interacted.current) {
-            return;
-        }
-        setSlider((prevSlider) => {
-            const index = (prevSlider + 1) % slides.length;
-            scrollToSlide(index);
-            return index;
-        });
-        intervalRef.current = setTimeout(_nextSlide, autoplayDelay);
-    };
-    const scrollToSlide = (index) => {
+    }, []);
+    const scrollToSlide = useCallback((index) => {
         if (sliderRef.current) {
             const { offsetWidth: width } = sliderRef.current;
             sliderRef.current.scrollLeft = width * index;
             setTimeout(() => setSlider(index), 100);
         }
-    };
-    // This event should not fire on mobile
-    const onScroll = () => {
-        if (!sliderRef.current) {
-            return;
+    }, []);
+    const gotoSlide = useCallback((index) => {
+        if (isSwipe()) {
+            scrollToSlide(index);
         }
-        const { offsetWidth: width, scrollLeft: x } = sliderRef.current;
-        const prevScroll = scrollPos.current;
-        scrollPos.current = x;
-        // Limit when the slider should be set after swipe
-        const threshold = 4;
-        if (prevScroll - x > -threshold && prevScroll - x < threshold) {
-            const currentSlide = Math.round(x / width);
-            setSlider(currentSlide);
+        else {
+            setSlider(index);
         }
-    };
-    const onTouchMove = () => {
-        didInteract();
-    };
-    const onTouchEnd = () => {
-        const { offsetWidth: width, scrollLeft: x } = sliderRef.current;
-        const currentSlide = Math.round(x / width);
-        setSlider(currentSlide);
-    };
-    const didInteract = () => {
+    }, [isSwipe, scrollToSlide]);
+    const didInteract = useCallback(() => {
         interacted.current = true;
-        if (intervalRef.current) {
-            clearTimeout(intervalRef.current);
-            intervalRef.current = null;
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
         }
-    };
-    const sliderRef = useRef(null);
+    }, []);
+    const scheduleNextRef = useRef(() => { });
+    const scheduleNext = useCallback(() => {
+        if (interacted.current)
+            return;
+        setSlider((prev) => {
+            const next = (prev + 1) % SLIDE_COUNT;
+            if (isSwipe()) {
+                scrollToSlide(next);
+            }
+            return next;
+        });
+        timeoutRef.current = setTimeout(() => scheduleNextRef.current(), AUTOPLAY_DELAY);
+    }, [isSwipe, scrollToSlide]);
+    useEffect(() => {
+        scheduleNextRef.current = scheduleNext;
+    }, [scheduleNext]);
+    useEffect(() => {
+        timeoutRef.current = setTimeout(() => scheduleNextRef.current(), AUTOPLAY_DELAY);
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+    }, []);
     useEffect(() => {
         const sr = sliderRef.current;
         if (!sr)
             return;
+        const onScroll = () => {
+            if (!sliderRef.current)
+                return;
+            const { offsetWidth: width, scrollLeft: x } = sliderRef.current;
+            const prevScroll = scrollPos.current;
+            scrollPos.current = x;
+            const threshold = 4;
+            if (prevScroll - x > -threshold && prevScroll - x < threshold) {
+                const currentSlide = Math.round(x / width);
+                setSlider(currentSlide);
+            }
+        };
+        const onTouchMove = () => {
+            didInteract();
+        };
+        const onTouchEnd = () => {
+            if (!sliderRef.current)
+                return;
+            const { offsetWidth: width, scrollLeft: x } = sliderRef.current;
+            const currentSlide = Math.round(x / width);
+            setSlider(currentSlide);
+        };
         sr.addEventListener("scroll", onScroll);
         sr.addEventListener("touchmove", onTouchMove);
         sr.addEventListener("touchend", onTouchEnd);
@@ -105,19 +112,18 @@ export default function About() {
             sr.removeEventListener("touchmove", onTouchMove);
             sr.removeEventListener("touchend", onTouchEnd);
         };
-    }, [sliderRef]);
-    const graphics = [
-        _jsx(SlideOne, { layoutId: "graphicCircle", duration: animationDuration, ease: animationEase }, "slide-1"),
-        _jsx(SlideTwo, { layoutId: "graphicCircle", duration: animationDuration, ease: animationEase }, "slide-2"),
-        _jsx(SlideThree, { layoutId: "graphicCircle", duration: animationDuration, ease: animationEase }, "slide-3"),
-    ];
-    const mobileGraphics = [
-        _jsx(SlideOne, { duration: animationDuration, ease: animationEase }, "slige-1"),
-        _jsx(SlideTwo, { duration: animationDuration, ease: animationEase }, "slige-2"),
-        _jsx(SlideThree, { duration: animationDuration, ease: animationEase }, "slige-3"),
-    ];
-    // Adjust height of ModalBody to fit content based on language
-    const slideHeight = (() => {
+    }, [didInteract]);
+    const graphics = useMemo(() => [
+        _jsx(SlideOne, { layoutId: "graphicCircle", duration: ANIMATION_DURATION, ease: ANIMATION_EASE }, "slide-1"),
+        _jsx(SlideTwo, { layoutId: "graphicCircle", duration: ANIMATION_DURATION, ease: ANIMATION_EASE }, "slide-2"),
+        _jsx(SlideThree, { layoutId: "graphicCircle", duration: ANIMATION_DURATION, ease: ANIMATION_EASE }, "slide-3"),
+    ], []);
+    const mobileGraphics = useMemo(() => [
+        _jsx(SlideOne, { duration: ANIMATION_DURATION, ease: ANIMATION_EASE }, "slide-1"),
+        _jsx(SlideTwo, { duration: ANIMATION_DURATION, ease: ANIMATION_EASE }, "slide-2"),
+        _jsx(SlideThree, { duration: ANIMATION_DURATION, ease: ANIMATION_EASE }, "slide-3"),
+    ], []);
+    const slideHeight = useMemo(() => {
         switch (context.options?.language) {
             case "en-US":
             case "zh-CN":
@@ -125,15 +131,15 @@ export default function About() {
             default:
                 return 84;
         }
-    })();
-    const slides = [
+    }, [context.options?.language]);
+    const slides = useMemo(() => [
         _jsxs(Fragment, { children: [_jsx(ModalH1, { style: { height: 24 }, "$small": true, children: _jsx(FitText, { children: locales.aboutScreen_a_h1 }) }), _jsx(ModalBody, { style: { height: slideHeight }, children: _jsx(FitText, { children: locales.aboutScreen_a_p }) })] }, "aboutScreen_a"),
         _jsxs(Fragment, { children: [_jsx(ModalH1, { style: { height: 24 }, "$small": true, children: _jsx(FitText, { children: locales.aboutScreen_b_h1 }) }), _jsx(ModalBody, { style: { height: slideHeight }, children: _jsx(FitText, { children: locales.aboutScreen_b_p }) })] }, "aboutScreen_b"),
         _jsxs(Fragment, { children: [_jsx(ModalH1, { style: { height: 24 }, "$small": true, children: _jsx(FitText, { children: locales.aboutScreen_c_h1 }) }), _jsx(ModalBody, { style: { height: slideHeight }, children: _jsx(FitText, { children: locales.aboutScreen_c_p }) })] }, "aboutScreen_c"),
-    ];
+    ], [locales, slideHeight]);
     return (_jsxs(PageContent, { children: [_jsxs(Slider, { children: [_jsx(ImageContainer, { children: _jsx(MotionConfig, { transition: {
-                                duration: animationDuration / 1000,
-                                ease: animationEase,
+                                duration: ANIMATION_DURATION / 1000,
+                                ease: ANIMATION_EASE,
                             }, children: _jsx(AnimatePresence, { initial: false, children: graphics.map((g, i) => slider === i && (_jsx(ImageContainerInner, { style: { position: "absolute" }, children: g }, i))) }) }) }), _jsx(Slides, { ref: sliderRef, children: _jsx(AnimatePresence, { children: slides.map((s, i) => (_jsxs(Slide, { "$active": slider === i, children: [_jsx(MobileImageContainer, { children: _jsx(MotionConfig, { transition: {
                                                 duration: 0,
                                             }, children: _jsx(ImageContainerInner, { children: mobileGraphics[i] }) }) }), _jsx(ModalContent, { style: { gap: 8, paddingBottom: 0 }, children: s })] }, i))) }) })] }), _jsx(OrDivider, { children: _jsx(Dots, { children: slides.map((_s, i) => (_jsx(Dot, { "$active": slider === i, onClick: () => {

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

@@ -10,10 +10,10 @@ import PoweredByFooter from "../../ui/PoweredByFooter/index";
 import { AnimationContainer, ErrorIcon, InsetContainer, Link, Spinner, SuccessIcon } from "./styles";
 export default function Confirmation() {
     const locales = useLocales();
-    const { paymentState, onSuccess } = usePayContext();
+    const { paymentState, onSuccess, options } = usePayContext();
     const { payOrder } = paymentState;
     const isDeposit = payOrder?.mode === PayOrderMode.DEPOSIT;
-    const { title, uiState, txURL } = useMemo(() => getConfirmationState(payOrder, isDeposit, locales), [payOrder, isDeposit, locales]);
+    const { title, uiState, txURL } = useMemo(() => getConfirmationState(payOrder, isDeposit, locales, options?.optimisticConfirmation), [payOrder, isDeposit, locales, options?.optimisticConfirmation]);
     useEffect(() => {
         if (uiState === "success") {
             onSuccess();
@@ -21,7 +21,7 @@ export default function Confirmation() {
     }, [uiState, onSuccess]);
     return (_jsx(PageContent, { "$center": true, children: _jsxs(ModalContent, { "$center": true, style: { paddingBottom: 0 }, children: [_jsx(AnimationContainer, { children: _jsxs(InsetContainer, { children: [_jsx(Spinner, { "$status": uiState === "loading" }), _jsx(SuccessIcon, { "$status": uiState === "success" }), _jsx(ErrorIcon, { "$status": uiState === "error" })] }) }), _jsx(ModalH1, { children: title }), txURL && (_jsxs(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ExternalLinkIcon, { width: 14, height: 14, fillOpacity: 0.9 }), "view transaction"] })), _jsx(PoweredByFooter, {})] }) }));
 }
-function getConfirmationState(payOrder, isDeposit, locales) {
+function getConfirmationState(payOrder, isDeposit, locales, optimisticConfirmation) {
     if (!payOrder) {
         return {
             title: _jsxs(_Fragment, { children: [locales.confirmationScreen_awaiting, "..."] }),
@@ -29,6 +29,7 @@ function getConfirmationState(payOrder, isDeposit, locales) {
         };
     }
     const payment = payOrder.payment;
+    const confirmOptimistically = optimisticConfirmation && !isDeposit;
     const sourceTxURL = payment?.src.chain_id && payOrder.deposit_tx_hash
         ? getChainExplorerTxUrl(payment.src.chain_id, payOrder.deposit_tx_hash)
         : undefined;
@@ -41,15 +42,15 @@ function getConfirmationState(payOrder, isDeposit, locales) {
     if (payOrder.status === PayOrderStatus.AWAITING_CONFIRMATION ||
         payOrder.status === PayOrderStatus.OPTIMISTIC_CONFIRMED) {
         return {
-            title: isDeposit ? _jsxs(_Fragment, { children: [locales.awaitingConfirmation, "..."] }) : locales.confirmationScreen_completed,
-            uiState: isDeposit ? "loading" : "success",
+            title: confirmOptimistically ? locales.confirmationScreen_completed : _jsxs(_Fragment, { children: [locales.awaitingConfirmation, "..."] }),
+            uiState: confirmOptimistically ? "success" : "loading",
             txURL: sourceTxURL,
         };
     }
     if (payOrder.status === PayOrderStatus.EXECUTING_ORDER) {
         return {
-            title: isDeposit ? _jsxs(_Fragment, { children: [locales.confirmationScreen_executing, "..."] }) : locales.confirmationScreen_completed,
-            uiState: isDeposit ? "loading" : "success",
+            title: confirmOptimistically ? (locales.confirmationScreen_completed) : (_jsxs(_Fragment, { children: [locales.confirmationScreen_executing, "..."] })),
+            uiState: confirmOptimistically ? "success" : "loading",
             txURL: sourceTxURL,
         };
     }

package/dist/components/Pages/PayToAddress/copyable-info.d.ts

@@ -0,0 +1,8 @@
+import type { PaymentDetails } from "../../../types/payment-details";
+interface CopyableInfoProps {
+    details?: PaymentDetails;
+    remainingS: number;
+    totalS: number;
+}
+export declare function CopyableInfo({ details, remainingS, totalS }: CopyableInfoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Pages/PayToAddress/copyable-info.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { truncateAddress } from "@coin-voyage/shared/common";
+import useLocales from "../../../hooks/useLocales";
+import { CopyRowOrThrobber } from "../../ui/CopyableInfo";
+import { CountdownTimer } from "../../ui/CountDownTimer";
+import { CopyableInfoWrapper, CountdownWrap } from "./styles";
+export function CopyableInfo({ details, remainingS, totalS }) {
+    const isExpired = details?.expirationS != null && remainingS === 0;
+    const locales = useLocales();
+    return (_jsxs(CopyableInfoWrapper, { children: [_jsx(CopyRowOrThrobber, { title: locales.sendExactly, value: details?.amount?.toString(), smallText: details?.ticker, disabled: isExpired }), _jsx(CopyRowOrThrobber, { title: locales.depositAddress, value: details?.depositAddress, valueText: details?.depositAddress && truncateAddress(details.depositAddress), disabled: isExpired }), _jsx(CountdownWrap, { children: _jsx(CountdownTimer, { remainingS: remainingS, totalS: totalS }) })] }));
+}

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

@@ -0,0 +1 @@
+export default function PayToAddress(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PayOrderMode } from "@coin-voyage/shared/types";
+import { useCallback, useEffect, useMemo } from "react";
+import { AlertIcon } from "../../../assets/icons";
+import { useCountdown } from "../../../hooks/useCountdown";
+import { useDepositAddressQuery } from "../../../hooks/useDepositAddressQuery";
+import useLocales from "../../../hooks/useLocales";
+import { ROUTES } from "../../../types/routes";
+import usePayContext from "../../contexts/pay";
+import Button from "../../ui/Button";
+import CustomQRCode from "../../ui/CustomQRCode";
+import { ModalBody, ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
+import PoweredByFooter from "../../ui/PoweredByFooter";
+import SelectAnotherMethod from "../../ui/SelectAnotherMethod";
+import { Spinner } from "../../ui/Spinner";
+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, {})] }));
+}
+function PayToAddressView() {
+    const { paymentState, triggerResize } = usePayContext();
+    const { payToAddressChain, payToAddressCurrency } = paymentState;
+    const { data: paymentDetails, isLoading, isError, } = useDepositAddressQuery({
+        enabled: payToAddressCurrency != undefined,
+    });
+    if (isError) {
+        return payToAddressChain ? _jsx(DepositFailed, {}) : null;
+    }
+    if (isLoading || !paymentDetails) {
+        return _jsx(DepositAddressLoading, {});
+    }
+    return (_jsx(DepositAddressInfo, { details: paymentDetails, triggerResize: triggerResize, isDeposit: paymentState.payOrder?.mode === PayOrderMode.DEPOSIT }));
+}
+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();
+    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 })] }));
+}
+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 }) }));
+    }
+    return (_jsx(QRWrap, { children: _jsx(CustomQRCode, { value: depositAddress, image: logoElement }) }));
+}
+function DepositFailed() {
+    const locales = useLocales();
+    const { setRoute, paymentState } = usePayContext();
+    const { setPayToAddressChain, setPayToAddressCurrency } = paymentState;
+    const onSelectAnotherMethod = useCallback(() => {
+        setPayToAddressChain(undefined);
+        setPayToAddressCurrency(undefined);
+        setRoute(ROUTES.SELECT_PAY_TO_ADDRESS_CHAIN);
+    }, [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 })] }));
+}

package/dist/components/Pages/PayToAddress/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const ShowQRWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ShowQRIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const QRWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CopyableInfoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CountdownWrap: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+export const ShowQRWrap = styled.div `
+  display: flex;
+  justify-content: center;
+  color: var(--ck-primary-button-color);
+`;
+export const ShowQRIcon = styled.div `
+  width: 20px;
+`;
+export const LogoWrap = styled.div `
+  position: relative;
+  width: 64px;
+  height: 64px;
+`;
+export const LogoRow = styled.div `
+  padding: 32px 0;
+  height: 128px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+`;
+export const QRWrap = styled.div `
+  margin: 0 auto;
+  width: 280px;
+`;
+export const CopyableInfoWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  gap: 0;
+`;
+export const CountdownWrap = styled.div `
+  margin-top: 24px;
+  height: 16px;
+`;

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

@@ -3,7 +3,7 @@ import { useAccount } from "@coin-voyage/crypto/hooks";
 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 { useCallback, useEffect, useMemo, useState } from "react";
 import { useChainId, useSwitchChain } from "wagmi";
 import { chainToLogo } from "../../../assets/chains";
 import { AlertIcon, RetryIconCircle } from "../../../assets/icons";
@@ -25,7 +25,7 @@ var PayState;
 })(PayState || (PayState = {}));
 export default function PayWithToken() {
     const { triggerResize, paymentState, setRoute, log, allowedWallets } = usePayContext();
-    const { selectedTokenOption, payWithToken, payOrder } = paymentState;
+    const { selectedCurrencyOption, payFromWallet, payOrder } = paymentState;
     const { account } = useAccount();
     const [payState, setPayState] = useState(PayState.RequestingPayment);
     const locales = useLocales();
@@ -34,8 +34,8 @@ export default function PayWithToken() {
     assert(payOrder !== undefined, "Pay order must be defined");
     const isExpired = payOrder.status === PayOrderStatus.EXPIRED;
     const isDeposit = payOrder.mode === PayOrderMode.DEPOSIT;
-    const chainType = getChainTypeByChainId(paymentState.selectedTokenOption?.chain_id);
-    const trySwitchingChain = async (option, forceSwitch = false) => {
+    const chainType = getChainTypeByChainId(paymentState.selectedCurrencyOption?.chain_id);
+    const trySwitchingChain = useCallback(async (option, forceSwitch = false) => {
         if (walletChainId === option.chain_id && !forceSwitch)
             return true;
         try {
@@ -46,24 +46,24 @@ export default function PayWithToken() {
             console.error("Failed to switch chain", e);
             return false;
         }
-    };
-    const ensureCorrectChain = async (token) => {
+    }, [walletChainId, switchChainAsync]);
+    const ensureCorrectChain = useCallback(async (token) => {
         if (chainType !== ChainType.EVM)
             return true;
         setPayState(PayState.SwitchingChain);
         return trySwitchingChain(token);
-    };
-    const executePayment = async (token) => {
-        const txHash = await payWithToken(token);
+    }, [chainType, trySwitchingChain]);
+    const executePayment = useCallback(async (token) => {
+        const txHash = await payFromWallet(token);
         if (!txHash)
             throw new Error("Payment rejected");
-    };
+    }, [payFromWallet]);
     const isRestricted = useMemo(() => {
         if (allowedWallets === null)
             return false;
         return !allowedWallets.some((w) => w.address === account.address && w.chainType === account.chainType && w.allowed);
     }, [allowedWallets, account]);
-    const handleTransfer = async (token) => {
+    const handleTransfer = useCallback(async (token) => {
         if (isRestricted)
             return;
         if (!(await ensureCorrectChain(token))) {
@@ -87,15 +87,16 @@ export default function PayWithToken() {
             setPayState(PayState.RequestCancelled);
             log("Failed to pay with token", e);
         }
-    };
+    }, [isRestricted, ensureCorrectChain, executePayment, trySwitchingChain, setPayState, setRoute, log]);
     useEffect(() => {
-        if (!selectedTokenOption)
+        if (!selectedCurrencyOption)
             return;
         const timeoutId = setTimeout(() => {
-            handleTransfer(selectedTokenOption);
+            handleTransfer(selectedCurrencyOption);
         }, 100);
         return () => clearTimeout(timeoutId);
-    }, [selectedTokenOption]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedCurrencyOption]);
     useEffect(() => {
         triggerResize();
     }, [payState, triggerResize]);
@@ -104,11 +105,11 @@ export default function PayWithToken() {
             paymentState.copyDepositPayOrder();
             setRoute(ROUTES.SELECT_TOKEN);
         }
-        else if (selectedTokenOption) {
-            handleTransfer(selectedTokenOption);
+        else if (selectedCurrencyOption) {
+            handleTransfer(selectedCurrencyOption);
         }
     };
-    return (_jsxs(PageContent, { children: [_jsx(LoadingContainer, { children: _jsxs(AnimationContainer, { "$shake": payState === PayState.RequestCancelled, "$circle": true, children: [_jsx(AnimatePresence, { children: payState === PayState.RequestCancelled || (isExpired && isDeposit) ? (_jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: onRetry, children: _jsx(RetryIconContainer, { children: _jsx(Tooltip, { open: payState === PayState.RequestCancelled, message: locales.tryAgainQuestion, xOffset: -6, children: _jsx(RetryIconCircle, {}) }) }) })) : (_jsx(ChainLogoContainer, { children: selectedTokenOption && chainToLogo[selectedTokenOption.chain_id] }, "ChainLogoContainer")) }), _jsx(AnimatePresence, { children: _jsx(CircleSpinner, { logo: _jsx("img", { src: selectedTokenOption?.image_uri, alt: selectedTokenOption?.ticker }, selectedTokenOption?.image_uri), loading: payState === PayState.RequestingPayment && !isExpired, unavailable: false }, "CircleSpinner") })] }) }), !isExpired ? (_jsxs(ModalContent, { children: [payState === PayState.RequestCancelled && (_jsxs(_Fragment, { children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.injectionScreen_rejected_h1] }), _jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] })), payState === PayState.SwitchingChain && _jsx(ModalH1, { children: locales.switchNetworkScreen_heading }), payState === PayState.RequestingPayment && (_jsxs(_Fragment, { children: [_jsx(ModalH1, { children: locales.requesting_payment_h1 }), _jsx(ModalBody, { children: locales.requesting_payment_p })] })), payState === PayState.RequestSuccessful && _jsx(ModalH1, { children: locales.injectionScreen_connected_h1 })] })) : (_jsxs(ModalContent, { children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] }))] }));
+    return (_jsxs(PageContent, { children: [_jsx(LoadingContainer, { children: _jsxs(AnimationContainer, { "$shake": payState === PayState.RequestCancelled, "$circle": true, children: [_jsx(AnimatePresence, { children: payState === PayState.RequestCancelled || (isExpired && isDeposit) ? (_jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: onRetry, children: _jsx(RetryIconContainer, { children: _jsx(Tooltip, { open: payState === PayState.RequestCancelled, message: locales.tryAgainQuestion, xOffset: -6, children: _jsx(RetryIconCircle, {}) }) }) })) : (_jsx(ChainLogoContainer, { children: selectedCurrencyOption && chainToLogo[selectedCurrencyOption.chain_id] }, "ChainLogoContainer")) }), _jsx(AnimatePresence, { children: _jsx(CircleSpinner, { logo: _jsx("img", { src: selectedCurrencyOption?.image_uri, alt: selectedCurrencyOption?.ticker }, selectedCurrencyOption?.image_uri), loading: payState === PayState.RequestingPayment && !isExpired, unavailable: false }, "CircleSpinner") })] }) }), !isExpired ? (_jsxs(ModalContent, { children: [payState === PayState.RequestCancelled && (_jsxs(_Fragment, { children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.injectionScreen_rejected_h1] }), _jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] })), payState === PayState.SwitchingChain && _jsx(ModalH1, { children: locales.switchNetworkScreen_heading }), payState === PayState.RequestingPayment && (_jsxs(_Fragment, { children: [_jsx(ModalH1, { children: locales.requesting_payment_h1 }), _jsx(ModalBody, { children: locales.requesting_payment_p })] })), payState === PayState.RequestSuccessful && _jsx(ModalH1, { children: locales.injectionScreen_connected_h1 })] })) : (_jsxs(ModalContent, { children: [_jsxs(ModalH1, { "$warning": true, children: [_jsx(AlertIcon, {}), locales.payWithTokenScreen_expired_h1] }), _jsx(ModalBody, { children: locales.payWithTokenScreen_expired_p })] }))] }));
 }
 const LoadingContainer = styled(motion.div) `
   display: flex;

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

@@ -0,0 +1 @@
+export default function SelectChain(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAccount, useAccountDisconnect } from "@coin-voyage/crypto/hooks";
+import { useIsMobile } from "@coin-voyage/shared/hooks";
+import { useChainOptions } from "../../../hooks/useChainOptions";
+import { ROUTES } from "../../../types/routes";
+import usePayContext from "../../contexts/pay";
+import { PageContent } from "../../ui/Modal/styles";
+import OptionsList from "../../ui/OptionsList";
+import { OrderHeader } from "../../ui/OrderHeader";
+import PoweredByFooter from "../../ui/PoweredByFooter";
+export default function SelectChain() {
+    const isMobile = useIsMobile();
+    const { setRoute, paymentState } = usePayContext();
+    const disconnect = useAccountDisconnect();
+    const { account } = useAccount({
+        selectedWallet: paymentState.selectedWallet,
+        chainType: paymentState.connectorChainType,
+    });
+    const handleClick = (chainType) => {
+        disconnect(account);
+        paymentState.setConnectorChainType(chainType);
+        setRoute(ROUTES.CONNECTORS);
+    };
+    const { options } = useChainOptions({
+        account,
+        mode: paymentState.payOrder?.mode,
+        onClick: handleClick,
+    });
+    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, {}), _jsx(OptionsList, { requiredSkeletons: isMobile ? 3 : 4, options: options }), _jsx(PoweredByFooter, {})] }));
+}

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

@@ -1,29 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAccount, useAccountDisconnect } from "@coin-voyage/crypto/hooks";
 import { useIsMobile } from "@coin-voyage/shared/hooks";
-import { useMethodOptions } from "../../../hooks/useMethodOptions";
-import { ROUTES } from "../../../types/routes";
 import usePayContext from "../../contexts/pay";
 import { PageContent } from "../../ui/Modal/styles";
 import OptionsList from "../../ui/OptionsList";
 import { OrderHeader } from "../../ui/OrderHeader";
 import PoweredByFooter from "../../ui/PoweredByFooter";
+import { useMethodOptions } from "../../../hooks/useMethodOptions";
 export default function SelectMethod() {
     const isMobile = useIsMobile();
-    const { setRoute, paymentState } = usePayContext();
+    const { paymentState } = usePayContext();
     const disconnect = useAccountDisconnect();
     const { account } = useAccount({
         selectedWallet: paymentState.selectedWallet,
         chainType: paymentState.connectorChainType,
     });
-    const handleClick = (chainType) => {
-        if (account)
-            disconnect(account);
-        paymentState.setConnectorChainType(chainType);
-        setRoute(ROUTES.CONNECTORS);
+    const handleClick = () => {
+        disconnect(account);
     };
     const { options } = useMethodOptions({
-        account,
         mode: paymentState.payOrder?.mode,
         onClick: handleClick,
     });

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

@@ -0,0 +1 @@
+export default function SelectPayToAddressChain(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import usePayContext from "../../contexts/pay";
+import { PageContent } from "../../ui/Modal/styles";
+import { OrderHeader } from "../../ui/OrderHeader";
+import OptionsList from "../../ui/OptionsList";
+import PoweredByFooter from "../../ui/PoweredByFooter";
+import { usePayToAddressChainOptions } from "../../../hooks/usePayToAddressChainOptions";
+export default function SelectPayToAddressChain() {
+    const { paymentState } = usePayContext();
+    const { payOrder } = paymentState;
+    const fiatAmount = payOrder?.fulfillment.amount.value_usd;
+    const { options, isLoading } = usePayToAddressChainOptions({ fiatAmount });
+    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, { minified: true }), _jsx(OptionsList, { isLoading: isLoading, requiredSkeletons: 4, options: options }), _jsx(PoweredByFooter, {})] }));
+}

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

@@ -0,0 +1 @@
+export default function SelectPayToAddressToken(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageContent } from "../../ui/Modal/styles";
+import { OrderHeader } from "../../ui/OrderHeader";
+import OptionsList from "../../ui/OptionsList";
+import PoweredByFooter from "../../ui/PoweredByFooter";
+import { usePayToAddressTokens } from "../../../hooks/usePayToAddressTokens";
+export default function SelectPayToAddressToken() {
+    const { options, isLoading } = usePayToAddressTokens();
+    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, { minified: true }), _jsx(OptionsList, { isLoading: isLoading, requiredSkeletons: 4, options: options }), _jsx(PoweredByFooter, {})] }));
+}