Update purchase and auction dialog funcionality (#430)

* feat: update purchase and auction popups styles

* remove styles

* feat(dapp): add missing features

* feat(dapp): update hooks usage

* update dialogs

* set default checkbox and hook

* coments

* fix function usage

* refactor function and move to utils

* chore: Add magic break line again

---------

Co-authored-by: evavirseda <evirseda@boxfish.studio>
Co-authored-by: msarcev <mario.sarcevic@iota.org>
Co-authored-by: marc2332 <mespinsanz@gmail.com>

Author: 4 people

dapp/src/components/dialogs/PurchaseNameDialog.tsx

@@ -6,6 +6,7 @@
 import {
     Button,
     ButtonType,
+    Checkbox,
     Dialog,
     DialogBody,
     DialogContent,
@@ -14,12 +15,16 @@ import {
     Header,
     LoadingIndicator,
     Panel,
+    Select,
+    SelectOption,
 } from '@iota/apps-ui-kit';
 import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
 
 import { NameUpdate, queryKey, useUpdateNameTransaction } from '@/hooks';
 import { useBalance } from '@/hooks/useBalance';
+import { useCoreConfig } from '@/hooks/useCoreConfig';
 import { useNameRecord } from '@/hooks/useNameRecord';
 import {
     GAS_BALANCE_TOO_LOW_ID,
@@ -28,7 +33,7 @@ import {
 } from '@/lib/constants';
 import { formatNanosToIota } from '@/lib/utils';
 import { denormalizeName } from '@/lib/utils/format/formatNames';
-import { getDefaultExpirationDate } from '@/lib/utils/getDefaultExpirationDate';
+import { getTargetExpirationDate } from '@/lib/utils/names';
 
 type PurchaseNameProps = {
     name: string;
@@ -41,11 +46,21 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
     const queryClient = useQueryClient();
     const client = useIotaClient();
     const account = useCurrentAccount();
+    const { data: coreConfig } = useCoreConfig();
+
+    const [renewYears, setRenewYears] = useState<number>(1);
+    const [isDisplayName, setIsDisplayName] = useState<boolean>(false);
+
     const {
         data: nameRecordData,
         isLoading: isNameRecordLoading,
         error: nameRecordError,
-    } = useNameRecord(name);
+    } = useNameRecord(name, {
+        price: {
+            years: renewYears,
+            isRegistration: true,
+        },
+    });
 
     const price = nameRecordData?.type === 'available' ? nameRecordData?.price : 0;
     const isConnected = !!account?.address;
@@ -57,7 +72,8 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
             type: 'register-name',
             name: name,
             price: price,
-            years: 1,
+            years: renewYears,
+            setDefault: isDisplayName,
         });
     }
 
@@ -107,6 +123,13 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
 
     if (!isConnected) return null;
 
+    const RENEW_OPTIONS: SelectOption[] = coreConfig?.max_years
+        ? Array.from({ length: coreConfig?.max_years }, (_, i) => ({
+              id: String(i + 1),
+              label: `${i + 1} Year${i ? 's' : ''}`,
+          }))
+        : [];
+
     const totalBalance = Number(coinBalance?.totalBalance) || 0;
     const totalGas = Number(updateNameData?.gasSummary?.totalGas) || 0;
     const totalPrice = nameRecordData?.type === 'available' ? nameRecordData.price + totalGas : 0;
@@ -126,7 +149,8 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
     const canRegister = canPay && !hasErrors && !isLoading && !isSendingTransaction;
 
     const cleanName = denormalizeName(name);
-    const expirationDate = getDefaultExpirationDate();
+
+    const expirationDate = getTargetExpirationDate(renewYears);
 
     return (
         <Dialog open={open} onOpenChange={setOpen}>
@@ -142,8 +166,27 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
                                     </span>
                                 </div>
                             </Panel>
+                            <div className="px-md py-sm border-t border-names-neutral-6">
+                                <Select
+                                    value={renewYears.toString()}
+                                    options={RENEW_OPTIONS}
+                                    onValueChange={(value) => {
+                                        setRenewYears(parseInt(value, 10));
+                                    }}
+                                    placeholder="Select renewal period"
+                                />
+                            </div>
                         </div>
                         <div className="flex flex-col w-full gap-y-md">
+                            <Panel bgColor="bg-names-neutral-10">
+                                <div className="flex flex-row gap-x-sm w-full p-md">
+                                    <Checkbox
+                                        isChecked={isDisplayName}
+                                        onCheckedChange={(e) => setIsDisplayName(e.target.checked)}
+                                        label="Set name as Display Name"
+                                    />
+                                </div>
+                            </Panel>
                             <div className="flex flex-row gap-x-sm w-full">
                                 <DisplayStats label="Registration Expires" value={expirationDate} />
                                 <DisplayStats

dapp/src/hooks/useUpdateNameTransaction.ts

@@ -71,6 +71,7 @@ export type NameUpdate =
           name: string;
           price: number;
           years: number;
+          setDefault: boolean;
       };
 
 export function useUpdateNameTransaction({ address, updates }: UseUpdateNameTransactionOptions) {
@@ -150,6 +151,14 @@ export function useUpdateNameTransaction({ address, updates }: UseUpdateNameTran
                             years: update.years,
                             coin,
                         });
+                        if (update.setDefault) {
+                            iotaNamesTx.setTargetAddress({
+                                nft: nft,
+                                address: address,
+                                isSubname: false,
+                            });
+                            iotaNamesTx.setDefault(update.name);
+                        }
                         iotaNamesTx.transaction.transferObjects([nft, coin], address);
                         break;
                 }

dapp/src/lib/utils/names.ts

@@ -4,6 +4,12 @@
 import { GRACE_PERIOD_MS, isSubname, NameRecord } from '@iota/iota-names-sdk';
 
 import type { RegistrationNft } from '../interfaces/registration.interfaces';
+import { formatExpirationDate } from './format/formatExpirationDate';
+
+export function getTargetExpirationDate(renewYears: number): string {
+    const today = new Date();
+    return formatExpirationDate(new Date(today.setFullYear(today.getFullYear() + renewYears)));
+}
 
 export function isNameRecordExpired(nameRecord: NameRecord | RegistrationNft) {
     return nameRecord.expirationTimestampMs < Date.now();