@ton/appkit-react 0.0.1-alpha.2 → 0.0.2

package/src/components/circle-icon/circle-icon.tsx

@@ -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 type { FC, ComponentProps } from 'react';
+import clsx from 'clsx';
+import { Avatar } from 'radix-ui';
+
+import styles from './circle-icon.module.css';
+
+export interface CircleIconProps extends ComponentProps<'div'> {
+    size?: number;
+    src?: string;
+    alt?: string;
+    fallback?: string;
+}
+
+export const CircleIcon: FC<CircleIconProps> = ({ className, size = 30, src, alt, fallback, ...props }) => {
+    return (
+        <Avatar.Root className={clsx(styles.avatarRoot, className)} style={{ width: size, height: size }} {...props}>
+            <Avatar.Image className={styles.avatarImage} src={src} alt={alt} />
+
+            {(fallback || alt) && (
+                <Avatar.Fallback className={styles.avatarFallback} delayMs={600}>
+                    {fallback ? fallback : alt?.[0]}
+                </Avatar.Fallback>
+            )}
+        </Avatar.Root>
+    );
+};

package/src/components/circle-icon/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 './circle-icon';

package/src/components/ton-icon/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 { TonIcon, TonIconCircle } from './ton-icon';

package/src/components/ton-icon/ton-icon.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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';
+
+export interface TonIconProps extends Omit<ComponentProps<'svg'>, 'width' | 'height'> {
+    size?: number;
+}
+
+export const TonIcon: FC<TonIconProps> = ({ size = 16, ...props }) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M23.7861 0H4.58614C1.08614 0 -1.11386 3.8 0.586136 6.9L12.3861 27.4C13.1861 28.7 15.0861 28.7 15.8861 27.4L27.6861 6.9C29.4861 3.8 27.2861 0 23.7861 0ZM12.4861 21.2L9.88614 16.2L3.68614 5.1C3.28614 4.4 3.78614 3.5 4.68614 3.5H12.4861V21.2ZM24.6861 5.1L18.4861 16.2L15.8861 21.2V3.5H23.6861C24.5861 3.5 25.0861 4.4 24.6861 5.1Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
+
+export const TonIconCircle: FC<TonIconProps> = ({ size = 16, ...props }) => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g clipPath="url(#clip0_2906_144)">
+                <path
+                    d="M28 56C43.5 56 56 43.5 56 28C56 12.5 43.5 0 28 0C12.5 0 0 12.5 0 28C0 43.5 12.5 56 28 56Z"
+                    fill="#0098EA"
+                />
+                <path
+                    d="M37.5996 15.6H18.3996C14.8996 15.6 12.6996 19.4 14.3996 22.5L26.1996 43C26.9996 44.3 28.8996 44.3 29.6996 43L41.4996 22.5C43.2996 19.4 41.0996 15.6 37.5996 15.6ZM26.2996 36.8L23.6996 31.8L17.4996 20.7C17.0996 20 17.5996 19.1 18.4996 19.1H26.2996V36.8ZM38.4996 20.7L32.2996 31.8L29.6996 36.8V19.1H37.4996C38.3996 19.1 38.8996 20 38.4996 20.7Z"
+                    fill="white"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_2906_144">
+                    <rect width="56" height="56" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};

package/src/features/balances/components/balance-badge/balance-badge.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 type { FC, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import { Block } from '../../../../components/block';
+import styles from './balance-badge.module.css';
+import { CircleIcon } from '../../../../components/circle-icon';
+
+const BalanceBadgeContainer: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
+    return <Block direction="row" className={clsx(styles.balance, className)} {...props} />;
+};
+
+const BalanceBlock: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
+    return <div className={clsx(styles.balanceContainer, className)} {...props} />;
+};
+
+const Balance: FC<ComponentProps<'span'> & { balance: string; decimals: number }> = ({
+    balance,
+    decimals,
+    ...props
+}) => {
+    return <span {...props}>{balance ? formatUnits(balance, decimals) : '0'}</span>;
+};
+
+const BalanceSymbol: FC<ComponentProps<'span'> & { symbol: string }> = ({ className, symbol, ...props }) => {
+    return (
+        <span className={clsx(styles.ticker, className)} {...props}>
+            {symbol}
+        </span>
+    );
+};
+
+export const BalanceBadge = {
+    Container: BalanceBadgeContainer,
+    Icon: CircleIcon,
+    BalanceBlock: BalanceBlock,
+    Symbol: BalanceSymbol,
+    Balance: Balance,
+};

package/src/features/balances/components/balance-badge/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 { BalanceBadge } from './balance-badge';

package/src/features/balances/components/currency-item/currency-item.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 clsx from 'clsx';
+
+import { CircleIcon } from '../../../../components/circle-icon';
+import styles from './currency-item.module.css';
+
+export interface CurrencyItemProps extends ComponentProps<'button'> {
+    ticker: string;
+    name?: string;
+    balance?: string;
+    icon?: string;
+    isVerified?: boolean;
+}
+
+export const CurrencyItem: FC<CurrencyItemProps> = ({
+    ticker,
+    name,
+    balance,
+    icon,
+    isVerified,
+    className,
+    ...props
+}) => {
+    return (
+        <button className={clsx(styles.currencyItem, className)} {...props}>
+            <CircleIcon className={styles.icon} size={40} src={icon} fallback={ticker[0]} alt={ticker} />
+
+            <div className={styles.info}>
+                <div className={styles.header}>
+                    <h4 className={styles.name}>{name || ticker}</h4>
+
+                    {isVerified && (
+                        <svg className={styles.verified} fill="currentColor" viewBox="0 0 20 20">
+                            <path
+                                fillRule="evenodd"
+                                d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                clipRule="evenodd"
+                            />
+                        </svg>
+                    )}
+                </div>
+
+                <p className={styles.ticker}>{ticker}</p>
+            </div>
+
+            <div className={styles.balance}>
+                <p>{balance ?? '0'}</p>
+            </div>
+        </button>
+    );
+};

package/src/features/balances/components/currency-item/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 './currency-item';

package/src/features/balances/components/send-jetton-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 './send-jetton-button';

package/src/features/balances/components/send-jetton-button/send-jetton-button.tsx

@@ -0,0 +1,76 @@
+/**
+ * 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 } from 'react';
+import type { FC } from 'react';
+import { createTransferJettonTransaction, formatUnits, parseUnits } from '@ton/appkit';
+
+import { useI18n } from '../../../../hooks/use-i18n';
+import { useAppKit } from '../../../../hooks/use-app-kit';
+import type { TransactionProps } from '../../../transaction';
+import { Transaction } from '../../../transaction';
+
+export interface SendJettonButtonProps extends Omit<TransactionProps, 'request'> {
+    recipientAddress: string;
+    amount: string;
+    jetton: {
+        address: string;
+        symbol: string;
+        decimals: number;
+    };
+    comment?: string;
+}
+
+export const SendJettonButton: FC<SendJettonButtonProps> = ({
+    recipientAddress,
+    amount,
+    comment,
+    jetton,
+    ...props
+}) => {
+    const appKit = useAppKit();
+    const { t } = useI18n();
+
+    const createTransferTransaction = useCallback(async () => {
+        if (!jetton.address) {
+            throw new Error('Jetton address is required');
+        }
+
+        if (!jetton.decimals) {
+            throw new Error('Jetton decimals is required');
+        }
+
+        return createTransferJettonTransaction(appKit, {
+            jettonAddress: jetton.address,
+            recipientAddress,
+            amount,
+            comment,
+            jettonDecimals: jetton.decimals,
+        });
+    }, [appKit, recipientAddress, amount, comment, jetton]);
+
+    const text = useMemo(() => {
+        if (amount && jetton.decimals) {
+            return t('balances.sendJettonWithAmount', {
+                amount: formatUnits(parseUnits(amount, jetton.decimals), jetton.decimals).toString(),
+                symbol: jetton.symbol,
+            });
+        }
+
+        return t('balances.sendJetton', { symbol: jetton.symbol, amount });
+    }, [t, amount, jetton]);
+
+    return (
+        <Transaction
+            request={createTransferTransaction}
+            text={text}
+            disabled={!recipientAddress || !amount || !jetton.address || !jetton.decimals}
+            {...props}
+        />
+    );
+};

package/src/features/balances/components/send-ton-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 './send-ton-button';

package/src/features/balances/components/send-ton-button/send-ton-button.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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 } from 'react';
+import type { FC } from 'react';
+import { createTransferTonTransaction } from '@ton/appkit';
+
+import { useI18n } from '../../../../hooks/use-i18n';
+import { useAppKit } from '../../../../hooks/use-app-kit';
+import type { TransactionProps } from '../../../transaction';
+import { Transaction } from '../../../transaction';
+
+export interface SendTonButtonProps extends Omit<TransactionProps, 'request'> {
+    recipientAddress: string;
+    amount: string;
+    comment?: string;
+}
+
+export const SendTonButton: FC<SendTonButtonProps> = ({ recipientAddress, amount, comment, ...props }) => {
+    const appKit = useAppKit();
+    const { t } = useI18n();
+
+    const createTransferTransaction = useCallback(async () => {
+        return createTransferTonTransaction(appKit, {
+            recipientAddress,
+            amount,
+            comment,
+        });
+    }, [appKit, recipientAddress, amount, comment]);
+
+    return (
+        <Transaction
+            request={createTransferTransaction}
+            disabled={!recipientAddress || !amount}
+            text={t('balances.sendTon', { amount })}
+            {...props}
+        />
+    );
+};

package/src/features/balances/hooks/use-balance-by-address.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { getBalanceByAddressQueryOptions } from '@ton/appkit/queries';
+import type { GetBalanceByAddressData, GetBalanceErrorType, GetBalanceByAddressQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseBalanceByAddressParameters<selectData = GetBalanceByAddressData> =
+    GetBalanceByAddressQueryConfig<selectData>;
+
+export type UseBalanceByAddressReturnType<selectData = GetBalanceByAddressData> = UseQueryReturnType<
+    selectData,
+    GetBalanceErrorType
+>;
+
+/**
+ * Hook to get balance
+ */
+export const useBalanceByAddress = <selectData = GetBalanceByAddressData>(
+    parameters: UseBalanceByAddressParameters<selectData> = {},
+): UseBalanceByAddressReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getBalanceByAddressQueryOptions(appKit, parameters));
+};

package/src/features/balances/hooks/use-balance.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 type { GetBalanceByAddressData } from '@ton/appkit/queries';
+
+import { useAddress } from '../../wallets/hooks/use-address';
+import { useBalanceByAddress } from './use-balance-by-address';
+import type { UseBalanceByAddressParameters, UseBalanceByAddressReturnType } from './use-balance-by-address';
+
+export type UseBalanceParameters<selectData = GetBalanceByAddressData> = UseBalanceByAddressParameters<selectData>;
+
+export type UseBalanceReturnType<selectData = GetBalanceByAddressData> = UseBalanceByAddressReturnType<selectData>;
+
+/**
+ * Hook to get balance of the selected wallet
+ */
+export const useBalance = <selectData = GetBalanceByAddressData>(
+    parameters: UseBalanceParameters<selectData> = {},
+): UseBalanceReturnType<selectData> => {
+    const address = useAddress();
+
+    return useBalanceByAddress({ ...parameters, address });
+};

package/src/features/balances/index.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.
+ *
+ */
+
+export * from './components/currency-item';
+export * from './components/balance-badge';
+export * from './components/send-ton-button';
+export * from './components/send-jetton-button';
+
+export * from './hooks/use-balance';
+export * from './hooks/use-balance-by-address';

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

@@ -0,0 +1,37 @@
+/**
+ * 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 { getJettonBalanceByAddressQueryOptions } from '@ton/appkit/queries';
+import type {
+    GetJettonBalanceByAddressData,
+    GetJettonBalanceErrorType,
+    GetJettonBalanceByAddressQueryConfig,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseJettonBalanceByAddressParameters<selectData = GetJettonBalanceByAddressData> =
+    GetJettonBalanceByAddressQueryConfig<selectData>;
+
+export type UseJettonBalanceByAddressReturnType<selectData = GetJettonBalanceByAddressData> = UseQueryReturnType<
+    selectData,
+    GetJettonBalanceErrorType
+>;
+
+/**
+ * Hook to get jetton balance
+ */
+export const useJettonBalanceByAddress = <selectData = GetJettonBalanceByAddressData>(
+    parameters: UseJettonBalanceByAddressParameters<selectData> = {},
+): UseJettonBalanceByAddressReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getJettonBalanceByAddressQueryOptions(appKit, parameters));
+};

package/src/features/jettons/hooks/use-jetton-info.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 { getJettonInfoQueryOptions } from '@ton/appkit/queries';
+import type { GetJettonInfoData, GetJettonInfoErrorType, GetJettonInfoQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseJettonInfoParameters<selectData = GetJettonInfoData> = GetJettonInfoQueryConfig<selectData>;
+
+export type UseJettonInfoReturnType<selectData = GetJettonInfoData> = UseQueryReturnType<
+    selectData,
+    GetJettonInfoErrorType
+>;
+
+/**
+ * Hook to get jetton info by address
+ */
+export const useJettonInfo = <selectData = GetJettonInfoData>(
+    parameters: UseJettonInfoParameters<selectData> = {},
+): UseJettonInfoReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getJettonInfoQueryOptions(appKit, parameters));
+};

package/src/features/jettons/hooks/use-jetton-wallet-address.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { getJettonWalletAddressQueryOptions } from '@ton/appkit/queries';
+import type {
+    GetJettonWalletAddressData,
+    GetJettonWalletAddressErrorType,
+    GetJettonWalletAddressQueryConfig,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseJettonWalletAddressParameters<selectData = GetJettonWalletAddressData> =
+    GetJettonWalletAddressQueryConfig<selectData>;
+
+export type UseJettonWalletAddressReturnType<selectData = GetJettonWalletAddressData> = UseQueryReturnType<
+    selectData,
+    GetJettonWalletAddressErrorType
+>;
+
+/**
+ * Hook to get jetton wallet address
+ */
+export const useJettonWalletAddress = <selectData = GetJettonWalletAddressData>(
+    parameters: UseJettonWalletAddressParameters<selectData> = {},
+) => {
+    const appKit = useAppKit();
+
+    return useQuery(getJettonWalletAddressQueryOptions(appKit, parameters));
+};

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

@@ -0,0 +1,33 @@
+/**
+ * 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 { getJettonsByAddressQueryOptions } from '@ton/appkit/queries';
+import type { GetJettonsByAddressData, GetJettonsErrorType, GetJettonsByAddressQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseJettonsByAddressParameters<selectData = GetJettonsByAddressData> =
+    GetJettonsByAddressQueryConfig<selectData>;
+
+export type UseJettonsByAddressReturnType<selectData = GetJettonsByAddressData> = UseQueryReturnType<
+    selectData,
+    GetJettonsErrorType
+>;
+
+/**
+ * Hook to get jettons
+ */
+export const useJettonsByAddress = <selectData = GetJettonsByAddressData>(
+    parameters: UseJettonsByAddressParameters<selectData> = {},
+): UseJettonsByAddressReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getJettonsByAddressQueryOptions(appKit, parameters));
+};

package/src/features/jettons/hooks/use-jettons.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 type { GetJettonsByAddressData } from '@ton/appkit/queries';
+
+import { useAddress } from '../../wallets/hooks/use-address';
+import { useJettonsByAddress } from './use-jettons-by-address';
+import type { UseJettonsByAddressParameters, UseJettonsByAddressReturnType } from './use-jettons-by-address';
+
+export type UseJettonsParameters<selectData = GetJettonsByAddressData> = UseJettonsByAddressParameters<selectData>;
+
+export type UseJettonsReturnType<selectData = GetJettonsByAddressData> = UseJettonsByAddressReturnType<selectData>;
+
+/**
+ * Hook to get jettons of the selected wallet
+ */
+export const useJettons = <selectData = GetJettonsByAddressData>(
+    parameters: UseJettonsParameters<selectData> = {},
+): UseJettonsReturnType<selectData> => {
+    const address = useAddress();
+
+    return useJettonsByAddress({ ...parameters, address });
+};

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

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ */
+
+'use client';
+
+import type { MutateFunction, MutateOptions } from '@tanstack/react-query';
+import type {
+    TransferJettonData,
+    TransferJettonErrorType,
+    TransferJettonOptions,
+    TransferJettonVariables,
+} from '@ton/appkit/queries';
+import { transferJettonMutationOptions } from '@ton/appkit/queries';
+
+import { useMutation } from '../../../libs/query';
+import type { UseMutationReturnType } from '../../../libs/query';
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseTransferJettonParameters<context = unknown> = TransferJettonOptions<context>;
+
+export type UseTransferJettonReturnType<context = unknown> = UseMutationReturnType<
+    TransferJettonData,
+    TransferJettonErrorType,
+    TransferJettonVariables,
+    context,
+    (
+        variables: TransferJettonVariables,
+        options?: MutateOptions<TransferJettonData, TransferJettonErrorType, TransferJettonVariables, context>,
+    ) => void,
+    MutateFunction<TransferJettonData, TransferJettonErrorType, TransferJettonVariables, context>
+>;
+
+export const useTransferJetton = <context = unknown>(
+    parameters: UseTransferJettonParameters<context> = {},
+): UseTransferJettonReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(transferJettonMutationOptions(appKit, parameters));
+};