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

package/src/features/jettons/index.ts

@@ -0,0 +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';

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';

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

@@ -0,0 +1,57 @@
+/**
+ * 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 { NFT } from '@ton/appkit';
+import { useMemo, useState } from 'react';
+import type { FC, ComponentProps } from 'react';
+import { getFormattedNftInfo } from '@ton/appkit';
+import clsx from 'clsx';
+
+import { useI18n } from '../../../../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;
+}
+
+export const NftItem: FC<NftItemProps> = ({ nft, className, ...props }) => {
+    const { t } = useI18n();
+    const { name, collectionName, image, isOnSale } = useMemo(() => getFormattedNftInfo(nft), [nft]);
+    const [imageError, setImageError] = useState(false);
+
+    const showImage = image && !imageError;
+
+    return (
+        <button className={clsx(styles.nftItem, className)} {...props}>
+            <div className={styles.imageWrapper}>
+                {showImage ? (
+                    <img src={image} alt={name} className={styles.image} onError={() => setImageError(true)} />
+                ) : (
+                    <PlaceholderIcon />
+                )}
+                {isOnSale && <span className={styles.saleBadge}>{t('nft.onSale')}</span>}
+            </div>
+
+            <div className={styles.info}>
+                <h4 className={styles.name}>{name}</h4>
+                <p className={styles.collectionName}>{collectionName}</p>
+            </div>
+        </button>
+    );
+};

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

@@ -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 { getNftQueryOptions } from '@ton/appkit/queries';
+import type { GetNftData, GetNftErrorType, GetNftQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseNftParameters<selectData = GetNftData> = GetNftQueryConfig<selectData>;
+
+export type UseNftReturnType<selectData = GetNftData> = UseQueryReturnType<selectData, GetNftErrorType>;
+
+/**
+ * Hook to get a single NFT
+ */
+export const useNft = <selectData = GetNftData>(
+    parameters: UseNftParameters<selectData> = {},
+): UseNftReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getNftQueryOptions(appKit, parameters));
+};

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

@@ -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 { getNFTsQueryOptions } from '@ton/appkit/queries';
+import type { GetNFTsData, GetNFTsErrorType, GetNFTsQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseNFTsByAddressParameters<selectData = GetNFTsData> = GetNFTsQueryConfig<selectData>;
+
+export type UseNFTsByAddressReturnType<selectData = GetNFTsData> = UseQueryReturnType<selectData, GetNFTsErrorType>;
+
+/**
+ * Hook to get NFTs
+ */
+export const useNFTsByAddress = <selectData = GetNFTsData>(
+    parameters: UseNFTsByAddressParameters<selectData> = {},
+): UseNFTsByAddressReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getNFTsQueryOptions(appKit, parameters));
+};

package/src/features/nft/hooks/use-nfts.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 { GetNFTsData } from '@ton/appkit/queries';
+
+import { useAddress } from '../../wallets/hooks/use-address';
+import { useNFTsByAddress } from './use-nfts-by-address';
+import type { UseNFTsByAddressParameters, UseNFTsByAddressReturnType } from './use-nfts-by-address';
+
+export type UseNFTsParameters<selectData = GetNFTsData> = UseNFTsByAddressParameters<selectData>;
+
+export type UseNFTsReturnType<selectData = GetNFTsData> = UseNFTsByAddressReturnType<selectData>;
+
+/**
+ * Hook to get NFTs of the selected wallet
+ */
+export const useNfts = <selectData = GetNFTsData>(
+    parameters: UseNFTsParameters<selectData> = {},
+): UseNFTsReturnType<selectData> => {
+    const address = useAddress();
+
+    return useNFTsByAddress({ ...parameters, address });
+};

package/src/features/nft/hooks/use-transfer-nft.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 {
+    TransferNftData,
+    TransferNftErrorType,
+    TransferNftOptions,
+    TransferNftVariables,
+} from '@ton/appkit/queries';
+import { transferNftMutationOptions } from '@ton/appkit/queries';
+
+import { useMutation } from '../../../libs/query';
+import type { UseMutationReturnType } from '../../../libs/query';
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseTransferNftParameters<context = unknown> = TransferNftOptions<context>;
+
+export type UseTransferNftReturnType<context = unknown> = UseMutationReturnType<
+    TransferNftData,
+    TransferNftErrorType,
+    TransferNftVariables,
+    context,
+    (
+        variables: TransferNftVariables,
+        options?: MutateOptions<TransferNftData, TransferNftErrorType, TransferNftVariables, context>,
+    ) => void,
+    MutateFunction<TransferNftData, TransferNftErrorType, TransferNftVariables, context>
+>;
+
+export const useTransferNft = <context = unknown>(
+    parameters: UseTransferNftParameters<context> = {},
+): UseTransferNftReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(transferNftMutationOptions(appKit, parameters));
+};

package/src/features/nft/index.ts

@@ -0,0 +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 './components/nft-item';
+
+export * from './hooks/use-nfts';
+export * from './hooks/use-nft';
+export * from './hooks/use-nfts-by-address';
+export * from './hooks/use-transfer-nft';

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

@@ -0,0 +1,43 @@
+/**
+ * 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 { 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 { useMutation } from '../../../libs/query';
+
+export type UseSignBinaryParameters<context = unknown> = SignBinaryOptions<context>;
+
+export type UseSignBinaryReturnType<context = unknown> = UseMutationResult<
+    SignBinaryData,
+    SignBinaryErrorType,
+    SignBinaryVariables,
+    context
+>;
+
+/**
+ * Hook to sign binary data with the connected wallet.
+ *
+ * @example
+ * ```tsx
+ * const { mutate: signBinary, isPending } = useSignBinary();
+ *
+ * const handleSign = () => {
+ *   signBinary({ bytes: btoa("binary data") });
+ * };
+ * ```
+ */
+export const useSignBinary = <context = unknown>(
+    parameters?: UseSignBinaryParameters<context>,
+): UseSignBinaryReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(signBinaryMutationOptions(appKit, parameters));
+};

package/src/features/signing/hooks/use-sign-cell.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.
+ *
+ */
+
+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 { useMutation } from '../../../libs/query';
+
+export type UseSignCellParameters<context = unknown> = SignCellOptions<context>;
+
+export type UseSignCellReturnType<context = unknown> = UseMutationResult<
+    SignCellData,
+    SignCellErrorType,
+    SignCellVariables,
+    context
+>;
+
+/**
+ * Hook to sign TON Cell data with the connected wallet.
+ * Used for on-chain signature verification.
+ *
+ * @example
+ * ```tsx
+ * const { mutate: signCell, isPending } = useSignCell();
+ *
+ * const handleSign = () => {
+ *   signCell({ cell: bocBase64, schema: "transfer#abc amount:uint64 = Transfer" });
+ * };
+ * ```
+ */
+export const useSignCell = <context = unknown>(
+    parameters?: UseSignCellParameters<context>,
+): UseSignCellReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(signCellMutationOptions(appKit, parameters));
+};

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

@@ -0,0 +1,43 @@
+/**
+ * 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 { 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 { useMutation } from '../../../libs/query';
+
+export type UseSignTextParameters<context = unknown> = SignTextOptions<context>;
+
+export type UseSignTextReturnType<context = unknown> = UseMutationResult<
+    SignTextData,
+    SignTextErrorType,
+    SignTextVariables,
+    context
+>;
+
+/**
+ * Hook to sign text messages with the connected wallet.
+ *
+ * @example
+ * ```tsx
+ * const { mutate: signText, isPending } = useSignText();
+ *
+ * const handleSign = () => {
+ *   signText({ text: "Hello World" });
+ * };
+ * ```
+ */
+export const useSignText = <context = unknown>(
+    parameters: UseSignTextParameters<context> = {},
+): UseSignTextReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(signTextMutationOptions(appKit, parameters));
+};

package/src/features/signing/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 * from './hooks/use-sign-text';
+export * from './hooks/use-sign-binary';
+export * from './hooks/use-sign-cell';

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

@@ -0,0 +1,38 @@
+/**
+ * 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 { UseMutationResult } from '@tanstack/react-query';
+import { buildSwapTransactionMutationOptions } from '@ton/appkit/queries';
+import type {
+    BuildSwapTransactionData,
+    BuildSwapTransactionErrorType,
+    BuildSwapTransactionMutationOptions,
+    BuildSwapTransactionVariables,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useMutation } from '../../../libs/query';
+
+export type UseBuildSwapTransactionParameters<context = unknown> = BuildSwapTransactionMutationOptions<context>;
+
+export type UseBuildSwapTransactionReturnType<context = unknown> = UseMutationResult<
+    BuildSwapTransactionData,
+    BuildSwapTransactionErrorType,
+    BuildSwapTransactionVariables,
+    context
+>;
+
+export const useBuildSwapTransaction = <context = unknown>(
+    parameters?: UseBuildSwapTransactionParameters<context>,
+): UseBuildSwapTransactionReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(buildSwapTransactionMutationOptions(appKit, parameters));
+};

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

@@ -0,0 +1,31 @@
+/**
+ * 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 { getSwapQuoteQueryOptions } from '@ton/appkit/queries';
+import type { GetSwapQuoteData, GetSwapQuoteErrorType, GetSwapQuoteQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseSwapQuoteParameters<selectData = GetSwapQuoteData> = GetSwapQuoteQueryConfig<selectData>;
+
+export type UseSwapQuoteReturnType<selectData = GetSwapQuoteData> = UseQueryReturnType<
+    selectData,
+    GetSwapQuoteErrorType
+>;
+
+export const useSwapQuote = <selectData = GetSwapQuoteData>(
+    parameters: UseSwapQuoteParameters<selectData> = {},
+): UseSwapQuoteReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getSwapQuoteQueryOptions(appKit, parameters));
+};

package/src/features/swap/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 * from './hooks/use-swap-quote';
+export * from './hooks/use-build-swap-transaction';

package/src/features/transaction/components/transaction/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 { Transaction } from './transaction';
+export type { TransactionProps, TransactionRenderProps } from './transaction';

package/src/features/transaction/components/transaction/transaction.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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, ReactNode, ComponentProps } from 'react';
+import type { SendTransactionParameters, SendTransactionReturnType } from '@ton/appkit';
+
+import { TransactionProvider, useTransactionContext } from '../transaction-provider';
+import { useI18n } from '../../../../hooks/use-i18n';
+import { Button } from '../../../../components/button';
+
+export interface TransactionRenderProps {
+    isLoading: boolean;
+    onSubmit: () => void;
+    disabled: boolean;
+    text: ReactNode;
+}
+
+export type TransactionRequest =
+    | SendTransactionParameters
+    | Promise<SendTransactionParameters>
+    | (() => SendTransactionParameters)
+    | (() => Promise<SendTransactionParameters>);
+
+export interface TransactionProps extends Omit<ComponentProps<'button'>, 'children' | 'onError'> {
+    /** The transaction request parameters */
+    request: TransactionRequest;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+    /** Callback when the transaction is successful */
+    onSuccess?: (response: SendTransactionReturnType) => void;
+    /** Custom button text */
+    text?: ReactNode;
+    /** Custom render function */
+    children?: (props: TransactionRenderProps) => ReactNode;
+}
+
+interface TransactionContentProps extends Omit<ComponentProps<'button'>, 'children'> {
+    text?: ReactNode;
+    children?: (props: TransactionRenderProps) => ReactNode;
+}
+
+const TransactionContent: FC<TransactionContentProps> = ({ text, children, ...props }) => {
+    const { isLoading, onSubmit, disabled } = useTransactionContext();
+    const { t } = useI18n();
+
+    const isDisabled = disabled || isLoading;
+
+    const handleSubmit = useCallback(() => {
+        if (!isDisabled) {
+            onSubmit();
+        }
+    }, [isDisabled, onSubmit]);
+
+    const buttonText = useMemo(() => {
+        if (isLoading) {
+            return t('transaction.processing');
+        }
+
+        return text ?? t('transaction.sendTransaction');
+    }, [isLoading, text, t]);
+
+    if (children) {
+        return (
+            <>
+                {children({
+                    isLoading,
+                    onSubmit: handleSubmit,
+                    disabled: isDisabled,
+                    text: buttonText,
+                })}
+            </>
+        );
+    }
+
+    return (
+        <Button onClick={handleSubmit} disabled={isDisabled} {...props}>
+            {buttonText}
+        </Button>
+    );
+};
+
+export const Transaction: FC<TransactionProps> = ({
+    request,
+    children,
+    className,
+    onError,
+    onSuccess,
+    disabled = false,
+    text,
+    ...props
+}) => {
+    return (
+        <TransactionProvider request={request} onError={onError} onSuccess={onSuccess} disabled={disabled}>
+            <TransactionContent className={className} text={text} {...props}>
+                {children}
+            </TransactionContent>
+        </TransactionProvider>
+    );
+};

package/src/features/transaction/components/transaction-provider/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 { TransactionProvider, useTransactionContext, TransactionContext } from './transaction-provider';
+export type { TransactionContextType } from './transaction-provider';