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

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

@@ -6,27 +6,29 @@
  *
  */
 
-import { SwapError } from '@ton/appkit';
+import { SwapError, SwapErrorCode } from '@ton/appkit';
 
 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 SwapError.INVALID_QUOTE:
+            case SwapErrorCode.InvalidQuote:
                 return 'swap.invalidQuote';
-            case SwapError.INSUFFICIENT_LIQUIDITY:
+            case SwapErrorCode.InsufficientLiquidity:
                 return 'swap.insufficientLiquidity';
-            case SwapError.QUOTE_EXPIRED:
+            case SwapErrorCode.QuoteExpired:
                 return 'swap.quoteExpired';
-            case SwapError.BUILD_TX_FAILED:
+            case SwapErrorCode.BuildTxFailed:
                 return 'swap.buildTxFailed';
         }
     }
 
-    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;

package/src/utils/map-defi-error.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { DefiError } from '@ton/appkit';
+import { DefiError, DefiErrorCode } from '@ton/appkit';
 
 /**
  * Map a thrown error to an i18n key from the `defi.*` namespace.
@@ -17,17 +17,17 @@ export const mapDefiError = (error: unknown): string | null => {
     if (!(error instanceof DefiError)) return null;
 
     switch (error.code) {
-        case DefiError.UNSUPPORTED_NETWORK:
+        case DefiErrorCode.UnsupportedNetwork:
             return 'defi.unsupportedNetwork';
-        case DefiError.NETWORK_ERROR:
+        case DefiErrorCode.NetworkError:
             return 'defi.networkError';
-        case DefiError.PROVIDER_NOT_FOUND:
+        case DefiErrorCode.ProviderNotFound:
             return 'defi.providerNotFound';
-        case DefiError.NO_DEFAULT_PROVIDER:
+        case DefiErrorCode.NoDefaultProvider:
             return 'defi.noDefaultProvider';
-        case DefiError.INVALID_PROVIDER:
+        case DefiErrorCode.InvalidProvider:
             return 'defi.invalidProvider';
-        case DefiError.INVALID_PARAMS:
+        case DefiErrorCode.InvalidParams:
             return 'defi.invalidParams';
         default:
             return null;

package/dist/esm/features/balances/components/balance-badge/balance-badge.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * 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 { formatUnits } from '@ton/appkit';
-import clsx from 'clsx';
-import { Block } from '../../../../components/ui/block';
-import styles from './balance-badge.module.css';
-import { Logo } from '../../../../components/ui/logo';
-const BalanceBadgeContainer = ({ className, ...props }) => {
-    return _jsx(Block, { direction: "row", className: clsx(styles.balance, className), ...props });
-};
-const BalanceBlock = ({ className, ...props }) => {
-    return _jsx("div", { className: clsx(styles.balanceContainer, className), ...props });
-};
-const Balance = ({ balance, decimals, ...props }) => {
-    return _jsx("span", { ...props, children: balance ? formatUnits(balance, decimals) : '0' });
-};
-const BalanceSymbol = ({ className, symbol, ...props }) => {
-    return (_jsx("span", { className: clsx(styles.ticker, className), ...props, children: symbol }));
-};
-export const BalanceBadge = {
-    Container: BalanceBadgeContainer,
-    Icon: Logo,
-    BalanceBlock: BalanceBlock,
-    Symbol: BalanceSymbol,
-    Balance: Balance,
-};
-//# sourceMappingURL=balance-badge.js.map

package/dist/esm/features/balances/components/balance-badge/balance-badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"balance-badge.js","sourceRoot":"","sources":["../../../../../../src/features/balances/components/balance-badge/balance-badge.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAEtD,MAAM,qBAAqB,GAA8B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,KAAC,KAAK,IAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC5F,CAAC,CAAC;AAEF,MAAM,YAAY,GAA8B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACxE,OAAO,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AACnF,CAAC,CAAC;AAEF,MAAM,OAAO,GAAuE,CAAC,EACjF,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,EAAE;IACD,OAAO,kBAAU,KAAK,YAAG,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,GAAQ,CAAC;AACpF,CAAC,CAAC;AAEF,MAAM,aAAa,GAAoD,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvG,OAAO,CACH,eAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,KAAM,KAAK,YACrD,MAAM,GACJ,CACV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE,IAAI;IACV,YAAY,EAAE,YAAY;IAC1B,MAAM,EAAE,aAAa;IACrB,OAAO,EAAE,OAAO;CACnB,CAAC"}

package/dist/esm/features/balances/components/balance-badge/balance-badge.module.css

@@ -1,21 +0,0 @@
-.balance {
-  composes: labelMedium from "../../../../styles/typography.module.css";
-
-  width: fit-content;
-  gap: 12px;
-  padding: 12px;
-  color: var(--ta-color-text-secondary);
-  line-height: 1;
-}
-
-.balanceContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.ticker {
-  composes: labelSemibold from "../../../../styles/typography.module.css";
-  color: var(--ta-color-text);
-  line-height: 1;
-}

package/dist/esm/features/balances/components/balance-badge/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/features/balances/components/balance-badge/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}