@ton/appkit-react 0.0.1 → 0.0.2

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

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

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

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

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import type { SendTransactionReturnType } from '@ton/appkit';
+
+import { useSendTransaction } from '../../hooks/use-send-transaction';
+import type { TransactionRequest } from '../transaction/transaction';
+
+export interface TransactionContextType {
+    /** Function to submit the transaction */
+    onSubmit: () => void;
+    /** Whether the transaction is currently loading */
+    isLoading: boolean;
+    /** The error object if the transaction failed */
+    error?: Error | null;
+    /** The receipt of the successful transaction */
+    receipt?: SendTransactionReturnType | null;
+    /** Disable the button/interaction */
+    disabled?: boolean;
+}
+
+export const TransactionContext = createContext<TransactionContextType>({
+    onSubmit: () => {
+        throw new Error('onSubmit is not defined');
+    },
+    isLoading: false,
+});
+
+export function useTransactionContext() {
+    const context = useContext(TransactionContext);
+
+    return context;
+}
+
+export interface TransactionProviderProps extends PropsWithChildren {
+    /** 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;
+    /** Disable the button/interaction */
+    disabled?: boolean;
+}
+
+export const TransactionProvider: FC<TransactionProviderProps> = ({
+    children,
+    request,
+    onError,
+    onSuccess,
+    disabled = false,
+}) => {
+    const [receipt, setReceipt] = useState<SendTransactionReturnType | null>(null);
+    const [isPreparing, setIsPreparing] = useState(false);
+
+    const {
+        mutateAsync: sendTransaction,
+        isPending,
+        error: mutationError,
+    } = useSendTransaction({
+        mutation: {
+            onSuccess: (data) => {
+                setReceipt(data);
+                onSuccess?.(data);
+            },
+            onError: (err) => {
+                onError?.(err);
+            },
+        },
+    });
+
+    const handleSubmit = useCallback(async () => {
+        if (disabled || isPreparing || isPending) {
+            return;
+        }
+
+        setIsPreparing(true);
+
+        try {
+            const transactionRequest = typeof request === 'function' ? await request() : await request;
+
+            if (!transactionRequest) {
+                return;
+            }
+
+            await sendTransaction(transactionRequest);
+        } catch (e) {
+            const error = e instanceof Error ? e : new Error(String(e));
+            onError?.(error);
+        } finally {
+            setIsPreparing(false);
+        }
+    }, [sendTransaction, request, disabled, isPreparing, isPending, onError]);
+
+    const value = useMemo(
+        () => ({
+            error: mutationError,
+            isLoading: isPreparing || isPending,
+            onSubmit: handleSubmit,
+            receipt,
+            disabled,
+        }),
+        [mutationError, isPreparing, isPending, handleSubmit, receipt, disabled],
+    );
+
+    return <TransactionContext.Provider value={value}>{children}</TransactionContext.Provider>;
+};