feat: style DeleteDialog for expired names (#472)

* style delete dialog

* fix disabled button

* rename constnat

* fmt

Author: evavirseda

dapp/src/components/dialogs/DeleteNameDialog.tsx

@@ -3,26 +3,31 @@
 
 'use client';
 
-import { Info } from '@iota/apps-ui-icons';
+import { Warning } from '@iota/apps-ui-icons';
 import {
     Button,
+    ButtonType,
     Dialog,
     DialogBody,
     DialogContent,
+    DialogPosition,
     Header,
     InfoBox,
     InfoBoxStyle,
     InfoBoxType,
     LoadingIndicator,
+    Panel,
 } from '@iota/apps-ui-kit';
 import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { isSubname } from '@iota/iota-names-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 
 import { useRegistrationNfts } from '@/hooks';
 import { queryKey } from '@/hooks/queryKey';
 import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTransaction';
 import { RegistrationNft } from '@/lib/interfaces/registration.interfaces';
+import { formatNameLabel } from '@/lib/utils/format/formatNames';
 import { getNameObject } from '@/lib/utils/names';
 
 type DeleteNameDialogProps = {
@@ -37,6 +42,8 @@ export function DeleteNameDialog({ nft, setOpen }: DeleteNameDialogProps) {
 
     const { data: subnamesOwned } = useRegistrationNfts('subname');
 
+    const [deleteSeconds, setDeleteSeconds] = useState(5);
+
     const isNameSubname = nft ? isSubname(nft.name) : null;
 
     // Create updates
@@ -65,7 +72,7 @@ export function DeleteNameDialog({ nft, setOpen }: DeleteNameDialogProps) {
     const { mutateAsync: signAndExecuteTransaction, isPending: isSendingTransaction } =
         useSignAndExecuteTransaction();
 
-    const { mutate: save, isPending: isSaving } = useMutation({
+    const { mutate: deleteName, isPending: isSaving } = useMutation({
         async mutationFn() {
             if (!updateNameTransaction) return;
             const transaction = await signAndExecuteTransaction({
@@ -89,40 +96,70 @@ export function DeleteNameDialog({ nft, setOpen }: DeleteNameDialogProps) {
 
     const isLoading = isLoadingUpdateNameTransaction || isSaving || isSendingTransaction;
     const disableDeleteButton = isLoadingUpdateNameTransaction || isLoading || !nft.isExpired;
+    const deleteActionNotAllowed = deleteSeconds > 0;
+    useEffect(() => {
+        if (!deleteActionNotAllowed) return;
+
+        const id = setInterval(() => {
+            setDeleteSeconds((s) => s - 1);
+        }, 1_000);
+
+        return () => clearInterval(id);
+    }, [deleteActionNotAllowed]);
 
     return (
         <Dialog open onOpenChange={setOpen}>
-            <DialogContent containerId="overlay-portal-container" isFixedPosition>
-                <Header title={`Delete ${nft.name}`} onClose={closeDialog} titleCentered />
+            <DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
+                <Header title="Delete" onClose={closeDialog} />
                 <DialogBody>
-                    <div className="flex flex-col gap-y-md">
-                        {nft.isExpired && !isLoading ? (
-                            <InfoBox
-                                title={`${nft.name} is expired`}
-                                supportingText="This name is expired and can be deleted."
-                                icon={<Info />}
-                                type={InfoBoxType.Warning}
-                                style={InfoBoxStyle.Elevated}
+                    <div className="flex flex-col justify-between h-full items-center">
+                        <div className="flex flex-col w-full gap-y-md">
+                            <div className="flex flex-col items-start gap-y-md">
+                                <p className="text-title-md text-names-neutral-100">
+                                    Are you sure you want to delete this name?
+                                </p>
+                                <Panel bgColor="bg-names-neutral-12">
+                                    <div className="p-md">
+                                        <span className="text-names-neutral-100 text-headline-sm">
+                                            {formatNameLabel(nft.name)}
+                                        </span>
+                                    </div>
+                                </Panel>
+                                <InfoBox
+                                    type={InfoBoxType.Warning}
+                                    style={InfoBoxStyle.Default}
+                                    icon={<Warning />}
+                                    title="Permanently remove name"
+                                    supportingText="This action is irreversible and will permanently remove your ownership of the name"
+                                />
+                            </div>
+
+                            {updateNameError ? (
+                                <p className="text-error-30 dark:text-error-70 text-center">
+                                    {updateNameError.message}
+                                </p>
+                            ) : null}
+                        </div>
+                        <div className="flex w-full flex-row gap-x-xs mt-xs">
+                            <Button
+                                type={ButtonType.Secondary}
+                                text="Cancel"
+                                onClick={closeDialog}
+                                fullWidth
+                            />
+                            <Button
+                                icon={isLoading ? <LoadingIndicator /> : null}
+                                text={
+                                    deleteActionNotAllowed
+                                        ? `Delete in ${deleteSeconds}s`
+                                        : 'Delete'
+                                }
+                                disabled={disableDeleteButton || deleteActionNotAllowed}
+                                type={ButtonType.Destructive}
+                                onClick={() => deleteName()}
+                                fullWidth
                             />
-                        ) : null}
-
-                        <div className="flex flex-col gap-y-xs items-center">
-                            <p className="text-body-md">
-                                Are you sure you want to delete this name?
-                            </p>
-                            <p>This action cannot be undone</p>
                         </div>
-                        {updateNameError ? (
-                            <p className="text-error-30 dark:text-error-70 text-center">
-                                {updateNameError.message}
-                            </p>
-                        ) : null}
-                        <Button
-                            icon={isLoading ? <LoadingIndicator /> : null}
-                            text="Delete Name"
-                            disabled={disableDeleteButton}
-                            onClick={() => save()}
-                        />
                     </div>
                 </DialogBody>
             </DialogContent>