feat: update Renew popup (#442)

* style renew dialog

* open popup

* fix build

* cleanup

* add remainingYears

* use coreconfig hook to use maxyears

* remove select renoval option

* fix prettier

* add infobox

* update message

---------

Co-authored-by: msarcev <mario.sarcevic@iota.org>

Author: evavirseda

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

@@ -6,6 +6,7 @@
 import {
     Add,
     Assets,
+    Calendar,
     // Calendar,
     // Delete,
     // Info,
@@ -21,6 +22,7 @@ import { UserAuctions } from '@/auctions/components/UserAuctions';
 import { DeleteNameDialog, UpdateNameDialog } from '@/components';
 import { CreateSubnameDialog } from '@/components/dialogs/CreateSubnameDialog';
 import { PersonalizeAvatarDialog } from '@/components/dialogs/PersonalizeAvatarDialog';
+import { RenewNameDialog } from '@/components/dialogs/RenewNameDialog';
 import { DropdownMenuOption } from '@/components/DropdownMenuOptions';
 import { NameCard } from '@/components/name-card/NameCard';
 import { NameCardBody } from '@/components/name-card/NameCardBody';
@@ -35,6 +37,7 @@ export default function MyNamesPage(): JSX.Element {
     const [deleteNameDialog, setDeleteNameDialog] = useState<RegistrationNft | null>(null);
     const [createSubnameDialog, setCreateSubnameDialog] = useState<RegistrationNft | null>(null);
     const [personalizeAvatarName, setPersonalizeAvatarName] = useState<string | null>(null);
+    const [renewName, setRenewName] = useState<RegistrationNft | null>(null);
 
     const { data: names } = useRegistrationNfts('name');
     const { data: subnames } = useRegistrationNfts('subname');
@@ -88,11 +91,11 @@ export default function MyNamesPage(): JSX.Element {
         //     onClick: () => {},
         //     children: <DropdownMenuOption icon={<Link />} label="Link to Wallet Address" />,
         // },
-        // {
-        //     onClick: () => {},
-        //     children: <DropdownMenuOption icon={<Calendar />} label="Renew Name" />,
-        //     hideBottomBorder: true,
-        // },
+        {
+            onClick: () => setRenewName(nft),
+            children: <DropdownMenuOption icon={<Calendar />} label="Renew Name" />,
+            hideBottomBorder: true,
+        },
         // {
         //     onClick: () => {},
         //     children: <DropdownMenuOption icon={<Info />} label="View All Info" />,
@@ -194,7 +197,6 @@ export default function MyNamesPage(): JSX.Element {
             {!!createSubnameDialog && (
                 <CreateSubnameDialog
                     name={createSubnameDialog.name}
-                    open={!!createSubnameDialog}
                     setOpen={() => setCreateSubnameDialog(null)}
                 />
             )}
@@ -204,6 +206,9 @@ export default function MyNamesPage(): JSX.Element {
                     setOpen={() => setPersonalizeAvatarName(null)}
                 />
             )}
+            {!!renewName && (
+                <RenewNameDialog setOpen={() => setRenewName(null)} name={renewName.name} />
+            )}
         </div>
     );
 }

dapp/src/components/dialogs/CreateSubnameDialog.tsx

@@ -80,11 +80,10 @@ function createSubnameUpdates({
 
 type CreateSubnameProps = {
     name: string;
-    open: boolean;
     setOpen: (bool: boolean) => void;
 };
 
-export function CreateSubnameDialog({ name, open, setOpen }: CreateSubnameProps) {
+export function CreateSubnameDialog({ name, setOpen }: CreateSubnameProps) {
     const queryClient = useQueryClient();
     const iotaClient = useIotaClient();
     const account = useCurrentAccount();
@@ -170,7 +169,7 @@ export function CreateSubnameDialog({ name, open, setOpen }: CreateSubnameProps)
         editSubname.length < MIN_LABEL_SIZE;
 
     return (
-        <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog open onOpenChange={setOpen}>
             <DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
                 <Header title="New Subname" onClose={closeDialog} />
                 <DialogBody>

dapp/src/components/dialogs/RenewNameDialog.tsx

@@ -1,26 +1,39 @@
 // Copyright (c) 2025 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+'use client';
+
+import { Warning } from '@iota/apps-ui-icons';
 import {
     Button,
     ButtonType,
     Dialog,
     DialogBody,
     DialogContent,
+    DialogPosition,
+    DisplayStats,
     Header,
-    Input,
-    InputType,
+    InfoBox,
+    InfoBoxStyle,
+    InfoBoxType,
     LoadingIndicator,
+    Panel,
+    Select,
+    SelectOption,
 } from '@iota/apps-ui-kit';
 import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { isSubname, NameRecord } from '@iota/iota-names-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { NameRecordData, queryKey, useNameRecord, useRegistrationNfts } from '@/hooks';
+import { useCoreConfig } from '@/hooks/useCoreConfig';
 import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTransaction';
-import { CANT_RENEW_NAME_FOR_MORE_TIME } from '@/lib/constants';
+import { YEAR_MS } from '@/lib/constants';
 import { RegistrationNft } from '@/lib/interfaces';
+import { formatExpirationDate } from '@/lib/utils/format/formatExpirationDate';
+import { normalizeNameInput } from '@/lib/utils/format/formatNames';
+import { getDefaultExpirationDate } from '@/lib/utils/getDefaultExpirationDate';
 import {
     getNameObject,
     getNamePermissions,
@@ -82,15 +95,15 @@ function createRenewUpdates({
 
 interface RenewDialogProps {
     name: string;
-    open: boolean;
     setOpen: (bool: boolean) => void;
 }
 
-export function RenewNameDialog({ open, setOpen, name }: RenewDialogProps) {
+export function RenewNameDialog({ setOpen, name }: RenewDialogProps) {
     const queryClient = useQueryClient();
     const iotaClient = useIotaClient();
     const account = useCurrentAccount();
     const { data: nameRecordData } = useNameRecord(name);
+    const { data: coreConfig } = useCoreConfig();
 
     // We are sure that only owned names are passed here
     const nameRecord = nameRecordData as
@@ -99,8 +112,8 @@ export function RenewNameDialog({ open, setOpen, name }: RenewDialogProps) {
 
     const isNameSubname = nameRecord?.nameRecord ? isSubname(nameRecord.nameRecord.name) : null;
 
-    // Editable values
-    const [editRenewYears, setEditRenewYears] = useState<number>();
+    const [selectedYears, setSelectedYears] = useState<string>('');
+    const renewYears = selectedYears ? Number(selectedYears) : undefined;
 
     const { data: ownedNames } = useRegistrationNfts('name');
     const { data: ownedSubnames } = useRegistrationNfts('subname');
@@ -109,7 +122,7 @@ export function RenewNameDialog({ open, setOpen, name }: RenewDialogProps) {
         nameRecord: nameRecord?.nameRecord,
         ownedNames,
         ownedSubnames,
-        renewYears: editRenewYears,
+        renewYears,
     });
 
     const {
@@ -143,57 +156,98 @@ export function RenewNameDialog({ open, setOpen, name }: RenewDialogProps) {
         },
     });
 
-    const handleCancelRenewName = () => {
+    function handleCancelRenewName() {
         setOpen(false);
-    };
+    }
+
+    function handleYearsChange(id: string) {
+        setSelectedYears(id);
+    }
+
+    function remainingRenewYears(expirationMs: number) {
+        if (!coreConfig?.max_years) return 0;
+        const maxExpiration = Date.now() + coreConfig.max_years * YEAR_MS;
+        const diff = maxExpiration - expirationMs;
+        return Math.max(0, Math.floor(diff / YEAR_MS));
+    }
+
+    const remainingYears = remainingRenewYears(nameRecord?.nameRecord?.expirationTimestampMs ?? 0);
+
+    const RENEW_OPTIONS: SelectOption[] = Array.from({ length: remainingYears }, (_, i) => ({
+        id: String(i + 1),
+        label: `${i + 1} Year${i ? 's' : ''}`,
+    }));
 
-    const wantsToRenew = isNameSubname || !!editRenewYears;
+    useEffect(() => {
+        if (!selectedYears && RENEW_OPTIONS.length) {
+            const first = RENEW_OPTIONS[0];
+            setSelectedYears(typeof first === 'string' ? first : first.id);
+        }
+    }, [RENEW_OPTIONS, selectedYears]);
+
+    const wantsToRenew = isNameSubname || !!renewYears;
     const canRenew = nameRecord && updates.length > 0;
     const isLoading = isLoadingUpdateNameTransaction || isSendingTransaction || isSigning;
     const disableEdit = isSendingTransaction || isSigning;
     const disableSave = isLoading || !canRenew || !wantsToRenew || !!updateNameError;
+    const cleanName = normalizeNameInput(nameRecord?.nameRecord?.name || name);
+    const expirationDate = nameRecord?.nameRecord?.expirationTimestampMs
+        ? formatExpirationDate(new Date(nameRecord.nameRecord.expirationTimestampMs))
+        : getDefaultExpirationDate();
 
     return (
-        <Dialog open={open} onOpenChange={setOpen}>
-            <DialogContent containerId="overlay-portal-container" isFixedPosition>
-                <Header title="Renew" titleCentered />
+        <Dialog open onOpenChange={setOpen}>
+            <DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
+                <Header title="Renew Name" />
                 <DialogBody>
-                    <div className="flex flex-col items-center gap-y-md">
-                        <h3 className="text-lg font-semibold mb-4">
-                            Renew name {nameRecord?.nameRecord?.name}
-                        </h3>
-                        {!isNameSubname ? (
-                            <div className="mb-4">
-                                <Input
-                                    type={InputType.Text}
-                                    onChange={(e) => {
-                                        const val = Number(e.target.value);
-                                        setEditRenewYears(isNaN(val) ? 0 : val);
-                                    }}
-                                    placeholder="Input renew years"
-                                    disabled={disableEdit}
+                    <div className="flex flex-col justify-between h-full items-center">
+                        <div className="flex flex-col w-full gap-y-md">
+                            <Panel bgColor="bg-names-neutral-12">
+                                <div className="px-md py-lg">
+                                    <span className="text-names-neutral-100 text-headline-sm">
+                                        @{cleanName}
+                                    </span>
+                                </div>
+                            </Panel>
+                            {!isNameSubname && (
+                                <Select
+                                    options={RENEW_OPTIONS}
+                                    value={selectedYears}
+                                    onValueChange={handleYearsChange}
+                                    disabled={disableEdit || RENEW_OPTIONS.length === 0}
+                                    errorMessage={updateNameError?.message}
+                                />
+                            )}
+                            {!isNameSubname && RENEW_OPTIONS.length === 0 && (
+                                <InfoBox
+                                    type={InfoBoxType.Warning}
+                                    icon={<Warning />}
+                                    title="Renewal Limit Reached"
+                                    style={InfoBoxStyle.Default}
+                                    supportingText={`This name has already been extended to the maximum allowed period of ${coreConfig?.max_years} years. You’ll be able to renew it again once it gets closer to its expiration date`}
+                                />
+                            )}
+                        </div>
+                        <div className="flex flex-col w-full gap-y-md">
+                            <div className="flex flex-row gap-x-sm w-full">
+                                <DisplayStats label="Registration Expires" value={expirationDate} />
+                            </div>
+                            <div className="flex w-full flex-row gap-x-xs mt-xs">
+                                <Button
+                                    type={ButtonType.Secondary}
+                                    text="Cancel"
+                                    onClick={handleCancelRenewName}
+                                    fullWidth
+                                />
+                                <Button
+                                    icon={isLoading ? <LoadingIndicator /> : null}
+                                    type={ButtonType.Primary}
+                                    text="Renew"
+                                    onClick={() => handleConfirmRenewName()}
+                                    disabled={disableSave}
+                                    fullWidth
                                 />
                             </div>
-                        ) : null}
-                        {!canRenew && wantsToRenew ? (
-                            <div className="text-yellow-400">{CANT_RENEW_NAME_FOR_MORE_TIME}</div>
-                        ) : null}
-                        {updateNameError ? (
-                            <div className="text-red-400">{updateNameError.message}</div>
-                        ) : null}
-                        <div className="flex gap-2 justify-end">
-                            <Button
-                                type={ButtonType.Secondary}
-                                text="Cancel"
-                                onClick={handleCancelRenewName}
-                            />
-                            <Button
-                                icon={isLoading ? <LoadingIndicator /> : null}
-                                type={ButtonType.Primary}
-                                text="Confirm"
-                                onClick={() => handleConfirmRenewName()}
-                                disabled={disableSave}
-                            />
                         </div>
                     </div>
                 </DialogBody>

dapp/src/components/dialogs/UpdateNameDialog.tsx

@@ -35,8 +35,6 @@ import {
     isNameRecordExpired,
 } from '@/lib/utils/names';
 
-import { RenewNameDialog } from './RenewNameDialog';
-
 type UpdateNameDialogProps = {
     name: string;
     open: boolean;
@@ -71,9 +69,6 @@ export function UpdateNameDialog({ name, open, setOpen }: UpdateNameDialogProps)
     const [editIsAllowingRenew, setEditIsAllowingRenew] = useState<boolean>(false);
     const [editIsAllowSubnames, setEditIsAllowSubnames] = useState<boolean>(false);
 
-    // Dialogs
-    const [renewDialogOpen, setRenewDialogOpen] = useState(false);
-
     // Sync permissions
     useEffect(() => {
         if (namePermissions) {
@@ -228,7 +223,6 @@ export function UpdateNameDialog({ name, open, setOpen }: UpdateNameDialogProps)
 
     const disableEdit = isNameRecordLoading || isSendingTransaction || isExpired;
     const disableSave = updates.length === 0 || isWrongCombination || isLoading || isExpired;
-    const disableRenew = isExpired;
 
     return (
         <>
@@ -308,19 +302,6 @@ export function UpdateNameDialog({ name, open, setOpen }: UpdateNameDialogProps)
                                 </Card>
                             </>
                         ) : null}
-                        {namePermissions?.allowTimeExtension && (
-                            <Card type={CardType.Outlined}>
-                                <CardBody
-                                    title="Renew"
-                                    subtitle={`Renew ${isNameSubname ? 'Subname' : 'Name'}.`}
-                                />
-                                <Button
-                                    text="Renew"
-                                    onClick={() => setRenewDialogOpen(true)}
-                                    disabled={disableRenew} //TODO: add grace period
-                                />
-                            </Card>
-                        )}
                         {updateNameError ? (
                             <div className="text-red-400">{updateNameError.message}</div>
                         ) : null}
@@ -333,9 +314,6 @@ export function UpdateNameDialog({ name, open, setOpen }: UpdateNameDialogProps)
                     </DialogBody>
                 </DialogContent>
             </Dialog>
-            {renewDialogOpen && (
-                <RenewNameDialog open={renewDialogOpen} setOpen={setRenewDialogOpen} name={name} />
-            )}
         </>
     );
 }

dapp/src/hooks/queryKey.ts

@@ -35,4 +35,7 @@ export const queryKey = {
         name,
         address,
     ],
+
+    // Core Config
+    coreConfig: () => [queryKey.all, 'core-config'],
 };

dapp/src/hooks/useCoreConfig.ts

@@ -0,0 +1,20 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useQuery } from '@tanstack/react-query';
+
+import { useIotaNamesClient } from '@/contexts';
+
+import { queryKey } from './queryKey';
+
+export function useCoreConfig() {
+    const { iotaNamesClient } = useIotaNamesClient();
+
+    return useQuery({
+        queryKey: [...queryKey.coreConfig()],
+        queryFn: async () => {
+            return await iotaNamesClient.getCoreConfig();
+        },
+        staleTime: 60 * 60 * 1000,
+    });
+}

dapp/src/lib/constants/index.ts

@@ -4,3 +4,4 @@
 export * from './errorMessages.constants';
 export * from './token';
 export * from './routes.constants';
+export * from './time';

dapp/src/lib/constants/time.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const YEAR_MS = 365 * 24 * 60 * 60 * 1000;