@ton/appkit-react 0.0.1 → 0.0.2

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/{dist/features/balances/index.mjs → src/features/balances/index.ts}

@@ -1,8 +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';
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map

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));
+};

package/{dist/features/jettons/index.mjs → src/features/jettons/index.ts}

@@ -1,8 +1,14 @@
+/**
+ * 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 './hooks/use-jetton-info';
 export * from './hooks/use-jetton-wallet-address';
 export * from './hooks/use-jetton-balance-by-address';
 export * from './hooks/use-jettons';
 export * from './hooks/use-jettons-by-address';
 export * from './hooks/use-transfer-jetton';
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1,23 @@
+/**
+ * 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 { useMemo } from 'react';
+
+import { useSelectedWallet } from '../../wallets';
+
+export type UseNetworkReturnType = Network | undefined;
+
+/**
+ * Hook to get network of the selected wallet
+ */
+export const useNetwork = (): UseNetworkReturnType => {
+    const [wallet] = useSelectedWallet();
+
+    return useMemo(() => wallet?.getNetwork(), [wallet]);
+};

package/src/features/network/hooks/use-networks.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 { getNetworks, watchNetworks } from '@ton/appkit';
+import type { GetNetworksReturnType } from '@ton/appkit';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseNetworksReturnType = GetNetworksReturnType;
+
+/**
+ * Hook to get all configured networks
+ */
+export const useNetworks = (): UseNetworksReturnType => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchNetworks(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getNetworks(appKit);
+    }, [appKit]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, () => []);
+};

package/src/features/network/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.
+ *
+ */
+
+// Hooks
+export { useNetworks, type UseNetworksReturnType } from './hooks/use-networks';
+export { useNetwork, type UseNetworkReturnType } from './hooks/use-network';

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