Improve user informations

AurelienFT · AurelienFT · commit a2be6517a488 · 2024-05-15T16:23:57.000+02:00
diff --git a/frontend/src/components/MNSClaim.tsx b/frontend/src/components/MNSClaim.tsx
@@ -1,25 +1,29 @@
 import { Button, toast } from '@massalabs/react-ui-kit';
 import { InputWithRightText } from './InputWithRightText';
 import { useState } from 'react';
-import { useWriteMNS } from '../utils/write-mns-sc';
+import { DnsGetAllocCostResponse, useWriteMNS } from '../utils/write-mns-sc';
 import { useAccountStore } from '../lib/connectMassaWallets/store';
 import { toMAS } from '@massalabs/massa-web3';
 
 export function MNSClaim() {
   const [domain, setDomain] = useState<string>('');
   const { connectedAccount, massaClient } = useAccountStore();
   const { dnsAlloc, getAllocCost } = useWriteMNS(massaClient);
-  const [price, setPrice] = useState<bigint>(0n);
+  const [allocCost, setAllocCost] = useState<DnsGetAllocCostResponse>({price: 0n});
 
   function claim() {
     if (!connectedAccount) {
       toast.error('Please connect your wallet');
       return;
     }
+    if (!allocCost.price) {
+        toast.error('Invalid price');
+        return;
+    }
     dnsAlloc({
       domain,
       targetAddress: connectedAccount.address(),
-      coins: price,
+      coins: allocCost.price,
     });
   }
 
@@ -28,12 +32,16 @@ export function MNSClaim() {
       toast.error('Please connect your wallet');
       return;
     }
+    if (domain == '') {
+        setAllocCost({price: 0n});
+        return;
+    }
     setDomain(domain);
     getAllocCost({
       domain,
       targetAddress: connectedAccount?.address() ?? '',
     }).then((cost) => {
-      setPrice(cost);
+        setAllocCost(cost);
     });
   }
   return (
@@ -48,11 +56,19 @@ export function MNSClaim() {
               onDomainChange(e.target.value);
             }}
           />
-          <p className="mb-4 font-light text-neutral">
-            Price {toMAS(price).toFixed(4)} MAS
-          </p>
+          {
+            allocCost.price !== null ? (
+                <p className="mb-4 font-light text-neutral">
+                Price {toMAS(allocCost.price).toFixed(4)} MAS
+              </p>
+            ) : (
+                <p className="mb-4 font-light text-s-error">
+                   {allocCost.error}
+                </p>
+            )
+          }
         </div>
-        <Button onClick={() => claim()}>Claim</Button>
+        <Button disabled={allocCost.price !== null ? false : true} onClick={() => claim()}>Claim</Button>
       </div>
     </div>
   );
diff --git a/frontend/src/components/MNSList.tsx b/frontend/src/components/MNSList.tsx
@@ -14,43 +14,28 @@ import {
   Tooltip,
 } from '@massalabs/react-ui-kit';
 import { useAccountStore } from '../lib/connectMassaWallets/store';
-import { useCallback, useEffect, useState } from 'react';
-import { DnsUserEntryListResult, useWriteMNS } from '../utils/write-mns-sc';
+import { useEffect, useState } from 'react';
+import { useWriteMNS } from '../utils/write-mns-sc';
 
 export function MNSList() {
-  const { massaClient, connectedAccount } = useAccountStore();
-  const { getUserEntryList, deleteDnsEntry, changeTargetAddressDnsEntry } =
+  const { connectedAccount, massaClient } = useAccountStore();
+  const { getUserEntryList, deleteDnsEntry, changeTargetAddressDnsEntry, list, listSpinning } =
     useWriteMNS(massaClient);
-  const [spinning, setSpinning] = useState(false);
-  const [list, setList] = useState<DnsUserEntryListResult[]>([]);
 
+  console.log('listSpinning in list', listSpinning);
   const [changeTargetModalId, setChangeTargetModalId] = useState<string | null>(
     null,
   );
   const [newTargetAddress, setNewTargetAddress] = useState<string>('');
-
-  const updateDnsEntryList = useCallback(async () => {
-    if (connectedAccount && massaClient && !spinning && !list.length) {
-      setSpinning(true);
-      getUserEntryList({ address: connectedAccount.address() })
-        .then((entries) => {
-          setList(entries);
-          setSpinning(false);
-        })
-        .catch(() => {
-          setSpinning(false);
-        });
-    }
-  }, [massaClient, connectedAccount, spinning, getUserEntryList]);
-
+  
   useEffect(() => {
-    updateDnsEntryList();
-  }, [massaClient, updateDnsEntryList]);
-
+    if (!connectedAccount || !massaClient || listSpinning) return;
+    getUserEntryList({address: connectedAccount.address() })
+  }, [connectedAccount, massaClient]);
   return (
     <div>
-      <Accordion customClass="border-none" title="Entry list">
-        {spinning ? (
+      <Accordion customClass="border-none" title="Owned MNS">
+        {listSpinning ? (
           <div className="flex items-center justify-center">
             <Spinner />
           </div>
@@ -97,12 +82,12 @@ export function MNSList() {
                 <div key={idx} className="bg-secondary rounded-xl p-4 mb-4">
                   <div className="flex flex-row">
                     <div className="flex justify-between grow">
-                      <p className="mas-body my-auto">
+                      <p className="mas-body my-auto w-32">
                         {item.domain + '.massa'}
                       </p>
                       <ChevronDoubleRightIcon className="w-6" />
                       <Tooltip body={item.targetAddress}>
-                        <p className="mas-body pr-4 my-auto	">
+                        <p className="mas-body pr-4 my-auto w-28	">
                           {item.targetAddress.slice(0, 10)}...
                         </p>
                       </Tooltip>
@@ -113,17 +98,19 @@ export function MNSList() {
                         setChangeTargetModalId(item.domain);
                       }}
                     >
-                      <PencilIcon className="w-5 mr-2 my-auto" />
-                      <p className="mas-body mr-4 my-auto">Change target</p>
+                      <Tooltip body={<p className="mas-body">Change target</p>}>
+                        <PencilIcon className="w-4 pt-1" />
+                      </Tooltip>
                     </button>
                     <button
                       className="flex"
                       onClick={() => {
                         deleteDnsEntry({ tokenId: item.tokenId });
                       }}
                     >
-                      <TrashIcon className="w-5 mr-2 my-auto" />
-                      <p className="mas-body my-auto">Delete</p>
+                      <Tooltip body={<p className="mas-body">Delete</p>}>
+                        <TrashIcon className="w-4 mr-2 pt-1" />
+                      </Tooltip>
                     </button>
                   </div>
                 </div>
diff --git a/frontend/src/utils/write-mns-sc.tsx b/frontend/src/utils/write-mns-sc.tsx
@@ -8,6 +8,7 @@ import {
   bytesToStr,
   bytesToU256,
   bytesToU64,
+  toMAS,
   u256ToBytes,
 } from '@massalabs/massa-web3';
 import { ToastContent, toast } from '@massalabs/react-ui-kit';
@@ -49,6 +50,11 @@ export interface DnsUserEntryListResult {
   tokenId: bigint;
 }
 
+export interface DnsGetAllocCostResponse {
+    price: bigint | null;
+    error?: string;
+}
+
 type callSmartContractOptions = {
   coins?: bigint;
   fee?: bigint;
@@ -63,8 +69,11 @@ export function useWriteMNS(client?: Client) {
   const [isSuccess, setIsSuccess] = useState(false);
   const [isError, setIsError] = useState(false);
   const [opId, setOpId] = useState<string | undefined>(undefined);
+  const [list, setList] = useState<DnsUserEntryListResult[]>([]);
+  const [listSpinning, setListSpinning] = useState(false);
 
-  async function getAllocCost(params: DnsAllocParams): Promise<bigint> {
+  async function getAllocCost(params: DnsAllocParams): Promise<DnsGetAllocCostResponse> {
+    let price = 0n
     try {
       let args = new Args();
       args.addString(params.domain);
@@ -75,12 +84,63 @@ export function useWriteMNS(client?: Client) {
         parameter: args.serialize(),
       });
       if (!response) {
-        return 0n;
+        return {
+            price: null,
+            error: 'Failed to get alloc cost',
+        };
       }
-      return bytesToU64(response.returnValue);
+    price = bytesToU64(response.returnValue);
+    } catch (error) {
+      return {
+            price: null,
+            error: 'Invalid domain name. Name can only be 2-100 characters long and can contains only lowercase letters, numbers and hyphens.',
+      };
+    }
+    try {
+        let args = new Args();
+        args.addString(params.domain);
+        let result = await client?.smartContracts().readSmartContract({
+            targetAddress: SC_ADDRESS,
+            targetFunction: 'dnsResolve',
+            parameter: args.serialize(),
+        });
+        if (!result) {
+            return {
+                price: null,
+                error: 'Failed to get alloc cost',
+            };
+        }
+        return {
+            price: null,
+            error: `Domain already claimed by ${bytesToStr(result.returnValue)}`,
+        }
     } catch (error) {
-      return 0n;
     }
+    try {
+    let resultBalance = await client?.publicApi().getAddresses([params.targetAddress]);
+    if (!resultBalance) {
+        return {
+            price: null,
+            error: 'Failed to get alloc cost',
+        };
+    }
+    let balance = BigInt((parseFloat(resultBalance[0].candidate_balance) * 1_000_000_000).toFixed(0));
+    if (balance < price) {
+        return {
+            price: null,
+            error: `The price of the domain is ${toMAS(price).toFixed(4)} MAS. Your balance is ${toMAS(balance).toFixed(4)} MAS. Please top up your account.`
+        }
+    }
+    } catch (error) {
+        console.log(error)
+        return {
+            price: null,
+            error: 'Your account does not exist in the Massa network. Please transfer 0.1 MAS to your account to create it on chain.',
+        };
+    }
+    return {
+        price: price,
+    };
   }
 
   function callSmartContract(
@@ -158,6 +218,7 @@ export function useWriteMNS(client?: Client) {
         setIsSuccess(true);
         setIsPending(false);
         toast.dismiss(toastId);
+        getUserEntryList({address: client.wallet().getBaseAccount()?.address()!})
         toast.success((t) => (
           <ToastContent t={t}>
             <OperationToast
@@ -230,13 +291,15 @@ export function useWriteMNS(client?: Client) {
   async function getUserEntryList(
     params: DnsUserEntryListParams,
   ): Promise<DnsUserEntryListResult[]> {
+    setListSpinning(true);
     let resultBalance = await client?.smartContracts().readSmartContract({
       targetAddress: SC_ADDRESS,
       targetFunction: 'balanceOf',
       parameter: new Args().addString(params.address).serialize(),
     });
     if (!resultBalance) {
       toast.error('Failed to get user entry list', { duration: 5000 });
+      setListSpinning(false);
       return [];
     }
     let balance = bytesToU256(resultBalance.returnValue);
@@ -255,13 +318,15 @@ export function useWriteMNS(client?: Client) {
       let results = await client?.publicApi().getDatastoreEntries(listAsked);
       if (!results) {
         toast.error('Failed to get user entry list', { duration: 5000 });
+        setListSpinning(false);
         return [];
       }
       for (let j = 0; j < results.length; j++) {
         let entry = results[j].candidate_value;
         if (!entry || entry.length == 0) {
           continue;
         }
+        console.log(entry, addressBytes);
         if (compareUint8Array(entry, addressBytes)) {
           let tokenId = i + BigInt(j);
           let resultDomain = await client?.smartContracts().readSmartContract({
@@ -271,6 +336,7 @@ export function useWriteMNS(client?: Client) {
           });
           if (!resultDomain) {
             toast.error('Failed to get user entry list', { duration: 5000 });
+            setListSpinning(false);
             return [];
           }
           const domain = bytesToStr(resultDomain.returnValue);
@@ -281,6 +347,7 @@ export function useWriteMNS(client?: Client) {
           });
           if (!targetAddress) {
             toast.error('Failed to get user entry list', { duration: 5000 });
+            setListSpinning(false);
             return [];
           }
           list.push({
@@ -296,8 +363,12 @@ export function useWriteMNS(client?: Client) {
       // Rate limiting
       await sleep(1000);
     }
+    setList(list);
+    setListSpinning(false);
     return list;
   }
+  console.log('listSpinning in hook', listSpinning);
+
   const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
   function compareUint8Array(a: Uint8Array, b: Uint8Array) {
@@ -348,6 +419,8 @@ export function useWriteMNS(client?: Client) {
     isPending,
     isSuccess,
     isError,
+    list,
+    listSpinning,
     dnsAlloc,
     getAllocCost,
     getUserEntryList,
