feat: add Connect to Address popup (#447)

* add setLinkedAddressDialog

* add unlinking feature

* minor fix

* cleanup

* cleanup

* update menu

* update menu

* fix build

* polish linked address

* rename dialog

* remove unnecessary dialog

* udpate connect address dialog

* fix conditional

* fis sync of permissions

* bring back manage popup

* add util

* update dependencies

* fmt

* last polishes

* fix

* rename component to NameDialogsController

---------

Co-authored-by: marc2332 <mespinsanz@gmail.com>

Author: evavirseda

dapp/src/app/(protected)/my-names/components/NamePanelTile.tsx

@@ -11,7 +11,7 @@ import { Fragment } from 'react';
 
 import { MenuButton } from '@/components/buttons/MenuButton';
 import { ContextMenuDropdown } from '@/components/ContextMenu';
-import { NameManageDialogs } from '@/components/dialogs/NameManageDialogs';
+import { NameDialogsController } from '@/components/dialogs/NameDialogsController';
 import { useNameRecord } from '@/hooks';
 import { useGetDefaultName } from '@/hooks/useGetDefaultName';
 import { useNameContextMenu } from '@/hooks/useNameContextMenu';
@@ -90,7 +90,7 @@ export function NamePanelTile({
                 dropdownRef={dropdownRef}
             />
 
-            <NameManageDialogs
+            <NameDialogsController
                 nft={registration}
                 openDialogId={openDialogId}
                 onClose={closeDialog}

dapp/src/components/dialogs/ConnectToAddressDialog.tsx

@@ -35,12 +35,12 @@ import {
     isNameRecordExpired,
 } from '@/lib/utils/names';
 
-type UpdateNameDialogProps = {
+type ManageNameDialogProps = {
     name: string;
     setOpen: (bool: boolean) => void;
 };
 
-export function UpdateNameDialog({ name, setOpen }: UpdateNameDialogProps) {
+export function ManageNameDialog({ name, setOpen }: ManageNameDialogProps) {
     const iotaClient = useIotaClient();
     const queryClient = useQueryClient();
     const account = useCurrentAccount();

…/components/dialogs/UpdateNameDialog.tsx …/components/dialogs/ManageNameDialog.tsxdapp/src/components/dialogs/UpdateNameDialog.tsx renamed to dapp/src/components/dialogs/ManageNameDialog.tsx dapp/src/components/dialogs/UpdateNameDialog.tsx renamed to dapp/src/components/dialogs/ManageNameDialog.tsx

@@ -5,24 +5,26 @@ import { Fragment } from 'react';
 
 import { RegistrationNft } from '@/lib/interfaces';
 
-import { DeleteNameDialog, UpdateNameDialog } from '.';
+import { DeleteNameDialog } from '.';
+import { ConnectToAddressDialog } from './ConnectToAddressDialog';
 import { CreateSubnameDialog } from './CreateSubnameDialog';
 import { NameDialogId } from './enums';
 import { GeneralInfoDialog } from './GeneralInfoDialog';
+import { ManageNameDialog } from './ManageNameDialog';
 import { PersonalizeAvatarDialog } from './PersonalizeAvatarDialog';
 import { RenewNameDialog } from './RenewNameDialog';
 
-interface NameManageDialogsProps {
+interface NameDialogsControllerProps {
     nft: RegistrationNft;
     openDialogId: NameDialogId | null;
     onClose: () => void;
 }
 
-export function NameManageDialogs({ nft, openDialogId, onClose }: NameManageDialogsProps) {
+export function NameDialogsController({ nft, openDialogId, onClose }: NameDialogsControllerProps) {
     return (
         <Fragment>
-            {openDialogId === NameDialogId.Update ? (
-                <UpdateNameDialog name={nft.name} setOpen={onClose} />
+            {openDialogId === NameDialogId.Manage ? (
+                <ManageNameDialog name={nft.name} setOpen={onClose} />
             ) : null}
 
             {openDialogId === NameDialogId.Delete ? (
@@ -44,6 +46,9 @@ export function NameManageDialogs({ nft, openDialogId, onClose }: NameManageDial
             {openDialogId === NameDialogId.GeneralInfo ? (
                 <GeneralInfoDialog name={nft.name} setOpen={onClose} />
             ) : null}
+            {openDialogId === NameDialogId.ConnectToAddress ? (
+                <ConnectToAddressDialog name={nft.name} setOpen={onClose} />
+            ) : null}
         </Fragment>
     );
 }

…components/dialogs/NameManageDialogs.tsx …onents/dialogs/NameDialogsController.tsxdapp/src/components/dialogs/NameManageDialogs.tsx renamed to dapp/src/components/dialogs/NameDialogsController.tsx dapp/src/components/dialogs/NameManageDialogs.tsx renamed to dapp/src/components/dialogs/NameDialogsController.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export enum NameDialogId {
-    Update = 'update',
+    Manage = 'manage',
     Delete = 'delete',
     CreateSubname = 'create-subname',
     PersonalizeAvatar = 'personalize-avatar',
     RenewName = 'renew-name',
     GeneralInfo = 'general-info',
+    ConnectToAddress = 'connect-to-address',
 }

dapp/src/components/dialogs/enums.ts

@@ -2,5 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './PurchaseNameDialog';
-export * from './UpdateNameDialog';
 export * from './DeleteNameDialog';

dapp/src/components/dialogs/index.ts

@@ -12,7 +12,7 @@ import { formatNameLabel } from '@/lib/utils/format/formatNames';
 import { getNameMenuOptions } from '@/lib/utils/getNameMenuOptions';
 
 import { NameDialogId } from '../dialogs/enums';
-import { NameManageDialogs } from '../dialogs/NameManageDialogs';
+import { NameDialogsController } from '../dialogs/NameDialogsController';
 import { NameCard } from './NameCard';
 import { NameCardBody } from './NameCardBody';
 import { SubnameCountIndicator } from './NameCardIndicators';
@@ -52,7 +52,7 @@ export function ExtendedNameCard({
                 </NameCardBody>
             </NameCard>
 
-            <NameManageDialogs nft={nft} openDialogId={openDialogId} onClose={closeDialog} />
+            <NameDialogsController nft={nft} openDialogId={openDialogId} onClose={closeDialog} />
         </>
     );
 }

dapp/src/components/name-card/ExtendedNameCard.tsx

@@ -25,7 +25,7 @@ export type NameUpdate =
       }
     | {
           type: 'set-target-address';
-          address: string;
+          address: string | undefined;
           isSubname: boolean;
           nftId: string;
       }

dapp/src/hooks/useUpdateNameTransaction.ts

@@ -0,0 +1,19 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import toast from 'react-hot-toast';
+
+export async function copyToClipboard(text: string): Promise<boolean> {
+    if (typeof navigator === 'undefined' || !navigator.clipboard) {
+        return false;
+    }
+
+    try {
+        await navigator.clipboard.writeText(text);
+        toast.success('Copied to clipboard!');
+        return true;
+    } catch (err) {
+        toast.error('Failed to copy to clipboard. Please try again.');
+        return false;
+    }
+}

dapp/src/lib/utils/copyToClipboard.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2025 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Add, Assets, Calendar, Info, Settings, Warning } from '@iota/apps-ui-icons';
+import { Add, Assets, Calendar, Info, Link, Settings, Warning } from '@iota/apps-ui-icons';
 
 import { NameDialogId } from '@/components/dialogs/enums';
 import { DropdownMenuOption } from '@/components/DropdownMenuOptions';
@@ -15,10 +15,15 @@ export function getNameMenuOptions(
 ): MenuListItem[] {
     return [
         {
-            onClick: () => onOpen(NameDialogId.Update),
+            onClick: () => onOpen(NameDialogId.Manage),
             children: <DropdownMenuOption icon={<Settings />} label="Manage" />,
             hideBottomBorder: true,
         },
+        {
+            onClick: () => onOpen(NameDialogId.ConnectToAddress),
+            children: <DropdownMenuOption icon={<Link />} label="Connect to Address" />,
+            hideBottomBorder: true,
+        },
         // {
         //     onClick: () => {},
         //     children: <DropdownMenuOption icon={<Pined />} label="Make name default" />,