@ton/appkit-react 0.0.1 → 0.0.3

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-progress/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 './transaction-progress';
+export * from './transaction-progress-provider';

package/src/features/transaction/components/transaction-progress/transaction-progress-icons.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 clsx from 'clsx';
+import type { TransactionStatus } from '@ton/appkit';
+
+import styles from './transaction-progress.module.css';
+
+export interface TransactionProgressIconsProps extends ComponentProps<'svg'> {
+    status: TransactionStatus;
+    isError: boolean;
+}
+
+const SpinnerIcon: FC<ComponentProps<'svg'>> = ({ className }) => (
+    <svg
+        className={clsx(styles.spinner, className)}
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+);
+
+const SuccessIcon: FC<ComponentProps<'svg'>> = ({ className }) => (
+    <svg
+        className={clsx(styles.success, className)}
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+        <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+);
+
+const FailedIcon: FC<ComponentProps<'svg'>> = ({ className }) => (
+    <svg
+        className={clsx(styles.failed, className)}
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+);
+
+export const TransactionProgressIcon: FC<TransactionProgressIconsProps> = ({ status, isError, ...props }) => {
+    if (status === 'completed') return <SuccessIcon {...props} />;
+
+    if (status === 'failed' || isError) return <FailedIcon {...props} />;
+
+    return <SpinnerIcon {...props} />;
+};

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

@@ -0,0 +1,60 @@
+/**
+ * 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, useContext } from 'react';
+import type { ReactNode } from 'react';
+import type { GetTransactionStatusReturnType } from '@ton/appkit';
+import type { GetTransactionStatusErrorType } from '@ton/appkit/queries';
+
+import { useTransactionStatus } from '../../hooks/use-transaction-status';
+
+export interface TransactionProgressContextValue extends GetTransactionStatusReturnType {
+    isFetching: boolean;
+    error: GetTransactionStatusErrorType | null;
+    boc: string;
+}
+
+export const TransactionProgressContext = createContext<TransactionProgressContextValue | undefined>(undefined);
+
+export const useTransactionProgressContext = () => {
+    const context = useContext(TransactionProgressContext);
+    if (!context) {
+        throw new Error('useTransactionProgressContext must be used within a TransactionProgressProvider');
+    }
+    return context;
+};
+
+export interface TransactionProgressProviderProps {
+    boc: string;
+    children: ReactNode;
+}
+
+export const TransactionProgressProvider = ({ boc, children }: TransactionProgressProviderProps) => {
+    const { data, isFetching, error } = useTransactionStatus({
+        boc,
+        query: {
+            refetchInterval: (query) => {
+                const status = query.state.data?.status;
+                if (status === 'completed' || status === 'failed') return false;
+                return 2000;
+            },
+        },
+    });
+
+    const value: TransactionProgressContextValue = {
+        status: data?.status ?? 'pending',
+        totalMessages: data?.totalMessages ?? 0,
+        pendingMessages: data?.pendingMessages ?? 0,
+        onchainMessages: data?.onchainMessages ?? 0,
+        isFetching,
+        error,
+        boc,
+    };
+
+    return <TransactionProgressContext.Provider value={value}>{children}</TransactionProgressContext.Provider>;
+};

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

@@ -0,0 +1,97 @@
+/**
+ * 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 { useMemo } from 'react';
+import type { FC, ReactNode, ComponentProps } from 'react';
+import { clsx } from 'clsx';
+
+import { useI18n } from '../../../../hooks/use-i18n';
+import { TransactionProgressProvider, useTransactionProgressContext } from './transaction-progress-provider';
+import type { TransactionProgressContextValue } from './transaction-progress-provider';
+import { TransactionProgressIcon } from './transaction-progress-icons';
+import styles from './transaction-progress.module.css';
+
+export interface TransactionProgressTexts {
+    pending: string;
+    completed: string;
+    failed: string;
+}
+
+export interface TransactionProgressRenderProps extends TransactionProgressContextValue {
+    texts: TransactionProgressTexts;
+}
+
+export interface TransactionProgressProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** BOC of the transaction to strictly track status */
+    boc: string;
+    /** Render props function for full control over rendering */
+    children?: (props: TransactionProgressRenderProps) => ReactNode;
+    /** Allows targeting specific internal elements for styling */
+    classNames?: {
+        container?: string;
+        icon?: string;
+        message?: string;
+    };
+}
+
+export const TransactionProgressContent: FC<Omit<TransactionProgressProps, 'boc'>> = ({
+    children,
+    className,
+    classNames = {},
+    ...props
+}) => {
+    const context = useTransactionProgressContext();
+    const { status, onchainMessages, totalMessages, error } = context;
+    const { t } = useI18n();
+
+    const texts = useMemo(
+        () => ({
+            pending: t('transaction.status.pending'),
+            completed: t('transaction.status.completed'),
+            failed: t('transaction.status.failed'),
+        }),
+        [t],
+    );
+
+    if (children) {
+        return <>{children({ ...context, texts })}</>;
+    }
+
+    const isPending = status === 'pending' && !error;
+    const isCompleted = status === 'completed';
+    const isFailed = status === 'failed' || !!error;
+
+    let messageText = texts.pending;
+    if (isCompleted) messageText = texts.completed;
+    if (isFailed) messageText = texts.failed;
+
+    let progressText = null;
+    if (isPending && totalMessages > 0) {
+        progressText = `(${onchainMessages} / ${totalMessages})`;
+    }
+
+    return (
+        <div className={clsx(styles.container, className, classNames.container)} {...props}>
+            <div className={clsx(styles.iconContainer, classNames.icon)}>
+                <TransactionProgressIcon status={status} isError={!!error} />
+            </div>
+
+            <div className={clsx(styles.message, classNames.message)}>
+                {messageText} {progressText}
+            </div>
+        </div>
+    );
+};
+
+export const TransactionProgress: FC<TransactionProgressProps> = ({ boc, ...rest }) => {
+    return (
+        <TransactionProgressProvider boc={boc}>
+            <TransactionProgressContent {...rest} />
+        </TransactionProgressProvider>
+    );
+};

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

package/src/features/transaction/hooks/use-send-transaction.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 {
+    SendTransactionData,
+    SendTransactionErrorType,
+    SendTransactionOptions,
+    SendTransactionVariables,
+} from '@ton/appkit/queries';
+import { sendTransactionMutationOptions } from '@ton/appkit/queries';
+
+import { useMutation } from '../../../libs/query';
+import type { UseMutationReturnType } from '../../../libs/query';
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseSendTransactionParameters<context = unknown> = SendTransactionOptions<context>;
+
+export type UseSendTransactionReturnType<context = unknown> = UseMutationReturnType<
+    SendTransactionData,
+    SendTransactionErrorType,
+    SendTransactionVariables,
+    context,
+    (
+        variables: SendTransactionVariables,
+        options?: MutateOptions<SendTransactionData, SendTransactionErrorType, SendTransactionVariables, context>,
+    ) => void,
+    MutateFunction<SendTransactionData, SendTransactionErrorType, SendTransactionVariables, context>
+>;
+
+export const useSendTransaction = <context = unknown>(
+    parameters: UseSendTransactionParameters<context> = {},
+): UseSendTransactionReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(sendTransactionMutationOptions(appKit, parameters));
+};

package/src/features/transaction/hooks/use-transaction-status.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 {
+    GetTransactionStatusData,
+    GetTransactionStatusErrorType,
+    GetTransactionStatusParameters,
+    GetTransactionStatusQueryConfig,
+} from '@ton/appkit/queries';
+import { getTransactionStatusQueryOptions } from '@ton/appkit/queries';
+
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseTransactionStatusParameters<selectData = GetTransactionStatusData> = GetTransactionStatusParameters &
+    GetTransactionStatusQueryConfig<selectData>;
+
+export type UseTransactionStatusReturnType<selectData = GetTransactionStatusData> = UseQueryReturnType<
+    selectData,
+    GetTransactionStatusErrorType
+>;
+
+/**
+ * Hook to get the status of a transaction trace by BOC.
+ *
+ * This hook polls the toncenter API to track the progress of a transaction trace.
+ * It is useful for tracking complex operations like swaps or multi-step flows.
+ *
+ * @example
+ * ```ts
+ * const { data: status } = useTransactionStatus({
+ *   boc: 'te6cc...',
+ *   query: {
+ *     refetchInterval: 2000, // Poll every 2 seconds
+ *   }
+ * });
+ *
+ * if (status?.status === 'pending') {
+ *   console.log(`Progress: ${status.completedMessages}/${status.totalMessages}`);
+ * }
+ * ```
+ */
+export const useTransactionStatus = <selectData = GetTransactionStatusData>(
+    parameters: UseTransactionStatusParameters<selectData>,
+): UseTransactionStatusReturnType<selectData> => {
+    const appKit = useAppKit();
+
+    return useQuery(getTransactionStatusQueryOptions(appKit, parameters));
+};

package/src/features/transaction/hooks/use-transfer-ton.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 {
+    TransferTonData,
+    TransferTonErrorType,
+    TransferTonOptions,
+    TransferTonVariables,
+} from '@ton/appkit/queries';
+import { transferTonMutationOptions } from '@ton/appkit/queries';
+
+import { useMutation } from '../../../libs/query';
+import type { UseMutationReturnType } from '../../../libs/query';
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseTransferTonParameters<context = unknown> = TransferTonOptions<context>;
+
+export type UseTransferTonReturnType<context = unknown> = UseMutationReturnType<
+    TransferTonData,
+    TransferTonErrorType,
+    TransferTonVariables,
+    context,
+    (
+        variables: TransferTonVariables,
+        options?: MutateOptions<TransferTonData, TransferTonErrorType, TransferTonVariables, context>,
+    ) => void,
+    MutateFunction<TransferTonData, TransferTonErrorType, TransferTonVariables, context>
+>;
+
+export const useTransferTon = <context = unknown>(
+    parameters: UseTransferTonParameters<context> = {},
+): UseTransferTonReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(transferTonMutationOptions(appKit, parameters));
+};

package/{dist/features/transaction/index.d.ts → src/features/transaction/index.ts}

@@ -5,7 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 export * from './hooks/use-send-transaction';
 export * from './hooks/use-transfer-ton';
+export * from './hooks/use-transaction-status';
+
 export * from './components/transaction';
-//# sourceMappingURL=index.d.ts.map
+export * from './components/transaction-progress';

package/src/features/wallets/components/connect-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 { TonConnectButton } from '@tonconnect/ui-react';

package/src/features/wallets/hooks/use-address.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 { useMemo } from 'react';
+
+import { useSelectedWallet } from './use-selected-wallet';
+
+export type UseAddressReturnType = string | undefined;
+
+/**
+ * Hook to get current wallet address
+ */
+export const useAddress = (): UseAddressReturnType => {
+    const [wallet] = useSelectedWallet();
+
+    return useMemo(() => wallet?.getAddress(), [wallet]);
+};