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

package/dist/hooks/usePayWithToken.js

@@ -3,23 +3,24 @@ import { PaymentRail, StepKind, } from "@coin-voyage/shared/types";
 import { assert } from "@coin-voyage/shared/utils";
 import { useBackendApi } from "../components/contexts/api";
 import { fetchPaymentDetails } from "../lib/api/payment-details";
+import { isCryptoPaymentData, isDepositStepData } from "@coin-voyage/shared/payment";
 async function executeWalletStep({ actions, paymentData, senderAddr, step, }) {
     if (step.kind === StepKind.KIND_TRANSACTION) {
-        assert(Boolean(step.data?.crypto), "Transaction step is missing executable wallet data");
+        assert(isCryptoPaymentData(step.data), "Transaction step is missing executable wallet data");
         return actions.execute({
             from: senderAddr,
-            paymentData: step.data?.crypto,
+            paymentData: step.data,
         });
     }
     assert(step.kind === StepKind.KIND_DEPOSIT, "Unsupported wallet payment step");
-    assert(Boolean(step.deposit_address), "Deposit step is missing a deposit address");
+    assert(isDepositStepData(step.data), "Deposit step is missing a deposit address");
     return actions.execute({
         amount: BigInt(paymentData.src.currency_amount.raw_amount),
         from: senderAddr,
-        to: step.deposit_address,
+        to: step.data.deposit_address,
         chainId: paymentData.src.chain_id,
-        token: paymentData.src.address
-            ? { address: paymentData.src.address, decimals: paymentData.src.decimals }
+        token: step.data.currency.address
+            ? { address: step.data.currency.address, decimals: paymentData.src.decimals }
             : undefined,
     });
 }

package/dist/hooks/usePaymentLifecycle.d.ts

@@ -4,13 +4,17 @@ type PaymentLifecycleHandlers = {
     onPaymentCompleted: ((event: PayOrderCompletedEvent) => void) | undefined;
     onPaymentBounced: ((event: PayOrderRefundedEvent) => void) | undefined;
 };
+type PaymentLifecycleOptions = {
+    optimisticConfirmation?: boolean;
+};
 /**
  *  Handles payment lifecycle events of an order, such as started, completed, and bounced.
  * @param {PayOrder | undefined} order The pay order to monitor.
  * @param {PaymentLifecycleHandlers} handlers Handlers for payment lifecycle events.
+ * @param {PaymentLifecycleOptions} options Lifecycle behavior flags.
  * @returns
  */
-export declare function usePaymentLifecycle(order: PayOrder | undefined, handlers: PaymentLifecycleHandlers): {
+export declare function usePaymentLifecycle(order: PayOrder | undefined, handlers: PaymentLifecycleHandlers, options?: PaymentLifecycleOptions): {
     isStarted: boolean;
     isFinalized: boolean;
     order: PayOrder | undefined;

package/dist/hooks/usePaymentLifecycle.js

@@ -1,76 +1,82 @@
 import { PayOrderMode, PayOrderStatus, } from "@coin-voyage/shared/types";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
+const COMPLETED_STATES = [PayOrderStatus.COMPLETED, PayOrderStatus.REFUNDED];
+const STARTED_STATES = [
+    ...COMPLETED_STATES,
+    PayOrderStatus.PARTIAL_PAYMENT,
+    PayOrderStatus.AWAITING_CONFIRMATION,
+    PayOrderStatus.OPTIMISTIC_CONFIRMED,
+    PayOrderStatus.EXECUTING_ORDER,
+];
 /**
  *  Handles payment lifecycle events of an order, such as started, completed, and bounced.
  * @param {PayOrder | undefined} order The pay order to monitor.
  * @param {PaymentLifecycleHandlers} handlers Handlers for payment lifecycle events.
+ * @param {PaymentLifecycleOptions} options Lifecycle behavior flags.
  * @returns
  */
-export function usePaymentLifecycle(order, handlers) {
+export function usePaymentLifecycle(order, handlers, options = {}) {
     const sentStart = useRef(false);
     const sentComplete = useRef(false);
+    const currentOrderId = useRef(undefined);
     const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = handlers;
+    const { optimisticConfirmation = true } = options;
+    const orderId = order?.id;
     const orderStatus = order?.status;
-    const isSale = order?.mode === PayOrderMode.SALE;
-    const completedStates = useMemo(() => [PayOrderStatus.COMPLETED, PayOrderStatus.REFUNDED], []);
-    const isStarted = useMemo(() => {
-        if (!orderStatus)
-            return false;
-        const startedStatus = [
-            ...completedStates,
-            PayOrderStatus.PARTIAL_PAYMENT,
-            PayOrderStatus.AWAITING_CONFIRMATION,
-            PayOrderStatus.OPTIMISTIC_CONFIRMED,
-            PayOrderStatus.EXECUTING_ORDER,
-        ];
-        return startedStatus.includes(orderStatus);
-    }, [orderStatus, completedStates]);
-    const isFinalized = useMemo(() => {
-        if (!orderStatus)
-            return false;
-        const finalizedStatus = [...completedStates];
-        if (isSale) {
-            finalizedStatus.push(PayOrderStatus.OPTIMISTIC_CONFIRMED, PayOrderStatus.EXECUTING_ORDER);
-        }
-        return finalizedStatus.includes(orderStatus);
-    }, [orderStatus, isSale, completedStates]);
+    const orderMetadata = order?.metadata;
+    const payment = order?.payment;
+    const allowOptimisticCompletion = optimisticConfirmation && order?.mode === PayOrderMode.SALE;
+    const isStarted = !!orderStatus && STARTED_STATES.includes(orderStatus);
+    const isFinalized = !!orderStatus &&
+        (COMPLETED_STATES.includes(orderStatus) ||
+            (allowOptimisticCompletion &&
+                (orderStatus === PayOrderStatus.OPTIMISTIC_CONFIRMED || orderStatus === PayOrderStatus.EXECUTING_ORDER)));
+    useEffect(() => {
+        if (!orderId)
+            return;
+        if (currentOrderId.current === orderId)
+            return;
+        currentOrderId.current = orderId;
+        sentStart.current = false;
+        sentComplete.current = false;
+    }, [orderId]);
     useEffect(() => {
-        if (sentStart.current || !order?.payment || !isStarted)
+        if (sentStart.current || !orderId || !payment || !orderStatus || !isStarted)
             return;
         sentStart.current = true;
         onPaymentStarted?.({
             type: "payorder_confirming",
-            payorder_id: order.id,
-            status: order.status,
-            metadata: order.metadata,
-            payment_data: order.payment,
+            payorder_id: orderId,
+            status: orderStatus,
+            metadata: orderMetadata,
+            payment_data: payment,
         });
-    }, [order, isStarted, onPaymentStarted]);
+    }, [isStarted, onPaymentStarted, orderId, orderMetadata, orderStatus, payment]);
     useEffect(() => {
-        if (sentComplete.current || !order?.payment || !isFinalized)
+        if (sentComplete.current || !orderId || !payment || !orderStatus || !isFinalized)
             return;
         sentComplete.current = true;
-        if (order.status === PayOrderStatus.REFUNDED) {
+        if (orderStatus === PayOrderStatus.REFUNDED) {
             onPaymentBounced?.({
                 type: "payorder_refunded",
-                payorder_id: order.id,
-                status: order.status,
-                metadata: order.metadata,
-                payment_data: order.payment,
-                refund_address: order.payment.refund_address ?? "",
-                refund_tx_hash: order.payment.refund_tx_hash ?? "",
+                payorder_id: orderId,
+                status: orderStatus,
+                metadata: orderMetadata,
+                payment_data: payment,
+                refund_address: payment.refund_address ?? "",
+                refund_tx_hash: payment.refund_tx_hash ?? "",
             });
             return;
         }
         onPaymentCompleted?.({
             type: "payorder_completed",
-            payorder_id: order.id,
-            status: order.status,
-            metadata: order.metadata,
-            payment_data: order.payment,
-            source_tx_hash: order.payment.source_tx_hash ?? "",
-            destination_tx_hash: order.payment.destination_tx_hash ?? "",
+            payorder_id: orderId,
+            status: orderStatus,
+            metadata: orderMetadata,
+            payment_data: payment,
+            source_tx_hash: payment.source_tx_hash ?? "",
+            destination_tx_hash: payment.destination_tx_hash ?? "",
         });
-    }, [order, isFinalized, onPaymentCompleted, onPaymentBounced]);
+    }, [isFinalized, onPaymentBounced, onPaymentCompleted, orderId, orderMetadata, orderStatus, payment]);
     return { isStarted, isFinalized, order };
 }

package/dist/hooks/usePaymentState.d.ts

@@ -5,10 +5,11 @@ import { CurrencyAndQuoteID } from "../types/state";
 import { usePayOrderQuotes } from "./usePayOrderQuotes";
 /** Loads a PayOrder + manages the corresponding modal. */
 export interface PaymentState {
-    setPayId: (id: string | null) => Promise<void>;
-    createDepositPayOrder: (params: PayOrderParams, onError?: (message: string) => void) => Promise<void>;
+    setPayId: (id: string | null) => Promise<PayOrder | undefined>;
+    createDepositPayOrder: (params: PayOrderParams, onError?: (message: string) => void) => Promise<PayOrder | undefined>;
     copyDepositPayOrder: () => Promise<void>;
     clearUserSelection: () => void;
+    resetPaymentState: () => void;
     payOrder: PayOrder | undefined;
     paymentMethod: PaymentMethod | undefined;
     setPaymentMethod: React.Dispatch<React.SetStateAction<PaymentMethod | undefined>>;
@@ -31,7 +32,7 @@ export interface PaymentState {
 }
 export declare function usePaymentState({ payOrder, setPayOrder, setRoute, log, }: {
     payOrder: PayOrder | undefined;
-    setPayOrder: (o: PayOrder) => void;
+    setPayOrder: (o: PayOrder | undefined) => void;
     setRoute: React.Dispatch<React.SetStateAction<ROUTE>>;
     log: (...args: unknown[]) => void;
 }): PaymentState;

package/dist/hooks/usePaymentState.js

@@ -15,7 +15,8 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
     const api = useBackendApi();
     const [connectorChainType, setConnectorChainType] = useState();
     const [selectedWallet, setSelectedWallet] = useState();
-    const lastRequestedIdRef = useRef(null);
+    const latestRequestedIdRef = useRef(null);
+    const inFlightPayOrderIdsRef = useRef(new Set());
     const { account: senderAccount } = useAccount({
         selectedWallet,
         chainType: connectorChainType,
@@ -74,13 +75,23 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
     const setPayOrderId = useCallback(async (payOrderId) => {
         if (!payOrderId)
             return;
-        if (lastRequestedIdRef.current === payOrderId)
+        if (payOrder?.id === payOrderId)
             return;
-        lastRequestedIdRef.current = payOrderId;
-        const order = await fetchPayOrder(payOrderId);
-        if (order)
-            setPayOrder(order);
-    }, [fetchPayOrder, setPayOrder]);
+        if (inFlightPayOrderIdsRef.current.has(payOrderId))
+            return;
+        latestRequestedIdRef.current = payOrderId;
+        inFlightPayOrderIdsRef.current.add(payOrderId);
+        try {
+            const order = await fetchPayOrder(payOrderId);
+            if (order && latestRequestedIdRef.current === payOrderId) {
+                setPayOrder(order);
+            }
+            return order;
+        }
+        finally {
+            inFlightPayOrderIdsRef.current.delete(payOrderId);
+        }
+    }, [fetchPayOrder, payOrder?.id, setPayOrder]);
     const copyDepositPayOrder = useCallback(async () => {
         if (!payOrder?.id) {
             log(`No payOrder to copy`);
@@ -124,10 +135,13 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
             }
             const { data: payOrder, error } = await api.createDepositPayOrder(params);
             if (!payOrder || error) {
+                const errorMessage = error?.message || "Unable to create payment order";
+                onError?.(errorMessage);
                 log(`[CREATE DEPOSIT] Error creating payOrder: ${JSON.stringify(error)}`);
                 return;
             }
             setPayOrder(payOrder);
+            return payOrder;
         }
         catch (e) {
             if (e instanceof Error)
@@ -142,11 +156,24 @@ export function usePaymentState({ payOrder, setPayOrder, setRoute, log, }) {
         setSelectedWallet(undefined);
         setRoute(ROUTE.SELECT_METHOD);
     }, [setRoute]);
+    const resetPaymentState = useCallback(() => {
+        latestRequestedIdRef.current = null;
+        inFlightPayOrderIdsRef.current.clear();
+        setPayOrder(undefined);
+        setPaymentMethod(undefined);
+        setSelectedCurrencyOption(undefined);
+        setConnectorChainType(undefined);
+        setSelectedWallet(undefined);
+        setPayToAddressChainId(undefined);
+        setPayToAddressCurrency(undefined);
+        setRoute(ROUTE.SELECT_METHOD);
+    }, [setPayOrder, setRoute]);
     return {
         setPayId: setPayOrderId,
         createDepositPayOrder,
         copyDepositPayOrder,
         clearUserSelection,
+        resetPaymentState,
         payOrder,
         paymentMethod,
         setPaymentMethod,

package/dist/hooks/useTokenList.d.ts

@@ -0,0 +1,182 @@
+import type { ChainId } from "@coin-voyage/shared/types";
+export declare function useTokenList(chainId?: ChainId): {
+    tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
+    chains: import("@coin-voyage/shared/currency").ChainMetadata[];
+    tokens: import("@coin-voyage/shared/currency").Token[];
+    data: import("@coin-voyage/shared/currency").TokenListResponse;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
+} | {
+    tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
+    chains: import("@coin-voyage/shared/currency").ChainMetadata[];
+    tokens: import("@coin-voyage/shared/currency").Token[];
+    data: import("@coin-voyage/shared/currency").TokenListResponse;
+    error: null;
+    isError: false;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: false;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
+} | {
+    tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
+    chains: import("@coin-voyage/shared/currency").ChainMetadata[];
+    tokens: import("@coin-voyage/shared/currency").Token[];
+    data: undefined;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
+} | {
+    tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
+    chains: import("@coin-voyage/shared/currency").ChainMetadata[];
+    tokens: import("@coin-voyage/shared/currency").Token[];
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoading: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
+} | {
+    tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
+    chains: import("@coin-voyage/shared/currency").ChainMetadata[];
+    tokens: import("@coin-voyage/shared/currency").Token[];
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isLoading: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
+} | {
+    tokenList: import("@coin-voyage/shared/currency").TokenListResponse | undefined;
+    chains: import("@coin-voyage/shared/currency").ChainMetadata[];
+    tokens: import("@coin-voyage/shared/currency").Token[];
+    data: import("@coin-voyage/shared/currency").TokenListResponse;
+    isError: false;
+    error: null;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: true;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@coin-voyage/shared/currency").TokenListResponse, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@coin-voyage/shared/currency").TokenListResponse>;
+};

package/dist/hooks/useTokenList.js

@@ -0,0 +1,24 @@
+import { fetchTokenList, getChains, tokensByChainId } from "@coin-voyage/shared/currency";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+const TOKEN_LIST_QUERY_KEY = ["token-list"];
+const TOKEN_LIST_STALE_TIME = 1000 * 60 * 15;
+export function useTokenList(chainId) {
+    const query = useQuery({
+        queryKey: TOKEN_LIST_QUERY_KEY,
+        queryFn: () => fetchTokenList(),
+        staleTime: TOKEN_LIST_STALE_TIME,
+    });
+    const chains = useMemo(() => getChains(query.data?.chains ?? []), [query.data]);
+    const tokens = useMemo(() => {
+        if (!query.data || !chainId)
+            return [];
+        return tokensByChainId(query.data.chains, chainId);
+    }, [query.data, chainId]);
+    return {
+        ...query,
+        tokenList: query.data,
+        chains,
+        tokens,
+    };
+}

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, chainId: quote.chain_id }, quote.ticker + quote.chain_id),
+                _jsx(TokenChainLogo, { src: quote.image_uri, alt: `${quote.ticker} logo`, chainId: quote.chain_id }, `${quote.ticker}-${quote.chain_id}`),
             ],
             onClick: () => {
                 setSelectedCurrencyOption(quote);

package/dist/providers/paykit-provider.js

@@ -62,6 +62,10 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
     const [resize, onResize] = useState(0);
     const onOpenRef = useRef(undefined);
     const onCloseRef = useRef(undefined);
+    const openRef = useRef(false);
+    useEffect(() => {
+        openRef.current = open;
+    }, [open]);
     const setOnOpen = useCallback((fn) => {
         onOpenRef.current = fn;
     }, []);
@@ -101,20 +105,23 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
         setErrorMessage(null);
     }, [route, open]);
     const resetAfterClose = useCallback(() => {
-        if (paymentCompleted && modalOptions?.resetOnSuccess) {
-            setPaymentCompleted(false);
-            paymentStateRef.current.clearUserSelection();
-        }
+        if (!paymentCompleted || !modalOptions?.resetOnSuccess)
+            return;
+        setPaymentCompleted(false);
+        paymentStateRef.current.resetPaymentState();
     }, [modalOptions?.resetOnSuccess, paymentCompleted]);
     const setOpen = useCallback((nextOpen) => {
+        if (openRef.current === nextOpen) {
+            return;
+        }
+        openRef.current = nextOpen;
         setOpenState(nextOpen);
         if (nextOpen) {
             onOpenRef.current?.();
             return;
         }
-        resetAfterClose();
         onCloseRef.current?.();
-    }, [resetAfterClose]);
+    }, []);
     const onSuccess = useCallback(() => {
         setPaymentCompleted(true);
         if (modalOptions?.closeOnSuccess) {
@@ -247,7 +254,7 @@ function PayKitProviderInternal({ theme = "auto", mode = "auto", customTheme, op
         paymentState,
         allowedWallets,
     };
-    return (_jsx(PayContext.Provider, { value: value, children: _jsxs(StyledThemeProvider, { theme: defaultTheme, children: [children, _jsx(PayModal, {})] }) }));
+    return (_jsx(PayContext.Provider, { value: value, children: _jsxs(StyledThemeProvider, { theme: defaultTheme, children: [children, _jsx(PayModal, { onExited: resetAfterClose })] }) }));
 }
 // === Helper functions ===
 const NON_FINAL_PAY_ORDER_STATUSES = [PayOrderStatus.PENDING, PayOrderStatus.AWAITING_PAYMENT, PayOrderStatus.EXPIRED];

package/dist/types/routes.d.ts

@@ -1,17 +1,18 @@
 export declare enum ROUTE {
     SELECT_METHOD = 0,
-    ADDRESS_CHAIN_SELECT = 1,
-    ADDRESS_TOKEN_SELECT = 2,
-    PAY_TO_ADDRESS = 3,
-    WALLET_CHAIN_SELECT = 4,
-    WALLET_TOKEN_SELECT = 5,
-    CONNECTORS = 6,
-    MOBILECONNECTORS = 7,
-    CONNECT = 8,
-    WALLET_PAYMENT = 9,
-    CARD_PAYMENT = 10,
-    CONFIRMATION = 11,
-    ONBOARDING = 12,
-    ABOUT = 13,
-    DOWNLOAD = 14
+    PREPARING_PAYMENT = 1,
+    ADDRESS_CHAIN_SELECT = 2,
+    ADDRESS_TOKEN_SELECT = 3,
+    PAY_TO_ADDRESS = 4,
+    WALLET_CHAIN_SELECT = 5,
+    WALLET_TOKEN_SELECT = 6,
+    CONNECTORS = 7,
+    MOBILECONNECTORS = 8,
+    CONNECT = 9,
+    WALLET_PAYMENT = 10,
+    CARD_PAYMENT = 11,
+    CONFIRMATION = 12,
+    ONBOARDING = 13,
+    ABOUT = 14,
+    DOWNLOAD = 15
 }

package/dist/types/routes.js

@@ -1,19 +1,20 @@
 export var ROUTE;
 (function (ROUTE) {
     ROUTE[ROUTE["SELECT_METHOD"] = 0] = "SELECT_METHOD";
-    ROUTE[ROUTE["ADDRESS_CHAIN_SELECT"] = 1] = "ADDRESS_CHAIN_SELECT";
-    ROUTE[ROUTE["ADDRESS_TOKEN_SELECT"] = 2] = "ADDRESS_TOKEN_SELECT";
-    ROUTE[ROUTE["PAY_TO_ADDRESS"] = 3] = "PAY_TO_ADDRESS";
-    ROUTE[ROUTE["WALLET_CHAIN_SELECT"] = 4] = "WALLET_CHAIN_SELECT";
-    ROUTE[ROUTE["WALLET_TOKEN_SELECT"] = 5] = "WALLET_TOKEN_SELECT";
-    ROUTE[ROUTE["CONNECTORS"] = 6] = "CONNECTORS";
-    ROUTE[ROUTE["MOBILECONNECTORS"] = 7] = "MOBILECONNECTORS";
-    ROUTE[ROUTE["CONNECT"] = 8] = "CONNECT";
-    ROUTE[ROUTE["WALLET_PAYMENT"] = 9] = "WALLET_PAYMENT";
-    ROUTE[ROUTE["CARD_PAYMENT"] = 10] = "CARD_PAYMENT";
-    ROUTE[ROUTE["CONFIRMATION"] = 11] = "CONFIRMATION";
+    ROUTE[ROUTE["PREPARING_PAYMENT"] = 1] = "PREPARING_PAYMENT";
+    ROUTE[ROUTE["ADDRESS_CHAIN_SELECT"] = 2] = "ADDRESS_CHAIN_SELECT";
+    ROUTE[ROUTE["ADDRESS_TOKEN_SELECT"] = 3] = "ADDRESS_TOKEN_SELECT";
+    ROUTE[ROUTE["PAY_TO_ADDRESS"] = 4] = "PAY_TO_ADDRESS";
+    ROUTE[ROUTE["WALLET_CHAIN_SELECT"] = 5] = "WALLET_CHAIN_SELECT";
+    ROUTE[ROUTE["WALLET_TOKEN_SELECT"] = 6] = "WALLET_TOKEN_SELECT";
+    ROUTE[ROUTE["CONNECTORS"] = 7] = "CONNECTORS";
+    ROUTE[ROUTE["MOBILECONNECTORS"] = 8] = "MOBILECONNECTORS";
+    ROUTE[ROUTE["CONNECT"] = 9] = "CONNECT";
+    ROUTE[ROUTE["WALLET_PAYMENT"] = 10] = "WALLET_PAYMENT";
+    ROUTE[ROUTE["CARD_PAYMENT"] = 11] = "CARD_PAYMENT";
+    ROUTE[ROUTE["CONFIRMATION"] = 12] = "CONFIRMATION";
     // Other
-    ROUTE[ROUTE["ONBOARDING"] = 12] = "ONBOARDING";
-    ROUTE[ROUTE["ABOUT"] = 13] = "ABOUT";
-    ROUTE[ROUTE["DOWNLOAD"] = 14] = "DOWNLOAD";
+    ROUTE[ROUTE["ONBOARDING"] = 13] = "ONBOARDING";
+    ROUTE[ROUTE["ABOUT"] = 14] = "ABOUT";
+    ROUTE[ROUTE["DOWNLOAD"] = 15] = "DOWNLOAD";
 })(ROUTE || (ROUTE = {}));

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.3-beta.0",
+  "version": "2.4.4-beta.0",
   "private": false,
   "sideEffects": false,
   "author": "Lars <lars@coinvoyage.io>",
@@ -31,9 +31,6 @@
       ],
       "server": [
         "dist/server.d.ts"
-      ],
-      "client": [
-        "dist/client.d.ts"
       ]
     }
   },
@@ -63,8 +60,8 @@
     "@stripe/crypto": "0.0.4",
     "styled-components": "^5.3.11",
     "uuid": "13.0.0",
-    "@coin-voyage/shared": "2.4.3-beta.0",
-    "@coin-voyage/crypto": "2.4.3-beta.0"
+    "@coin-voyage/shared": "2.4.4-beta.1",
+    "@coin-voyage/crypto": "2.4.3"
   },
   "devDependencies": {
     "@types/qrcode": "1.5.5",

package/dist/utils/item.d.ts

@@ -1,5 +0,0 @@
-export interface AllowDeny<T> {
-    allow?: T[];
-    deny?: T[];
-}
-export declare const isItemAllowed: <T>(itemId: T, items?: AllowDeny<T>) => boolean;