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

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

@@ -0,0 +1,200 @@
+/**
+ * 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, useState } from 'react';
+import type { ComponentProps, FC, ReactNode } from 'react';
+import type { StakingQuoteDirection } from '@ton/appkit';
+import clsx from 'clsx';
+
+import { CenteredAmountInput } from '../../../../components/ui/centered-amount-input';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/tabs';
+import { useI18n } from '../../../settings/hooks/use-i18n';
+import { StakingBalanceBlock } from '../staking-balance-block';
+import { StakingInfo } from '../staking-info';
+import { SelectUnstakeMode } from '../select-unstake-mode';
+import { StakingSettingsModal } from '../staking-settings-modal';
+import styles from './staking-widget-ui.module.css';
+import type { StakingContextType } from '../staking-widget-provider';
+import { ButtonWithConnect } from '../../../../components/shared/button-with-connect';
+import { AmountReversed } from '../../../../components/ui/amount-reversed';
+import { LowBalanceModal } from '../../../../components/shared/low-balance-modal';
+import { SettingsButton } from '../../../../components/shared/settings-button';
+
+export type StakingWidgetRenderProps = StakingContextType & ComponentProps<'div'>;
+
+export const StakingWidgetUI: FC<StakingWidgetRenderProps> = ({
+    amount,
+    canSubmit,
+    isQuoteLoading,
+    error,
+    providerInfo,
+    providerMetadata,
+    stakingProvider,
+    stakingProviders,
+    setStakingProviderId,
+    network,
+    isProviderInfoLoading,
+    setAmount,
+    direction,
+    quote,
+    sendTransaction,
+    isSendingTransaction,
+    unstakeMode,
+    setUnstakeMode,
+    stakedBalance,
+    isStakedBalanceLoading,
+    onChangeDirection,
+    isReversed,
+    toggleReversed,
+    reversedAmount,
+    onMaxClick,
+    balance,
+    isBalanceLoading,
+    isLowBalanceWarningOpen,
+    lowBalanceMode,
+    lowBalanceRequiredTon,
+    onLowBalanceChange,
+    onLowBalanceCancel,
+    className,
+    ...props
+}) => {
+    const { t } = useI18n();
+
+    const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+    const receiveToken = providerMetadata?.receiveToken;
+    const stakeToken = providerMetadata?.stakeToken;
+
+    const buttonText = useMemo(() => {
+        if (error) return t(error);
+        return direction === 'stake' ? t('staking.continue') : t('staking.unstake');
+    }, [error, direction, t]);
+
+    const submitActions: ReactNode = (
+        <div className={styles.actions}>
+            <ButtonWithConnect
+                variant="fill"
+                size="l"
+                fullWidth
+                disabled={!canSubmit || isQuoteLoading || isSendingTransaction}
+                onClick={sendTransaction}
+            >
+                {buttonText}
+            </ButtonWithConnect>
+            <SettingsButton onClick={() => setIsSettingsOpen(true)} />
+        </div>
+    );
+
+    return (
+        <div className={clsx(styles.widget, className)} {...props}>
+            <Tabs defaultValue={direction} onValueChange={(value) => onChangeDirection(value as StakingQuoteDirection)}>
+                <TabsList>
+                    <TabsTrigger value="stake">{t('staking.stake')}</TabsTrigger>
+                    <TabsTrigger value="unstake">{t('staking.unstake')}</TabsTrigger>
+                </TabsList>
+
+                {/* ── STAKE TAB ── */}
+                <TabsContent className={styles.tab} value="stake">
+                    <div className={styles.content}>
+                        <div className={styles.inputSection}>
+                            <CenteredAmountInput value={amount} onValueChange={setAmount} ticker={stakeToken?.ticker} />
+                            {receiveToken && (
+                                <AmountReversed
+                                    value={reversedAmount}
+                                    ticker={receiveToken.ticker}
+                                    decimals={receiveToken.decimals}
+                                />
+                            )}
+                        </div>
+
+                        <StakingBalanceBlock
+                            direction="stake"
+                            providerMetadata={providerMetadata}
+                            stakedBalance={stakedBalance?.stakedBalance}
+                            isStakedBalanceLoading={isStakedBalanceLoading}
+                            balance={balance}
+                            isBalanceLoading={isBalanceLoading}
+                            onMaxClick={onMaxClick}
+                        />
+
+                        {submitActions}
+                    </div>
+                </TabsContent>
+
+                {/* ── UNSTAKE TAB ── */}
+                <TabsContent value="unstake">
+                    <div className={styles.content}>
+                        <div className={styles.inputSection}>
+                            <CenteredAmountInput
+                                value={amount}
+                                onValueChange={setAmount}
+                                ticker={!isReversed && receiveToken ? receiveToken.ticker : stakeToken?.ticker}
+                            />
+                            {receiveToken && (
+                                <AmountReversed
+                                    value={reversedAmount}
+                                    ticker={isReversed ? receiveToken.ticker : (stakeToken?.ticker ?? '')}
+                                    decimals={isReversed ? receiveToken.decimals : stakeToken?.decimals}
+                                    onChangeDirection={
+                                        providerMetadata?.supportsReversedQuote ? toggleReversed : undefined
+                                    }
+                                />
+                            )}
+                        </div>
+
+                        <StakingBalanceBlock
+                            direction="unstake"
+                            providerMetadata={providerMetadata}
+                            stakedBalance={stakedBalance?.stakedBalance}
+                            isStakedBalanceLoading={isStakedBalanceLoading}
+                            balance={balance}
+                            isBalanceLoading={isBalanceLoading}
+                            onMaxClick={onMaxClick}
+                        />
+
+                        {submitActions}
+
+                        <SelectUnstakeMode
+                            value={unstakeMode}
+                            onValueChange={setUnstakeMode}
+                            providerInfo={providerInfo}
+                            providerMetadata={providerMetadata}
+                        />
+                    </div>
+                </TabsContent>
+            </Tabs>
+
+            <StakingInfo
+                className={styles.info}
+                quote={quote}
+                isQuoteLoading={isQuoteLoading}
+                providerInfo={providerInfo}
+                providerMetadata={providerMetadata}
+                isProviderInfoLoading={isProviderInfoLoading}
+                direction={direction}
+            />
+
+            <LowBalanceModal
+                open={isLowBalanceWarningOpen}
+                mode={lowBalanceMode}
+                requiredTon={lowBalanceRequiredTon}
+                onChange={onLowBalanceChange}
+                onCancel={onLowBalanceCancel}
+            />
+
+            <StakingSettingsModal
+                open={isSettingsOpen}
+                onClose={() => setIsSettingsOpen(false)}
+                provider={stakingProvider}
+                providers={stakingProviders}
+                onProviderChange={setStakingProviderId}
+                network={network}
+            />
+        </div>
+    );
+};

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

@@ -14,7 +14,7 @@ import type {
     BuildStakeTransactionVariables,
 } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useMutation } from '../../../libs/query';
 
 export type UseBuildStakeTransactionReturnType<context = unknown> = UseMutationResult<

package/src/features/staking/hooks/use-staked-balance.ts

@@ -9,9 +9,10 @@
 import { getStakedBalanceQueryOptions } from '@ton/appkit/queries';
 import type { GetStakedBalanceData, GetStakedBalanceErrorType, GetStakedBalanceQueryConfig } 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 UseStakedBalanceParameters<selectData = GetStakedBalanceData> = GetStakedBalanceQueryConfig<selectData>;
 export type UseStakedBalanceReturnType<selectData = GetStakedBalanceData> = UseQueryReturnType<
@@ -26,5 +27,9 @@ export const useStakedBalance = <selectData = GetStakedBalanceData>(
     parameters: UseStakedBalanceParameters<selectData> = {},
 ): UseStakedBalanceReturnType<selectData> => {
     const appKit = useAppKit();
-    return useQuery(getStakedBalanceQueryOptions(appKit, parameters));
+    const walletNetwork = useNetwork();
+
+    return useQuery(
+        getStakedBalanceQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }),
+    );
 };

package/src/features/staking/hooks/use-staking-provider-info.ts

@@ -13,9 +13,11 @@ import type {
     GetStakingProviderInfoQueryConfig,
 } 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';
+import { useStakingProvider } from './use-staking-provider';
 
 export type UseStakingProviderInfoParameters<selectData = GetStakingProviderInfoData> =
     GetStakingProviderInfoQueryConfig<selectData>;
@@ -31,5 +33,14 @@ export const useStakingProviderInfo = <selectData = GetStakingProviderInfoData>(
     parameters: UseStakingProviderInfoParameters<selectData> = {},
 ): UseStakingProviderInfoReturnType<selectData> => {
     const appKit = useAppKit();
-    return useQuery(getStakingProviderInfoQueryOptions(appKit, parameters));
+    const walletNetwork = useNetwork();
+    const provider = useStakingProvider({ id: parameters.providerId });
+
+    return useQuery(
+        getStakingProviderInfoQueryOptions(appKit, {
+            providerId: provider?.providerId,
+            ...parameters,
+            network: parameters.network ?? walletNetwork,
+        }),
+    );
 };

package/src/features/staking/hooks/use-staking-provider-metadata.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 { getStakingProviderMetadata, resolveNetwork } from '@ton/appkit';
+import type { GetStakingProviderMetadataOptions, GetStakingProviderMetadataReturnType } from '@ton/appkit';
+import { useMemo } from 'react';
+
+import { useAppKit } from '../../settings';
+import { useStakingProvider } from './use-staking-provider';
+
+export type UseStakingProviderMetadataParameters = GetStakingProviderMetadataOptions;
+export type UseStakingProviderMetadataReturnType = GetStakingProviderMetadataReturnType;
+
+/**
+ * Hook to get static staking provider metadata
+ */
+export const useStakingProviderMetadata = (parameters: UseStakingProviderMetadataParameters = {}) => {
+    const appKit = useAppKit();
+    const provider = useStakingProvider({ id: parameters.providerId });
+    const network = resolveNetwork(appKit, parameters.network);
+
+    return useMemo(() => {
+        try {
+            return getStakingProviderMetadata(appKit, { ...parameters, network });
+        } catch {
+            return undefined;
+        }
+    }, [appKit, network, parameters.providerId, provider?.providerId]);
+};

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

@@ -0,0 +1,42 @@
+/**
+ * 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 { getStakingProvider, watchStakingProviders } from '@ton/appkit';
+import type { GetStakingProviderOptions, GetStakingProviderReturnType } from '@ton/appkit';
+
+import { useAppKit } from '../../settings/hooks/use-app-kit';
+
+export type UseStakingProviderReturnType = GetStakingProviderReturnType;
+
+/**
+ * Hook to get staking provider
+ */
+export const useStakingProvider = (
+    options: GetStakingProviderOptions = {},
+): UseStakingProviderReturnType | undefined => {
+    const appKit = useAppKit();
+    const { id } = options;
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchStakingProviders(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        try {
+            return getStakingProvider(appKit, { id });
+        } catch {
+            return undefined;
+        }
+    }, [appKit, id]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};

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

@@ -6,30 +6,30 @@
  *
  */
 
-import { getStakingProvidersQueryOptions } from '@ton/appkit/queries';
-import type {
-    GetStakingProvidersData,
-    GetStakingProvidersErrorType,
-    GetStakingProvidersQueryConfig,
-} from '@ton/appkit/queries';
+import { useSyncExternalStore, useCallback } from 'react';
+import { getStakingProviders, watchStakingProviders } from '@ton/appkit';
+import type { GetStakingProvidersReturnType } from '@ton/appkit';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
-import { useQuery } from '../../../libs/query';
-import type { UseQueryReturnType } from '../../../libs/query';
+import { useAppKit } from '../../settings';
 
-export type UseStakingProvidersParameters<selectData = GetStakingProvidersData> =
-    GetStakingProvidersQueryConfig<selectData>;
-export type UseStakingProvidersReturnType<selectData = GetStakingProvidersData> = UseQueryReturnType<
-    selectData,
-    GetStakingProvidersErrorType
->;
+export type UseStakingProvidersReturnType = GetStakingProvidersReturnType;
 
 /**
- * Hook to get available staking provider IDs
+ * Hook to get all registered staking providers.
  */
-export const useStakingProviders = <selectData = GetStakingProvidersData>(
-    parameters: UseStakingProvidersParameters<selectData> = {},
-): UseStakingProvidersReturnType<selectData> => {
+export const useStakingProviders = (): UseStakingProvidersReturnType => {
     const appKit = useAppKit();
-    return useQuery(getStakingProvidersQueryOptions(appKit, parameters));
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchStakingProviders(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getStakingProviders(appKit);
+    }, [appKit]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 };

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

@@ -9,9 +9,10 @@
 import { getStakingQuoteQueryOptions } from '@ton/appkit/queries';
 import type { GetStakingQuoteData, GetStakingQuoteErrorType, GetStakingQuoteQueryConfig } 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 UseStakingQuoteParameters<selectData = GetStakingQuoteData> = GetStakingQuoteQueryConfig<selectData>;
 export type UseStakingQuoteReturnType<selectData = GetStakingQuoteData> = UseQueryReturnType<
@@ -26,5 +27,9 @@ export const useStakingQuote = <selectData = GetStakingQuoteData>(
     parameters: UseStakingQuoteParameters<selectData> = {},
 ): UseStakingQuoteReturnType<selectData> => {
     const appKit = useAppKit();
-    return useQuery(getStakingQuoteQueryOptions(appKit, parameters));
+    const walletNetwork = useNetwork();
+
+    return useQuery(
+        getStakingQuoteQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }),
+    );
 };

package/src/features/staking/index.ts

@@ -8,11 +8,8 @@
 
 export { UnstakeMode, type UnstakeModes } from '@ton/appkit';
 
-export {
-    useStakingProviders,
-    type UseStakingProvidersParameters,
-    type UseStakingProvidersReturnType,
-} from './hooks/use-staking-providers';
+export { useStakingProviders, type UseStakingProvidersReturnType } from './hooks/use-staking-providers';
+export { useStakingProvider, type UseStakingProviderReturnType } from './hooks/use-staking-provider';
 export {
     useStakingQuote,
     type UseStakingQuoteParameters,
@@ -28,4 +25,17 @@ export {
     type UseStakingProviderInfoParameters,
     type UseStakingProviderInfoReturnType,
 } from './hooks/use-staking-provider-info';
+export {
+    useStakingProviderMetadata,
+    type UseStakingProviderMetadataParameters,
+    type UseStakingProviderMetadataReturnType,
+} from './hooks/use-staking-provider-metadata';
 export { useBuildStakeTransaction, type UseBuildStakeTransactionReturnType } from './hooks/use-build-stake-transaction';
+
+export * from './components/staking-widget';
+export * from './components/staking-widget-ui';
+export * from './components/staking-widget-provider';
+export * from './components/staking-balance-block';
+export * from './components/staking-info';
+export * from './components/select-unstake-mode';
+export * from './components/staking-settings-modal';

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

@@ -0,0 +1,28 @@
+/**
+ * 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 { 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`.
+ */
+export const mapStakingError = (error: unknown): string => {
+    if (error instanceof StakingError) {
+        switch (error.code) {
+            case StakingErrorCode.InvalidParams:
+                return 'staking.invalidParams';
+            case StakingErrorCode.UnsupportedOperation:
+                return 'staking.unsupportedOperation';
+        }
+    }
+
+    return mapDefiError(error) ?? 'staking.quoteError';
+};

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

package/src/features/swap/components/swap-field/swap-field.tsx

@@ -0,0 +1,114 @@
+/**
+ * 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 { useI18n } from '../../../settings/hooks/use-i18n';
+import { Input } from '../../../../components/ui/input/input';
+import { Skeleton } from '../../../../components/ui/skeleton';
+import { TokenSelector } from '../token-selector/token-selector';
+import type { AppkitUIToken } from '../../../../types/appkit-ui-token';
+import { getDisplayAmount } from '../../utils/get-display-amount';
+import styles from './swap-field.module.css';
+
+export interface SwapFieldProps extends Omit<ComponentProps<typeof Input.Container>, 'children'> {
+    type: 'pay' | 'receive';
+    amount: string;
+    token?: AppkitUIToken;
+    onAmountChange?: (value: string) => void;
+    balance?: string;
+    isBalanceLoading?: boolean;
+    loading?: boolean;
+    onMaxClick?: () => void;
+    onTokenSelectorClick?: () => void;
+    isWalletConnected?: boolean;
+    fiatSymbol?: string;
+}
+
+export const SwapField: FC<SwapFieldProps> = ({
+    type,
+    token,
+    amount,
+    onAmountChange,
+    balance,
+    isBalanceLoading,
+    loading,
+    onMaxClick,
+    onTokenSelectorClick,
+    isWalletConnected,
+    fiatSymbol = '$',
+    className,
+    ...props
+}) => {
+    const { t } = useI18n();
+
+    const tokenSymbol = token?.symbol;
+    const displayBalance = getDisplayAmount(balance, token?.decimals);
+
+    return (
+        <Input.Container
+            className={clsx(styles.container, className)}
+            size="l"
+            variant="unstyled"
+            loading={loading}
+            resizable
+            {...props}
+        >
+            <Input.Header className={styles.header}>
+                <Input.Title className={styles.title}>{type === 'pay' ? t('swap.pay') : t('swap.receive')}</Input.Title>
+            </Input.Header>
+
+            <Input.Field className={styles.field}>
+                <Input.Input
+                    placeholder="0"
+                    value={amount}
+                    onChange={onAmountChange && ((e) => onAmountChange(e.target.value))}
+                    disabled={type === 'receive'}
+                />
+                <Input.Slot side="right">
+                    <TokenSelector symbol={tokenSymbol} icon={token?.logo} onClick={onTokenSelectorClick} />
+                </Input.Slot>
+            </Input.Field>
+
+            <Input.Caption className={styles.caption}>
+                <div className={styles.balanceLine}>
+                    <span>
+                        {token?.rate &&
+                            `${fiatSymbol} ${formatLargeValue(calcFiatValue(amount || '0', token.rate), 2, 2)}`}
+                    </span>
+                    {type === 'pay' && token && (
+                        <span className={styles.balanceWrapper}>
+                            {isBalanceLoading ? (
+                                <Skeleton className={styles.skeletonText} />
+                            ) : (
+                                <>
+                                    <button className={styles.maxButton} onClick={onMaxClick} type="button">
+                                        <span className={styles.max}>{t('swap.max')}</span> {displayBalance}{' '}
+                                        {tokenSymbol}
+                                    </button>
+                                </>
+                            )}
+                        </span>
+                    )}
+
+                    {type === 'receive' && token && (
+                        <span className={styles.balanceWrapper}>
+                            {isBalanceLoading ? (
+                                <Skeleton className={styles.skeletonText} />
+                            ) : (
+                                `${displayBalance} ${tokenSymbol}`
+                            )}
+                        </span>
+                    )}
+                </div>
+            </Input.Caption>
+        </Input.Container>
+    );
+};

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

package/src/features/swap/components/swap-flip-button/swap-flip-button.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 { ComponentProps, FC } from 'react';
+import clsx from 'clsx';
+
+import styles from './swap-flip-button.module.css';
+import { Button } from '../../../../components/ui/button';
+import { FlipIcon } from '../../../../components/ui/icons';
+
+export interface SwapFlipButtonProps extends ComponentProps<'div'> {
+    onClick?: () => void;
+    rotated?: boolean;
+}
+
+export const SwapFlipButton: FC<SwapFlipButtonProps> = ({ onClick, rotated, className, ...props }) => {
+    return (
+        <div className={clsx(styles.container, className)} {...props}>
+            <Button className={clsx(styles.flipButton, rotated && styles.rotated)} onClick={onClick}>
+                <FlipIcon />
+            </Button>
+        </div>
+    );
+};

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