@ton/appkit-react 1.0.0-alpha.0 → 1.0.0-alpha.2

package/src/features/staking/components/select-unstake-mode/select-unstake-mode.tsx

@@ -17,6 +17,7 @@ import { ChevronDownIcon } from '../../../../components/ui/icons';
 import { useI18n } from '../../../settings/hooks/use-i18n';
 import { formatAmount } from '../staking-info/utils';
 import styles from './select-unstake-mode.module.css';
+import { Button } from '../../../../components/ui/button';
 
 export interface SelectUnstakeModeProps extends ComponentProps<'div'> {
     value: UnstakeModes;
@@ -84,13 +85,20 @@ export const SelectUnstakeMode: FC<SelectUnstakeModeProps> = ({
 
     return (
         <div className={clsx(styles.root, className)} {...props}>
-            <button type="button" className={styles.header} onClick={() => setOpen((v) => !v)}>
+            <div className={styles.header}>
                 <span className={styles.headerLabel}>{t('staking.unstakeType')}</span>
-                <span className={styles.headerValue}>
+
+                <Button
+                    variant="gray"
+                    size="s"
+                    borderRadius="full"
+                    className={styles.headerValue}
+                    onClick={() => setOpen((v) => !v)}
+                >
                     {selectedLabel}
                     <ChevronDownIcon size={16} className={clsx(styles.chevron, open && styles.chevronOpen)} />
-                </span>
-            </button>
+                </Button>
+            </div>
 
             <Collapsible open={open}>
                 <div className={styles.options}>

package/src/features/staking/components/staking-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 './staking-confirm-modal';

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

@@ -0,0 +1,121 @@
+/**
+ * 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 {
+    JettonInfo,
+    Network,
+    StakingProviderInfo,
+    StakingProviderMetadata,
+    StakingQuote,
+    StakingQuoteDirection,
+    StakingTokenInfo,
+} from '@ton/appkit';
+
+import { Modal } from '../../../../components/ui/modal/modal';
+import { Button } from '../../../../components/ui/button';
+import { AmountPreview } from '../../../../components/shared/amount-preview';
+import { FlowPreview } from '../../../../components/shared/flow-preview';
+import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
+import { useJettonInfo } from '../../../jettons';
+import { useI18n } from '../../../settings/hooks/use-i18n';
+import { StakingInfo } from '../staking-info';
+import styles from './staking-confirm-modal.module.css';
+
+export interface StakingConfirmModalProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    direction: StakingQuoteDirection;
+    network: Network | undefined;
+    quote: StakingQuote | undefined;
+    providerInfo: StakingProviderInfo | undefined;
+    providerMetadata: StakingProviderMetadata | undefined;
+    isProviderInfoLoading: boolean;
+    isQuoteLoading: boolean;
+}
+
+/**
+ * Adapter from staking-domain token shape (`StakingTokenInfo`) to the shared
+ * `AppkitUIToken` shape consumed by AmountPreview/FlowPreview. `name` is taken
+ * from the resolved jetton metadata when available, falling back to ticker.
+ */
+const toUIToken = (
+    token: StakingTokenInfo | undefined,
+    jettonInfo: JettonInfo | null | undefined,
+    network: Network | undefined,
+): AppkitUIToken | undefined => {
+    if (!token || !network) return undefined;
+    return {
+        symbol: token.ticker,
+        name: jettonInfo?.name ?? token.ticker,
+        decimals: token.decimals,
+        address: token.address,
+        logo: token.address === 'ton' ? undefined : jettonInfo?.image,
+        network,
+    };
+};
+
+export const StakingConfirmModal: FC<StakingConfirmModalProps> = ({
+    open,
+    onClose,
+    onConfirm,
+    direction,
+    network,
+    quote,
+    providerInfo,
+    providerMetadata,
+    isProviderInfoLoading,
+    isQuoteLoading,
+}) => {
+    const { t } = useI18n();
+
+    const stakeAddress = providerMetadata?.stakeToken.address;
+    const receiveAddress = providerMetadata?.receiveToken?.address;
+
+    const { data: stakeJettonInfo } = useJettonInfo({
+        address: stakeAddress,
+        query: { enabled: !!stakeAddress && stakeAddress !== 'ton' },
+    });
+    const { data: receiveJettonInfo } = useJettonInfo({
+        address: receiveAddress,
+        query: { enabled: !!receiveAddress && receiveAddress !== 'ton' },
+    });
+
+    const stakeToken = toUIToken(providerMetadata?.stakeToken, stakeJettonInfo, network);
+    const receiveToken = toUIToken(providerMetadata?.receiveToken, receiveJettonInfo, network);
+
+    const title = direction === 'stake' ? t('staking.confirmStakingTitle') : t('staking.confirmUnstakingTitle');
+
+    const amountIn = quote?.amountIn ?? '0';
+    const amountOut = quote?.amountOut ?? '0';
+
+    return (
+        <Modal open={open} onOpenChange={(isOpen) => !isOpen && onClose()} title={title}>
+            {direction === 'stake' ? (
+                <AmountPreview className={styles.singleAmount} amount={amountIn} token={stakeToken} />
+            ) : (
+                <FlowPreview fromAmount={amountIn} toAmount={amountOut} fromToken={receiveToken} toToken={stakeToken} />
+            )}
+
+            <StakingInfo
+                className={styles.info}
+                quote={quote}
+                isQuoteLoading={isQuoteLoading}
+                providerInfo={providerInfo}
+                providerMetadata={providerMetadata}
+                isProviderInfoLoading={isProviderInfoLoading}
+                direction={direction}
+            />
+
+            <Button className={styles.confirmButton} variant="fill" size="l" fullWidth onClick={onConfirm}>
+                {t('staking.confirm')}
+            </Button>
+        </Modal>
+    );
+};

package/src/features/staking/components/staking-widget-provider/staking-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 type { Network, StakingProvider, StakingQuoteDirection, TonShortfall } from '@ton/appkit';
 import {
@@ -224,8 +224,39 @@ export const StakingWidgetProvider: FC<StakingProviderProps> = ({ children, netw
         query: { refetchInterval: 5000 },
     });
 
-    const { mutateAsync: buildTransaction } = useBuildStakeTransaction();
-    const { mutateAsync: sendTransaction, isPending: isSendingTransaction } = useSendTransaction();
+    const {
+        mutateAsync: buildTransaction,
+        isPending: isBuildingTransaction,
+        error: buildError,
+        reset: resetBuild,
+    } = useBuildStakeTransaction({ mutation: { networkMode: 'always' } });
+    const {
+        mutateAsync: sendTransaction,
+        isPending: isSendingPending,
+        error: sendMutationError,
+        reset: resetSend,
+    } = useSendTransaction({ mutation: { networkMode: 'always' } });
+    const isSendingTransaction = isBuildingTransaction || isSendingPending;
+    const sendError = sendMutationError ?? buildError;
+
+    const resetSendError = useCallback(() => {
+        resetBuild();
+        resetSend();
+    }, [resetBuild, resetSend]);
+
+    // Drop the previous send error when the user changes anything that invalidates it —
+    // the next attempt is conceptually a new stake, no need to keep the old message on screen.
+    useEffect(() => {
+        resetSendError();
+    }, [direction, amount, isReversed, 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]);
 
     const amountDecimals = useMemo(() => {
         const unstakeDecimals = isReversed
@@ -256,7 +287,10 @@ export const StakingWidgetProvider: FC<StakingProviderProps> = ({ children, netw
         data: quote,
         isFetching: isQuoteLoading,
         error: quoteError,
-    } = useStakingQuote({ ...quoteParamsDebounced, query: { enabled: isNetworkSupported } });
+    } = useStakingQuote({
+        ...quoteParamsDebounced,
+        query: { enabled: isNetworkSupported, networkMode: 'always', retry: false, gcTime: 0 },
+    });
 
     const reversedAmount = useMemo(() => {
         if (direction === 'unstake' && isReversed) return quote?.amountIn || '0';
@@ -337,6 +371,7 @@ export const StakingWidgetProvider: FC<StakingProviderProps> = ({ children, netw
         amountDebounced: quoteParamsDebounced.amount || '',
         balance,
         quoteError,
+        sendError,
         direction,
         stakedBalance: stakedBalanceData?.stakedBalance,
         quote,

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

@@ -18,6 +18,8 @@ interface UseStakingValidationOptions {
     balance: string | undefined;
     quote?: StakingQuote;
     quoteError: Error | null;
+    /** Error from the build/send mutation. Takes priority over input validation but does not block submit. */
+    sendError: Error | null;
     direction: StakingQuoteDirection;
     amountDecimals?: number;
     isReversed: boolean;
@@ -31,13 +33,16 @@ export const useStakingValidation = ({
     balance,
     quote,
     quoteError,
+    sendError,
     direction,
     amountDecimals,
     isReversed,
     stakedBalance,
     isNetworkSupported,
 }: UseStakingValidationOptions) => {
-    const error: string | null = useMemo(() => {
+    // Input-side validation that blocks submission. `sendError` is intentionally NOT considered
+    // here — a previous failed attempt shouldn't lock the button against a retry.
+    const blockingError: string | null = useMemo(() => {
         if (!isNetworkSupported) return 'defi.unsupportedNetwork';
 
         if ((parseFloat(amount) || 0) <= 0) return null;
@@ -73,7 +78,14 @@ export const useStakingValidation = ({
         amountDecimals,
     ]);
 
-    const canSubmit = (parseFloat(amount) || 0) > 0 && error === null;
+    // The user-visible error: build/send failure (most recent user action) wins over background
+    // validation noise; falls back to validation when no send error is active.
+    const error = useMemo<string | null>(() => {
+        if (sendError) return mapStakingError(sendError, 'staking.sendFailed');
+        return blockingError;
+    }, [sendError, blockingError]);
+
+    const canSubmit = (parseFloat(amount) || 0) > 0 && blockingError === null && quote !== undefined;
 
     return { error, canSubmit };
 };

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

@@ -6,7 +6,7 @@
  *
  */
 
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import type { ComponentProps, FC, ReactNode } from 'react';
 import type { StakingQuoteDirection } from '@ton/appkit';
 import clsx from 'clsx';
@@ -15,6 +15,7 @@ import { CenteredAmountInput } from '../../../../components/ui/centered-amount-i
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/tabs';
 import { useI18n } from '../../../settings/hooks/use-i18n';
 import { StakingBalanceBlock } from '../staking-balance-block';
+import { StakingConfirmModal } from '../staking-confirm-modal';
 import { StakingInfo } from '../staking-info';
 import { SelectUnstakeMode } from '../select-unstake-mode';
 import { StakingSettingsModal } from '../staking-settings-modal';
@@ -66,14 +67,25 @@ export const StakingWidgetUI: FC<StakingWidgetRenderProps> = ({
     const { t } = useI18n();
 
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
 
     const receiveToken = providerMetadata?.receiveToken;
     const stakeToken = providerMetadata?.stakeToken;
 
     const buttonText = useMemo(() => {
+        if (isSendingTransaction || isQuoteLoading) return t('staking.loading');
         if (error) return t(error);
         return direction === 'stake' ? t('staking.continue') : t('staking.unstake');
-    }, [error, direction, t]);
+    }, [isSendingTransaction, isQuoteLoading, error, direction, t]);
+
+    // 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);
+        sendTransaction().catch(() => {
+            // Error is captured by the mutation and shown through the validator's `error` output.
+        });
+    }, [sendTransaction]);
 
     const submitActions: ReactNode = (
         <div className={styles.actions}>
@@ -82,7 +94,7 @@ export const StakingWidgetUI: FC<StakingWidgetRenderProps> = ({
                 size="l"
                 fullWidth
                 disabled={!canSubmit || isQuoteLoading || isSendingTransaction}
-                onClick={sendTransaction}
+                onClick={() => setIsConfirmOpen(true)}
             >
                 {buttonText}
             </ButtonWithConnect>
@@ -127,7 +139,7 @@ export const StakingWidgetUI: FC<StakingWidgetRenderProps> = ({
                 </TabsContent>
 
                 {/* ── UNSTAKE TAB ── */}
-                <TabsContent className={styles.tab} value="unstake">
+                <TabsContent value="unstake">
                     <div className={styles.content}>
                         <div className={styles.inputSection}>
                             <CenteredAmountInput
@@ -167,17 +179,18 @@ export const StakingWidgetUI: FC<StakingWidgetRenderProps> = ({
                         />
                     </div>
                 </TabsContent>
-
-                <StakingInfo
-                    quote={quote}
-                    isQuoteLoading={isQuoteLoading}
-                    providerInfo={providerInfo}
-                    providerMetadata={providerMetadata}
-                    isProviderInfoLoading={isProviderInfoLoading}
-                    direction={direction}
-                />
             </Tabs>
 
+            <StakingInfo
+                className={styles.info}
+                quote={quote}
+                isQuoteLoading={isQuoteLoading}
+                providerInfo={providerInfo}
+                providerMetadata={providerMetadata}
+                isProviderInfoLoading={isProviderInfoLoading}
+                direction={direction}
+            />
+
             <LowBalanceModal
                 open={isLowBalanceWarningOpen}
                 mode={lowBalanceMode}
@@ -194,6 +207,19 @@ export const StakingWidgetUI: FC<StakingWidgetRenderProps> = ({
                 onProviderChange={setStakingProviderId}
                 network={network}
             />
+
+            <StakingConfirmModal
+                open={isConfirmOpen}
+                onClose={() => setIsConfirmOpen(false)}
+                onConfirm={handleConfirm}
+                direction={direction}
+                network={network}
+                quote={quote}
+                providerInfo={providerInfo}
+                providerMetadata={providerMetadata}
+                isProviderInfoLoading={isProviderInfoLoading}
+                isQuoteLoading={isQuoteLoading}
+            />
         </div>
     );
 };

package/src/features/staking/hooks/use-build-stake-transaction.ts

@@ -11,12 +11,15 @@ import { buildStakeTransactionMutationOptions } from '@ton/appkit/queries';
 import type {
     BuildStakeTransactionData,
     BuildStakeTransactionErrorType,
+    BuildStakeTransactionMutationOptions,
     BuildStakeTransactionVariables,
 } from '@ton/appkit/queries';
 
 import { useAppKit } from '../../settings';
 import { useMutation } from '../../../libs/query';
 
+export type UseBuildStakeTransactionParameters<context = unknown> = BuildStakeTransactionMutationOptions<context>;
+
 export type UseBuildStakeTransactionReturnType<context = unknown> = UseMutationResult<
     BuildStakeTransactionData,
     BuildStakeTransactionErrorType,
@@ -27,7 +30,9 @@ export type UseBuildStakeTransactionReturnType<context = unknown> = UseMutationR
 /**
  * Hook to build stake transaction
  */
-export const useBuildStakeTransaction = <context = unknown>(): UseBuildStakeTransactionReturnType<context> => {
+export const useBuildStakeTransaction = <context = unknown>(
+    parameters?: UseBuildStakeTransactionParameters<context>,
+): UseBuildStakeTransactionReturnType<context> => {
     const appKit = useAppKit();
-    return useMutation(buildStakeTransactionMutationOptions<context>(appKit));
+    return useMutation(buildStakeTransactionMutationOptions<context>(appKit, parameters));
 };

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 };
 }