fix auto refresh on claim

AurelienFT · AurelienFT · commit e368d2cf4761 · 2024-05-15T17:33:50.000+02:00
diff --git a/frontend/src/components/MNSClaim.tsx b/frontend/src/components/MNSClaim.tsx
@@ -1,24 +1,31 @@
 import { Button, toast } from '@massalabs/react-ui-kit';
 import { InputWithRightText } from './InputWithRightText';
 import { useState } from 'react';
-import { DnsGetAllocCostResponse, useWriteMNS } from '../utils/write-mns-sc';
+import { DnsAllocParams, DnsGetAllocCostResponse } from '../utils/write-mns-sc';
 import { useAccountStore } from '../lib/connectMassaWallets/store';
 import { toMAS } from '@massalabs/massa-web3';
 
-export function MNSClaim() {
+interface MNSClaimProps {
+  dnsAlloc: (data: DnsAllocParams) => void;
+  getAllocCost: (data: DnsAllocParams) => Promise<DnsGetAllocCostResponse>;
+}
+
+export function MNSClaim(props: MNSClaimProps) {
+  const { dnsAlloc, getAllocCost } = props;
   const [domain, setDomain] = useState<string>('');
-  const { connectedAccount, massaClient } = useAccountStore();
-  const { dnsAlloc, getAllocCost } = useWriteMNS(massaClient);
-  const [allocCost, setAllocCost] = useState<DnsGetAllocCostResponse>({price: 0n});
+  const { connectedAccount } = useAccountStore();
+  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;
+      toast.error('Invalid price');
+      return;
     }
     dnsAlloc({
       domain,
@@ -33,15 +40,15 @@ export function MNSClaim() {
       return;
     }
     if (domain == '') {
-        setAllocCost({price: 0n});
-        return;
+      setAllocCost({ price: 0n });
+      return;
     }
     setDomain(domain);
     getAllocCost({
       domain,
       targetAddress: connectedAccount?.address() ?? '',
     }).then((cost) => {
-        setAllocCost(cost);
+      setAllocCost(cost);
     });
   }
   return (
@@ -56,19 +63,20 @@ export function MNSClaim() {
               onDomainChange(e.target.value);
             }}
           />
-          {
-            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>
-            )
-          }
+          {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 disabled={allocCost.price !== null ? false : true} 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
@@ -13,25 +13,29 @@ import {
   Spinner,
   Tooltip,
 } from '@massalabs/react-ui-kit';
-import { useAccountStore } from '../lib/connectMassaWallets/store';
-import { useEffect, useState } from 'react';
-import { useWriteMNS } from '../utils/write-mns-sc';
+import { useState } from 'react';
+import {
+  DnsChangeTargetParams,
+  DnsDeleteParams,
+  DnsUserEntryListResult,
+} from '../utils/write-mns-sc';
+
+interface MNSListProps {
+  list: DnsUserEntryListResult[];
+  listSpinning: boolean;
+  deleteDnsEntry: (params: DnsDeleteParams) => void;
+  changeTargetAddressDnsEntry: (params: DnsChangeTargetParams) => void;
+}
 
-export function MNSList() {
-  const { connectedAccount, massaClient } = useAccountStore();
-  const { getUserEntryList, deleteDnsEntry, changeTargetAddressDnsEntry, list, listSpinning } =
-    useWriteMNS(massaClient);
+export function MNSList(props: MNSListProps) {
+  const { list, listSpinning, deleteDnsEntry, changeTargetAddressDnsEntry } =
+    props;
 
-  console.log('listSpinning in list', listSpinning);
   const [changeTargetModalId, setChangeTargetModalId] = useState<string | null>(
     null,
   );
   const [newTargetAddress, setNewTargetAddress] = useState<string>('');
-  
-  useEffect(() => {
-    if (!connectedAccount || !massaClient || listSpinning) return;
-    getUserEntryList({address: connectedAccount.address() })
-  }, [connectedAccount, massaClient]);
+
   return (
     <div>
       <Accordion customClass="border-none" title="Owned MNS">
diff --git a/frontend/src/components/MNSManagement.tsx b/frontend/src/components/MNSManagement.tsx
@@ -1,4 +1,6 @@
+import { useEffect } from 'react';
 import { useAccountStore } from '../lib/connectMassaWallets/store';
+import { useWriteMNS } from '../utils/write-mns-sc';
 import { MNSClaim } from './MNSClaim';
 import { MNSList } from './MNSList';
 
@@ -8,10 +10,23 @@ interface MNSManagementProps {
 
 export function MNSManagement(props: MNSManagementProps) {
   const { customClass } = props;
-  const { connectedAccount, currentProvider } = useAccountStore();
+  const { massaClient, connectedAccount, currentProvider } = useAccountStore();
+  const {
+    list,
+    listSpinning,
+    getUserEntryList,
+    dnsAlloc,
+    getAllocCost,
+    changeTargetAddressDnsEntry,
+    deleteDnsEntry,
+  } = useWriteMNS(massaClient);
 
   const connected = !!connectedAccount && !!currentProvider;
 
+  useEffect(() => {
+    if (!connectedAccount || !massaClient || listSpinning) return;
+    getUserEntryList({ address: connectedAccount.address() });
+  }, [connectedAccount, massaClient]);
   return (
     <div className={customClass}>
       {!connected ? (
@@ -22,8 +37,13 @@ export function MNSManagement(props: MNSManagementProps) {
         </div>
       ) : (
         <div className="flex flex-col divide-y">
-          <MNSClaim />
-          <MNSList />
+          <MNSClaim dnsAlloc={dnsAlloc} getAllocCost={getAllocCost} />
+          <MNSList
+            deleteDnsEntry={deleteDnsEntry}
+            changeTargetAddressDnsEntry={changeTargetAddressDnsEntry}
+            list={list}
+            listSpinning={listSpinning}
+          />
         </div>
       )}
     </div>
diff --git a/frontend/src/utils/write-mns-sc.tsx b/frontend/src/utils/write-mns-sc.tsx
@@ -25,21 +25,21 @@ interface ToasterMessage {
   timeout?: string;
 }
 
-interface DnsAllocParams {
+export interface DnsAllocParams {
   domain: string;
   targetAddress: string;
   coins?: bigint;
 }
 
-interface DnsDeleteParams {
+export interface DnsDeleteParams {
   tokenId: bigint;
 }
 
 interface DnsUserEntryListParams {
   address: string;
 }
 
-interface DnsChangeTargetParams {
+export interface DnsChangeTargetParams {
   domain: string;
   targetAddress: string;
 }
@@ -51,8 +51,8 @@ export interface DnsUserEntryListResult {
 }
 
 export interface DnsGetAllocCostResponse {
-    price: bigint | null;
-    error?: string;
+  price: bigint | null;
+  error?: string;
 }
 
 type callSmartContractOptions = {
@@ -72,8 +72,10 @@ export function useWriteMNS(client?: Client) {
   const [list, setList] = useState<DnsUserEntryListResult[]>([]);
   const [listSpinning, setListSpinning] = useState(false);
 
-  async function getAllocCost(params: DnsAllocParams): Promise<DnsGetAllocCostResponse> {
-    let price = 0n
+  async function getAllocCost(
+    params: DnsAllocParams,
+  ): Promise<DnsGetAllocCostResponse> {
+    let price = 0n;
     try {
       let args = new Args();
       args.addString(params.domain);
@@ -85,62 +87,73 @@ export function useWriteMNS(client?: Client) {
       });
       if (!response) {
         return {
-            price: null,
-            error: 'Failed to get alloc cost',
+          price: null,
+          error: 'Failed to get alloc cost',
         };
       }
-    price = 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.',
+        price: null,
+        error:
+          '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',
-            };
-        }
+      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: `Domain already claimed by ${bytesToStr(result.returnValue)}`,
-        }
+          price: null,
+          error: 'Failed to get alloc cost',
+        };
+      }
+      return {
+        price: null,
+        error: `Domain already claimed by ${bytesToStr(result.returnValue)}`,
+      };
     } catch (error) {
-    }
-    try {
-    let resultBalance = await client?.publicApi().getAddresses([params.targetAddress]);
-    if (!resultBalance) {
-        return {
+      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 {
+          };
+        }
+        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.`
+            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)
+      } catch (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.',
+          price: null,
+          error:
+            'Your account does not exist in the Massa network. Transfer 0.1 MAS to your account to create it onchain.',
         };
-    }
-    return {
+      }
+      return {
         price: price,
-    };
+      };
+    }
   }
 
   function callSmartContract(
@@ -218,7 +231,12 @@ export function useWriteMNS(client?: Client) {
         setIsSuccess(true);
         setIsPending(false);
         toast.dismiss(toastId);
-        getUserEntryList({address: client.wallet().getBaseAccount()?.address()!})
+        const baseAccount = client.wallet().getBaseAccount();
+        if (client && baseAccount) {
+          getUserEntryList({
+            address: baseAccount.address()!,
+          });
+        }
         toast.success((t) => (
           <ToastContent t={t}>
             <OperationToast
@@ -326,7 +344,6 @@ export function useWriteMNS(client?: Client) {
         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({
@@ -367,7 +384,6 @@ export function useWriteMNS(client?: Client) {
     setListSpinning(false);
     return list;
   }
-  console.log('listSpinning in hook', listSpinning);
 
   const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
