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

package/dist/types/features/swap/components/swap-widget-provider/use-swap-validation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-swap-validation.d.ts","sourceRoot":"","sources":["../../../../../../src/features/swap/components/swap-widget-provider/use-swap-validation.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAIvE,UAAU,wBAAwB;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,UAAU,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,OAAO,EACP,WAAW,EACX,UAAU,EACV,kBAAkB,GACrB,EAAE,wBAAwB;;;EAkB1B"}
+{"version":3,"file":"use-swap-validation.d.ts","sourceRoot":"","sources":["../../../../../../src/features/swap/components/swap-widget-provider/use-swap-validation.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAIvE,UAAU,wBAAwB;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,UAAU,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,OAAO,EACP,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,kBAAkB,GACrB,EAAE,wBAAwB;;;EA4B1B"}

package/dist/types/features/swap/components/swap-widget-ui/swap-widget-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swap-widget-ui.d.ts","sourceRoot":"","sources":["../../../../../../src/features/swap/components/swap-widget-ui/swap-widget-ui.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAYhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI/D,MAAM,MAAM,qBAAqB,GAAG,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5E,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,qBAAqB,CA4IlD,CAAC"}
+{"version":3,"file":"swap-widget-ui.d.ts","sourceRoot":"","sources":["../../../../../../src/features/swap/components/swap-widget-ui/swap-widget-ui.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAahD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI/D,MAAM,MAAM,qBAAqB,GAAG,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5E,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,qBAAqB,CAsKlD,CAAC"}

package/dist/types/features/swap/utils/map-swap-error.d.ts

@@ -7,7 +7,9 @@
  */
 /**
  * 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 declare const mapSwapError: (error: unknown) => string;
+export declare const mapSwapError: (error: unknown, fallback?: string) => string;
 //# sourceMappingURL=map-swap-error.d.ts.map

package/dist/types/features/swap/utils/map-swap-error.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"map-swap-error.d.ts","sourceRoot":"","sources":["../../../../../src/features/swap/utils/map-swap-error.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,OAAO,KAAG,MAe7C,CAAC"}
+{"version":3,"file":"map-swap-error.d.ts","sourceRoot":"","sources":["../../../../../src/features/swap/utils/map-swap-error.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,OAAO,EAAE,WAAU,MAA0B,KAAG,MAenF,CAAC"}

package/dist/types/libs/i18n.d.ts

@@ -66,6 +66,10 @@ export declare const i18n: rosetta.Rosetta<{
         readonly provider: "Provider";
         readonly save: "Save";
         readonly minReceived: "Min Received";
+        readonly confirmTitle: "Confirm swap transaction";
+        readonly confirm: "Confirm";
+        readonly sendFailed: "Transaction failed";
+        readonly loading: "Loading...";
     };
     readonly lowBalance: {
         readonly title: "Not enough TON";
@@ -100,6 +104,11 @@ export declare const i18n: rosetta.Rosetta<{
         readonly provider: "Provider";
         readonly settings: "Staking settings";
         readonly save: "Save";
+        readonly confirmStakingTitle: "Confirm staking";
+        readonly confirmUnstakingTitle: "Confirm unstaking";
+        readonly confirm: "Confirm";
+        readonly sendFailed: "Transaction failed";
+        readonly loading: "Loading...";
     };
 }>;
 export { en };

package/dist/types/libs/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/libs/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,MAAM,eAAe,CAAC;AAE/B,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAkB,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,CAAC;AACd,eAAO,MAAM,eAAe,OAAO,CAAC;AAIpC,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC;AAC/B,MAAM,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/libs/i18n.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,OAAO,MAAM,SAAS,CAAC;AAE9B,OAAO,EAAE,MAAM,eAAe,CAAC;AAE/B,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAkB,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,CAAC;AACd,eAAO,MAAM,eAAe,OAAO,CAAC;AAIpC,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC;AAC/B,MAAM,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC"}

package/dist/types/locales/en.d.ts

@@ -64,6 +64,10 @@ declare const _default: {
         readonly provider: "Provider";
         readonly save: "Save";
         readonly minReceived: "Min Received";
+        readonly confirmTitle: "Confirm swap transaction";
+        readonly confirm: "Confirm";
+        readonly sendFailed: "Transaction failed";
+        readonly loading: "Loading...";
     };
     readonly lowBalance: {
         readonly title: "Not enough TON";
@@ -98,6 +102,11 @@ declare const _default: {
         readonly provider: "Provider";
         readonly settings: "Staking settings";
         readonly save: "Save";
+        readonly confirmStakingTitle: "Confirm staking";
+        readonly confirmUnstakingTitle: "Confirm unstaking";
+        readonly confirm: "Confirm";
+        readonly sendFailed: "Transaction failed";
+        readonly loading: "Loading...";
     };
 };
 export default _default;

package/dist/types/locales/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wBAiHW"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,wBA0HW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ton/appkit-react",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "type": "module",
   "repository": {
     "type": "git",
@@ -33,27 +33,27 @@
     }
   },
   "dependencies": {
-    "clsx": "2.1.1",
+    "clsx": "^2.1.1",
     "radix-ui": "^1.4.3",
     "rosetta": "1.1.0",
-    "@ton/appkit": "1.0.0-alpha.1"
+    "@ton/appkit": "1.0.0-alpha.2"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/react": "10.3.5",
-    "@storybook/react-vite": "10.3.5",
+    "@storybook/addon-docs": "10.4.1",
+    "@storybook/react": "10.4.1",
+    "@storybook/react-vite": "10.4.1",
     "@storybook/test": "^8.6.15",
-    "@tanstack/react-query": "5.99.0",
-    "@tonconnect/ui-react": "2.5.0-alpha.0",
+    "@tanstack/react-query": "^5.100.14",
+    "@tonconnect/ui-react": "^2.5.0-alpha.0",
     "@types/react": "19.2.3",
     "@types/react-dom": "19.2.3",
+    "buffer": "^6.0.3",
     "copyfiles": "2.4.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "storybook": "10.3.5",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.8",
-    "vite-plugin-node-polyfills": "^0.26.0"
+    "storybook": "10.4.1",
+    "typescript": "5.9.3",
+    "vite": "8.0.14"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",

package/src/components/shared/amount-preview/amount-preview.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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, ComponentProps } from 'react';
+import { calcFiatValue, formatLargeValue } from '@ton/appkit';
+import clsx from 'clsx';
+
+import { Logo } from '../../ui/logo';
+import { TonIconCircle } from '../../ui/icons';
+import type { AppkitUIToken } from '../../../types/appkit-ui-token';
+import { getDisplayAmount } from '../../../features/swap/utils/get-display-amount';
+import styles from './amount-preview.module.css';
+
+export interface AmountPreviewProps extends ComponentProps<'div'> {
+    /** Raw token amount to display (decimal string). */
+    amount: string;
+    /** Token whose logo and symbol are shown alongside the amount. */
+    token?: AppkitUIToken;
+    /** Fiat currency symbol, e.g. "$". */
+    fiatSymbol?: string;
+    /**
+     * Relative fiat delta to render after the fiat value, e.g. -0.0025 → "(-0.25%)".
+     * Typically computed by a parent that knows both legs of a flow.
+     */
+    fiatDelta?: number;
+}
+
+const formatFiatDelta = (delta: number): string => {
+    const sign = delta > 0 ? '+' : '';
+    return `(${sign}${(delta * 100).toFixed(2)}%)`;
+};
+
+export const AmountPreview: FC<AmountPreviewProps> = ({
+    amount,
+    token,
+    fiatSymbol = '$',
+    fiatDelta,
+    className,
+    ...props
+}) => {
+    const displayAmount = getDisplayAmount(amount, token?.decimals);
+    const fiatValue = token?.rate ? formatLargeValue(calcFiatValue(amount || '0', token.rate), 2, 2) : null;
+
+    return (
+        <div className={clsx(styles.container, className)} {...props}>
+            <div className={styles.amountRow}>
+                <span className={styles.amount}>{displayAmount}</span>
+                {token && (
+                    <span className={styles.tokenTag}>
+                        {token.address === 'ton' ? (
+                            <TonIconCircle size={24} />
+                        ) : (
+                            <Logo size={24} src={token.logo} fallback={token.symbol?.[0] ?? '?'} alt={token.symbol} />
+                        )}
+                        <span className={styles.symbol}>{token.symbol}</span>
+                    </span>
+                )}
+            </div>
+            {fiatValue !== null && (
+                <div className={styles.fiat}>
+                    <span>
+                        {fiatSymbol} {fiatValue}
+                    </span>
+                    {fiatDelta !== undefined && <span className={styles.fiatDelta}>{formatFiatDelta(fiatDelta)}</span>}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/shared/amount-preview/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 './amount-preview';

package/src/components/shared/flow-preview/flow-preview.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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, ComponentProps } from 'react';
+import { calcFiatValue } from '@ton/appkit';
+import clsx from 'clsx';
+
+import { ChevronDownIcon } from '../../ui/icons';
+import { AmountPreview } from '../amount-preview';
+import type { AppkitUIToken } from '../../../types/appkit-ui-token';
+import styles from './flow-preview.module.css';
+
+export interface FlowPreviewProps extends ComponentProps<'div'> {
+    fromAmount: string;
+    toAmount: string;
+    fromToken?: AppkitUIToken;
+    toToken?: AppkitUIToken;
+    fiatSymbol?: string;
+}
+
+/**
+ * Returns the relative fiat delta between paying `fromFiat` and receiving `toFiat`,
+ * or `undefined` when either side lacks fiat data.
+ */
+const calcFiatDelta = (fromFiat: string, toFiat: string): number | undefined => {
+    const from = parseFloat(fromFiat);
+    const to = parseFloat(toFiat);
+    if (!from || !to) return undefined;
+    return (to - from) / from;
+};
+
+export const FlowPreview: FC<FlowPreviewProps> = ({
+    fromAmount,
+    toAmount,
+    fromToken,
+    toToken,
+    fiatSymbol = '$',
+    className,
+    ...props
+}) => {
+    const fromFiat = calcFiatValue(fromAmount || '0', fromToken?.rate);
+    const toFiat = calcFiatValue(toAmount || '0', toToken?.rate);
+    const fiatDelta = calcFiatDelta(fromFiat, toFiat);
+
+    return (
+        <div className={clsx(styles.container, className)} {...props}>
+            <AmountPreview amount={fromAmount} token={fromToken} fiatSymbol={fiatSymbol} />
+
+            <div className={styles.separator}>
+                <span className={styles.separatorLine} />
+                <span className={styles.arrowBadge}>
+                    <ChevronDownIcon size={16} />
+                </span>
+            </div>
+
+            <AmountPreview amount={toAmount} token={toToken} fiatSymbol={fiatSymbol} fiatDelta={fiatDelta} />
+        </div>
+    );
+};

package/src/components/shared/flow-preview/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 './flow-preview';

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>
@@ -195,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));
 };