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

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,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.
+ *
+ */
+
+export default {
+    // Wallet connection
+    wallet: {
+        connect: 'Connect',
+        disconnect: 'Disconnect',
+        connectWallet: 'Connect Wallet',
+        noWalletsFound: 'No wallets found',
+    },
+
+    // Transaction
+    transaction: {
+        sendTransaction: 'Send Transaction',
+        processing: 'Processing...',
+    },
+
+    // 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>;
+};