@ton/appkit-react 1.0.0-alpha.1 → 1.0.0-alpha.3

package/src/features/staking/utils/map-staking-error.ts

@@ -11,10 +11,12 @@ import { StakingError, StakingErrorCode } from '@ton/appkit';
 import { mapDefiError } from '../../../utils/map-defi-error';
 
 /**
- * Map a thrown staking error to an i18n key. Tries staking-specific codes first, falls back to the
- * shared {@link mapDefiError} for base DeFi codes, and finally to a generic `staking.quoteError`.
+ * Map a thrown staking error to an i18n key. Tries staking-specific codes first, falls back to
+ * the shared {@link mapDefiError} for base DeFi codes, and finally to the caller-provided
+ * {@link fallback} (defaults to `staking.quoteError`, but send-time callers should pass
+ * `staking.sendFailed`).
  */
-export const mapStakingError = (error: unknown): string => {
+export const mapStakingError = (error: unknown, fallback: string = 'staking.quoteError'): string => {
     if (error instanceof StakingError) {
         switch (error.code) {
             case StakingErrorCode.InvalidParams:
@@ -24,5 +26,5 @@ export const mapStakingError = (error: unknown): string => {
         }
     }
 
-    return mapDefiError(error) ?? 'staking.quoteError';
+    return mapDefiError(error) ?? fallback;
 };

package/src/features/swap/components/swap-confirm-modal/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export * from './swap-confirm-modal';

package/src/features/swap/components/swap-confirm-modal/swap-confirm-modal.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { FC } from 'react';
+import type { SwapProvider, SwapQuote } from '@ton/appkit';
+
+import { Modal } from '../../../../components/ui/modal/modal';
+import { Button } from '../../../../components/ui/button';
+import { FlowPreview } from '../../../../components/shared/flow-preview';
+import { useI18n } from '../../../settings/hooks/use-i18n';
+import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
+import { SwapInfo } from '../swap-info';
+import styles from './swap-confirm-modal.module.css';
+
+export interface SwapConfirmModalProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    fromToken: AppkitUIToken | null;
+    toToken: AppkitUIToken | null;
+    fromAmount: string;
+    toAmount: string;
+    fiatSymbol: string;
+    quote?: SwapQuote;
+    swapProvider?: SwapProvider;
+    slippage: number;
+    isQuoteLoading?: boolean;
+}
+
+export const SwapConfirmModal: FC<SwapConfirmModalProps> = ({
+    open,
+    onClose,
+    onConfirm,
+    fromToken,
+    toToken,
+    fromAmount,
+    toAmount,
+    fiatSymbol,
+    quote,
+    swapProvider,
+    slippage,
+    isQuoteLoading,
+}) => {
+    const { t } = useI18n();
+
+    return (
+        <Modal open={open} onOpenChange={(isOpen) => !isOpen && onClose()} title={t('swap.confirmTitle')}>
+            <FlowPreview
+                fromAmount={fromAmount}
+                toAmount={toAmount}
+                fromToken={fromToken ?? undefined}
+                toToken={toToken ?? undefined}
+                fiatSymbol={fiatSymbol}
+            />
+
+            <SwapInfo
+                className={styles.info}
+                quote={quote}
+                provider={swapProvider}
+                toToken={toToken}
+                slippage={slippage}
+                isQuoteLoading={isQuoteLoading}
+            />
+
+            <Button className={styles.confirmButton} variant="fill" size="l" fullWidth onClick={onConfirm}>
+                {t('swap.confirm')}
+            </Button>
+        </Modal>
+    );
+};

package/src/features/swap/components/swap-widget-provider/swap-widget-provider.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import type { FC, PropsWithChildren } from 'react';
 import { formatUnits } from '@ton/appkit';
 import type { Network } from '@ton/appkit';
@@ -234,7 +234,7 @@ export const SwapWidgetProvider: FC<SwapProviderProps> = ({
         network,
         slippageBps: slippage,
         providerId: swapProvider?.providerId,
-        query: { enabled: isNetworkSupported },
+        query: { enabled: isNetworkSupported, networkMode: 'always', retry: false, gcTime: 0 },
     });
     // Also show "loading" while the user is still typing (debounce in-flight) so the UI doesn't flash
     // the previous quote as if it were final.
@@ -247,6 +247,29 @@ export const SwapWidgetProvider: FC<SwapProviderProps> = ({
     });
     const { data: tonBalance } = useBalance({ network, query: { refetchInterval: 5000 } });
 
+    // 4. Mutations (hoisted above validation: the mutation `error` is one of its inputs)
+    const {
+        mutateAsync: buildTransaction,
+        isPending: isBuildingTransaction,
+        error: buildError,
+        reset: resetBuild,
+    } = useBuildSwapTransaction({ mutation: { networkMode: 'always' } });
+    const {
+        mutateAsync: sendTransaction,
+        isPending: isSendingPending,
+        error: sendMutationError,
+        reset: resetSend,
+    } = useSendTransaction({ mutation: { networkMode: 'always' } });
+    const isSendingTransaction = isBuildingTransaction || isSendingPending;
+    const sendError = sendMutationError ?? buildError;
+
+    // Drop the previous send error when the user changes anything that would invalidate it —
+    // the next attempt is conceptually a new swap, no need to keep the old message on screen.
+    const resetSendError = useCallback(() => {
+        resetBuild();
+        resetSend();
+    }, [resetBuild, resetSend]);
+
     // 3. Derivations
     const toAmount = quote?.toAmount ?? '';
     const { error, canSubmit } = useSwapValidation({
@@ -255,7 +278,9 @@ export const SwapWidgetProvider: FC<SwapProviderProps> = ({
         fromToken,
         toToken,
         fromBalance,
+        quote,
         quoteError,
+        sendError,
         isNetworkSupported,
     });
     const isLowBalanceWarningOpen = pendingSwap !== undefined;
@@ -265,10 +290,19 @@ export const SwapWidgetProvider: FC<SwapProviderProps> = ({
         return formatUnits(pendingSwap.requiredNanos, 9);
     }, [pendingSwap]);
 
-    // 4. Mutations
-    const { mutateAsync: buildTransaction, isPending: isBuildingTransaction } = useBuildSwapTransaction();
-    const { mutateAsync: sendTransaction, isPending: isSendingPending } = useSendTransaction();
-    const isSendingTransaction = isBuildingTransaction || isSendingPending;
+    // Drop the previous send error when the user changes anything that would invalidate it —
+    // the next attempt is conceptually a new swap, no need to keep the old message on screen.
+    useEffect(() => {
+        resetSendError();
+    }, [fromToken?.address, toToken?.address, fromAmount, resetSendError]);
+
+    // Auto-clear the send error after a short delay so a stale failure doesn't linger in the
+    // submit button — the user is expected to act on it within seconds or move on.
+    useEffect(() => {
+        if (!sendError) return;
+        const id = setTimeout(resetSendError, 5000);
+        return () => clearTimeout(id);
+    }, [sendError, resetSendError]);
 
     // 5. Callbacks
     const handleMaxClick = useCallback(() => {

package/src/features/swap/components/swap-widget-provider/use-swap-validation.ts

@@ -7,6 +7,7 @@
  */
 
 import { useMemo } from 'react';
+import type { SwapQuote } from '@ton/appkit';
 
 import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
 import { hasTooManyDecimals, isAmountExceedingBalance } from '../../../../utils/validate-amount';
@@ -18,7 +19,9 @@ interface UseSwapValidationOptions {
     fromToken: AppkitUIToken | null;
     toToken: AppkitUIToken | null;
     fromBalance: string | undefined;
+    quote: SwapQuote | undefined;
     quoteError: Error | null;
+    sendError: Error | null;
     isNetworkSupported: boolean;
 }
 
@@ -28,10 +31,12 @@ export function useSwapValidation({
     fromToken,
     toToken,
     fromBalance,
+    quote,
     quoteError,
+    sendError,
     isNetworkSupported,
 }: UseSwapValidationOptions) {
-    const error: string | null = useMemo(() => {
+    const blockingError: string | null = useMemo(() => {
         if (!isNetworkSupported) return 'defi.unsupportedNetwork';
 
         if ((parseFloat(fromAmount) || 0) <= 0) return null;
@@ -45,7 +50,17 @@ export function useSwapValidation({
         return null;
     }, [isNetworkSupported, fromAmount, fromToken, fromBalance, quoteError, fromAmountDebounced]);
 
-    const canSubmit = (parseFloat(fromAmount) || 0) > 0 && fromToken !== null && toToken !== null && error === null;
+    const error = useMemo<string | null>(() => {
+        if (sendError) return mapSwapError(sendError, 'swap.sendFailed');
+        return blockingError;
+    }, [sendError, blockingError]);
+
+    const canSubmit =
+        (parseFloat(fromAmount) || 0) > 0 &&
+        fromToken !== null &&
+        toToken !== null &&
+        blockingError === null &&
+        quote !== undefined;
 
     return { error, canSubmit };
 }

package/src/features/swap/components/swap-widget-ui/swap-widget-ui.tsx

@@ -12,6 +12,7 @@ import clsx from 'clsx';
 
 import { useI18n } from '../../../settings/hooks/use-i18n';
 import { useSelectedWallet } from '../../../wallets';
+import { SwapConfirmModal } from '../swap-confirm-modal';
 import { SwapField } from '../swap-field';
 import { SwapFlipButton } from '../swap-flip-button';
 import { SwapInfo } from '../swap-info';
@@ -67,6 +68,7 @@ export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
 
     const [activeField, setActiveField] = useState<'from' | 'to' | null>(null);
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
     const [isFlipped, setIsFlipped] = useState(false);
 
     const handleFlip = useCallback(() => {
@@ -74,12 +76,22 @@ export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
         onFlip();
     }, [onFlip]);
 
+    // Close the modal immediately; the build/send result (including errors) is surfaced
+    // back in the widget's main button via the `error` from the provider.
+    const handleConfirm = useCallback(() => {
+        setIsConfirmOpen(false);
+        sendSwapTransaction().catch(() => {
+            // Error is captured by the mutation and shown through the validator's `error` output.
+        });
+    }, [sendSwapTransaction]);
+
     const buttonText = useMemo(() => {
-        if (error) return t(error);
+        if (isSendingTransaction || isQuoteLoading) return t('swap.loading');
         if (!fromToken || !toToken) return t('swap.selectToken');
+        if (error) return t(error);
         if (canSubmit) return t('swap.continue');
         return t('swap.enterAmount');
-    }, [error, fromToken, toToken, canSubmit, t]);
+    }, [isSendingTransaction, isQuoteLoading, error, fromToken, toToken, canSubmit, t]);
 
     return (
         <div className={clsx(styles.widget, className)} {...props}>
@@ -135,6 +147,21 @@ export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
                 onProviderChange={setSwapProviderId}
             />
 
+            <SwapConfirmModal
+                open={isConfirmOpen}
+                onClose={() => setIsConfirmOpen(false)}
+                onConfirm={handleConfirm}
+                fromToken={fromToken}
+                toToken={toToken}
+                fromAmount={fromAmount}
+                toAmount={toAmount}
+                fiatSymbol={fiatSymbol}
+                quote={quote}
+                swapProvider={swapProvider}
+                slippage={slippage}
+                isQuoteLoading={isQuoteLoading}
+            />
+
             <LowBalanceModal
                 open={isLowBalanceWarningOpen}
                 mode={lowBalanceMode}
@@ -149,7 +176,7 @@ export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
                     size="l"
                     fullWidth
                     disabled={!canSubmit || isQuoteLoading || isSendingTransaction}
-                    onClick={sendSwapTransaction}
+                    onClick={() => setIsConfirmOpen(true)}
                 >
                     {buttonText}
                 </ButtonWithConnect>

package/src/features/swap/utils/map-swap-error.ts

@@ -12,9 +12,11 @@ import { mapDefiError } from '../../../utils/map-defi-error';
 
 /**
  * Map a thrown swap error to an i18n key. Tries swap-specific codes first, falls back to the
- * shared {@link mapDefiError} for base DeFi codes, and finally to a generic `swap.quoteError`.
+ * shared {@link mapDefiError} for base DeFi codes, and finally to the caller-provided
+ * {@link fallback} (defaults to `swap.quoteError`, but send-time callers should pass
+ * `swap.sendFailed`).
  */
-export const mapSwapError = (error: unknown): string => {
+export const mapSwapError = (error: unknown, fallback: string = 'swap.quoteError'): string => {
     if (error instanceof SwapError) {
         switch (error.code) {
             case SwapErrorCode.InvalidQuote:
@@ -28,5 +30,5 @@ export const mapSwapError = (error: unknown): string => {
         }
     }
 
-    return mapDefiError(error) ?? 'swap.quoteError';
+    return mapDefiError(error) ?? fallback;
 };

package/src/locales/en.ts

@@ -78,6 +78,10 @@ export default {
         provider: 'Provider',
         save: 'Save',
         minReceived: 'Min Received',
+        confirmTitle: 'Confirm swap transaction',
+        confirm: 'Confirm',
+        sendFailed: 'Transaction failed',
+        loading: 'Loading...',
     },
 
     // Low balance modal (shared between swap, staking, etc.)
@@ -118,5 +122,10 @@ export default {
         provider: 'Provider',
         settings: 'Staking settings',
         save: 'Save',
+        confirmStakingTitle: 'Confirm staking',
+        confirmUnstakingTitle: 'Confirm unstaking',
+        confirm: 'Confirm',
+        sendFailed: 'Transaction failed',
+        loading: 'Loading...',
     },
 } as const;