@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/dist/esm/components/Pages/Swap/Withdraw/Processing/Processing.js

@@ -0,0 +1,339 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LinkWithIcon from '../../../../../components/Common/LinkWithIcon';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Widget } from '../../../../../components/Widget/Index';
+import SwapSummary from '../Summary';
+import LayerSwapApiClient, { BackendTransactionStatus, TransactionType, TransactionStatus } from '../../../../../lib/apiClients/layerSwapApiClient';
+import { truncateDecimals } from '../../../../../components/utils/RoundDecimals';
+import { SwapStatus } from '../../../../../Models/SwapStatus';
+import { SwapFailReasons } from '../../../../../Models/RangeError';
+import { Gauge } from './gauge';
+import { CircleCheck, Undo2 } from 'lucide-react';
+import Failed from '../Failed';
+import { ProgressStatus } from './types';
+import { useSwapTransactionStore } from '../../../../../stores/swapTransactionStore';
+import CountdownTimer from '../../../../../components/Common/CountDownTimer';
+import useSWR from 'swr';
+import { useIntercom } from 'react-use-intercom';
+import logError from '../../../../../lib/logError';
+import SubmitButton from '../../../../../components/Buttons/submitButton';
+import { posthog } from 'posthog-js';
+import Steps from './StepsComponent';
+const Processing = ({ swapBasicData, swapDetails, quote, refuel }) => {
+    const { boot, show, update, showNewMessages } = useIntercom();
+    const { setSwapTransaction, swapTransactions } = useSwapTransactionStore();
+    const [showSupportButton, setShowSupportButton] = React.useState(false);
+    const { source_network, destination_network, destination_token, } = swapBasicData;
+    const { fail_reason } = swapDetails;
+    const updateWithProps = () => update({ customAttributes: { swapId: swapDetails.id } });
+    const startIntercom = useCallback(() => {
+        boot();
+        show();
+        updateWithProps();
+    }, [boot, show, updateWithProps]);
+    const input_tx_explorer = source_network?.transaction_explorer_template;
+    const output_tx_explorer = destination_network?.transaction_explorer_template;
+    const swapInputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Input);
+    const storedWalletTransaction = swapTransactions?.[swapDetails?.id];
+    const transactionHash = swapInputTransaction?.transaction_hash || storedWalletTransaction?.hash;
+    const swapOutputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Output);
+    const swapRefuelTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Refuel);
+    const swapRefundTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Refund);
+    const apiClient = new LayerSwapApiClient();
+    const { data: inputTxStatusData } = useSWR((transactionHash && swapInputTransaction?.status !== BackendTransactionStatus.Completed) ? [source_network?.name, transactionHash] : null, ([network, tx_id]) => apiClient.GetTransactionStatus(network, tx_id), { dedupingInterval: 6000 });
+    const inputTxStatus = swapInputTransaction ? swapInputTransaction.status : inputTxStatusData?.data?.status.toLowerCase();
+    const loggedNotDetectedTxAt = useRef(null);
+    const handleSupportClick = useCallback(() => {
+        const transactionHash = swapInputTransaction?.transaction_hash || storedWalletTransaction?.hash;
+        const message = `Hi! My transaction (Swap ID: ${swapDetails.id}) has been processing for longer than expected. ${transactionHash ? `Transaction hash: ${transactionHash}` : ''} Could you please help me check the status?`;
+        boot();
+        update({
+            customAttributes: {
+                swapId: swapDetails.id,
+            }
+        });
+        showNewMessages(message);
+    }, [boot, show, update, swapDetails.id, swapInputTransaction, storedWalletTransaction]);
+    useEffect(() => {
+        if (inputTxStatus === TransactionStatus.Completed || inputTxStatus === TransactionStatus.Pending) {
+            if (swapDetails?.transactions?.find(t => t.type === TransactionType.Input) || !swapDetails) {
+                return;
+            }
+            if (Date.now() - (loggedNotDetectedTxAt.current || storedWalletTransaction.timestamp) > 60000) {
+                loggedNotDetectedTxAt.current = Date.now();
+                logError(`Transaction not detected in ${source_network.name}. Tx hash: \`${transactionHash}\`. Tx status: ${inputTxStatus}. Swap id: \`${swapDetails.id}\`. ${source_network.display_name} explorer: ${source_network?.transaction_explorer_template?.replace("{0}", transactionHash)} . LS explorer: https://layerswap.io/explorer/${storedWalletTransaction?.hash} `);
+            }
+        }
+    }, [swapDetails, storedWalletTransaction, source_network]);
+    useEffect(() => {
+        if (storedWalletTransaction?.status !== inputTxStatus)
+            setSwapTransaction(swapDetails?.id, inputTxStatus, storedWalletTransaction?.hash);
+    }, [inputTxStatus]);
+    useEffect(() => {
+        if (inputTxStatus === TransactionStatus.Failed) {
+            const err = new Error("Transaction failed");
+            const renderingError = new Error(`Swap:${swapDetails?.id} transaction:${transactionHash} failed`);
+            renderingError.name = `TransactionFailed`;
+            renderingError.cause = err;
+            posthog.capture('$exception', {
+                name: renderingError.name,
+                message: renderingError.message,
+                $layerswap_exception_type: "Transaction Error",
+                stack: renderingError.stack,
+                cause: renderingError.cause,
+                where: 'TransactionError',
+                severity: 'error',
+            });
+        }
+    }, [inputTxStatus, transactionHash, swapDetails?.id]);
+    useEffect(() => {
+        if (swapDetails?.status === SwapStatus.Completed ||
+            swapDetails?.status === SwapStatus.Failed ||
+            swapDetails?.status === SwapStatus.Expired ||
+            swapDetails?.status === SwapStatus.LsTransferPending) {
+            posthog?.capture(`${swapDetails?.status}`, {
+                swap_id: swapDetails?.id,
+                status: swapDetails?.status,
+            });
+        }
+    }, [swapDetails?.status, swapDetails?.id]);
+    const truncatedRefuelAmount = refuel && truncateDecimals(refuel.amount, refuel.token?.precision);
+    const progressStatuses = getProgressStatuses(swapDetails, refuel, inputTxStatusData?.data?.status.toLowerCase());
+    const stepStatuses = progressStatuses.stepStatuses;
+    const countDownTimer = quote?.avg_completion_time && _jsx("div", { className: 'text-primary-text', children: _jsx(CountdownTimer, { initialTime: String(quote?.avg_completion_time), swapDetails: swapDetails, onThresholdChange: setShowSupportButton }) });
+    const progressStates = {
+        "input_transfer": {
+            upcoming: {
+                name: 'Waiting for your transfer',
+                description: null
+            },
+            current: {
+                name: 'Processing your deposit',
+                description: _jsxs("div", { className: 'flex space-x-1', children: [_jsx("div", { className: 'flex items-center space-x-1', children: _jsx(LinkWithIcon, { name: 'View in explorer', url: input_tx_explorer?.replace("{0}", transactionHash) }) }), _jsx("div", { children: _jsx("span", { children: swapInputTransaction && swapInputTransaction?.confirmations && (_jsxs("div", { children: [_jsx("span", { className: 'whitespace-nowrap', children: "| Confirmations" }), _jsxs("span", { className: "text-primary-text ml-1", children: [_jsx("span", { children: swapInputTransaction?.confirmations >= swapInputTransaction?.max_confirmations
+                                                        ? swapInputTransaction?.max_confirmations
+                                                        : swapInputTransaction?.confirmations }), _jsx("span", { children: "/" }), swapInputTransaction?.max_confirmations] })] })) }) })] })
+            },
+            complete: {
+                name: `Deposit confirmed`,
+                description: _jsxs("div", { className: 'flex items-center space-x-1', children: [_jsx("span", { children: "We\u2019ve received your deposit. " }), _jsx(LinkWithIcon, { name: 'View in explorer', url: input_tx_explorer?.replace("{0}", transactionHash) })] })
+            },
+            failed: {
+                name: `The transfer failed`,
+                description: _jsx("div", { className: 'flex space-x-1', children: _jsx("div", { className: 'space-x-1 text-primary-text', children: inputTxStatus === TransactionStatus.Failed ?
+                            _jsxs("div", { className: "flex flex-col", children: [_jsx("p", { children: "Check the transfer in the explorer" }), _jsx(LinkWithIcon, { name: 'View in explorer', url: input_tx_explorer?.replace("{0}", transactionHash) })] })
+                            :
+                                fail_reason == SwapFailReasons.RECEIVED_MORE_THAN_VALID_RANGE ?
+                                    "Your deposit is higher than the max limit. We'll review and approve your transaction in up to 2 hours."
+                                    :
+                                        fail_reason == SwapFailReasons.RECEIVED_LESS_THAN_VALID_RANGE ?
+                                            "Your deposit is lower than the minimum required amount. Unfortunately, we can't process the transaction. Please contact support to check if you're eligible for a refund."
+                                            :
+                                                _jsxs("div", { children: [_jsx("span", { className: 'text-secondary-text', children: "Something went wrong while processing the transfer." }), " ", _jsx("span", { className: 'underline hover:cursor-pointer text-secondary-text', onClick: () => startIntercom(), children: " please contact our support." })] }) }) })
+            },
+            delayed: {
+                name: `This transfer is being delayed by Coinbase`,
+                description: null
+            }
+        },
+        "output_transfer": {
+            upcoming: {
+                name: `Sending ${destination_token.symbol} to your address`,
+                description: null
+            },
+            current: {
+                name: `Sending ${destination_token.symbol} to your address`,
+                description: null
+            },
+            complete: {
+                name: `${swapOutputTransaction?.amount && truncateDecimals(swapOutputTransaction?.amount, destination_token.decimals)} ${destination_token.symbol} was sent to your address`,
+                description: swapOutputTransaction ? _jsx("div", { className: "flex flex-col", children: _jsxs("div", { className: 'flex items-center space-x-1', children: [_jsx("span", { children: "Transaction: " }), _jsx(LinkWithIcon, { name: 'View in explorer', url: output_tx_explorer?.replace("{0}", swapOutputTransaction.transaction_hash) })] }) }) : null,
+            },
+            failed: {
+                name: (swapDetails.status === SwapStatus.PendingRefund || swapDetails.status === SwapStatus.Refunded)
+                    ? "Processing Failed"
+                    : fail_reason == SwapFailReasons.RECEIVED_MORE_THAN_VALID_RANGE
+                        ? `The transfer is on hold`
+                        : "The transfer has failed",
+                description: _jsx("div", { className: 'flex space-x-1', children: _jsx("div", { className: 'space-x-1 text-secondary-text', children: swapDetails.status === SwapStatus.PendingRefund || swapDetails.status === SwapStatus.Refunded ?
+                            "There was an issue completing the transfer. We're refunding your deposit." :
+                            fail_reason == SwapFailReasons.RECEIVED_MORE_THAN_VALID_RANGE ?
+                                "Your deposit is higher than the max limit. We'll review and approve your transaction in up to 2 hours."
+                                :
+                                    fail_reason == SwapFailReasons.RECEIVED_LESS_THAN_VALID_RANGE ?
+                                        "Your deposit is lower than the minimum required amount. Unfortunately, we can't process the transaction. Please contact support to check if you're eligible for a refund."
+                                        :
+                                            _jsxs("div", { children: [_jsx("span", { className: 'text-secondary-text', children: "Something went wrong while processing the transfer." }), " ", _jsx("span", { className: 'underline hover:cursor-pointer text-secondary-text', onClick: () => startIntercom(), children: " please contact our support." })] }) }) })
+            },
+            delayed: {
+                name: `This swap is being delayed by Coinbase`,
+                description: null
+            }
+        },
+        "refuel": {
+            upcoming: {
+                name: `Sending ${refuel?.token?.symbol} to your address`,
+                description: null
+            },
+            current: {
+                name: `Sending ${refuel?.token?.symbol} to your address`,
+                description: null
+            },
+            complete: {
+                name: `${truncatedRefuelAmount} ${refuel?.token?.symbol} was sent to your address`,
+                description: _jsxs("div", { className: 'flex items-center space-x-1', children: [_jsx("span", { children: "Transaction: " }), swapRefuelTransaction &&
+                            _jsx(LinkWithIcon, { name: 'View in explorer', url: output_tx_explorer?.replace("{0}", swapRefuelTransaction.transaction_hash) })] })
+            },
+            delayed: {
+                name: `This transfers is being delayed`,
+                description: null
+            }
+        },
+        "refund": {
+            upcoming: {
+                name: 'Refund Pending',
+                description: null
+            },
+            current: {
+                name: 'Refund Pending',
+                description: _jsx("div", { className: 'text-secondary-text', children: "Your refund is being processed." })
+            },
+            complete: {
+                name: 'Refund sent',
+                description: _jsxs("div", { className: 'flex items-center space-x-1 text-secondary-text', children: [_jsx("span", { children: "The full deposit amount has been sent back to your wallet." }), swapRefundTransaction && (_jsx(LinkWithIcon, { name: 'View in explorer', url: output_tx_explorer?.replace("{0}", swapRefundTransaction?.transaction_hash || '') }))] })
+            },
+            failed: {
+                name: 'Refund Failed',
+                description: _jsxs("div", { className: 'space-x-1 text-secondary-text', children: [_jsx("span", { children: "Something went wrong while processing the refund." }), " ", _jsx("span", { className: 'underline hover:cursor-pointer text-secondary-text', onClick: () => startIntercom(), children: " please contact our support." })] })
+            }
+        }
+    };
+    const allSteps = [
+        {
+            name: progressStates.input_transfer?.[stepStatuses?.input_transfer]?.name,
+            status: stepStatuses.input_transfer,
+            description: progressStates?.input_transfer?.[stepStatuses?.input_transfer]?.description,
+            index: 1
+        },
+        {
+            name: progressStates.output_transfer?.[stepStatuses?.output_transfer]?.name,
+            status: stepStatuses.output_transfer,
+            description: progressStates?.output_transfer?.[stepStatuses?.output_transfer]?.description,
+            index: 2
+        },
+        {
+            name: progressStates.refuel?.[stepStatuses?.refuel]?.name,
+            status: stepStatuses.refuel,
+            description: progressStates.refuel?.[stepStatuses?.refuel]?.description,
+            index: 3
+        },
+        {
+            name: progressStates.refund?.[stepStatuses?.refund]?.name,
+            status: stepStatuses.refund,
+            description: progressStates.refund?.[stepStatuses?.refund]?.description,
+            index: 4
+        }
+    ];
+    let currentSteps = allSteps.filter((s) => s.status && s.status != ProgressStatus.Removed);
+    let stepsProgressPercentage = currentSteps.filter(x => x.status == ProgressStatus.Complete).length / currentSteps.length * 100;
+    const swapStatus = swapDetails.status;
+    return (_jsx(Widget.Content, { children: _jsxs("div", { className: `w-full min-h-[410px] h-full space-y-3 flex flex-col justify-between text-primary-text`, children: [_jsx(SwapSummary, {}), _jsxs("div", { className: "bg-secondary-500 font-normal px-3 pt-6 pb-3 rounded-2xl space-y-4 flex flex-col w-full relative z-10 divide-y-2 divide-secondary-300 divide-dashed", children: [_jsx("div", { className: 'pb-4', children: _jsxs("div", { className: 'flex flex-col gap-2 items-center', children: [_jsxs("div", { className: 'flex items-center', children: [swapStatus === SwapStatus.PendingRefund && (_jsx("span", { className: "relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-primary/20", children: _jsx(Undo2, { className: "h-7 w-7 text-primary", "aria-hidden": "true" }) })), swapStatus === SwapStatus.Refunded && (_jsx("span", { className: "relative z-10 flex h-10 w-10 items-center justify-center", children: _jsx(CircleCheck, { className: "h-10 w-10 text-primary", strokeWidth: 2, "aria-hidden": "true" }) })), swapStatus !== SwapStatus.PendingRefund && swapStatus !== SwapStatus.Refunded && (_jsx(Gauge, { value: stepsProgressPercentage, size: "small", showCheckmark: swapStatus === SwapStatus.Completed }))] }), _jsxs("div", { className: "flex-col text-center ", children: [_jsx("span", { className: "font-medium text-primary-text", children: progressStatuses.generalStatus.title }), progressStatuses.generalStatus.subTitle &&
+                                                _jsx("span", { className: "text-sm block text-secondary-text", children: progressStatuses.generalStatus.subTitle }), swapOutputTransaction?.status != BackendTransactionStatus.Completed && (swapStatus !== SwapStatus.Cancelled && swapStatus !== SwapStatus.Expired && swapStatus !== SwapStatus.Failed && swapStatus !== SwapStatus.PendingRefund && swapStatus !== SwapStatus.Refunded) &&
+                                                _jsx("span", { className: 'text-sm block space-x-1 text-secondary-text', children: _jsx("span", { children: countDownTimer }) })] })] }) }), _jsxs("div", { className: 'pt-4', children: [swapStatus != SwapStatus.Cancelled && swapStatus != SwapStatus.Expired && currentSteps.find(x => x.status != null) &&
+                                    _jsx("div", { className: 'flex flex-col justify-center space-y-4', children: _jsx(Steps, { steps: currentSteps }) }), ([SwapStatus.Expired, SwapStatus.Cancelled, SwapStatus.UserTransferDelayed].includes(swapStatus)) &&
+                                    _jsx(Failed, {}), showSupportButton && swapDetails.status !== SwapStatus.Completed && inputTxStatus !== TransactionStatus.Failed && swapDetails.status !== SwapStatus.PendingRefund && swapDetails.status !== SwapStatus.Refunded && (_jsx("div", { className: 'flex justify-center mt-6', children: _jsx(SubmitButton, { onClick: handleSupportClick, className: "w-full max-w-xs", children: "Contact Support" }) }))] })] })] }) }));
+};
+const resolveSwapInputTxStatus = (swapInputTransaction, inputTxStatusFromApi) => {
+    if (swapInputTransaction) {
+        if (swapInputTransaction.status === BackendTransactionStatus.Completed && swapInputTransaction.confirmations < swapInputTransaction.max_confirmations)
+            return TransactionStatus.Pending;
+        return swapInputTransaction?.status;
+    }
+    if (inputTxStatusFromApi === TransactionStatus.Failed)
+        return inputTxStatusFromApi;
+    else
+        ///For cases when transaction is completed but not detected by bridge API
+        return TransactionStatus.Pending;
+};
+const getProgressStatuses = (swapDetails, refuel, inputTxStatusFromApi) => {
+    const swapStatus = swapDetails.status;
+    let generalTitle = "Transfer in progress";
+    let subtitle = "";
+    const swapInputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Input);
+    const swapInputTxStatus = resolveSwapInputTxStatus(swapInputTransaction, inputTxStatusFromApi);
+    const swapOutputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Output);
+    const swapRefuelTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Refuel);
+    let inputIsCompleted = swapInputTransaction && swapInputTransaction.confirmations >= swapInputTransaction.max_confirmations;
+    if (!inputIsCompleted) {
+        // Magic case, shows estimated time
+        subtitle = null;
+    }
+    let input_transfer = transactionStatusToProgressStatus(swapInputTxStatus) || '';
+    let output_transfer = swapOutputTransaction?.transaction_hash ? ProgressStatus.Complete : inputIsCompleted ? ProgressStatus.Current : ProgressStatus.Upcoming;
+    let refuel_transfer = swapRefuelTransaction?.transaction_hash ? ProgressStatus.Complete : !!refuel ? ProgressStatus.Upcoming : ProgressStatus.Removed;
+    let refund_status = ProgressStatus.Removed;
+    if (swapStatus === SwapStatus.PendingRefund || swapStatus === SwapStatus.Refunded) {
+        // For refund cases: 1) Deposit Confirmed 2) Processing Failed 3) Refund Pending/Completed
+        input_transfer = ProgressStatus.Complete; // Step 1: Deposit Confirmed
+        output_transfer = ProgressStatus.Failed; // Step 2: Processing Failed
+        refuel_transfer = ProgressStatus.Removed; // Remove refuel step for refunds
+        refund_status = swapStatus === SwapStatus.Refunded ? ProgressStatus.Complete : ProgressStatus.Current;
+        generalTitle = swapStatus === SwapStatus.Refunded ? "Refund complete" : "Processing refund";
+        subtitle = swapStatus === SwapStatus.Refunded ? "We couldn’t complete your transaction. The full amount has been returned to your wallet." : "Your transaction could not be processed. The full amount will be returned to your wallet.";
+    }
+    else if (swapStatus === SwapStatus.Failed) {
+        output_transfer = output_transfer == ProgressStatus.Complete ? ProgressStatus.Complete : ProgressStatus.Failed;
+        refuel_transfer = refuel_transfer !== ProgressStatus.Complete ? ProgressStatus.Removed : refuel_transfer;
+        generalTitle = swapDetails?.fail_reason == SwapFailReasons.RECEIVED_MORE_THAN_VALID_RANGE ? "Transfer on hold" : "Transfer failed";
+        subtitle = "View instructions below";
+    }
+    if (swapInputTxStatus == TransactionStatus.Failed) {
+        input_transfer = ProgressStatus.Failed;
+        generalTitle = swapDetails?.fail_reason == SwapFailReasons.RECEIVED_MORE_THAN_VALID_RANGE ? "Transfer on hold" : "Transfer failed";
+        subtitle = "View instructions below";
+    }
+    if (swapStatus === SwapStatus.UserTransferDelayed) {
+        input_transfer = ProgressStatus.Removed;
+        output_transfer = ProgressStatus.Removed;
+        refuel_transfer = ProgressStatus.Removed;
+        generalTitle = "Transfer delayed";
+        subtitle = "View instructions below";
+    }
+    if (swapStatus == SwapStatus.Completed) {
+        generalTitle = "Transfer complete";
+        subtitle = "Thanks for using Layerswap";
+    }
+    if (swapStatus == SwapStatus.Cancelled) {
+        generalTitle = "Transfer cancelled";
+        subtitle = "...";
+    }
+    if (swapStatus == SwapStatus.Expired) {
+        generalTitle = "Transfer expired";
+        subtitle = "...";
+    }
+    return {
+        stepStatuses: {
+            "input_transfer": input_transfer,
+            "output_transfer": output_transfer,
+            "refuel": refuel_transfer,
+            "refund": refund_status,
+        },
+        generalStatus: {
+            title: generalTitle,
+            subTitle: subtitle
+        }
+    };
+};
+const transactionStatusToProgressStatus = (transactionStatus) => {
+    switch (transactionStatus) {
+        case BackendTransactionStatus.Completed:
+            return ProgressStatus.Complete;
+        case BackendTransactionStatus.Failed:
+            return ProgressStatus.Failed;
+        case BackendTransactionStatus.Initiated:
+        case BackendTransactionStatus.Pending:
+            return ProgressStatus.Current;
+        default:
+            return ProgressStatus.Upcoming;
+    }
+};
+export default Processing;

package/dist/esm/components/Pages/Swap/Withdraw/Processing/Step.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+import { Gauge } from "./gauge";
+import clsx from "clsx";
+import { ProgressStatus } from "./types";
+import { classNames } from "../../../../../components/utils/classNames";
+function renderStepIcon(step) {
+    switch (step.status) {
+        case ProgressStatus.Complete:
+            return (_jsx("span", { className: "relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-primary/20", children: _jsx(Check, { className: "h-5 w-5 text-primary", "aria-hidden": "true" }) }));
+        case ProgressStatus.Current:
+            return (_jsx("span", { className: "animate-spin", children: _jsx(Gauge, { value: 40, size: "verySmall" }) }));
+        case ProgressStatus.Failed:
+            return (_jsx("span", { className: "relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-primary/20", children: _jsx(X, { className: "h-5 w-5 text-primary", "aria-hidden": "true" }) }));
+        case ProgressStatus.Delayed:
+            return (_jsx("span", { className: "animate-spin opacity-50", children: _jsx(Gauge, { value: 40, size: "verySmall" }) }));
+        default:
+            return (_jsx("span", { className: "relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-primary/20" }));
+    }
+}
+function Step({ step, isLastStep }) {
+    return (_jsx("li", { className: classNames(isLastStep ? '' : 'pb-10', 'relative'), children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [!isLastStep && (_jsx("div", { className: clsx(`absolute top-1/2 left-4 -ml-px mt-0.5 h-[40%] w-0.5 `, {
+                        "bg-primary/20": step.status !== "complete" && step.status !== "failed",
+                        "bg-primary": step.status === "complete" || step.status === "failed"
+                    }), "aria-hidden": "true" })), _jsxs("div", { className: clsx(`group relative flex `, {
+                        "items-start": step?.description,
+                        "items-center": !step?.description
+                    }), children: [_jsx("span", { className: "flex h-9 items-center text-primary-text", "aria-hidden": "true", children: renderStepIcon(step) }), _jsxs("span", { className: "ml-3 flex min-w-0 flex-col", children: [_jsx("span", { className: clsx(`text-sm font-medium`, {
+                                        "text-primary": step.status === "current",
+                                        "text-secondary-text/70": step.status === "upcoming",
+                                        "text-primary-text": step.status !== "current" && step.status !== "upcoming"
+                                    }), children: step.name }), step?.description &&
+                                    _jsx("span", { className: "text-sm text-secondary-text", children: step?.description })] })] })] }) }, step?.name));
+}
+export default Step;

package/dist/esm/components/Pages/Swap/Withdraw/Processing/StepsComponent.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Step from "./Step";
+export default function Steps({ steps }) {
+    return (_jsx("nav", { "aria-label": "Progress", children: _jsx("ol", { role: "list", className: "overflow-hidden", children: steps.map((step, index) => (_jsx(Step, { step: step, isLastStep: index === steps.length - 1 }, index))) }) }));
+}

package/dist/esm/components/Pages/Swap/Withdraw/Processing/gauge.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+export const Gauge = ({ value, size = "small", showCheckmark = false }) => {
+    const circumference = 332; //2 * Math.PI * 53; // 2 * pi * radius
+    const valueInCircumference = (value / 100) * circumference;
+    const strokeDasharray = `${circumference} ${circumference}`;
+    const initialOffset = circumference;
+    const strokeDashoffset = initialOffset - valueInCircumference;
+    const sizes = {
+        verySmall: {
+            width: "32",
+            height: "32",
+            textSize: "text-xs",
+        },
+        small: {
+            width: "40",
+            height: "40",
+            textSize: "text-xs",
+        },
+        medium: {
+            width: "72",
+            height: "72",
+            textSize: "text-lg",
+        },
+        large: {
+            width: "144",
+            height: "144",
+            textSize: "text-3xl",
+        },
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center relative", children: [_jsxs("svg", { fill: "none", shapeRendering: "crispEdges", height: sizes[size].height, width: sizes[size].width, viewBox: "0 0 120 120", strokeWidth: "2", className: "transform -rotate-90", children: [_jsx("circle", { className: "text-primary/20", strokeWidth: "12", stroke: "currentColor", fill: "transparent", shapeRendering: "geometricPrecision", r: "53", cx: "60", cy: "60" }), _jsx("circle", { className: "text-primary animate-gauge_fill", strokeWidth: "12", strokeDasharray: strokeDasharray, strokeDashoffset: initialOffset, shapeRendering: "geometricPrecision", strokeLinecap: "round", stroke: "currentColor", fill: "transparent", r: "53", cx: "60", cy: "60", style: {
+                            strokeDashoffset: strokeDashoffset,
+                            transition: "stroke-dasharray 1s ease 0s,stroke 1s ease 0s",
+                        } })] }), showCheckmark && value == 100 ? (_jsx("div", { className: "absolute flex animate-gauge_fadeIn", children: _jsx(Check, { className: "h-5 w-5 text-primary", strokeWidth: 4, "aria-hidden": "true" }) })) : null] }));
+};

package/dist/esm/components/Pages/Swap/Withdraw/Processing/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useSwapDataState } from '../../../../../context/swap';
+import Processing from './Processing';
+const Component = () => {
+    const { swapBasicData, swapDetails, quote, refuel } = useSwapDataState();
+    return (_jsx(_Fragment, { children: swapDetails && swapBasicData && _jsx(Processing, { swapBasicData: swapBasicData, swapDetails: swapDetails, quote: quote, refuel: refuel }) }));
+};
+export default Component;

package/dist/esm/components/Pages/Swap/Withdraw/Processing/types.js

@@ -0,0 +1,16 @@
+export var Progress;
+(function (Progress) {
+    Progress["InputTransfer"] = "input_transfer";
+    Progress["Refuel"] = "refuel";
+    Progress["OutputTransfer"] = "output_transfer";
+    Progress["Refund"] = "refund";
+})(Progress || (Progress = {}));
+export var ProgressStatus;
+(function (ProgressStatus) {
+    ProgressStatus["Upcoming"] = "upcoming";
+    ProgressStatus["Current"] = "current";
+    ProgressStatus["Complete"] = "complete";
+    ProgressStatus["Failed"] = "failed";
+    ProgressStatus["Delayed"] = "delayed";
+    ProgressStatus["Removed"] = "removed";
+})(ProgressStatus || (ProgressStatus = {}));

package/dist/esm/components/Pages/Swap/Withdraw/QuoteUpdate.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AlertIcon from "../../../../components/Icons/AlertIcon";
+import { getLimits } from "../../../../hooks/useFee";
+export const QuoteUpdated = (props) => {
+    return (_jsxs("div", { children: [_jsx("div", { className: "p-3 bg-secondary-500 rounded-lg mb-3 w-fit mx-auto", children: _jsx(AlertIcon, { className: "h-11 w-11" }) }), _jsxs("h2", { className: "text-primary-text text-xl font-medium text-center mb-3", children: [_jsx("span", { children: props.isBelowMin ? "Minimum" : "Maximum" }), " ", _jsx("span", { children: "Amount Adjusted" })] }), _jsxs("p", { className: "text-center text-secondary-text text-base mb-6", children: [_jsx("span", { children: "The " }), _jsx("span", { children: props.isBelowMin ? "minimum" : "maximum" }), _jsx("span", { children: " amount you can send using " }), _jsx("span", { children: props.network }), _jsx("span", { children: " is " }), _jsx("span", { children: props.isBelowMin ? props?.minAllowedAmount : props?.maxAllowedAmount }), _jsxs("span", { children: [" ", props.token, ". We\u2019ll adjust your transfer to this limit to proceed."] })] })] }));
+};
+/**
+ * Unified handler to fetch limits, detect quote/limit changes, confirm with user, and adjust amount.
+ */
+export async function handleLimitsUpdate(params) {
+    const { swapValues, network, token } = params;
+    const { minAllowedAmount, maxAllowedAmount } = await getLimits({
+        sourceNetwork: swapValues.from?.name,
+        sourceToken: swapValues.fromAsset?.symbol,
+        destinationNetwork: swapValues.to?.name,
+        destinationToken: swapValues.toAsset?.symbol,
+        useDepositAddress: swapValues.depositMethod == 'deposit_address',
+        refuel: params.swapValues.refuel
+    });
+    const requestedAmount = parseFloat(swapValues.amount || "0");
+    const belowMin = minAllowedAmount !== undefined && requestedAmount < minAllowedAmount;
+    const aboveMax = maxAllowedAmount !== undefined && requestedAmount > maxAllowedAmount;
+    const needsLimitConfirm = belowMin || aboveMax;
+    if (!needsLimitConfirm) {
+        return;
+    }
+    const newAmount = needsLimitConfirm
+        ? belowMin
+            ? minAllowedAmount
+            : maxAllowedAmount
+        : requestedAmount;
+    const confirmed = await params.getConfirmation({
+        content: (_jsx(QuoteUpdated, { minAllowedAmount: minAllowedAmount, maxAllowedAmount: maxAllowedAmount, isBelowMin: belowMin, network: network?.display_name, token: token?.symbol })),
+        submitText: "Continue",
+        dismissText: "Cancel",
+    });
+    if (!confirmed) {
+        throw new Error("User cancelled the operation.");
+    }
+    if (needsLimitConfirm) {
+        swapValues.amount = newAmount.toString();
+    }
+}

package/dist/esm/components/Pages/Swap/Withdraw/Summary/Summary.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDown, Fuel } from "lucide-react";
+import { truncateDecimals } from "../../../../../components/utils/RoundDecimals";
+import LayerSwapApiClient from "../../../../../lib/apiClients/layerSwapApiClient";
+import useSWR from 'swr';
+import { useInitialSettings } from "../../../../../context/settings";
+import { ImageWithFallback } from "../../../../../components/Common/ImageWithFallback";
+import NumberFlow from "@number-flow/react";
+import clsx from "clsx";
+import { PriceImpact } from "../../../../../components/Input/Amount/PriceImpact";
+const Summary = (props) => {
+    const { swap, quote, receiveAmount, quoteIsLoading } = props;
+    const { refuel, quote: swapQuote } = quote;
+    const { source_token: sourceCurrency, destination_token: destinationCurrency, source_network: from, destination_network: to, requested_amount: requestedAmount, destination_address: destinationAddress, source_exchange: sourceExchange } = swap;
+    const { hideFrom, hideTo, account, appName, } = useInitialSettings();
+    const layerswapApiClient = new LayerSwapApiClient();
+    const { data: partnerData } = useSWR(appName && `/internal/apps?name=${appName}`, layerswapApiClient.fetcher);
+    const partner = partnerData?.data;
+    const source = (hideFrom && partner && account) ? partner : from;
+    const destination = (hideTo && partner && account) ? partner : to;
+    const requestedAmountInUsd = requestedAmount && (sourceCurrency?.price_in_usd * requestedAmount).toFixed(2);
+    const receiveAmountInUsd = receiveAmount ? (destinationCurrency?.price_in_usd * receiveAmount).toFixed(2) : undefined;
+    const nativeCurrency = refuel?.token;
+    const truncatedRefuelAmount = nativeCurrency && !!refuel ?
+        truncateDecimals(refuel.amount, nativeCurrency?.precision) : null;
+    const refuelAmountInUsd = nativeCurrency && ((nativeCurrency?.price_in_usd || 1) * (Number(truncatedRefuelAmount) || 0)).toFixed(2);
+    return (_jsx("div", { className: "bg-secondary-500 rounded-2xl px-3 py-4 w-full relative z-10 space-y-4", children: _jsxs("div", { className: "font-normal flex flex-col w-full relative z-10 space-y-3", children: [_jsxs("div", { className: "w-full grid grid-cols-10", children: [_jsx(RouteTokenPair, { route: sourceExchange || source, token: sourceCurrency }), _jsxs("div", { className: "flex flex-col col-start-7 col-span-4 items-end", children: [requestedAmount &&
+                                    _jsxs("p", { className: "text-primary-text text-sm", children: [truncateDecimals(requestedAmount, sourceCurrency.precision), " ", sourceCurrency.symbol] }), _jsx("p", { className: "text-secondary-text text-sm flex justify-end", children: _jsx(NumberFlow, { value: Number(requestedAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 }) })] })] }), _jsxs("div", { className: "relative text-secondary-text", children: [_jsx("hr", { className: "border border-secondary-400 w-full rounded-full" }), _jsx(ArrowDown, { className: "absolute left-1/2 -translate-x-1/2 top-[-10px] h-6 w-6 p-1 bg-secondary-400 rounded-md text-secondary-text" })] }), _jsxs("div", { className: "w-full grid grid-cols-10", children: [_jsx(RouteTokenPair, { route: destination, token: destinationCurrency }), receiveAmount && (_jsxs("div", { className: "flex flex-col justify-end items-end w-full col-start-7 col-span-4", children: [_jsx("p", { className: clsx("text-primary-text text-sm text-end"), children: _jsx(NumberFlow, { value: receiveAmount, suffix: ` ${destinationCurrency.symbol}`, trend: 0, format: { maximumFractionDigits: quote.quote.destination_token?.decimals || 2 } }) }), _jsxs("p", { className: "text-secondary-text text-sm flex items-center gap-1", children: [_jsx(PriceImpact, { className: "text-sm", bridgeFee: swapQuote?.blockchain_fee, destinationTokenPriceUsd: swapQuote?.destination_token?.price_in_usd, receiveAmount: swapQuote?.receive_amount, requestedAmount: swapQuote?.requested_amount, serviceFee: swapQuote?.service_fee, sourceTokenPriceUsd: swapQuote?.source_token?.price_in_usd }), _jsx(NumberFlow, { value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD' }, trend: 0 })] })] }))] }), (!!refuel != undefined && nativeCurrency) ?
+                    _jsxs("div", { className: "flex items-center justify-between w-full ", children: [_jsxs("div", { className: 'flex items-center gap-3 text-sm', children: [_jsx("span", { className: "relative z-10 flex h-8 w-8 items-center justify-center rounded-lg p-2 bg-primary/20", children: _jsx(Fuel, { className: "h-5 w-5 text-primary", "aria-hidden": "true" }) }), _jsx("p", { children: "Refuel" })] }), _jsxs("div", { className: "flex flex-col items-end", children: [_jsxs("p", { className: "text-primary-text text-sm", children: [truncatedRefuelAmount, " ", nativeCurrency?.symbol] }), _jsxs("p", { className: "text-secondary-text text-sm flex justify-end", children: ["$", refuelAmountInUsd] })] })] })
+                    :
+                        _jsx(_Fragment, {})] }) }));
+};
+const RouteTokenPair = ({ route, token }) => {
+    return (_jsxs("div", { className: "flex grow gap-4 text-left items-center md:text-base relative col-span-6 align-center", children: [_jsxs("div", { className: "inline-flex items-center relative shrink-0 mb-1.5", children: [_jsx(ImageWithFallback, { src: token.logo, alt: "Token Logo", height: "28", width: "28", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }), _jsx(ImageWithFallback, { src: route.logo, alt: "Route Logo", height: "16", width: "16", loading: "eager", fetchPriority: "high", className: "absolute -right-1.5 -bottom-1.5 object-contain rounded-md border-1 border-secondary-300" })] }), _jsxs("div", { className: "flex flex-col font-medium text-primary-text overflow-hidden", children: [_jsx("span", { className: "leading-4 text-sm ", children: token.symbol }), _jsx("div", { className: "flex items-center gap-1 leading-3 text-sm sm:text-base", children: _jsx("p", { className: "text-secondary-text text-sm truncate whitespace-nowrap", children: route.display_name }) })] })] }));
+};
+export default Summary;

package/dist/esm/components/Pages/Swap/Withdraw/Summary/index.js

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useSwapDataState } from "../../../../../context/swap";
+import Summary from "./Summary";
+import { TransactionType } from "../../../../../lib/apiClients/layerSwapApiClient";
+import { shortenEmail } from "../../../../../components/utils/ShortenAddress";
+import KnownInternalNames from "../../../../../lib/knownIds";
+import { useInitialSettings } from "../../../../../context/settings";
+import { useSelectedAccount } from "../../../../../context/balanceAccounts";
+const SwapSummary = () => {
+    const { hideFrom, account, } = useInitialSettings();
+    const { swapBasicData, swapDetails, quote, refuel, quoteIsLoading } = useSwapDataState();
+    const { source_network, destination_network, source_token, destination_token, source_exchange } = swapBasicData || {};
+    const selectedSourceAccount = useSelectedAccount("from", source_network?.name);
+    if (!swapBasicData || !source_network || !source_token || !destination_token || !destination_network) {
+        return _jsx(_Fragment, {});
+    }
+    const swapInputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Input);
+    const swapOutputTransaction = swapDetails?.transactions?.find(t => t.type === TransactionType.Output);
+    const requested_amount = (swapInputTransaction?.amount ?? swapBasicData.requested_amount) || undefined;
+    const receiveAmount = quote?.receive_amount;
+    const calculatedReceiveAmount = swapOutputTransaction?.amount ?? receiveAmount;
+    let sourceAccountAddress = "";
+    if (hideFrom && account) {
+        sourceAccountAddress = account;
+    }
+    else if (swapInputTransaction?.from) {
+        sourceAccountAddress = swapInputTransaction?.from;
+    }
+    else if (selectedSourceAccount?.address) {
+        sourceAccountAddress = selectedSourceAccount.address;
+    }
+    else if (source_network?.name === KnownInternalNames.Exchanges.Coinbase && swapDetails?.exchange_account_connected) {
+        sourceAccountAddress = shortenEmail(swapDetails?.exchange_account_name, 10);
+    }
+    else if (source_exchange) {
+        sourceAccountAddress = "Exchange";
+    }
+    else {
+        sourceAccountAddress = "Network";
+    }
+    const swapData = {
+        swap: {
+            ...swapBasicData,
+            requested_amount: requested_amount
+        },
+        quote: {
+            quote: quote,
+            refuel
+        },
+        sourceAccountAddress,
+        receiveAmount: calculatedReceiveAmount
+    };
+    return _jsx(Summary, { ...swapData, quoteIsLoading: quoteIsLoading });
+};
+export default SwapSummary;