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

package/src/features/jettons/hooks/use-jettons-by-address.ts

@@ -9,9 +9,10 @@
 import { getJettonsByAddressQueryOptions } from '@ton/appkit/queries';
 import type { GetJettonsByAddressData, GetJettonsErrorType, GetJettonsByAddressQueryConfig } 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 UseJettonsByAddressParameters<selectData = GetJettonsByAddressData> =
     GetJettonsByAddressQueryConfig<selectData>;
@@ -28,6 +29,9 @@ export const useJettonsByAddress = <selectData = GetJettonsByAddressData>(
     parameters: UseJettonsByAddressParameters<selectData> = {},
 ): UseJettonsByAddressReturnType<selectData> => {
     const appKit = useAppKit();
+    const walletNetwork = useNetwork();
 
-    return useQuery(getJettonsByAddressQueryOptions(appKit, parameters));
+    return useQuery(
+        getJettonsByAddressQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }),
+    );
 };

package/src/features/jettons/hooks/use-transfer-jetton.ts

@@ -19,7 +19,7 @@ import { transferJettonMutationOptions } from '@ton/appkit/queries';
 
 import { useMutation } from '../../../libs/query';
 import type { UseMutationReturnType } from '../../../libs/query';
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 
 export type UseTransferJettonParameters<context = unknown> = TransferJettonOptions<context>;
 

package/src/features/jettons/hooks/use-watch-jettons-by-address.ts

@@ -12,7 +12,7 @@ import { watchJettonsByAddress, hasStreamingProvider, resolveNetwork } from '@to
 import type { WatchJettonsByAddressOptions, JettonUpdate } from '@ton/appkit';
 import { handleJettonBalanceUpdate, handleJettonsUpdate } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 
 export type UseWatchJettonsByAddressParameters = Partial<WatchJettonsByAddressOptions>;
 

package/src/features/network/hooks/use-block-number.ts

@@ -9,9 +9,10 @@
 import { getBlockNumberQueryOptions } from '@ton/appkit/queries';
 import type { GetBlockNumberData, GetBlockNumberErrorType, GetBlockNumberQueryConfig } 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 '../hooks/use-network';
 
 export type UseBlockNumberParameters<selectData = GetBlockNumberData> = GetBlockNumberQueryConfig<selectData>;
 
@@ -27,6 +28,9 @@ export const useBlockNumber = <selectData = GetBlockNumberData>(
     parameters: UseBlockNumberParameters<selectData> = {},
 ): UseBlockNumberReturnType<selectData> => {
     const appKit = useAppKit();
+    const walletNetwork = useNetwork();
 
-    return useQuery(getBlockNumberQueryOptions(appKit, parameters));
+    return useQuery(
+        getBlockNumberQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }),
+    );
 };

package/src/features/network/hooks/use-default-network.ts

@@ -10,7 +10,7 @@ import { useSyncExternalStore, useCallback } from 'react';
 import { getDefaultNetwork, setDefaultNetwork, watchDefaultNetwork } from '@ton/appkit';
 import type { GetDefaultNetworkReturnType, Network } from '@ton/appkit';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 
 export type UseDefaultNetworkReturnType = [
     network: GetDefaultNetworkReturnType,

package/src/features/network/hooks/use-networks.ts

@@ -10,7 +10,7 @@ import { useSyncExternalStore, useCallback, useRef } from 'react';
 import { getNetworks, watchNetworks } from '@ton/appkit';
 import type { GetNetworksReturnType } from '@ton/appkit';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 
 export type UseNetworksReturnType = GetNetworksReturnType;
 

package/src/features/nft/components/nft-item/nft-item.tsx

@@ -12,20 +12,10 @@ import type { FC, ComponentProps } from 'react';
 import { getFormattedNftInfo } from '@ton/appkit';
 import clsx from 'clsx';
 
-import { useI18n } from '../../../../hooks/use-i18n';
+import { ImageIcon } from '../../../../components/ui/icons';
+import { useI18n } from '../../../settings/hooks/use-i18n';
 import styles from './nft-item.module.css';
 
-const PlaceholderIcon: FC = () => (
-    <svg className={styles.placeholderIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-        />
-    </svg>
-);
-
 export interface NftItemProps extends ComponentProps<'button'> {
     nft: NFT;
 }
@@ -43,7 +33,7 @@ export const NftItem: FC<NftItemProps> = ({ nft, className, ...props }) => {
                 {showImage ? (
                     <img src={image} alt={name} className={styles.image} onError={() => setImageError(true)} />
                 ) : (
-                    <PlaceholderIcon />
+                    <ImageIcon className={styles.placeholderIcon} />
                 )}
                 {isOnSale && <span className={styles.saleBadge}>{t('nft.onSale')}</span>}
             </div>

package/src/features/nft/hooks/use-nft.ts

@@ -9,9 +9,10 @@
 import { getNftQueryOptions } from '@ton/appkit/queries';
 import type { GetNftData, GetNftErrorType, GetNftQueryConfig } 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 UseNftParameters<selectData = GetNftData> = GetNftQueryConfig<selectData>;
 
@@ -24,6 +25,7 @@ export const useNft = <selectData = GetNftData>(
     parameters: UseNftParameters<selectData> = {},
 ): UseNftReturnType<selectData> => {
     const appKit = useAppKit();
+    const walletNetwork = useNetwork();
 
-    return useQuery(getNftQueryOptions(appKit, parameters));
+    return useQuery(getNftQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }));
 };

package/src/features/nft/hooks/use-nfts-by-address.ts

@@ -9,9 +9,10 @@
 import { getNFTsQueryOptions } from '@ton/appkit/queries';
 import type { GetNFTsData, GetNFTsErrorType, GetNFTsQueryConfig } 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 UseNFTsByAddressParameters<selectData = GetNFTsData> = GetNFTsQueryConfig<selectData>;
 
@@ -24,6 +25,7 @@ export const useNftsByAddress = <selectData = GetNFTsData>(
     parameters: UseNFTsByAddressParameters<selectData> = {},
 ): UseNFTsByAddressReturnType<selectData> => {
     const appKit = useAppKit();
+    const walletNetwork = useNetwork();
 
-    return useQuery(getNFTsQueryOptions(appKit, parameters));
+    return useQuery(getNFTsQueryOptions(appKit, { ...parameters, network: parameters.network ?? walletNetwork }));
 };

package/src/features/nft/hooks/use-transfer-nft.ts

@@ -19,7 +19,7 @@ import { transferNftMutationOptions } from '@ton/appkit/queries';
 
 import { useMutation } from '../../../libs/query';
 import type { UseMutationReturnType } from '../../../libs/query';
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 
 export type UseTransferNftParameters<context = unknown> = TransferNftOptions<context>;
 

package/src/{hooks → features/settings/hooks}/use-app-kit.ts

@@ -8,7 +8,7 @@
 
 import { useContext } from 'react';
 
-import { AppKitContext } from '../providers/app-kit-provider';
+import { AppKitContext } from '../../../providers/app-kit-provider';
 
 export function useAppKit() {
     const context = useContext(AppKitContext);

package/src/{hooks → features/settings/hooks}/use-i18n.ts

@@ -8,7 +8,7 @@
 
 import { useContext } from 'react';
 
-import { I18nContext } from '../providers/i18n-provider';
+import { I18nContext } from '../../../providers/i18n-provider';
 
 export const useI18n = () => {
     const i18n = useContext(I18nContext);

package/src/features/settings/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { useAppKit } from './hooks/use-app-kit';
+export { useAppKitTheme, type AppKitTheme } from './hooks/use-app-kit-theme';
+export { useI18n } from './hooks/use-i18n';

package/src/features/signing/hooks/use-sign-binary.ts

@@ -10,7 +10,7 @@ import type { UseMutationResult } from '@tanstack/react-query';
 import { signBinaryMutationOptions } from '@ton/appkit/queries';
 import type { SignBinaryData, SignBinaryErrorType, SignBinaryOptions, SignBinaryVariables } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useMutation } from '../../../libs/query';
 
 export type UseSignBinaryParameters<context = unknown> = SignBinaryOptions<context>;

package/src/features/signing/hooks/use-sign-cell.ts

@@ -10,7 +10,7 @@ import type { UseMutationResult } from '@tanstack/react-query';
 import { signCellMutationOptions } from '@ton/appkit/queries';
 import type { SignCellData, SignCellErrorType, SignCellOptions, SignCellVariables } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useMutation } from '../../../libs/query';
 
 export type UseSignCellParameters<context = unknown> = SignCellOptions<context>;

package/src/features/signing/hooks/use-sign-text.ts

@@ -10,7 +10,7 @@ import type { UseMutationResult } from '@tanstack/react-query';
 import { signTextMutationOptions } from '@ton/appkit/queries';
 import type { SignTextData, SignTextErrorType, SignTextOptions, SignTextVariables } from '@ton/appkit/queries';
 
-import { useAppKit } from '../../../hooks/use-app-kit';
+import { useAppKit } from '../../settings';
 import { useMutation } from '../../../libs/query';
 
 export type UseSignTextParameters<context = unknown> = SignTextOptions<context>;

package/src/features/staking/components/select-unstake-mode/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { SelectUnstakeMode } from './select-unstake-mode';
+export type { SelectUnstakeModeProps } from './select-unstake-mode';

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

@@ -0,0 +1,128 @@
+/**
+ * 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 { UnstakeMode } from '@ton/appkit';
+import type { UnstakeModes, StakingProviderInfo, StakingProviderMetadata } from '@ton/appkit';
+
+import { Collapsible } from '../../../../components/ui/collapsible';
+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';
+
+export interface SelectUnstakeModeProps extends ComponentProps<'div'> {
+    value: UnstakeModes;
+    onValueChange: (mode: UnstakeModes) => void;
+    providerInfo: StakingProviderInfo | undefined;
+    providerMetadata: StakingProviderMetadata | undefined;
+}
+
+interface ModeOption {
+    value: UnstakeModes;
+    label: string;
+    tags: string[];
+}
+
+export const SelectUnstakeMode: FC<SelectUnstakeModeProps> = ({
+    value,
+    onValueChange,
+    providerInfo,
+    providerMetadata,
+    className,
+    ...props
+}) => {
+    const [open, setOpen] = useState(false);
+    const { t } = useI18n();
+
+    const instantLimit = useMemo(() => {
+        if (!providerInfo?.instantUnstakeAvailable) return undefined;
+        const limit = `${formatAmount(providerInfo.instantUnstakeAvailable, providerMetadata?.stakeToken.decimals)} ${providerMetadata?.stakeToken.ticker}`;
+        return t('staking.instantLimit', { limit });
+    }, [providerInfo, providerMetadata, t]);
+
+    const modes: ModeOption[] = useMemo(
+        () =>
+            [
+                {
+                    value: UnstakeMode.INSTANT,
+                    label: t('staking.instant'),
+                    tags: instantLimit ? [instantLimit] : [],
+                },
+                {
+                    value: UnstakeMode.ROUND_END,
+                    label: t('staking.maximumReward'),
+                    tags: [t('staking.maximumRewardLimit')],
+                },
+                {
+                    value: UnstakeMode.WHEN_AVAILABLE,
+                    label: t('staking.whenAvailable'),
+                    tags: [t('staking.whenAvailableLimit')],
+                },
+            ].filter((m) =>
+                providerMetadata?.supportedUnstakeModes
+                    ? providerMetadata?.supportedUnstakeModes.includes(m.value)
+                    : true,
+            ),
+        [t, instantLimit, providerMetadata?.supportedUnstakeModes],
+    );
+
+    const selectedLabel = modes.find((m) => m.value === value)?.label ?? '';
+
+    const handleSelect = useCallback((mode: UnstakeModes) => onValueChange(mode), [onValueChange]);
+
+    if (modes.length === 1) {
+        return null;
+    }
+
+    return (
+        <div className={clsx(styles.root, className)} {...props}>
+            <button type="button" className={styles.header} onClick={() => setOpen((v) => !v)}>
+                <span className={styles.headerLabel}>{t('staking.unstakeType')}</span>
+                <span className={styles.headerValue}>
+                    {selectedLabel}
+                    <ChevronDownIcon size={16} className={clsx(styles.chevron, open && styles.chevronOpen)} />
+                </span>
+            </button>
+
+            <Collapsible open={open}>
+                <div className={styles.options}>
+                    {modes.map((mode) => {
+                        const isActive = value === mode.value;
+                        return (
+                            <div
+                                key={mode.value}
+                                className={styles.option}
+                                onClick={() => handleSelect(mode.value)}
+                                role="button"
+                                tabIndex={0}
+                            >
+                                <div className={styles.optionRow}>
+                                    <span className={clsx(styles.radio, isActive && styles.radioActive)}>
+                                        <span className={clsx(styles.point, isActive && styles.pointActive)} />
+                                    </span>
+                                    <span className={styles.optionLabel}>{mode.label}</span>
+
+                                    <div className={styles.tags}>
+                                        {mode.tags.map((tag) => (
+                                            <span key={tag} className={styles.tag}>
+                                                {tag}
+                                            </span>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </Collapsible>
+        </div>
+    );
+};

package/src/features/staking/components/staking-balance-block/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 { StakingBalanceBlock, type StakingBalanceBlockProps } from './staking-balance-block';

package/src/features/staking/components/staking-balance-block/staking-balance-block.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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 type { StakingQuoteDirection } from '@ton/appkit';
+import type { StakingProviderMetadata } from '@ton/appkit';
+import clsx from 'clsx';
+import { formatLargeValue } from '@ton/appkit';
+
+import { useI18n } from '../../../settings/hooks/use-i18n';
+import { TonIconCircle } from '../../../../components/ui/icons';
+import { Button } from '../../../../components/ui/button';
+import { Skeleton } from '../../../../components/ui/skeleton';
+import styles from './staking-balance-block.module.css';
+import { Logo } from '../../../../components/ui/logo';
+import { useJettonInfo } from '../../../jettons';
+
+export interface StakingBalanceBlockProps extends ComponentProps<'div'> {
+    providerMetadata: StakingProviderMetadata | undefined;
+    direction: StakingQuoteDirection;
+    stakedBalance?: string;
+    isStakedBalanceLoading?: boolean;
+    balance?: string;
+    isBalanceLoading?: boolean;
+    onMaxClick?: () => void;
+}
+
+export const StakingBalanceBlock: FC<StakingBalanceBlockProps> = ({
+    providerMetadata,
+    direction,
+    stakedBalance,
+    isStakedBalanceLoading,
+    balance,
+    isBalanceLoading,
+    onMaxClick,
+    className,
+    ...props
+}) => {
+    const tokenAddress =
+        direction === 'stake' ? providerMetadata?.stakeToken.address : providerMetadata?.receiveToken?.address;
+    const isNativeTon = tokenAddress === 'ton';
+
+    const { data: jettonInfo } = useJettonInfo({
+        address: tokenAddress,
+        query: { enabled: !isNativeTon && !!tokenAddress },
+    });
+
+    const { t } = useI18n();
+
+    const displayBalance = direction === 'stake' ? balance : stakedBalance;
+    const isDisplayLoading = direction === 'stake' ? isBalanceLoading : isStakedBalanceLoading;
+    const ticker = direction === 'stake' ? providerMetadata?.stakeToken.ticker : providerMetadata?.receiveToken?.ticker;
+    const decimals =
+        direction === 'stake' ? providerMetadata?.stakeToken.decimals : providerMetadata?.receiveToken?.decimals;
+
+    return (
+        <div className={clsx(styles.container, className)} {...props}>
+            <div className={styles.iconContainer}>
+                {isNativeTon ? <TonIconCircle size={36} /> : <Logo size={36} src={jettonInfo?.image} />}
+            </div>
+
+            <div className={styles.info}>
+                <div className={styles.label}>
+                    {direction === 'stake' ? t('staking.yourBalance') : t('staking.stakedBalance')}
+                </div>
+                <div className={styles.value}>
+                    {isDisplayLoading ? (
+                        <Skeleton className={styles.skeleton} />
+                    ) : (
+                        <span>
+                            {displayBalance && decimals ? formatLargeValue(displayBalance, Math.min(decimals, 4)) : '0'}{' '}
+                            {ticker}
+                        </span>
+                    )}
+                </div>
+            </div>
+
+            {onMaxClick && (
+                <Button size="s" variant="bezeled" className={styles.maxButton} onClick={onMaxClick}>
+                    {t('staking.max')}
+                </Button>
+            )}
+        </div>
+    );
+};

package/src/features/staking/components/staking-info/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { StakingInfo } from './staking-info';
+export type { StakingInfoProps } from './staking-info';

package/src/features/staking/components/staking-info/staking-info.tsx

@@ -0,0 +1,95 @@
+/**
+ * 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 type { StakingQuote, StakingProviderInfo, StakingQuoteDirection } from '@ton/appkit';
+import type { StakingProviderMetadata } from '@ton/appkit';
+
+import { InfoBlock } from '../../../../components/ui/info-block';
+import { useI18n } from '../../../settings/hooks/use-i18n';
+import { formatAmount } from './utils';
+
+export interface StakingInfoProps extends ComponentProps<typeof InfoBlock.Container> {
+    quote: StakingQuote | undefined;
+    isQuoteLoading: boolean;
+    providerInfo: StakingProviderInfo | undefined;
+    providerMetadata: StakingProviderMetadata | undefined;
+    isProviderInfoLoading: boolean;
+    direction?: StakingQuoteDirection;
+}
+
+export const StakingInfo: FC<StakingInfoProps> = ({
+    quote,
+    isQuoteLoading,
+    providerInfo,
+    providerMetadata,
+    isProviderInfoLoading,
+    direction = 'stake',
+    ...props
+}) => {
+    const { t } = useI18n();
+
+    const receiveToken = providerMetadata?.receiveToken;
+    const stakeToken = providerMetadata?.stakeToken;
+
+    const youGetDecimals = direction === 'stake' ? receiveToken?.decimals : stakeToken?.decimals;
+    const youGetTicker = direction === 'stake' ? receiveToken?.ticker : stakeToken?.ticker;
+
+    return (
+        <InfoBlock.Container {...props}>
+            <InfoBlock.Row>
+                <InfoBlock.Label>{t('staking.youGet')}</InfoBlock.Label>
+
+                {isQuoteLoading || isProviderInfoLoading ? (
+                    <InfoBlock.ValueSkeleton />
+                ) : (
+                    <InfoBlock.Value>
+                        {formatAmount(quote?.amountOut, youGetDecimals)} {youGetTicker}
+                    </InfoBlock.Value>
+                )}
+            </InfoBlock.Row>
+
+            <InfoBlock.Row>
+                <InfoBlock.Label>{t('staking.currentApy')}</InfoBlock.Label>
+
+                {isProviderInfoLoading ? (
+                    <InfoBlock.ValueSkeleton />
+                ) : (
+                    <InfoBlock.Value>
+                        {providerInfo?.apy !== undefined ? `${formatAmount(providerInfo.apy.toString(), 2)}%` : '—'}
+                    </InfoBlock.Value>
+                )}
+            </InfoBlock.Row>
+
+            {receiveToken && (
+                <InfoBlock.Row>
+                    <InfoBlock.Label>{t('staking.exchangeRate')}</InfoBlock.Label>
+
+                    {isProviderInfoLoading ? (
+                        <InfoBlock.ValueSkeleton />
+                    ) : (
+                        <InfoBlock.Value>
+                            1 {stakeToken?.ticker} = {formatAmount(providerInfo?.exchangeRate, receiveToken.decimals)}{' '}
+                            {receiveToken.ticker}
+                        </InfoBlock.Value>
+                    )}
+                </InfoBlock.Row>
+            )}
+
+            <InfoBlock.Row>
+                <InfoBlock.Label>{t('staking.provider')}</InfoBlock.Label>
+
+                {providerMetadata?.name ? (
+                    <InfoBlock.Value>{providerMetadata.name}</InfoBlock.Value>
+                ) : (
+                    <InfoBlock.ValueSkeleton />
+                )}
+            </InfoBlock.Row>
+        </InfoBlock.Container>
+    );
+};

package/src/features/staking/components/staking-info/utils.ts

@@ -0,0 +1,15 @@
+/**
+ * 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, truncateDecimals } from '@ton/appkit';
+
+export const formatAmount = (amount?: string, decimals?: number) => {
+    const trimmed = truncateDecimals(amount || '0', Math.min(5, decimals || 9));
+
+    return formatLargeValue(trimmed, decimals);
+};

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