feat(dapp): enhance formatName and create TruncatedNameWithTooltip (#481)

Author: Juligs

dapp/src/components/TruncatedNameWithTooltip.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Tooltip, TooltipPosition } from '@iota/apps-ui-kit';
+import { normalizeIotaName } from '@iota/iota-names-sdk';
+
+interface TruncatedNameWithTooltipProps {
+    name: string;
+    tooltipPosition?: TooltipPosition;
+}
+
+export function TruncatedNameWithTooltip({
+    name,
+    tooltipPosition = TooltipPosition.Bottom,
+}: TruncatedNameWithTooltipProps) {
+    const truncated = normalizeIotaName(name, 'at', { truncateLongParts: true });
+    const full = normalizeIotaName(name, 'at', { truncateLongParts: false });
+    const showTooltip = truncated !== full;
+
+    const content = <span>{truncated}</span>;
+
+    return showTooltip ? (
+        <Tooltip text={full} position={tooltipPosition}>
+            {content}
+        </Tooltip>
+    ) : (
+        content
+    );
+}

dapp/src/components/dialogs/ConnectToAddressDialog.tsx

@@ -23,6 +23,7 @@ import {
     InputType,
     LoadingIndicator,
     Panel,
+    TooltipPosition,
 } from '@iota/apps-ui-kit';
 import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { isSubname, normalizeIotaName } from '@iota/iota-names-sdk';
@@ -36,6 +37,8 @@ import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTrans
 import { copyToClipboard } from '@/lib/utils/copyToClipboard';
 import { getNameObject, isNameRecordExpired } from '@/lib/utils/names';
 
+import { TruncatedNameWithTooltip } from '../TruncatedNameWithTooltip';
+
 interface ConnectToAddressDialogProps {
     name: string;
     setOpen: (open: boolean) => void;
@@ -189,7 +192,7 @@ export function ConnectToAddressDialog({ name, setOpen }: ConnectToAddressDialog
                                         </span>
                                         <Input
                                             type={InputType.Text}
-                                            label={`Select a target address to connect to @${cleanName}`}
+                                            label={`Select a target address to connect to ${cleanName}`}
                                             placeholder="Enter Address"
                                             value={editTargetAddress}
                                             onChange={handleAddressChange}
@@ -259,7 +262,12 @@ export function ConnectToAddressDialog({ name, setOpen }: ConnectToAddressDialog
                                                 <Panel hasBorder bgColor="bg-names-neutral-10">
                                                     <div className="flex flex-col items-center gap-y-xxs py-md px-xs">
                                                         <span className="text-title-lg text-names-neutral-100">
-                                                            {cleanName}
+                                                            <TruncatedNameWithTooltip
+                                                                name={name}
+                                                                tooltipPosition={
+                                                                    TooltipPosition.Top
+                                                                }
+                                                            />
                                                         </span>
                                                         <Chip
                                                             label={formatAddress(

dapp/src/components/dialogs/CreateSubnameDialog.tsx

@@ -168,6 +168,8 @@ export function CreateSubnameDialog({ name, setOpen }: CreateSubnameProps) {
         !editSubname.trim() ||
         editSubname.length < MIN_LABEL_SIZE;
 
+    const cleanName = normalizeIotaName(name, 'at', { truncateLongParts: true });
+
     return (
         <Dialog open onOpenChange={setOpen}>
             <DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
@@ -179,7 +181,7 @@ export function CreateSubnameDialog({ name, setOpen }: CreateSubnameProps) {
                                 type={InfoBoxType.Default}
                                 style={InfoBoxStyle.Elevated}
                                 icon={<Info />}
-                                supportingText={`Create as many Subnames as you want under ${normalizeIotaName(name)}, each with its own profile page and features`}
+                                supportingText={`Create as many Subnames as you want under ${cleanName}, each with its own profile page and features`}
                             />
                             <Input
                                 type={InputType.Text}

dapp/src/components/dialogs/GeneralInfoDialog.tsx

@@ -11,17 +11,19 @@ import {
     Header,
     KeyValueInfo,
     TitleSize,
+    TooltipPosition,
     truncate,
 } from '@iota/apps-ui-kit';
 import { useCurrentAccount } from '@iota/dapp-kit';
-import { isSubname, normalizeIotaName } from '@iota/iota-names-sdk';
+import { isSubname } from '@iota/iota-names-sdk';
 import Link from 'next/link';
 
 import { NameRecordData, useNameRecord, useRegistrationNfts } from '@/hooks';
 import { formatDate } from '@/lib/utils/format/formatDate';
 
 import { Collapsible } from '../Collapsible';
 import { AvatarDisplay } from '../name-record/AvatarDisplay';
+import { TruncatedNameWithTooltip } from '../TruncatedNameWithTooltip';
 
 interface InfoLinks {
     key: string;
@@ -81,7 +83,10 @@ export function GeneralInfoDialog({ name, setOpen }: GeneralInfoDialogProps) {
                     <div className="flex flex-col justify-center items-center gap-lg">
                         <AvatarDisplay name={name} />
                         <span className="text-headline-sm text-names-neutral-92 break-words max-w-full">
-                            {normalizeIotaName(name)}
+                            <TruncatedNameWithTooltip
+                                name={name}
+                                tooltipPosition={TooltipPosition.Bottom}
+                            />
                         </span>
                     </div>
                     <div className="flex flex-col gap-md mt-lg">

dapp/src/components/dialogs/PersonalizeAvatarDialog.tsx

@@ -14,10 +14,11 @@ import {
     InfoBoxStyle,
     InfoBoxType,
     LoadingIndicator,
+    TooltipPosition,
     VisualAssetCard,
 } from '@iota/apps-ui-kit';
 import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
-import { isSubname, normalizeIotaName } from '@iota/iota-names-sdk';
+import { isSubname } from '@iota/iota-names-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 
@@ -33,6 +34,8 @@ import { useGetVisualAssets } from '@/hooks/useGetVisualAssets';
 import { getNameObject } from '@/lib/utils/names';
 import { BrandedAssets } from '@/public/icons';
 
+import { TruncatedNameWithTooltip } from '../TruncatedNameWithTooltip';
+
 interface PersonalizeAvatarDialogProps {
     name: string;
     setOpen: (bool: boolean) => void;
@@ -116,7 +119,10 @@ export function PersonalizeAvatarDialog({ name, setOpen }: PersonalizeAvatarDial
                             <BrandedAssets className="w-12 h-12" />
                             <div className="flex flex-col gap-xs text-center">
                                 <span className="text-title-md text-names-neutral-92">
-                                    {normalizeIotaName(name)}
+                                    <TruncatedNameWithTooltip
+                                        name={name}
+                                        tooltipPosition={TooltipPosition.Top}
+                                    />
                                 </span>
                                 <span className="text-body-md text-names-neutral-70">
                                     Use an NFT to personalize your avatar