@iota/dapp-kit 0.10.3 → 0.11.0

package/package.json

@@ -4,7 +4,7 @@
   "description": "A collection of React hooks and components for interacting with the IOTA blockchain and wallets.",
   "homepage": "https://docs.iota.org/developer/ts-sdk/dapp-kit/",
   "repository": "https://github.com/iotaledger/ts-packages",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "license": "Apache-2.0",
   "files": [
     "CHANGELOG.md",
@@ -65,9 +65,9 @@
     "@vanilla-extract/recipes": "^0.5.3",
     "clsx": "^2.1.1",
     "zustand": "^4.4.1",
-    "@iota/iota-names-sdk": "^2.0.0",
-    "@iota/iota-sdk": "1.15.0",
-    "@iota/wallet-standard": "0.4.4"
+    "@iota/iota-sdk": "1.16.0",
+    "@iota/iota-names-sdk": "^2.0.1",
+    "@iota/wallet-standard": "0.4.6"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.50.1",

package/src/components/AccountDropdownMenu.css.ts

@@ -10,6 +10,20 @@ export const connectedAccount = style({
     gap: 8,
 });
 
+export const accountName = style({
+    maxWidth: 140,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
+
+export const accountNameMenuItem = style({
+    maxWidth: 120,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
+
 export const menuContainer = style({
     zIndex: 999999999,
 });
@@ -17,7 +31,7 @@ export const menuContainer = style({
 export const menuContent = style({
     display: 'flex',
     flexDirection: 'column',
-    width: 180,
+    width: 220,
     maxHeight: 300,
     marginTop: 4,
     padding: 8,
@@ -51,6 +65,15 @@ export const switchAccountMenuItem = style({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
+    gap: 8,
+});
+
+export const accountIdentity = style({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    minWidth: 0,
+    overflow: 'hidden',
 });
 
 export const separator = style({

package/src/components/AccountDropdownMenu.tsx

@@ -13,6 +13,7 @@ import { useSwitchAccount } from '../hooks/wallet/useSwitchAccount.js';
 import * as styles from './AccountDropdownMenu.css.js';
 import { CheckIcon } from './icons/CheckIcon.js';
 import { ChevronIcon } from './icons/ChevronIcon.js';
+import { IotaNameNftImage } from './IotaNameNftImage.js';
 import { StyleMarker } from './styling/StyleMarker.js';
 import { Button } from './ui/Button.js';
 import { Text } from './ui/Text.js';
@@ -40,7 +41,11 @@ export function AccountDropdownMenu({
             <StyleMarker>
                 <DropdownMenu.Trigger asChild>
                     <Button size={size} className={styles.connectedAccount}>
-                        <Text mono weight="bold">
+                        <IotaNameNftImage
+                            address={currentAccount.address}
+                            iotaNamesEnabled={iotaNamesEnabled}
+                        />
+                        <Text mono weight="bold" className={styles.accountName}>
                             {displayAccount}
                         </Text>
                         <ChevronIcon />
@@ -92,7 +97,12 @@ export function AccountDropdownMenuItem({
             className={clsx(styles.menuItem, styles.switchAccountMenuItem)}
             onSelect={() => switchAccount({ account })}
         >
-            <Text mono>{displayAccount}</Text>
+            <div className={styles.accountIdentity}>
+                <IotaNameNftImage address={account.address} iotaNamesEnabled={iotaNamesEnabled} />
+                <Text mono className={styles.accountNameMenuItem}>
+                    {displayAccount}
+                </Text>
+            </div>
             {active ? <CheckIcon /> : null}
         </DropdownMenu.Item>
     );

package/src/components/IotaNameNftImage.css.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '../themes/themeContract.js';
+
+export const image = style({
+    width: 24,
+    height: 24,
+    flexShrink: 0,
+    borderRadius: themeVars.radii.full,
+    objectFit: 'cover',
+});

package/src/components/IotaNameNftImage.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+
+import { useGetIotaNameAvatar } from '../hooks/useGetIotaNameAvatar.js';
+import * as styles from './IotaNameNftImage.css.js';
+
+interface IotaNameNftImageProps {
+    address: string | null | undefined;
+    iotaNamesEnabled: boolean;
+    alt?: string;
+}
+
+export function IotaNameNftImage({
+    address,
+    iotaNamesEnabled,
+    alt = 'name NFT avatar',
+}: IotaNameNftImageProps) {
+    const { data: imageUrl, isLoading } = useGetIotaNameAvatar(address, iotaNamesEnabled);
+    const [imgError, setImgError] = useState(false);
+
+    if (!iotaNamesEnabled || isLoading || !imageUrl || imgError) {
+        return null;
+    }
+
+    return (
+        <img src={imageUrl} alt={alt} className={styles.image} onError={() => setImgError(true)} />
+    );
+}

package/src/hooks/useGetDefaultIotaName.ts

@@ -1,35 +1,19 @@
 // Copyright (c) 2025 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { getNetwork } from '@iota/iota-sdk/client';
+import { normalizeIotaName } from '@iota/iota-names-sdk';
 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';
+
+import { useIotaNamesClient } from './useIotaNamesClient.js';
 
 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;
+    const { iotaNamesClient, networkId, isSupported } = useIotaNamesClient();
 
     return useQuery({
-        queryKey: ['iota-name', 'default-name', address],
+        queryKey: ['iota-name', 'default-name', address, networkId],
         queryFn: async () => {
             if (!address) return null;
 
@@ -37,7 +21,7 @@ export function useGetDefaultIotaName(
 
             return name ? normalizeIotaName(name) : name;
         },
-        enabled: !!iotaNamesClient && !!address && iotaNamesEnabled && iotaNamesSupported,
+        enabled: !!address && iotaNamesEnabled && isSupported,
         staleTime: 1000 * 60 * 10,
     });
 }

package/src/hooks/useGetIotaNameAvatar.ts

@@ -0,0 +1,72 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { getSubnameRegistrationType, isSubname, normalizeIotaName } from '@iota/iota-names-sdk';
+import { useQuery } from '@tanstack/react-query';
+
+import { useGetDefaultIotaName } from './useGetDefaultIotaName.js';
+import { useIotaClient } from './useIotaClient.js';
+import { useIotaNamesClient } from './useIotaNamesClient.js';
+
+export function useGetIotaNameAvatar(
+    address: string | null | undefined,
+    iotaNamesEnabled: boolean,
+) {
+    const client = useIotaClient();
+    const { iotaNamesClient, networkId, isSupported } = useIotaNamesClient();
+    const { data: name } = useGetDefaultIotaName(address, iotaNamesEnabled);
+
+    return useQuery({
+        // eslint-disable-next-line @tanstack/query/exhaustive-deps
+        queryKey: ['iota-name', 'avatar', name, networkId],
+        queryFn: async () => {
+            if (!name || !address || !iotaNamesClient) return null;
+
+            const nameRecord = await iotaNamesClient.getNameRecord(name);
+            if (!nameRecord) return null;
+
+            const avatarObjectId =
+                nameRecord.avatar ??
+                (isSubname(name) ? await findSubnameNftId() : nameRecord.nftId);
+            if (!avatarObjectId) return null;
+
+            const objectResponse = await client.getObject({
+                id: avatarObjectId,
+                options: { showDisplay: true },
+            });
+
+            return objectResponse?.data?.display?.data?.image_url ?? null;
+
+            async function findSubnameNftId() {
+                let subnameType: string;
+                try {
+                    subnameType = getSubnameRegistrationType(
+                        iotaNamesClient!.getPackage('packageId', 'v1'),
+                    );
+                } catch {
+                    return null;
+                }
+
+                const { data } = await client.getOwnedObjects({
+                    owner: address!,
+                    filter: { StructType: subnameType },
+                    options: { showDisplay: true },
+                });
+
+                return (
+                    data.find((object) => {
+                        try {
+                            return (
+                                normalizeIotaName(object.data?.display?.data?.name ?? '') === name
+                            );
+                        } catch {
+                            return false;
+                        }
+                    })?.data?.objectId ?? null
+                );
+            }
+        },
+        enabled: iotaNamesEnabled && isSupported && !!name && !!address,
+        staleTime: 1000 * 60 * 5,
+    });
+}

package/src/hooks/useIotaNamesClient.ts

@@ -0,0 +1,29 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { IotaGraphQLClient } from '@iota/iota-sdk/graphql';
+import { IotaNamesClient } from '@iota/iota-names-sdk';
+import { getNetwork } from '@iota/iota-sdk/client';
+import { useMemo } from 'react';
+
+import { useIotaClientContext } from './useIotaClient.js';
+
+export function useIotaNamesClient() {
+    const { network: networkId } = useIotaClientContext();
+    const network = getNetwork(networkId);
+
+    const iotaNamesClient = useMemo(() => {
+        if (!network.graphql) return null;
+
+        return new IotaNamesClient({
+            graphQlClient: new IotaGraphQLClient({ url: network.graphql }),
+            network: network.id,
+        });
+    }, [network.id, network.graphql]);
+
+    return {
+        iotaNamesClient,
+        networkId: network.id,
+        isSupported: !!iotaNamesClient?.config,
+    };
+}