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

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

@@ -0,0 +1,53 @@
+/**
+ * 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 { Network } from '@ton/appkit';
+
+import { useBalance } from '../../../balances/hooks/use-balance';
+import { useJettonBalanceByAddress } from '../../../jettons/hooks/use-jetton-balance-by-address';
+import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
+
+interface UseSwapBalancesOptions {
+    fromToken: AppkitUIToken | null;
+    toToken: AppkitUIToken | null;
+    ownerAddress: string | undefined;
+    network: Network | undefined;
+}
+
+export function useSwapBalances({ fromToken, toToken, ownerAddress, network }: UseSwapBalancesOptions) {
+    const isFromNative = fromToken?.address === 'ton';
+    const isToNative = toToken?.address === 'ton';
+
+    const { data: tonBalance, isLoading: isTonBalanceLoading } = useBalance({
+        network,
+        query: { refetchInterval: 5000 },
+    });
+
+    const { data: fromJettonBalance, isLoading: isFromJettonBalanceLoading } = useJettonBalanceByAddress({
+        jettonAddress: fromToken?.address,
+        ownerAddress,
+        jettonDecimals: fromToken?.decimals,
+        network,
+        query: { enabled: !isFromNative && !!fromToken, refetchInterval: 5000 },
+    });
+
+    const { data: toJettonBalance, isLoading: isToJettonBalanceLoading } = useJettonBalanceByAddress({
+        jettonAddress: toToken?.address,
+        ownerAddress,
+        jettonDecimals: toToken?.decimals,
+        network,
+        query: { enabled: !isToNative && !!toToken, refetchInterval: 5000 },
+    });
+
+    return {
+        fromBalance: isFromNative ? tonBalance : fromJettonBalance,
+        toBalance: isToNative ? tonBalance : toJettonBalance,
+        isFromBalanceLoading: isFromNative ? isTonBalanceLoading : isFromJettonBalanceLoading,
+        isToBalanceLoading: isToNative ? isTonBalanceLoading : isToJettonBalanceLoading,
+    };
+}

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

@@ -0,0 +1,96 @@
+/**
+ * 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 { useCallback, useEffect, useState } from 'react';
+import { validateNumericString, truncateDecimals } from '@ton/appkit';
+
+import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
+
+interface UseSwapTokenStateOptions {
+    mappedTokens: AppkitUIToken[];
+    defaultFromSymbol?: string;
+    defaultToSymbol?: string;
+}
+
+const pickFromToken = (tokens: AppkitUIToken[], defaultSymbol?: string): AppkitUIToken | null =>
+    tokens.find((t) => t.symbol.toLowerCase() === defaultSymbol?.toLowerCase()) ?? tokens[0] ?? null;
+
+const pickToToken = (tokens: AppkitUIToken[], defaultSymbol?: string): AppkitUIToken | null =>
+    tokens.find((t) => t.symbol.toLowerCase() === defaultSymbol?.toLowerCase()) ?? tokens[1] ?? null;
+
+export const useSwapTokenState = ({ mappedTokens, defaultFromSymbol, defaultToSymbol }: UseSwapTokenStateOptions) => {
+    const [fromToken, setFromToken] = useState<AppkitUIToken | null>(() =>
+        pickFromToken(mappedTokens, defaultFromSymbol),
+    );
+    const [toToken, setToToken] = useState<AppkitUIToken | null>(() => pickToToken(mappedTokens, defaultToSymbol));
+    const [fromAmount, setFromAmountRaw] = useState('');
+
+    // Re-select tokens whenever the available list changes (e.g. wallet network switches and
+    // `mappedTokens` is filtered down to a different set). Keep the current selection if it's still
+    // valid; otherwise fall back to defaults.
+    useEffect(() => {
+        setFromToken((prev) =>
+            prev && mappedTokens.some((t) => t.address === prev.address)
+                ? prev
+                : pickFromToken(mappedTokens, defaultFromSymbol),
+        );
+        setToToken((prev) =>
+            prev && mappedTokens.some((t) => t.address === prev.address)
+                ? prev
+                : pickToToken(mappedTokens, defaultToSymbol),
+        );
+    }, [mappedTokens, defaultFromSymbol, defaultToSymbol]);
+
+    const setFromAmount = useCallback(
+        (value: string) => {
+            if (value === '' || validateNumericString(value, fromToken?.decimals)) {
+                setFromAmountRaw(value);
+            }
+        },
+        [fromToken?.decimals],
+    );
+
+    const handleSetFromToken = useCallback(
+        (token: AppkitUIToken) => {
+            if (toToken && token.address === toToken.address) {
+                setToToken(fromToken);
+            }
+            setFromToken(token);
+            setFromAmountRaw((prev) => truncateDecimals(prev, token.decimals));
+        },
+        [fromToken, toToken],
+    );
+
+    const handleSetToToken = useCallback(
+        (token: AppkitUIToken) => {
+            if (fromToken && token.address === fromToken.address) {
+                setFromToken(toToken);
+            }
+            setToToken(token);
+        },
+        [fromToken, toToken],
+    );
+
+    const onFlip = useCallback(() => {
+        setFromToken(toToken);
+        setToToken(fromToken);
+        if (toToken) {
+            setFromAmountRaw((prev) => truncateDecimals(prev, toToken.decimals));
+        }
+    }, [fromToken, toToken]);
+
+    return {
+        fromToken,
+        toToken,
+        fromAmount,
+        setFromToken: handleSetFromToken,
+        setToToken: handleSetToToken,
+        setFromAmount,
+        onFlip,
+    };
+};

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

@@ -0,0 +1,51 @@
+/**
+ * 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 { useMemo } from 'react';
+
+import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
+import { hasTooManyDecimals, isAmountExceedingBalance } from '../../../../utils/validate-amount';
+import { mapSwapError } from '../../utils/map-swap-error';
+
+interface UseSwapValidationOptions {
+    fromAmount: string;
+    fromAmountDebounced: string;
+    fromToken: AppkitUIToken | null;
+    toToken: AppkitUIToken | null;
+    fromBalance: string | undefined;
+    quoteError: Error | null;
+    isNetworkSupported: boolean;
+}
+
+export function useSwapValidation({
+    fromAmount,
+    fromAmountDebounced,
+    fromToken,
+    toToken,
+    fromBalance,
+    quoteError,
+    isNetworkSupported,
+}: UseSwapValidationOptions) {
+    const error: string | null = useMemo(() => {
+        if (!isNetworkSupported) return 'defi.unsupportedNetwork';
+
+        if ((parseFloat(fromAmount) || 0) <= 0) return null;
+
+        if (hasTooManyDecimals(fromAmount, fromToken?.decimals)) return 'swap.tooManyDecimals';
+
+        if (isAmountExceedingBalance(fromAmount, fromBalance)) return 'swap.insufficientBalance';
+
+        if (quoteError && fromAmountDebounced) return mapSwapError(quoteError);
+
+        return null;
+    }, [isNetworkSupported, fromAmount, fromToken, fromBalance, quoteError, fromAmountDebounced]);
+
+    const canSubmit = (parseFloat(fromAmount) || 0) > 0 && fromToken !== null && toToken !== null && error === null;
+
+    return { error, canSubmit };
+}

package/src/features/swap/components/swap-widget-ui/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-widget-ui';

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

@@ -0,0 +1,168 @@
+/**
+ * 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 { useCallback, useMemo, useState } from 'react';
+import type { FC, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import { useI18n } from '../../../settings/hooks/use-i18n';
+import { useSelectedWallet } from '../../../wallets';
+import { SwapField } from '../swap-field';
+import { SwapFlipButton } from '../swap-flip-button';
+import { SwapInfo } from '../swap-info';
+import { SwapSettingsModal } from '../swap-settings-modal';
+import { SwapTokenSelectModal } from '../swap-token-select-modal';
+import { LowBalanceModal } from '../../../../components/shared/low-balance-modal';
+import styles from './swap-widget-ui.module.css';
+import type { SwapContextType } from '../swap-widget-provider';
+import { ButtonWithConnect } from '../../../../components/shared/button-with-connect';
+import { SettingsButton } from '../../../../components/shared/settings-button';
+
+export type SwapWidgetRenderProps = SwapContextType & ComponentProps<'div'>;
+
+export const SwapWidgetUI: FC<SwapWidgetRenderProps> = ({
+    fromToken,
+    toToken,
+    tokens,
+    fromAmount,
+    toAmount,
+    fiatSymbol,
+    fromBalance,
+    toBalance,
+    isFromBalanceLoading,
+    isToBalanceLoading,
+    canSubmit,
+    quote,
+    isQuoteLoading,
+    error,
+    slippage,
+    swapProvider,
+    swapProviders,
+    setSwapProviderId,
+    onFlip,
+    onMaxClick,
+    setFromAmount,
+    setFromToken,
+    setToToken,
+    setSlippage,
+    sendSwapTransaction,
+    isSendingTransaction,
+    isLowBalanceWarningOpen,
+    lowBalanceMode,
+    lowBalanceRequiredTon,
+    onLowBalanceChange,
+    onLowBalanceCancel,
+    className,
+    ...props
+}) => {
+    const [wallet] = useSelectedWallet();
+    const isWalletConnected = wallet !== null;
+
+    const { t } = useI18n();
+
+    const [activeField, setActiveField] = useState<'from' | 'to' | null>(null);
+    const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+    const [isFlipped, setIsFlipped] = useState(false);
+
+    const handleFlip = useCallback(() => {
+        setIsFlipped((prev) => !prev);
+        onFlip();
+    }, [onFlip]);
+
+    const buttonText = useMemo(() => {
+        if (error) return t(error);
+        if (!fromToken || !toToken) return t('swap.selectToken');
+        if (canSubmit) return t('swap.continue');
+        return t('swap.enterAmount');
+    }, [error, fromToken, toToken, canSubmit, t]);
+
+    return (
+        <div className={clsx(styles.widget, className)} {...props}>
+            <div className={styles.fieldsContainer}>
+                <SwapField
+                    type="pay"
+                    token={fromToken ?? undefined}
+                    amount={fromAmount}
+                    onAmountChange={setFromAmount}
+                    balance={fromBalance}
+                    isBalanceLoading={isFromBalanceLoading}
+                    onMaxClick={onMaxClick}
+                    onTokenSelectorClick={() => setActiveField('from')}
+                    isWalletConnected={isWalletConnected}
+                    fiatSymbol={fiatSymbol}
+                />
+
+                <div className={styles.flipButtonWrapper}>
+                    <div className={styles.flipButtonSeparator} />
+                    <SwapFlipButton className={styles.flipButton} onClick={handleFlip} rotated={isFlipped} />
+                </div>
+
+                <SwapField
+                    type="receive"
+                    token={toToken ?? undefined}
+                    amount={toAmount}
+                    balance={toBalance}
+                    isBalanceLoading={isToBalanceLoading}
+                    onTokenSelectorClick={() => setActiveField('to')}
+                    loading={isQuoteLoading}
+                    isWalletConnected={isWalletConnected}
+                    fiatSymbol={fiatSymbol}
+                />
+            </div>
+
+            <SwapTokenSelectModal
+                open={activeField !== null}
+                onClose={() => setActiveField(null)}
+                tokens={tokens}
+                onSelect={(token) => {
+                    if (activeField === 'from') setFromToken(token);
+                    else setToToken(token);
+                }}
+            />
+
+            <SwapSettingsModal
+                open={isSettingsOpen}
+                onClose={() => setIsSettingsOpen(false)}
+                slippage={slippage}
+                onSlippageChange={setSlippage}
+                provider={swapProvider}
+                providers={swapProviders}
+                onProviderChange={setSwapProviderId}
+            />
+
+            <LowBalanceModal
+                open={isLowBalanceWarningOpen}
+                mode={lowBalanceMode}
+                requiredTon={lowBalanceRequiredTon}
+                onChange={onLowBalanceChange}
+                onCancel={onLowBalanceCancel}
+            />
+
+            <div className={styles.actions}>
+                <ButtonWithConnect
+                    variant="fill"
+                    size="l"
+                    fullWidth
+                    disabled={!canSubmit || isQuoteLoading || isSendingTransaction}
+                    onClick={sendSwapTransaction}
+                >
+                    {buttonText}
+                </ButtonWithConnect>
+                <SettingsButton onClick={() => setIsSettingsOpen(true)} />
+            </div>
+
+            <SwapInfo
+                quote={quote}
+                provider={swapProvider}
+                toToken={toToken}
+                slippage={slippage}
+                isQuoteLoading={isQuoteLoading}
+            />
+        </div>
+    );
+};

package/src/features/swap/components/token-selector/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 './token-selector';

package/src/features/swap/components/token-selector/token-selector.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 styles from './token-selector.module.css';
+import { Button } from '../../../../components/ui/button';
+import { ChevronDownIcon } from '../../../../components/ui/icons';
+import { Logo } from '../../../../components/ui/logo';
+import { useI18n } from '../../../settings/hooks/use-i18n';
+
+export interface TokenSelectorProps {
+    symbol?: string;
+    icon?: string;
+    onClick?: () => void;
+}
+
+export const TokenSelector: FC<TokenSelectorProps> = ({ symbol, icon, onClick }) => {
+    const { t } = useI18n();
+    const label = symbol ?? t('swap.selectToken');
+    const fallback = symbol?.[0] ?? '?';
+
+    return (
+        <Button className={styles.tokenSelector} onClick={onClick} variant="gray" size="s">
+            {symbol && <Logo size={24} src={icon} fallback={fallback} alt={symbol} />}
+            <span style={{ lineHeight: '24px' }}>{label}</span>
+            <ChevronDownIcon size={16} className={styles.chevron} />
+        </Button>
+    );
+};

package/src/features/swap/hooks/use-build-swap-transaction.ts

@@ -17,7 +17,7 @@ import type {
     BuildSwapTransactionVariables,
 } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useMutation } from '../../../libs/query';
 
 export type UseBuildSwapTransactionParameters<context = unknown> = BuildSwapTransactionMutationOptions<context>;
@@ -29,6 +29,9 @@ export type UseBuildSwapTransactionReturnType<context = unknown> = UseMutationRe
     context
 >;
 
+/**
+ * Hook to build a swap transaction from a previously fetched quote.
+ */
 export const useBuildSwapTransaction = <context = unknown>(
     parameters?: UseBuildSwapTransactionParameters<context>,
 ): UseBuildSwapTransactionReturnType<context> => {

package/src/features/swap/hooks/use-swap-provider.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 { useSyncExternalStore, useCallback } from 'react';
+import { getSwapProvider, setDefaultSwapProvider, watchSwapProviders } from '@ton/appkit';
+import type { GetSwapProviderReturnType } from '@ton/appkit';
+
+import { useAppKit } from '../../settings/hooks/use-app-kit';
+
+export type UseSwapProviderReturnType = readonly [GetSwapProviderReturnType | undefined, (providerId: string) => void];
+
+/**
+ * Hook to get and set the currently selected swap provider.
+ * Mirrors the tuple shape of `useSelectedWallet`.
+ */
+export const useSwapProvider = (): UseSwapProviderReturnType => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchSwapProviders(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        try {
+            return getSwapProvider(appKit);
+        } catch {
+            return undefined;
+        }
+    }, [appKit]);
+
+    const provider = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+    const setProviderId = useCallback(
+        (providerId: string) => {
+            setDefaultSwapProvider(appKit, { providerId });
+        },
+        [appKit],
+    );
+
+    return [provider, setProviderId] as const;
+};

package/src/features/swap/hooks/use-swap-providers.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 { useSyncExternalStore, useCallback } from 'react';
+import { getSwapProviders, watchSwapProviders } from '@ton/appkit';
+import type { GetSwapProvidersReturnType } from '@ton/appkit';
+
+import { useAppKit } from '../../settings/hooks/use-app-kit';
+
+export type UseSwapProvidersReturnType = GetSwapProvidersReturnType;
+
+/**
+ * Hook to get all registered swap providers.
+ */
+export const useSwapProviders = (): UseSwapProvidersReturnType => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchSwapProviders(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getSwapProviders(appKit);
+    }, [appKit]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};

package/src/features/swap/hooks/use-swap-quote.ts

@@ -11,9 +11,10 @@
 import { getSwapQuoteQueryOptions } from '@ton/appkit/queries';
 import type { GetSwapQuoteData, GetSwapQuoteErrorType, GetSwapQuoteQueryConfig } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useQuery } from '../../../libs/query';
 import type { UseQueryReturnType } from '../../../libs/query';
+import { useNetwork } from '../../network';
 
 export type UseSwapQuoteParameters<selectData = GetSwapQuoteData> = GetSwapQuoteQueryConfig<selectData>;
 
@@ -22,10 +23,14 @@ export type UseSwapQuoteReturnType<selectData = GetSwapQuoteData> = UseQueryRetu
     GetSwapQuoteErrorType
 >;
 
+/**
+ * Hook to get a swap quote for the given token pair and amount.
+ */
 export const useSwapQuote = <selectData = GetSwapQuoteData>(
     parameters: UseSwapQuoteParameters<selectData> = {},
 ): UseSwapQuoteReturnType<selectData> => {
     const appKit = useAppKit();
+    const walletNetwork = useNetwork();
 
-    return useQuery(getSwapQuoteQueryOptions(appKit, parameters));
+    return useQuery(getSwapQuoteQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }));
 };

package/src/features/swap/index.ts

@@ -6,5 +6,14 @@
  *
  */
 
+export * from './components/swap-widget';
+export * from './components/swap-widget-ui';
+export * from './components/swap-widget-provider';
+export * from './components/swap-field';
+export * from './components/swap-flip-button';
+export * from './components/swap-info';
+
 export * from './hooks/use-swap-quote';
 export * from './hooks/use-build-swap-transaction';
+export * from './hooks/use-swap-provider';
+export * from './hooks/use-swap-providers';

package/src/features/swap/utils/get-display-amount.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { formatLargeValue } from '@ton/appkit';
+
+/** Cap for fractional digits shown in the swap UI. */
+const MAX_DISPLAY_DECIMALS = 5;
+
+/**
+ * Format a token amount for display in the swap UI.
+ * Caps fractional digits at {@link MAX_DISPLAY_DECIMALS}, or at the token's own decimals when lower.
+ */
+export const getDisplayAmount = (amount: string | undefined, tokenDecimals?: number): string => {
+    const decimals = Math.min(tokenDecimals ?? MAX_DISPLAY_DECIMALS, MAX_DISPLAY_DECIMALS);
+    return formatLargeValue(amount || '0', decimals);
+};

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

@@ -0,0 +1,32 @@
+/**
+ * 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 { 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`.
+ */
+export const mapSwapError = (error: unknown): string => {
+    if (error instanceof SwapError) {
+        switch (error.code) {
+            case SwapErrorCode.InvalidQuote:
+                return 'swap.invalidQuote';
+            case SwapErrorCode.InsufficientLiquidity:
+                return 'swap.insufficientLiquidity';
+            case SwapErrorCode.QuoteExpired:
+                return 'swap.quoteExpired';
+            case SwapErrorCode.BuildTxFailed:
+                return 'swap.buildTxFailed';
+        }
+    }
+
+    return mapDefiError(error) ?? 'swap.quoteError';
+};

package/src/features/swap/utils/map-swap-widget-tokens.ts

@@ -0,0 +1,34 @@
+/**
+ * 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 { tryToNonBounceableAddress } from '@ton/appkit';
+
+import type { AppkitUIToken } from '../../../types/appkit-ui-token';
+
+export const mapSwapWidgetTokens = (tokens: AppkitUIToken[]): AppkitUIToken[] => {
+    const mapped = tokens.reduce((acc, token) => {
+        if (token.address === 'ton') {
+            acc.push({ ...token, address: 'ton' });
+
+            return acc;
+        }
+
+        const friendlyAddress = tryToNonBounceableAddress(token.address);
+
+        if (!friendlyAddress) return acc;
+
+        acc.push({
+            ...token,
+            address: friendlyAddress,
+        });
+
+        return acc;
+    }, [] as AppkitUIToken[]);
+
+    return mapped;
+};