@ton/appkit-react 0.0.1 → 0.0.3

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

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

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

@@ -1,13 +1,24 @@
+/**
+ * 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';
@@ -16,5 +27,3 @@ export * from './features/transaction';
 export * from './features/wallets';
 export * from './features/swap';
 export * from './features/signing';
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map

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;

package/src/libs/query.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 { useQuery as tanstack_useQuery, useMutation } from '@tanstack/react-query';
+import type {
+    DefaultError,
+    MutateFunction,
+    QueryKey,
+    UseMutationOptions,
+    UseMutationResult,
+    UseQueryOptions,
+    UseQueryResult,
+} from '@tanstack/react-query';
+import type { Compute, ExactPartial, UnionStrictOmit } from '@ton/appkit';
+
+export { useMutation };
+
+export type UseMutationParameters<data = unknown, error = Error, variables = void, context = unknown> = Compute<
+    Omit<UseMutationOptions<data, error, Compute<variables>, context>, 'mutationFn' | 'mutationKey' | 'throwOnError'>
+>;
+
+export type UseMutationReturnType<
+    data = unknown,
+    error = Error,
+    variables = void,
+    context = unknown,
+    mutate = MutateFunction,
+    mutateAsync = MutateFunction,
+> = Compute<
+    UnionStrictOmit<UseMutationResult<data, error, variables, context>, 'mutate' | 'mutateAsync'> & {
+        mutate: mutate;
+        mutateAsync: mutateAsync;
+    }
+>;
+
+export function useQuery<queryFnData, error, data, queryKey extends QueryKey>(
+    parameters: UseQueryParameters<queryFnData, error, data, queryKey> & {
+        queryKey: QueryKey;
+    },
+): UseQueryReturnType<data, error> {
+    const result = tanstack_useQuery({
+        ...parameters,
+        // queryKeyHashFn: hashFn, // for bigint support
+    }) as UseQueryReturnType<data, error>;
+    result.queryKey = parameters.queryKey;
+    return result;
+}
+
+export type UseQueryParameters<
+    queryFnData = unknown,
+    error = DefaultError,
+    data = queryFnData,
+    queryKey extends QueryKey = QueryKey,
+> = Compute<
+    ExactPartial<Omit<UseQueryOptions<queryFnData, error, data, queryKey>, 'initialData'>> & {
+        initialData?: UseQueryOptions<queryFnData, error, data, queryKey>['initialData'] | undefined;
+    }
+>;
+
+export type UseQueryReturnType<data = unknown, error = DefaultError> = Compute<
+    UseQueryResult<data, error> & {
+        queryKey: QueryKey;
+    }
+>;

package/src/locales/en.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 default {
+    // Wallet connection
+    wallet: {
+        connect: 'Connect',
+        disconnect: 'Disconnect',
+        connectWallet: 'Connect Wallet',
+        noWalletsFound: 'No wallets found',
+    },
+
+    // Transaction
+    transaction: {
+        sendTransaction: 'Send Transaction',
+        processing: 'Processing...',
+        status: {
+            pending: 'Processing...',
+            completed: 'Success',
+            failed: 'Failed',
+        },
+    },
+
+    // Balances
+    balances: {
+        sendTon: 'Send {{ amount }} TON',
+        sendJetton: 'Send {{ amount }} TON',
+        sendJettonWithAmount: 'Send {{ amount }} {{ symbol }}',
+    },
+
+    // NFT
+    nft: {
+        onSale: 'On Sale',
+    },
+} as const;

package/src/providers/app-kit-provider.tsx

@@ -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 type { PropsWithChildren } from 'react';
+import { createContext } from 'react';
+import type { AppKit } from '@ton/appkit';
+
+import { I18nProvider } from './i18n-provider';
+import { TonConnectBridge } from '../tonconnect/tonconnect-bridge';
+
+export const AppKitContext = createContext<AppKit | undefined>(undefined);
+
+export interface AppKitProviderProps extends PropsWithChildren {
+    appKit: AppKit;
+}
+
+export function AppKitProvider({ appKit, children }: AppKitProviderProps) {
+    return (
+        <AppKitContext.Provider value={appKit}>
+            <TonConnectBridge>
+                <I18nProvider>{children}</I18nProvider>
+            </TonConnectBridge>
+        </AppKitContext.Provider>
+    );
+}

package/src/providers/i18n-provider.tsx

@@ -0,0 +1,83 @@
+/**
+ * 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 { PropsWithChildren } from 'react';
+import { createContext, useState, useRef, useEffect } from 'react';
+
+import type { Dict, I18n } from '../libs/i18n';
+import { i18n, defaultLanguage } from '../libs/i18n';
+
+export interface I18nContextType {
+    activeLocale: string;
+    t: I18n['t'];
+    locale: (lang: string, dict?: Dict) => void;
+    addDict: (lang: string, dict: Dict) => void;
+}
+
+export const I18nContext = createContext<I18nContextType | null>(null);
+
+export interface I18nProviderProps extends PropsWithChildren {
+    locale?: string;
+    lngDicts?: Record<string, Dict>;
+}
+
+export const I18nProvider = ({ children, locale, lngDicts }: I18nProviderProps) => {
+    const activeLocaleRef = useRef(locale || defaultLanguage);
+    const [, setTick] = useState(0);
+    const firstRender = useRef(true);
+
+    const i18nWrapper: I18nContextType = {
+        activeLocale: activeLocaleRef.current,
+        t: (...args) => i18n.t(...args),
+        locale: (l, dict) => {
+            i18n.locale(l);
+            activeLocaleRef.current = l;
+
+            if (dict) {
+                i18n.set(l, dict);
+            }
+
+            // force rerender to update view
+            setTick((tick) => tick + 1);
+        },
+        addDict: (l, dict) => {
+            i18n.set(l, dict);
+
+            // force rerender to update view
+            setTick((tick) => tick + 1);
+        },
+    };
+
+    // for initial SSR render
+    if (locale && firstRender.current === true) {
+        firstRender.current = false;
+        const dict = lngDicts?.[locale];
+        i18nWrapper.locale(locale, dict);
+
+        const restDicts = Object.entries(lngDicts || {}).filter(([l]) => l !== locale);
+        restDicts.forEach(([l, dict]) => {
+            i18nWrapper.addDict(l, dict);
+        });
+    }
+
+    useEffect(() => {
+        if (lngDicts) {
+            Object.entries(lngDicts).forEach(([l, dict]) => {
+                i18nWrapper.addDict(l, dict);
+            });
+        }
+    }, [lngDicts]);
+
+    useEffect(() => {
+        if (locale) {
+            i18nWrapper.locale(locale);
+        }
+    }, [locale]);
+
+    return <I18nContext.Provider value={i18nWrapper}>{children}</I18nContext.Provider>;
+};

package/src/tonconnect/tonconnect-bridge.tsx

@@ -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.
+ *
+ */
+
+import { useMemo } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import { TonConnectUIProvider } from '@tonconnect/ui-react';
+import type { TonConnectConnector } from '@ton/appkit';
+import { TONCONNECT_DEFAULT_CONNECTOR_ID } from '@ton/appkit';
+
+import { useConnectorById } from '../features/wallets/hooks/use-connector-by-id';
+
+export interface TonConnectBridgeProps extends PropsWithChildren {
+    connectorId?: string;
+}
+
+/**
+ * Automatically creates TonConnectUIProvider if TonConnectConnector is found
+ * @param children - The children to render
+ * @param connectorId - The connector ID to use
+ * @returns The TonConnectUIProvider or the children
+ */
+export const TonConnectBridge: FC<TonConnectBridgeProps> = ({
+    children,
+    connectorId = TONCONNECT_DEFAULT_CONNECTOR_ID,
+}) => {
+    const connector = useConnectorById(connectorId) as TonConnectConnector | undefined;
+    const tonConnectUI = useMemo(() => connector?.tonConnectUI, [connector]);
+
+    if (!tonConnectUI) {
+        return <>{children}</>;
+    }
+
+    return <TonConnectUIProvider instance={tonConnectUI}>{children}</TonConnectUIProvider>;
+};

package/dist/components/block/block.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../src/components/block/block.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKhD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC;IACrD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAChC;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAEhC,CAAC"}

package/dist/components/block/block.js

@@ -1,18 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var styles = require('./block.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const Block = ({ className, direction = "column", ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default(styles__default.default.block, direction === "row" && styles__default.default.row, className), ...props });
-};
-
-exports.Block = Block;
-//# sourceMappingURL=block.js.map
-//# sourceMappingURL=block.js.map

package/dist/components/block/block.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/block/block.tsx"],"names":["jsx","clsx","styles"],"mappings":";;;;;;;;;;;AAiBO,MAAM,KAAA,GAAwB,CAAC,EAAE,SAAA,EAAW,YAAY,QAAA,EAAU,GAAG,OAAM,KAAM;AACpF,EAAA,uBAAOA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,qBAAA,CAAKC,uBAAA,CAAO,KAAA,EAAO,SAAA,KAAc,KAAA,IAASA,uBAAA,CAAO,GAAA,EAAK,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACxG","file":"block.js","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { FC, ComponentProps } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './block.module.css';\n\nexport interface BlockProps extends ComponentProps<'div'> {\n    direction?: 'row' | 'column';\n}\n\nexport const Block: FC<BlockProps> = ({ className, direction = 'column', ...props }) => {\n    return <div className={clsx(styles.block, direction === 'row' && styles.row, className)} {...props} />;\n};\n"]}

package/dist/components/block/block.mjs

@@ -1,11 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import styles from './block.module.css';
-
-const Block = ({ className, direction = "column", ...props }) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx(styles.block, direction === "row" && styles.row, className), ...props });
-};
-
-export { Block };
-//# sourceMappingURL=block.mjs.map
-//# sourceMappingURL=block.mjs.map