client as props + domainName id dataFromObject

web-frontend/src/custom/useMNS.tsx

@@ -1,26 +1,23 @@
 import { useCallback, useState } from 'react';
 
-import { Args, ICallData } from '@massalabs/massa-web3';
+import { Args, Client, ICallData } from '@massalabs/massa-web3';
 import { bytesToStr } from '@massalabs/web3-utils';
 
 import { usePrepareScCall } from './usePrepareScCall';
 import { contracts } from '@/utils/const';
 
-export function useMNS() {
+export function useMNS(client: Client | undefined) {
   const [targetMnsAddress, setTargetMnsAddress] = useState<string>('');
   const [domainName, setDomainName] = useState<string>('');
 
-  const { client, account, isMainnet } = usePrepareScCall();
+  const { isMainnet } = usePrepareScCall();
 
   const targetContractAddress = isMainnet
     ? contracts.mainnet.mnsContract
     : contracts.buildnet.mnsContract;
 
   const reverseResolveDns = useCallback(
-    async (address = '') => {
-      const targetAddress = address || account?.address();
-      if (!targetAddress) return;
-
+    async (targetAddress = '') => {
       const reverseResolveCallData = {
         targetAddress: targetContractAddress,
         targetFunction: 'dnsReverseResolve',
@@ -38,7 +35,7 @@ export function useMNS() {
         console.error('Reverse DNS resolution failed:', e);
       }
     },
-    [client, account?.address, targetContractAddress],
+    [client, targetContractAddress],
   );
 
   const resolveDns = useCallback(

web-frontend/src/pages/Home/Home.tsx

@@ -14,6 +14,7 @@ import { Loading } from './Loading';
 import { TAB_SEND, TAB_RECEIVE } from '@/const/tabs/tabs';
 import { useResource } from '@/custom/api';
 import { useMNS } from '@/custom/useMNS';
+import { usePrepareScCall } from '@/custom/usePrepareScCall';
 import Intl from '@/i18n/i18n';
 import { WalletLayout, MenuItem } from '@/layouts/WalletLayout/WalletLayout';
 import { AccountObject } from '@/models/AccountModel';
@@ -27,10 +28,12 @@ export default function Home() {
     data: account,
     isLoading,
   } = useResource<AccountObject>(`accounts/${nickname}`);
-  const { reverseResolveDns, domainName } = useMNS();
+  const { client } = usePrepareScCall();
+  const { reverseResolveDns, domainName } = useMNS(client);
+  const accountAddress = account?.address ?? '';
 
   useEffect(() => {
-    reverseResolveDns();
+    reverseResolveDns(accountAddress);
   }, [reverseResolveDns, nickname]);
 
   useEffect(() => {
@@ -46,7 +49,6 @@ export default function Home() {
   const formattedBalance = formatAmount(
     balance.toString(),
   ).amountFormattedPreview;
-  const address = account?.address ?? '';
 
   return (
     <WalletLayout menuItem={MenuItem.Home}>
@@ -93,8 +95,8 @@ export default function Home() {
             <div className="flex w-full justify-between items-center">
               {domainName && <Mns mns={domainName} />}
               <Clipboard
-                displayedContent={maskAddress(address)}
-                rawContent={address}
+                displayedContent={maskAddress(accountAddress)}
+                rawContent={accountAddress}
                 error={Intl.t('errors.no-content-to-copy')}
                 className="flex flex-row items-center mas-body2 justify-between
               w-fit h-12 px-3 rounded bg-primary cursor-pointer"

web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import {
   Balance,
   Button,
@@ -13,7 +11,6 @@ import {
 import { FiChevronLeft } from 'react-icons/fi';
 
 import { PRESET_HIGH, PRESET_LOW, PRESET_STANDARD } from './Advanced';
-import { useMNS } from '@/custom/useMNS';
 import { usePrepareScCall } from '@/custom/usePrepareScCall';
 import Intl from '@/i18n/i18n';
 import { Asset } from '@/models/AssetModel';
@@ -25,6 +22,7 @@ export interface SendConfirmationData {
   asset: Asset;
   fees: string;
   recipientAddress: string;
+  recipientDomainName?: string;
 }
 
 interface SendConfirmationProps {
@@ -55,12 +53,6 @@ export function SendConfirmation(props: SendConfirmationProps) {
     decimals,
   ).amountFormattedFull;
 
-  const { reverseResolveDns, domainName } = useMNS();
-
-  useEffect(() => {
-    reverseResolveDns(recipientAddress);
-  }, [reverseResolveDns, recipientAddress]);
-
   let selectedFees;
 
   switch (fees) {
@@ -137,7 +129,7 @@ export function SendConfirmation(props: SendConfirmationProps) {
               w-fit h-fit px-3 py-1 rounded bg-primary cursor-pointer"
           />
         </div>
-        {domainName && <Mns mns={domainName} />}
+        {data.recipientDomainName && <Mns mns={data.recipientDomainName} />}
       </div>
       <Button disabled={isLoading} onClick={() => handleConfirm(true)}>
         {Intl.t('send-coins.confirm-sign')}

web-frontend/src/pages/TransferCoins/SendCoins/SendForm.tsx

@@ -13,6 +13,7 @@ import { FiArrowUpRight, FiPlus } from 'react-icons/fi';
 
 import { MAS } from '@/const/assets/assets';
 import { useMNS } from '@/custom/useMNS';
+import { usePrepareScCall } from '@/custom/usePrepareScCall';
 import Intl from '@/i18n/i18n';
 import { AccountObject } from '@/models/AccountModel';
 import { Asset } from '@/models/AssetModel';
@@ -77,7 +78,10 @@ export function SendForm(props: SendFormProps) {
   const balance = BigInt(selectedAsset?.balance || '0');
   const mnsExtension = /\.massa$/;
 
-  const { resolveDns, targetMnsAddress, resetTargetMnsAddress } = useMNS();
+  const { client } = usePrepareScCall();
+
+  const { resolveDns, targetMnsAddress, resetTargetMnsAddress } =
+    useMNS(client);
 
   useEffect(() => {
     if (!sendOpData) {
@@ -139,9 +143,11 @@ export function SendForm(props: SendFormProps) {
     let formObject = parseForm(e);
 
     if (targetMnsAddress && mnsExtension.test(recipient)) {
+      // recipient is a domain name
       formObject = {
         ...formObject,
-        recipientAddress: targetMnsAddress,
+        recipientAddress: targetMnsAddress, // set the resolved address
+        recipientDomainName: recipient.replace(mnsExtension, ''), // set the domain name
       };
     } else {
       setMnsAddressCorrelation(false);