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

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-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/src/features/transaction/index.ts

@@ -0,0 +1,12 @@
+/**
+ * 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-send-transaction';
+export * from './hooks/use-transfer-ton';
+
+export * from './components/transaction';

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

package/src/features/wallets/hooks/use-connect.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 type { MutateFunction, MutateOptions } from '@tanstack/react-query';
+import { connectMutationOptions } from '@ton/appkit/queries';
+import type { ConnectData, ConnectErrorType, ConnectOptions, ConnectVariables } from '@ton/appkit/queries';
+
+import { useMutation } from '../../../libs/query';
+import type { UseMutationReturnType } from '../../../libs/query';
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseConnectParameters<context = unknown> = ConnectOptions<context>;
+
+export type UseConnectReturnType<context = unknown> = UseMutationReturnType<
+    ConnectData,
+    ConnectErrorType,
+    ConnectVariables,
+    context,
+    (
+        variables: ConnectVariables,
+        options?: MutateOptions<ConnectData, ConnectErrorType, ConnectVariables, context>,
+    ) => void,
+    MutateFunction<ConnectData, ConnectErrorType, ConnectVariables, context>
+>;
+
+export const useConnect = <context = unknown>(
+    parameters: UseConnectParameters<context> = {},
+): UseConnectReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(connectMutationOptions(appKit, parameters));
+};

package/src/features/wallets/hooks/use-connected-wallets.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 { useSyncExternalStore, useCallback } from 'react';
+import { getConnectedWallets, watchConnectedWallets } from '@ton/appkit';
+import type { GetConnectedWalletsReturnType } from '@ton/appkit';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseConnectedWalletsReturnType = GetConnectedWalletsReturnType;
+
+export const useConnectedWallets = (): UseConnectedWalletsReturnType => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchConnectedWallets(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getConnectedWallets(appKit);
+    }, [appKit]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, () => []);
+};

package/src/features/wallets/hooks/use-connector-by-id.ts

@@ -0,0 +1,30 @@
+/**
+ * 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 { getConnectorById, watchConnectorById } from '@ton/appkit';
+import type { Connector } from '@ton/appkit';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export const useConnectorById = (id: string): Connector | undefined => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchConnectorById(appKit, { id, onChange });
+        },
+        [appKit, id],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getConnectorById(appKit, { id });
+    }, [appKit, id]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, () => undefined);
+};

package/src/features/wallets/hooks/use-connectors.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 { useSyncExternalStore, useCallback } from 'react';
+import { getConnectors, watchConnectors } from '@ton/appkit';
+import type { GetConnectorsReturnType } from '@ton/appkit';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseConnectorsReturnType = GetConnectorsReturnType;
+
+export const useConnectors = (): UseConnectorsReturnType => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchConnectors(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getConnectors(appKit);
+    }, [appKit]);
+
+    return useSyncExternalStore(subscribe, getSnapshot, () => []);
+};

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

@@ -0,0 +1,39 @@
+/**
+ * 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 { disconnectMutationOptions } from '@ton/appkit/queries';
+import type { DisconnectData, DisconnectErrorType, DisconnectOptions, DisconnectVariables } from '@ton/appkit/queries';
+
+import { useMutation } from '../../../libs/query';
+import type { UseMutationReturnType } from '../../../libs/query';
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseDisconnectParameters<context = unknown> = DisconnectOptions<context>;
+
+export type UseDisconnectReturnType<context = unknown> = UseMutationReturnType<
+    DisconnectData,
+    DisconnectErrorType,
+    DisconnectVariables,
+    context,
+    (
+        variables: DisconnectVariables,
+        options?: MutateOptions<DisconnectData, DisconnectErrorType, DisconnectVariables, context>,
+    ) => void,
+    MutateFunction<DisconnectData, DisconnectErrorType, DisconnectVariables, context>
+>;
+
+export const useDisconnect = <context = unknown>(
+    parameters: UseDisconnectParameters<context> = {},
+): UseDisconnectReturnType<context> => {
+    const appKit = useAppKit();
+
+    return useMutation(disconnectMutationOptions(appKit, parameters));
+};

package/src/features/wallets/hooks/use-selected-wallet.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 { useSyncExternalStore, useCallback } from 'react';
+import { getSelectedWallet, watchSelectedWallet, setSelectedWalletId } from '@ton/appkit';
+import type { GetSelectedWalletReturnType } from '@ton/appkit';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseSelectedWalletReturnType = readonly [GetSelectedWalletReturnType, (walletId: string | null) => void];
+
+/**
+ * Hook to get the currently selected wallet
+ */
+export const useSelectedWallet = (): UseSelectedWalletReturnType => {
+    const appKit = useAppKit();
+
+    const subscribe = useCallback(
+        (onChange: () => void) => {
+            return watchSelectedWallet(appKit, { onChange });
+        },
+        [appKit],
+    );
+
+    const getSnapshot = useCallback(() => {
+        return getSelectedWallet(appKit);
+    }, [appKit]);
+
+    const wallet = useSyncExternalStore(subscribe, getSnapshot, () => null);
+
+    const setWalletId = useCallback(
+        (walletId: string | null) => {
+            setSelectedWalletId(appKit, { walletId });
+        },
+        [appKit],
+    );
+
+    return [wallet, setWalletId] as const;
+};

package/src/features/wallets/index.ts

@@ -0,0 +1,18 @@
+/**
+ * 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/connect-button';
+
+export * from './hooks/use-connected-wallets';
+export * from './hooks/use-selected-wallet';
+export * from './hooks/use-address';
+
+export * from './hooks/use-connect';
+export * from './hooks/use-disconnect';
+export * from './hooks/use-connectors';
+export * from './hooks/use-connector-by-id';

package/src/global.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+
+declare module '*.module.css' {
+    const classes: { [key: string]: string };
+    export default classes;
+}

package/src/hooks/use-app-kit-theme.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 { useEffect, useState } from 'react';
+
+export type AppKitTheme = 'light' | 'dark' | string;
+
+export function useAppKitTheme() {
+    const [theme, setTheme] = useState<AppKitTheme>('light');
+
+    useEffect(() => {
+        const body = document.body;
+        body.dataset['taTheme'] = theme;
+    }, [theme]);
+
+    return [theme, setTheme] as const;
+}

package/src/hooks/use-app-kit.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { useContext } from 'react';
+
+import { AppKitContext } from '../providers/app-kit-provider';
+
+export function useAppKit() {
+    const context = useContext(AppKitContext);
+
+    if (!context) {
+        throw new Error('useAppKit must be used within an AppKitProvider');
+    }
+
+    return context;
+}

package/src/hooks/use-i18n.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { useContext } from 'react';
+
+import { I18nContext } from '../providers/i18n-provider';
+
+export const useI18n = () => {
+    const i18n = useContext(I18nContext);
+
+    if (!i18n) {
+        throw new Error('useI18n must be used within an I18nProvider');
+    }
+
+    return i18n;
+};

package/src/index.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.
+ *
+ */
+
+export { AppKitProvider } from './providers/app-kit-provider';
+export { useAppKit } from './hooks/use-app-kit';
+export { useAppKitTheme } from './hooks/use-app-kit-theme';
+export { I18nProvider } from './providers/i18n-provider';
+export { useI18n } from './hooks/use-i18n';
+
+export * from '@ton/appkit';
+
+export * from './components/block';
+export * from './components/button';
+export * from './components/circle-icon';
+export * from './components/ton-icon';
+
+export * from './features/balances';
+export * from './features/jettons';
+export * from './features/network';
+export * from './features/nft';
+export * from './features/transaction';
+export * from './features/wallets';
+export * from './features/swap';
+export * from './features/signing';

package/src/libs/i18n.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 rosetta from 'rosetta';
+
+import en from '../locales/en';
+
+export const i18n = rosetta({ en });
+export { en };
+export const defaultLanguage = 'en';
+
+i18n.locale(defaultLanguage);
+
+export type I18n = typeof i18n;
+export type Dict = typeof en;