@iota/dapp-kit 0.5.3 → 0.8.0

package/src/components/WalletProvider.tsx

@@ -24,6 +24,7 @@ import { createInMemoryStore } from '../utils/stateStorage.js';
 import { getRegisteredWallets } from '../utils/walletUtils.js';
 import { createWalletStore } from '../walletStore.js';
 import { InjectedThemeStyles } from './styling/InjectedThemeStyles.js';
+import type { ChainType } from '@iota/iota-sdk/client';
 
 export type WalletProviderProps = {
     /** A list of wallets that are sorted to the top of the wallet list, if they are available to connect to. By default, wallets are sorted by the order they are loaded in. */
@@ -47,6 +48,8 @@ export type WalletProviderProps = {
     /** The theme to use for styling UI components. Defaults to using the light theme. */
     theme?: Theme | null;
 
+    chain?: ChainType;
+
     children: ReactNode;
 };
 
@@ -61,6 +64,7 @@ export function WalletProvider({
     autoConnect = false,
     theme = lightTheme,
     children,
+    chain,
 }: WalletProviderProps) {
     const storeRef = useRef(
         createWalletStore({
@@ -68,6 +72,7 @@ export function WalletProvider({
             wallets: getRegisteredWallets(preferredWallets, walletFilter),
             storage: storage || createInMemoryStore(),
             storageKey,
+            chain,
         }),
     );
 

package/src/components/connect-modal/ConnectModal.tsx

@@ -45,13 +45,23 @@ type UncontrolledModalProps = {
 type ConnectModalProps = {
     /** The trigger button that opens the dialog. */
     trigger: NonNullable<ReactNode>;
+
+    onConnected?: (params: { wallet: WalletWithRequiredFeatures }) => void;
 } & (ControlledModalProps | UncontrolledModalProps);
 
-export function ConnectModal({ trigger, open, defaultOpen, onOpenChange }: ConnectModalProps) {
+export function ConnectModal({
+    trigger,
+    open,
+    defaultOpen,
+    onOpenChange,
+    onConnected,
+}: ConnectModalProps) {
     const [isModalOpen, setModalOpen] = useState(open ?? defaultOpen);
     const [currentView, setCurrentView] = useState<ConnectModalView>();
     const [selectedWallet, setSelectedWallet] = useState<WalletWithRequiredFeatures>();
-    const { mutate, isError } = useConnectWallet();
+    const { mutate, isError } = useConnectWallet({
+        onConnected,
+    });
 
     const resetSelection = () => {
         setSelectedWallet(undefined);

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/wallet/useConnectWallet.ts

@@ -28,12 +28,15 @@ type ConnectWalletResult = StandardConnectOutput;
 type UseConnectWalletMutationOptions = Omit<
     UseMutationOptions<ConnectWalletResult, Error, ConnectWalletArgs, unknown>,
     'mutationFn'
->;
+> & {
+    onConnected?: (params: { wallet: WalletWithRequiredFeatures }) => void;
+};
 
 /**
  * Mutation hook for establishing a connection to a specific wallet.
  */
 export function useConnectWallet({
+    onConnected,
     mutationKey,
     ...mutationOptions
 }: UseConnectWalletMutationOptions = {}): UseMutationResult<
@@ -65,6 +68,8 @@ export function useConnectWallet({
                     connectResult.supportedIntents,
                 );
 
+                onConnected?.({ wallet });
+
                 return { accounts: connectedIotaAccounts };
             } catch (error) {
                 setConnectionStatus('disconnected');

package/src/hooks/wallet/useCurrentChain.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ChainType } from '@iota/iota-sdk/client';
+import { useWalletStore } from './useWalletStore.js';
+
+/**
+ * Retrieves the chain the dapp is configured with, if any.
+ */
+export function useCurrentChain(): ChainType | undefined {
+    return useWalletStore((state) => state.chain);
+}

package/src/hooks/wallet/useSignAndExecuteTransaction.ts

@@ -23,6 +23,7 @@ import { useIotaClient } from '../useIotaClient.js';
 import { useCurrentAccount } from './useCurrentAccount.js';
 import { useCurrentWallet } from './useCurrentWallet.js';
 import { useReportTransactionEffects } from './useReportTransactionEffects.js';
+import { useCurrentChain } from './useCurrentChain.js';
 
 type UseSignAndExecuteTransactionArgs = PartialBy<
     Omit<IotaSignAndExecuteTransactionInput, 'transaction'>,
@@ -77,6 +78,7 @@ export function useSignAndExecuteTransaction<
     UseSignAndExecuteTransactionError,
     UseSignAndExecuteTransactionArgs
 > {
+    const currentChain = useCurrentChain();
     const { currentWallet, supportedIntents } = useCurrentWallet();
     const currentAccount = useCurrentAccount();
     const client = useIotaClient();
@@ -121,7 +123,6 @@ export function useSignAndExecuteTransaction<
                     'No wallet account is selected to sign the transaction with.',
                 );
             }
-            const chain = signTransactionArgs.chain ?? signerAccount?.chains[0];
 
             if (!currentWallet.features['iota:signTransaction']) {
                 throw new WalletFeatureNotSupportedError(
@@ -129,6 +130,8 @@ export function useSignAndExecuteTransaction<
                 );
             }
 
+            const chain = signTransactionArgs.chain ?? currentChain ?? signerAccount?.chains[0];
+
             const { signature, bytes } = await signTransaction(currentWallet, {
                 ...signTransactionArgs,
                 transaction: {
@@ -142,7 +145,7 @@ export function useSignAndExecuteTransaction<
                     },
                 },
                 account: signerAccount,
-                chain: signTransactionArgs.chain ?? signerAccount.chains[0],
+                chain,
             });
 
             const result = await executeTransaction({ bytes, signature });

package/src/walletStore.ts

@@ -8,6 +8,7 @@ import type { StateStorage } from 'zustand/middleware';
 import { createJSONStorage, persist } from 'zustand/middleware';
 
 import { getWalletUniqueIdentifier } from './utils/walletUtils.js';
+import type { ChainType } from '@iota/iota-sdk/client';
 
 type WalletConnectionStatus = 'disconnected' | 'connecting' | 'connected';
 
@@ -41,6 +42,7 @@ export type StoreState = {
     lastConnectedWalletName: string | null;
     connectionStatus: WalletConnectionStatus;
     supportedIntents: string[];
+    chain: ChainType | undefined;
 } & WalletActions;
 
 type WalletConfiguration = {
@@ -48,6 +50,7 @@ type WalletConfiguration = {
     wallets: WalletWithRequiredFeatures[];
     storage: StateStorage;
     storageKey: string;
+    chain?: ChainType;
 };
 
 export function createWalletStore({
@@ -55,6 +58,7 @@ export function createWalletStore({
     storage,
     storageKey,
     autoConnectEnabled,
+    chain,
 }: WalletConfiguration) {
     return createStore<StoreState>()(
         persist(
@@ -68,6 +72,7 @@ export function createWalletStore({
                 lastConnectedWalletName: null,
                 connectionStatus: 'disconnected',
                 supportedIntents: [],
+                chain,
                 setConnectionStatus(connectionStatus) {
                     set(() => ({
                         connectionStatus,