@iota/dapp-kit 0.0.0-dev-20251015065834

package/src/hooks/networkConfig.ts

@@ -0,0 +1,46 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IotaClientOptions } from '@iota/iota-sdk/client';
+
+import { useIotaClientContext } from './useIotaClient.js';
+
+export type NetworkConfig<T extends object = object> = IotaClientOptions & {
+    variables?: T;
+};
+
+export function createNetworkConfig<
+    const T extends Record<string, Config>,
+    Config extends NetworkConfig<Variables> = T[keyof T],
+    Variables extends object = NonNullable<Config['variables']>,
+>(networkConfig: T) {
+    function useNetworkConfig(): Config {
+        const { config } = useIotaClientContext();
+
+        if (!config) {
+            throw new Error('No network config found');
+        }
+
+        return config as T[keyof T];
+    }
+
+    function useNetworkVariables(): Variables {
+        const { variables } = useNetworkConfig();
+
+        return (variables ?? {}) as Variables;
+    }
+
+    function useNetworkVariable<K extends keyof Variables>(name: K): Variables[K] {
+        const variables = useNetworkVariables();
+
+        return variables[name];
+    }
+
+    return {
+        networkConfig,
+        useNetworkConfig,
+        useNetworkVariables,
+        useNetworkVariable,
+    };
+}

package/src/hooks/useGetDefaultIotaName.ts

@@ -0,0 +1,43 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { getNetwork } from '@iota/iota-sdk/client';
+import { useQuery } from '@tanstack/react-query';
+import { IotaNamesClient, normalizeIotaName } from '@iota/iota-names-sdk';
+import { useIotaClientContext } from './useIotaClient.js';
+import { useMemo } from 'react';
+import { IotaGraphQLClient } from '@iota/iota-sdk/graphql';
+
+export function useGetDefaultIotaName(
+    address: string | null | undefined,
+    iotaNamesEnabled: boolean,
+) {
+    const iotaContext = useIotaClientContext();
+    const network = getNetwork(iotaContext.network);
+
+    const iotaNamesClient = useMemo(() => {
+        const iotaGraphQLClient = new IotaGraphQLClient({
+            url: network.graphql!,
+        });
+
+        return new IotaNamesClient({
+            graphQlClient: iotaGraphQLClient,
+            network: network.id,
+        });
+    }, [network.id]);
+
+    const iotaNamesSupported = !!iotaNamesClient.config;
+
+    return useQuery({
+        queryKey: ['iota-name', 'default-name', address],
+        queryFn: async () => {
+            if (!address) return null;
+
+            const name = await iotaNamesClient?.getDefaultName(address);
+
+            return name ? normalizeIotaName(name) : name;
+        },
+        enabled: !!iotaNamesClient && !!address && iotaNamesEnabled && iotaNamesSupported,
+        staleTime: 1000 * 60 * 10,
+    });
+}

package/src/hooks/useIotaClient.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IotaClient } from '@iota/iota-sdk/client';
+import { useContext } from 'react';
+
+import { IotaClientContext } from '../components/IotaClientProvider.js';
+
+export function useIotaClientContext() {
+    const iotaClient = useContext(IotaClientContext);
+
+    if (!iotaClient) {
+        throw new Error(
+            'Could not find IotaClientContext. Ensure that you have set up the IotaClientProvider',
+        );
+    }
+
+    return iotaClient;
+}
+
+export function useIotaClient(): IotaClient {
+    return useIotaClientContext().client;
+}

package/src/hooks/useIotaClientInfiniteQuery.ts

@@ -0,0 +1,87 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IotaClient } from '@iota/iota-sdk/client';
+import type {
+    InfiniteData,
+    UseInfiniteQueryOptions,
+    UseInfiniteQueryResult,
+} from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import type { PartialBy } from '../types/utilityTypes.js';
+import { useIotaClientContext } from './useIotaClient.js';
+
+interface PaginatedResult {
+    data?: unknown;
+    nextCursor?: unknown;
+    hasNextPage: boolean;
+}
+
+export type IotaRpcPaginatedMethodName = {
+    [K in keyof IotaClient]: IotaClient[K] extends (input: any) => Promise<PaginatedResult>
+        ? K
+        : never;
+}[keyof IotaClient];
+
+export type IotaRpcPaginatedMethods = {
+    [K in IotaRpcPaginatedMethodName]: IotaClient[K] extends (
+        input: infer Params,
+    ) => Promise<
+        infer Result extends { hasNextPage?: boolean | null; nextCursor?: infer Cursor | null }
+    >
+        ? {
+              name: K;
+              result: Result;
+              params: Params;
+              cursor: Cursor;
+          }
+        : never;
+};
+
+export type UseIotaClientInfiniteQueryOptions<
+    T extends keyof IotaRpcPaginatedMethods,
+    TData,
+> = PartialBy<
+    Omit<
+        UseInfiniteQueryOptions<
+            IotaRpcPaginatedMethods[T]['result'],
+            Error,
+            TData,
+            IotaRpcPaginatedMethods[T]['result'],
+            unknown[]
+        >,
+        'queryFn' | 'initialPageParam' | 'getNextPageParam'
+    >,
+    'queryKey'
+>;
+
+export function useIotaClientInfiniteQuery<
+    T extends keyof IotaRpcPaginatedMethods,
+    TData = InfiniteData<IotaRpcPaginatedMethods[T]['result']>,
+>(
+    method: T,
+    params: IotaRpcPaginatedMethods[T]['params'],
+    {
+        queryKey = [],
+        enabled = !!params,
+        ...options
+    }: UseIotaClientInfiniteQueryOptions<T, TData> = {},
+): UseInfiniteQueryResult<TData, Error> {
+    const iotaContext = useIotaClientContext();
+
+    return useInfiniteQuery({
+        ...options,
+        initialPageParam: null,
+        queryKey: [iotaContext.network, method, params, ...queryKey],
+        enabled,
+        queryFn: ({ pageParam }) =>
+            iotaContext.client[method]({
+                ...(params ?? {}),
+                cursor: pageParam,
+            } as never),
+        getNextPageParam: (lastPage) =>
+            lastPage.hasNextPage ? (lastPage.nextCursor ?? null) : null,
+    });
+}

package/src/hooks/useIotaClientMutation.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { useIotaClientContext } from './useIotaClient.js';
+import type { IotaRpcMethods } from './useIotaClientQuery.js';
+
+export type UseIotaClientMutationOptions<T extends keyof IotaRpcMethods> = Omit<
+    UseMutationOptions<IotaRpcMethods[T]['result'], Error, IotaRpcMethods[T]['params'], unknown[]>,
+    'mutationFn'
+>;
+
+export function useIotaClientMutation<T extends keyof IotaRpcMethods>(
+    method: T,
+    options: UseIotaClientMutationOptions<T> = {},
+): UseMutationResult<IotaRpcMethods[T]['result'], Error, IotaRpcMethods[T]['params'], unknown[]> {
+    const iotaContext = useIotaClientContext();
+
+    return useMutation({
+        ...options,
+        mutationFn: async (params) => {
+            return await iotaContext.client[method](params as never);
+        },
+    });
+}

package/src/hooks/useIotaClientQueries.ts

@@ -0,0 +1,69 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
+
+import { useIotaClientContext } from './useIotaClient.js';
+import type { IotaRpcMethods, UseIotaClientQueryOptions } from './useIotaClientQuery.js';
+
+type IotaClientQueryOptions = IotaRpcMethods[keyof IotaRpcMethods] extends infer Method
+    ? Method extends {
+          name: infer M extends keyof IotaRpcMethods;
+          params?: infer P;
+      }
+        ? undefined extends P
+            ? {
+                  method: M;
+                  params?: P;
+                  options?: UseIotaClientQueryOptions<M, unknown>;
+              }
+            : {
+                  method: M;
+                  params: P;
+                  options?: UseIotaClientQueryOptions<M, unknown>;
+              }
+        : never
+    : never;
+
+export type UseIotaClientQueriesResults<Args extends readonly IotaClientQueryOptions[]> = {
+    -readonly [K in keyof Args]: Args[K] extends {
+        method: infer M extends keyof IotaRpcMethods;
+        readonly options?:
+            | {
+                  select?: (...args: any[]) => infer R;
+              }
+            | object;
+    }
+        ? UseQueryResult<unknown extends R ? IotaRpcMethods[M]['result'] : R>
+        : never;
+};
+
+export function useIotaClientQueries<
+    const Queries extends readonly IotaClientQueryOptions[],
+    Results = UseIotaClientQueriesResults<Queries>,
+>({
+    queries,
+    combine,
+}: {
+    queries: Queries;
+    combine?: (results: UseIotaClientQueriesResults<Queries>) => Results;
+}): Results {
+    const iotaContext = useIotaClientContext();
+
+    return useQueries({
+        combine: combine as never,
+        queries: queries.map((query) => {
+            const { method, params, options: { queryKey = [], ...restOptions } = {} } = query;
+
+            return {
+                ...restOptions,
+                queryKey: [iotaContext.network, method, params, ...queryKey],
+                queryFn: async () => {
+                    return await iotaContext.client[method](params as never);
+                },
+            };
+        }) as [],
+    });
+}

package/src/hooks/useIotaClientQuery.ts

@@ -0,0 +1,144 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IotaClient } from '@iota/iota-sdk/client';
+import type {
+    UndefinedInitialDataOptions,
+    UseQueryOptions,
+    UseQueryResult,
+} from '@tanstack/react-query';
+import { queryOptions, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import type { PartialBy } from '../types/utilityTypes.js';
+import { useIotaClientContext } from './useIotaClient.js';
+
+export type IotaRpcMethodName = {
+    [K in keyof IotaClient]: IotaClient[K] extends
+        | ((input: any) => Promise<any>)
+        | (() => Promise<any>)
+        ? K
+        : never;
+}[keyof IotaClient];
+
+export type IotaRpcMethods = {
+    [K in IotaRpcMethodName]: IotaClient[K] extends (input: infer P) => Promise<infer R>
+        ? {
+              name: K;
+              result: R;
+              params: P;
+          }
+        : IotaClient[K] extends () => Promise<infer R>
+          ? {
+                name: K;
+                result: R;
+                params: undefined | object;
+            }
+          : never;
+};
+
+export type UseIotaClientQueryOptions<T extends keyof IotaRpcMethods, TData> = PartialBy<
+    Omit<UseQueryOptions<IotaRpcMethods[T]['result'], Error, TData, unknown[]>, 'queryFn'>,
+    'queryKey'
+>;
+
+export type GetIotaClientQueryOptions<T extends keyof IotaRpcMethods> = {
+    client: IotaClient;
+    network: string;
+    method: T;
+    options?: PartialBy<
+        Omit<UndefinedInitialDataOptions<IotaRpcMethods[T]['result']>, 'queryFn'>,
+        'queryKey'
+    >;
+} & (undefined extends IotaRpcMethods[T]['params']
+    ? { params?: IotaRpcMethods[T]['params'] }
+    : { params: IotaRpcMethods[T]['params'] });
+
+export function getIotaClientQuery<T extends keyof IotaRpcMethods>({
+    client,
+    network,
+    method,
+    params,
+    options,
+}: GetIotaClientQueryOptions<T>) {
+    return queryOptions<IotaRpcMethods[T]['result']>({
+        ...options,
+        queryKey: [network, method, params],
+        queryFn: async () => {
+            return await client[method](params as never);
+        },
+    });
+}
+
+export function useIotaClientQuery<
+    T extends keyof IotaRpcMethods,
+    TData = IotaRpcMethods[T]['result'],
+>(
+    ...args: undefined extends IotaRpcMethods[T]['params']
+        ? [
+              method: T,
+              params?: IotaRpcMethods[T]['params'],
+              options?: UseIotaClientQueryOptions<T, TData>,
+          ]
+        : [
+              method: T,
+              params: IotaRpcMethods[T]['params'],
+              options?: UseIotaClientQueryOptions<T, TData>,
+          ]
+): UseQueryResult<TData, Error> {
+    const [method, params, { queryKey = [], ...options } = {}] = args as [
+        method: T,
+        params?: IotaRpcMethods[T]['params'],
+        options?: UseIotaClientQueryOptions<T, TData>,
+    ];
+
+    const iotaContext = useIotaClientContext();
+
+    return useQuery({
+        ...options,
+        queryKey: [iotaContext.network, method, params, ...queryKey],
+        queryFn: async () => {
+            return (await iotaContext.client[method](
+                params as never,
+            )) as IotaRpcMethods[T]['result'];
+        },
+    });
+}
+
+export function useIotaClientSuspenseQuery<
+    T extends keyof IotaRpcMethods,
+    TData = IotaRpcMethods[T]['result'],
+>(
+    ...args: undefined extends IotaRpcMethods[T]['params']
+        ? [
+              method: T,
+              params?: IotaRpcMethods[T]['params'],
+              options?: UndefinedInitialDataOptions<TData>,
+          ]
+        : [
+              method: T,
+              params: IotaRpcMethods[T]['params'],
+              options?: UndefinedInitialDataOptions<TData>,
+          ]
+) {
+    const [method, params, options = {}] = args as [
+        method: T,
+        params?: IotaRpcMethods[T]['params'],
+        options?: UndefinedInitialDataOptions<TData>,
+    ];
+
+    const iotaContext = useIotaClientContext();
+
+    const query = useMemo(() => {
+        return getIotaClientQuery<T>({
+            client: iotaContext.client,
+            network: iotaContext.network,
+            method,
+            params,
+            options,
+        });
+    }, [iotaContext.network, method, params, options]);
+
+    return useSuspenseQuery(query);
+}

package/src/hooks/wallet/useAccounts.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletAccount } from '@iota/wallet-standard';
+
+import { useWalletStore } from './useWalletStore.js';
+
+/**
+ * Retrieves a list of connected accounts authorized by the dApp.
+ */
+export function useAccounts(): readonly WalletAccount[] {
+    return useWalletStore((state) => state.accounts);
+}

package/src/hooks/wallet/useAutoConnectWallet.ts

@@ -0,0 +1,95 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useQuery } from '@tanstack/react-query';
+import { useLayoutEffect, useState } from 'react';
+
+import { getWalletUniqueIdentifier } from '../../utils/walletUtils.js';
+import { useConnectWallet } from './useConnectWallet.js';
+import { useCurrentWallet } from './useCurrentWallet.js';
+import { useWallets } from './useWallets.js';
+import { useWalletStore } from './useWalletStore.js';
+
+export function useAutoConnectWallet(): 'disabled' | 'idle' | 'attempted' {
+    const { mutateAsync: connectWallet } = useConnectWallet();
+    const autoConnectEnabled = useWalletStore((state) => state.autoConnectEnabled);
+    const lastConnectedWalletName = useWalletStore((state) => state.lastConnectedWalletName);
+    const lastConnectedAccountAddress = useWalletStore(
+        (state) => state.lastConnectedAccountAddress,
+    );
+    const wallets = useWallets();
+    const { isConnected } = useCurrentWallet();
+
+    const [clientOnly, setClientOnly] = useState(false);
+    useLayoutEffect(() => {
+        setClientOnly(true);
+    }, []);
+
+    const { data, isError } = useQuery({
+        queryKey: [
+            '@iota/dapp-kit',
+            'autoconnect',
+            {
+                isConnected,
+                autoConnectEnabled,
+                lastConnectedWalletName,
+                lastConnectedAccountAddress,
+                walletCount: wallets.length,
+            },
+        ],
+        queryFn: async () => {
+            if (!autoConnectEnabled) {
+                return 'disabled';
+            }
+
+            if (!lastConnectedWalletName || !lastConnectedAccountAddress || isConnected) {
+                return 'attempted';
+            }
+
+            const wallet = wallets.find(
+                (wallet) => getWalletUniqueIdentifier(wallet) === lastConnectedWalletName,
+            );
+            if (wallet) {
+                await connectWallet({
+                    wallet,
+                    accountAddress: lastConnectedAccountAddress,
+                    silent: true,
+                });
+            }
+
+            return 'attempted';
+        },
+        enabled: autoConnectEnabled,
+        persister: undefined,
+        gcTime: 0,
+        staleTime: 0,
+        networkMode: 'always',
+        retry: false,
+        retryOnMount: false,
+        refetchInterval: false,
+        refetchIntervalInBackground: false,
+        refetchOnMount: false,
+        refetchOnReconnect: false,
+        refetchOnWindowFocus: false,
+    });
+
+    if (!autoConnectEnabled) {
+        return 'disabled';
+    }
+
+    // We always initialize with "idle" so that in SSR environments, we guarantee that the initial render states always agree:
+    if (!clientOnly) {
+        return 'idle';
+    }
+
+    if (isConnected) {
+        return 'attempted';
+    }
+
+    if (!lastConnectedWalletName) {
+        return 'attempted';
+    }
+
+    return isError ? 'attempted' : (data ?? 'idle');
+}

package/src/hooks/wallet/useConnectWallet.ts

@@ -0,0 +1,91 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { isSupportedChain } from '@iota/wallet-standard';
+import type {
+    StandardConnectInput,
+    StandardConnectOutput,
+    WalletAccount,
+    WalletWithRequiredFeatures,
+} from '@iota/wallet-standard';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
+import { useWalletStore } from './useWalletStore.js';
+
+type ConnectWalletArgs = {
+    /** The wallet to connect to. */
+    wallet: WalletWithRequiredFeatures;
+
+    /** An optional account address to connect to. Defaults to the first authorized account. */
+    accountAddress?: string;
+} & StandardConnectInput;
+
+type ConnectWalletResult = StandardConnectOutput;
+
+type UseConnectWalletMutationOptions = Omit<
+    UseMutationOptions<ConnectWalletResult, Error, ConnectWalletArgs, unknown>,
+    'mutationFn'
+>;
+
+/**
+ * Mutation hook for establishing a connection to a specific wallet.
+ */
+export function useConnectWallet({
+    mutationKey,
+    ...mutationOptions
+}: UseConnectWalletMutationOptions = {}): UseMutationResult<
+    ConnectWalletResult,
+    Error,
+    ConnectWalletArgs,
+    unknown
+> {
+    const setWalletConnected = useWalletStore((state) => state.setWalletConnected);
+    const setConnectionStatus = useWalletStore((state) => state.setConnectionStatus);
+
+    return useMutation({
+        mutationKey: walletMutationKeys.connectWallet(mutationKey),
+        mutationFn: async ({ wallet, accountAddress, ...connectArgs }) => {
+            try {
+                setConnectionStatus('connecting');
+
+                const connectResult =
+                    await wallet.features['standard:connect'].connect(connectArgs);
+                const connectedIotaAccounts = connectResult.accounts.filter((account) =>
+                    account.chains.some(isSupportedChain),
+                );
+                const selectedAccount = getSelectedAccount(connectedIotaAccounts, accountAddress);
+
+                setWalletConnected(
+                    wallet,
+                    connectedIotaAccounts,
+                    selectedAccount,
+                    connectResult.supportedIntents,
+                );
+
+                return { accounts: connectedIotaAccounts };
+            } catch (error) {
+                setConnectionStatus('disconnected');
+                throw error;
+            }
+        },
+        ...mutationOptions,
+    });
+}
+
+function getSelectedAccount(connectedAccounts: readonly WalletAccount[], accountAddress?: string) {
+    if (connectedAccounts.length === 0) {
+        return null;
+    }
+
+    if (accountAddress) {
+        const selectedAccount = connectedAccounts.find(
+            (account) => account.address === accountAddress,
+        );
+        return selectedAccount ?? connectedAccounts[0];
+    }
+
+    return connectedAccounts[0];
+}

package/src/hooks/wallet/useCurrentAccount.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { WalletAccount } from '@iota/wallet-standard';
+
+import { useWalletStore } from './useWalletStore.js';
+
+/**
+ * Retrieves the wallet account that is currently selected, if one exists.
+ */
+export function useCurrentAccount(): WalletAccount | null {
+    return useWalletStore((state) => state.currentAccount);
+}