@ton/appkit-react 0.0.6-alpha.1 → 0.0.6-alpha.3

package/src/features/balances/hooks/use-watch-balance-by-address.ts

@@ -0,0 +1,54 @@
+/**
+ * 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 } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { watchBalanceByAddress, hasStreamingProvider, resolveNetwork } from '@ton/appkit';
+import type { WatchBalanceByAddressOptions } from '@ton/appkit';
+import { handleBalanceUpdate } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseWatchBalanceByAddressParameters = Partial<WatchBalanceByAddressOptions>;
+
+/**
+ * Hook to watch balance of a specific address in real-time.
+ * Automatically updates the TanStack Query cache for `useBalanceByAddress`.
+ */
+export const useWatchBalanceByAddress = (parameters: UseWatchBalanceByAddressParameters): void => {
+    const { address, network, onChange } = parameters;
+    const appKit = useAppKit();
+    const queryClient = useQueryClient();
+
+    useEffect(() => {
+        if (!address) return;
+
+        const resolvedNetwork = resolveNetwork(appKit, network);
+        if (!resolvedNetwork || !hasStreamingProvider(appKit, resolvedNetwork)) {
+            // eslint-disable-next-line no-console
+            console.warn(
+                resolvedNetwork
+                    ? `No streaming provider available for network: ${resolvedNetwork?.chainId}`
+                    : 'No network provided',
+            );
+
+            return;
+        }
+
+        const addressString = address.toString();
+
+        return watchBalanceByAddress(appKit, {
+            address,
+            network: resolvedNetwork,
+            onChange: (balance) => {
+                onChange?.(balance);
+                handleBalanceUpdate(queryClient, { address: addressString, network: resolvedNetwork }, balance);
+            },
+        });
+    }, [address, network, appKit, queryClient, onChange]);
+};

package/src/features/balances/hooks/use-watch-balance.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 { useAddress } from '../../wallets/hooks/use-address';
+import { useNetwork } from '../../network/hooks/use-network';
+import { useWatchBalanceByAddress } from './use-watch-balance-by-address';
+import type { UseWatchBalanceByAddressParameters } from './use-watch-balance-by-address';
+
+export type UseWatchBalanceParameters = Omit<UseWatchBalanceByAddressParameters, 'address'>;
+
+/**
+ * Hook to watch balance of the currently selected wallet in real-time.
+ * Automatically updates the TanStack Query cache for `useBalance`.
+ */
+export const useWatchBalance = (parameters: UseWatchBalanceParameters = {}): void => {
+    const address = useAddress();
+    const network = useNetwork();
+
+    useWatchBalanceByAddress({ ...parameters, address, network });
+};

package/src/features/balances/index.ts

@@ -13,3 +13,5 @@ export * from './components/send-jetton-button';
 
 export * from './hooks/use-balance';
 export * from './hooks/use-balance-by-address';
+export * from './hooks/use-watch-balance';
+export * from './hooks/use-watch-balance-by-address';

package/src/features/jettons/hooks/use-watch-jettons-by-address.ts

@@ -0,0 +1,66 @@
+/**
+ * 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 } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { watchJettonsByAddress, hasStreamingProvider, resolveNetwork } from '@ton/appkit';
+import type { WatchJettonsByAddressOptions, JettonUpdate } from '@ton/appkit';
+import { handleJettonBalanceUpdate, handleJettonsUpdate } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseWatchJettonsByAddressParameters = Partial<WatchJettonsByAddressOptions>;
+
+/**
+ * Hook to watch jetton updates for a specific address in real-time.
+ * Automatically updates TanStack Query caches for jetton balances.
+ */
+export const useWatchJettonsByAddress = (parameters: UseWatchJettonsByAddressParameters): void => {
+    const { address, network } = parameters;
+    const appKit = useAppKit();
+    const queryClient = useQueryClient();
+
+    useEffect(() => {
+        if (!address) return;
+
+        const resolvedNetwork = resolveNetwork(appKit, network);
+        if (!resolvedNetwork || !hasStreamingProvider(appKit, resolvedNetwork)) {
+            // eslint-disable-next-line no-console
+            console.warn(
+                resolvedNetwork
+                    ? `No streaming provider available for network: ${resolvedNetwork?.chainId}`
+                    : 'No network provided',
+            );
+
+            return;
+        }
+
+        const addressString = address.toString();
+
+        return watchJettonsByAddress(appKit, {
+            ...parameters,
+            address,
+            network: resolvedNetwork,
+            onChange: (update: JettonUpdate) => {
+                parameters.onChange?.(update);
+
+                handleJettonsUpdate(queryClient, { address: addressString, network: resolvedNetwork }, update);
+
+                handleJettonBalanceUpdate(
+                    queryClient,
+                    {
+                        ownerAddress: addressString,
+                        jettonAddress: update.masterAddress,
+                        network: resolvedNetwork,
+                    },
+                    update,
+                );
+            },
+        });
+    }, [address, network, appKit, queryClient, parameters]);
+};

package/src/features/jettons/hooks/use-watch-jettons.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 { WatchJettonsOptions } from '@ton/appkit';
+
+import { useAddress } from '../../wallets/hooks/use-address';
+import { useNetwork } from '../../network/hooks/use-network';
+import { useWatchJettonsByAddress } from './use-watch-jettons-by-address';
+
+export type UseWatchJettonsParameters = Partial<WatchJettonsOptions>;
+
+/**
+ * Hook to watch jetton updates of the currently selected wallet in real-time.
+ * Automatically updates TanStack Query caches for jetton balances.
+ */
+export const useWatchJettons = (parameters: UseWatchJettonsParameters = {}): void => {
+    const address = useAddress();
+    const network = useNetwork();
+
+    useWatchJettonsByAddress({ ...parameters, address, network });
+};

package/src/features/jettons/index.ts

@@ -11,4 +11,6 @@ export * from './hooks/use-jetton-wallet-address';
 export * from './hooks/use-jetton-balance-by-address';
 export * from './hooks/use-jettons';
 export * from './hooks/use-jettons-by-address';
+export * from './hooks/use-watch-jettons-by-address';
 export * from './hooks/use-transfer-jetton';
+export * from './hooks/use-watch-jettons';

package/src/features/staking/hooks/use-build-stake-transaction.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { buildStakeTransactionMutationOptions } from '@ton/appkit/queries';
+import type {
+    BuildStakeTransactionData,
+    BuildStakeTransactionErrorType,
+    BuildStakeTransactionVariables,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useMutation } from '../../../libs/query';
+
+export type UseBuildStakeTransactionReturnType<context = unknown> = UseMutationResult<
+    BuildStakeTransactionData,
+    BuildStakeTransactionErrorType,
+    BuildStakeTransactionVariables,
+    context
+>;
+
+/**
+ * Hook to build stake transaction
+ */
+export const useBuildStakeTransaction = <context = unknown>(): UseBuildStakeTransactionReturnType<context> => {
+    const appKit = useAppKit();
+    return useMutation(buildStakeTransactionMutationOptions<context>(appKit));
+};

package/src/features/staking/hooks/use-staked-balance.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 { getStakedBalanceQueryOptions } from '@ton/appkit/queries';
+import type { GetStakedBalanceData, GetStakedBalanceErrorType, GetStakedBalanceQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseStakedBalanceParameters<selectData = GetStakedBalanceData> = GetStakedBalanceQueryConfig<selectData>;
+export type UseStakedBalanceReturnType<selectData = GetStakedBalanceData> = UseQueryReturnType<
+    selectData,
+    GetStakedBalanceErrorType
+>;
+
+/**
+ * Hook to get user's staked balance
+ */
+export const useStakedBalance = <selectData = GetStakedBalanceData>(
+    parameters: UseStakedBalanceParameters<selectData> = {},
+): UseStakedBalanceReturnType<selectData> => {
+    const appKit = useAppKit();
+    return useQuery(getStakedBalanceQueryOptions(appKit, parameters));
+};

package/src/features/staking/hooks/use-staking-provider-info.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.
+ *
+ */
+
+import { getStakingProviderInfoQueryOptions } from '@ton/appkit/queries';
+import type {
+    GetStakingProviderInfoData,
+    GetStakingProviderInfoErrorType,
+    GetStakingProviderInfoQueryConfig,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseStakingProviderInfoParameters<selectData = GetStakingProviderInfoData> =
+    GetStakingProviderInfoQueryConfig<selectData>;
+export type UseStakingProviderInfoReturnType<selectData = GetStakingProviderInfoData> = UseQueryReturnType<
+    selectData,
+    GetStakingProviderInfoErrorType
+>;
+
+/**
+ * Hook to get staking provider information
+ */
+export const useStakingProviderInfo = <selectData = GetStakingProviderInfoData>(
+    parameters: UseStakingProviderInfoParameters<selectData> = {},
+): UseStakingProviderInfoReturnType<selectData> => {
+    const appKit = useAppKit();
+    return useQuery(getStakingProviderInfoQueryOptions(appKit, parameters));
+};

package/src/features/staking/hooks/use-staking-providers.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.
+ *
+ */
+
+import { getStakingProvidersQueryOptions } from '@ton/appkit/queries';
+import type {
+    GetStakingProvidersData,
+    GetStakingProvidersErrorType,
+    GetStakingProvidersQueryConfig,
+} from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseStakingProvidersParameters<selectData = GetStakingProvidersData> =
+    GetStakingProvidersQueryConfig<selectData>;
+export type UseStakingProvidersReturnType<selectData = GetStakingProvidersData> = UseQueryReturnType<
+    selectData,
+    GetStakingProvidersErrorType
+>;
+
+/**
+ * Hook to get available staking provider IDs
+ */
+export const useStakingProviders = <selectData = GetStakingProvidersData>(
+    parameters: UseStakingProvidersParameters<selectData> = {},
+): UseStakingProvidersReturnType<selectData> => {
+    const appKit = useAppKit();
+    return useQuery(getStakingProvidersQueryOptions(appKit, parameters));
+};

package/src/features/staking/hooks/use-staking-quote.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 { getStakingQuoteQueryOptions } from '@ton/appkit/queries';
+import type { GetStakingQuoteData, GetStakingQuoteErrorType, GetStakingQuoteQueryConfig } from '@ton/appkit/queries';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+import type { UseQueryReturnType } from '../../../libs/query';
+
+export type UseStakingQuoteParameters<selectData = GetStakingQuoteData> = GetStakingQuoteQueryConfig<selectData>;
+export type UseStakingQuoteReturnType<selectData = GetStakingQuoteData> = UseQueryReturnType<
+    selectData,
+    GetStakingQuoteErrorType
+>;
+
+/**
+ * Hook to get staking/unstaking quote
+ */
+export const useStakingQuote = <selectData = GetStakingQuoteData>(
+    parameters: UseStakingQuoteParameters<selectData> = {},
+): UseStakingQuoteReturnType<selectData> => {
+    const appKit = useAppKit();
+    return useQuery(getStakingQuoteQueryOptions(appKit, parameters));
+};

package/src/features/staking/index.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.
+ *
+ */
+
+export { UnstakeMode, type UnstakeModes } from '@ton/appkit';
+
+export {
+    useStakingProviders,
+    type UseStakingProvidersParameters,
+    type UseStakingProvidersReturnType,
+} from './hooks/use-staking-providers';
+export {
+    useStakingQuote,
+    type UseStakingQuoteParameters,
+    type UseStakingQuoteReturnType,
+} from './hooks/use-staking-quote';
+export {
+    useStakedBalance,
+    type UseStakedBalanceParameters,
+    type UseStakedBalanceReturnType,
+} from './hooks/use-staked-balance';
+export {
+    useStakingProviderInfo,
+    type UseStakingProviderInfoParameters,
+    type UseStakingProviderInfoReturnType,
+} from './hooks/use-staking-provider-info';
+export { useBuildStakeTransaction, type UseBuildStakeTransactionReturnType } from './hooks/use-build-stake-transaction';

package/src/features/transaction/components/transaction/index.ts

@@ -6,5 +6,5 @@
  *
  */
 
-export { Transaction } from './transaction';
-export type { TransactionProps, TransactionRenderProps } from './transaction';
+export { Send } from './send';
+export type { SendProps, SendRenderProps, SendRequest } from './send';

package/src/features/transaction/components/transaction/{transaction.tsx → send.tsx}

@@ -10,26 +10,26 @@ 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 { SendProvider, useSendContext } from '../transaction-provider';
 import { useI18n } from '../../../../hooks/use-i18n';
 import { Button } from '../../../../components/button';
 
-export interface TransactionRenderProps {
+export interface SendRenderProps {
     isLoading: boolean;
     onSubmit: () => void;
     disabled: boolean;
     text: ReactNode;
 }
 
-export type TransactionRequest =
+export type SendRequest =
     | SendTransactionParameters
     | Promise<SendTransactionParameters>
     | (() => SendTransactionParameters)
     | (() => Promise<SendTransactionParameters>);
 
-export interface TransactionProps extends Omit<ComponentProps<'button'>, 'children' | 'onError'> {
+export interface SendProps extends Omit<ComponentProps<'button'>, 'children' | 'onError'> {
     /** The transaction request parameters */
-    request: TransactionRequest;
+    request: SendRequest;
     /** Callback when an error occurs */
     onError?: (error: Error) => void;
     /** Callback when the transaction is successful */
@@ -37,16 +37,16 @@ export interface TransactionProps extends Omit<ComponentProps<'button'>, 'childr
     /** Custom button text */
     text?: ReactNode;
     /** Custom render function */
-    children?: (props: TransactionRenderProps) => ReactNode;
+    children?: (props: SendRenderProps) => ReactNode;
 }
 
-interface TransactionContentProps extends Omit<ComponentProps<'button'>, 'children'> {
+interface SendContentProps extends Omit<ComponentProps<'button'>, 'children'> {
     text?: ReactNode;
-    children?: (props: TransactionRenderProps) => ReactNode;
+    children?: (props: SendRenderProps) => ReactNode;
 }
 
-const TransactionContent: FC<TransactionContentProps> = ({ text, children, ...props }) => {
-    const { isLoading, onSubmit, disabled } = useTransactionContext();
+const SendContent: FC<SendContentProps> = ({ text, children, ...props }) => {
+    const { isLoading, onSubmit, disabled } = useSendContext();
     const { t } = useI18n();
 
     const isDisabled = disabled || isLoading;
@@ -85,7 +85,7 @@ const TransactionContent: FC<TransactionContentProps> = ({ text, children, ...pr
     );
 };
 
-export const Transaction: FC<TransactionProps> = ({
+export const Send: FC<SendProps> = ({
     request,
     children,
     className,
@@ -96,10 +96,10 @@ export const Transaction: FC<TransactionProps> = ({
     ...props
 }) => {
     return (
-        <TransactionProvider request={request} onError={onError} onSuccess={onSuccess} disabled={disabled}>
-            <TransactionContent className={className} text={text} {...props}>
+        <SendProvider request={request} onError={onError} onSuccess={onSuccess} disabled={disabled}>
+            <SendContent className={className} text={text} {...props}>
                 {children}
-            </TransactionContent>
-        </TransactionProvider>
+            </SendContent>
+        </SendProvider>
     );
 };

package/src/features/transaction/components/transaction-provider/index.ts

@@ -6,5 +6,5 @@
  *
  */
 
-export { TransactionProvider, useTransactionContext, TransactionContext } from './transaction-provider';
-export type { TransactionContextType } from './transaction-provider';
+export { SendProvider, useSendContext, SendContext } from './send-provider';
+export type { SendProviderProps, SendContextType } from './send-provider';

package/src/features/transaction/components/transaction-provider/{transaction-provider.tsx → send-provider.tsx}

@@ -11,9 +11,9 @@ 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';
+import type { SendRequest } from '../transaction/send';
 
-export interface TransactionContextType {
+export interface SendContextType {
     /** Function to submit the transaction */
     onSubmit: () => void;
     /** Whether the transaction is currently loading */
@@ -26,22 +26,22 @@ export interface TransactionContextType {
     disabled?: boolean;
 }
 
-export const TransactionContext = createContext<TransactionContextType>({
+export const SendContext = createContext<SendContextType>({
     onSubmit: () => {
         throw new Error('onSubmit is not defined');
     },
     isLoading: false,
 });
 
-export function useTransactionContext() {
-    const context = useContext(TransactionContext);
+export function useSendContext() {
+    const context = useContext(SendContext);
 
     return context;
 }
 
-export interface TransactionProviderProps extends PropsWithChildren {
+export interface SendProviderProps extends PropsWithChildren {
     /** The transaction request parameters */
-    request: TransactionRequest;
+    request: SendRequest;
     /** Callback when an error occurs */
     onError?: (error: Error) => void;
     /** Callback when the transaction is successful */
@@ -50,13 +50,7 @@ export interface TransactionProviderProps extends PropsWithChildren {
     disabled?: boolean;
 }
 
-export const TransactionProvider: FC<TransactionProviderProps> = ({
-    children,
-    request,
-    onError,
-    onSuccess,
-    disabled = false,
-}) => {
+export const SendProvider: FC<SendProviderProps> = ({ children, request, onError, onSuccess, disabled = false }) => {
     const [receipt, setReceipt] = useState<SendTransactionReturnType | null>(null);
     const [isPreparing, setIsPreparing] = useState(false);
 
@@ -110,5 +104,5 @@ export const TransactionProvider: FC<TransactionProviderProps> = ({
         [mutationError, isPreparing, isPending, handleSubmit, receipt, disabled],
     );
 
-    return <TransactionContext.Provider value={value}>{children}</TransactionContext.Provider>;
+    return <SendContext.Provider value={value}>{children}</SendContext.Provider>;
 };

package/src/features/transaction/hooks/use-watch-transactions-by-address.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 { useEffect } from 'react';
+import { watchTransactionsByAddress, hasStreamingProvider, resolveNetwork } from '@ton/appkit';
+import type { WatchTransactionsByAddressOptions, TransactionsUpdate } from '@ton/appkit';
+
+import { useAppKit } from '../../../hooks/use-app-kit';
+
+export type UseWatchTransactionsByAddressParameters = Partial<WatchTransactionsByAddressOptions>;
+
+/**
+ * Hook to watch transactions for a specific address in real-time.
+ */
+export const useWatchTransactionsByAddress = (parameters: UseWatchTransactionsByAddressParameters): void => {
+    const { address, network } = parameters;
+    const appKit = useAppKit();
+
+    useEffect(() => {
+        if (!address) return;
+
+        const resolvedNetwork = resolveNetwork(appKit, network);
+        if (!resolvedNetwork || !hasStreamingProvider(appKit, resolvedNetwork)) {
+            // eslint-disable-next-line no-console
+            console.warn(
+                resolvedNetwork
+                    ? `No streaming provider available for network: ${resolvedNetwork?.chainId}`
+                    : 'No network provided',
+            );
+
+            return;
+        }
+
+        if (!parameters.onChange) {
+            // eslint-disable-next-line no-console
+            console.warn('No onChange callback provided for watchTransactionsByAddress');
+
+            return;
+        }
+
+        return watchTransactionsByAddress(appKit, {
+            ...parameters,
+            address,
+            network: resolvedNetwork,
+            onChange: (update: TransactionsUpdate) => {
+                parameters.onChange?.(update);
+            },
+        });
+    }, [address, network, appKit, parameters]);
+};

package/src/features/transaction/hooks/use-watch-transactions.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 { TransactionsUpdate } from '@ton/appkit';
+
+import { useAddress } from '../../wallets/hooks/use-address';
+import { useNetwork } from '../../network/hooks/use-network';
+import { useWatchTransactionsByAddress } from './use-watch-transactions-by-address';
+
+export interface UseWatchTransactionsParameters {
+    onChange?: (update: TransactionsUpdate) => void;
+}
+
+/**
+ * Hook to watch transaction updates of the currently selected wallet in real-time.
+ */
+export const useWatchTransactions = (parameters: UseWatchTransactionsParameters = {}): void => {
+    const address = useAddress();
+    const network = useNetwork();
+
+    useWatchTransactionsByAddress({ ...parameters, address, network });
+};

package/src/features/transaction/index.ts

@@ -9,6 +9,8 @@
 export * from './hooks/use-send-transaction';
 export * from './hooks/use-transfer-ton';
 export * from './hooks/use-transaction-status';
+export * from './hooks/use-watch-transactions-by-address';
+export * from './hooks/use-watch-transactions';
 
 export * from './components/transaction';
 export * from './components/transaction-progress';

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

@@ -28,5 +28,5 @@ export const useConnectedWallets = (): UseConnectedWalletsReturnType => {
         return getConnectedWallets(appKit);
     }, [appKit]);
 
-    return useSyncExternalStore(subscribe, getSnapshot, () => []);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 };

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

@@ -26,5 +26,5 @@ export const useConnectorById = (id: string): Connector | undefined => {
         return getConnectorById(appKit, { id });
     }, [appKit, id]);
 
-    return useSyncExternalStore(subscribe, getSnapshot, () => undefined);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 };