Add MNS support in MW

web-frontend/src/custom/smart-contract/useFTTransfer.tsx

@@ -1,56 +1,27 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import {
   Client,
   EOperationStatus,
   ICallData,
   MAX_GAS_CALL,
   Args,
-  ClientFactory,
-  MAINNET_CHAIN_ID,
   strToBytes,
   STORAGE_BYTE_COST,
   fromMAS,
 } from '@massalabs/massa-web3';
 import { ToastContent, parseAmount, toast } from '@massalabs/react-ui-kit';
 import { OperationToast } from '@massalabs/react-ui-kit/src/lib/ConnectMassaWallets/components/OperationToast';
 import { logSmartContractEvents } from '@massalabs/react-ui-kit/src/lib/massa-react/utils';
-import { providers } from '@massalabs/wallet-provider';
 
+import { usePrepareScCall } from '../usePrepareScCall';
 import Intl from '@/i18n/i18n';
+import { useMassaWeb3Store } from '@/store/store';
 
-async function prepareFTTransfer(nickname: string) {
-  const massaProvider = (await providers())?.find(
-    (p) => p.name() === 'MASSASTATION',
-  );
-  if (!massaProvider) {
-    console.error('FATAL: Massa provider not found');
-    return;
-  }
-
-  const account = (await massaProvider.accounts()).find(
-    (a) => a.name() === nickname,
-  );
-  if (!account) {
-    return;
-  }
-
-  return {
-    client: await ClientFactory.fromWalletProvider(massaProvider, account),
-    chainId: await massaProvider.getChainId(),
-  };
-}
+export function useFTTransfer() {
+  const { isMainnet } = useMassaWeb3Store();
+  const { client } = usePrepareScCall();
 
-export function useFTTransfer(nickname: string) {
-  const [client, setClient] = useState<Client>();
-  const [chainId, setChainId] = useState<bigint>();
-  const isMainnet = chainId === MAINNET_CHAIN_ID;
-  useEffect(() => {
-    prepareFTTransfer(nickname).then((result) => {
-      setClient(result?.client);
-      setChainId(result?.chainId);
-    });
-  }, [nickname, client, setClient]);
   const {
     opId,
     isPending,

web-frontend/src/custom/useMNS.tsx

@@ -0,0 +1,68 @@
+import { useCallback, useState } from 'react';
+
+import { Args } from '@massalabs/massa-web3';
+import { bytesToStr } from '@massalabs/web3-utils';
+
+import { useMassaWeb3Store } from '@/store/store';
+import { contracts } from '@/utils/const';
+
+export function useMNS() {
+  const { defaultClient: client, isMainnet } = useMassaWeb3Store();
+
+  const [targetMnsAddress, setTargetMnsAddress] = useState<string>('');
+  const [domainNameList, setDomainNameList] = useState<string[]>([]);
+
+  const targetContractAddress = isMainnet
+    ? contracts.mainnet.mnsContract
+    : contracts.buildnet.mnsContract;
+
+  const reverseResolveDns = useCallback(
+    async (targetAddress: string) => {
+      if (!client || !targetAddress) return;
+      const result = await client.smartContracts().readSmartContract({
+        targetAddress: targetContractAddress,
+        targetFunction: 'dnsReverseResolve',
+        parameter: new Args().addString(targetAddress).serialize(),
+      });
+      const domains = bytesToStr(result.returnValue).split(',');
+
+      setDomainNameList(domains);
+      return domains;
+    },
+    [client, targetContractAddress],
+  );
+
+  const resolveDns = useCallback(
+    async (domain: string): Promise<string | undefined> => {
+      try {
+        if (!client) return;
+        const result = await client.smartContracts().readSmartContract({
+          targetAddress: targetContractAddress,
+          targetFunction: 'dnsResolve',
+          parameter: new Args().addString(domain).serialize(),
+        });
+
+        const targetAddress = bytesToStr(result.returnValue);
+        setTargetMnsAddress(bytesToStr(result.returnValue));
+        return targetAddress;
+      } catch (e) {
+        console.error(e);
+        setTargetMnsAddress('');
+        return '';
+      }
+    },
+    [client, targetContractAddress],
+  );
+
+  function resetTargetMnsAddress() {
+    setTargetMnsAddress('');
+  }
+
+  return {
+    domainNameList,
+    resolveDns,
+    targetMnsAddress,
+    reverseResolveDns,
+    resetTargetMnsAddress,
+  };
+}

web-frontend/src/custom/usePrepareScCall.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+import { Client } from '@massalabs/massa-web3';
+import { useParams } from 'react-router-dom';
+
+import { prepareSCCall } from '@/utils/prepareSCCall';
+
+export function usePrepareScCall() {
+  const { nickname } = useParams();
+  const [client, setClient] = useState<Client>();
+
+  useEffect(() => {
+    if (!nickname) {
+      throw new Error('Nickname not found');
+    }
+    prepareSCCall(nickname).then((result) => {
+      setClient(result?.client);
+    });
+  }, [nickname, setClient]);
+
+  return { client };
+}

web-frontend/src/i18n/en_US.json

@@ -18,7 +18,9 @@
     "buttons": {
       "send": "Send",
       "receive": "Receive"
-    }
+    },
+    "title-mns": "Massa Domains",
+    "desc-mns": "Domains that targets your wallet address."
   },
   "assets": {
     "title": "Assets",
@@ -188,6 +190,9 @@
       "ft-transfer-success": "Successfully transfered",
       "ft-transfer-failed": "Transfer failed",
       "failed-timeout": "Operation failed due to timeout, please retry with more fees."
+    },
+    "mns": {
+      "mns-correlation": "{mns} correlates with the following address: {address}"
     }
   },
   "receive-coins": {

web-frontend/src/layouts/WalletLayout/WalletLayout.tsx

@@ -24,7 +24,7 @@ import {
 } from 'react-router-dom';
 
 import Intl from '@/i18n/i18n';
-import { useAppStore } from '@/store/appStore';
+import { useAppStore } from '@/store/store';
 import { routeFor, useFetchAccounts } from '@/utils';
 
 export enum MenuItem {

web-frontend/src/main.tsx

@@ -12,7 +12,6 @@ import {
 
 import '@massalabs/react-ui-kit/src/global.css';
 import './index.css';
-
 import { ENV } from '@/const/env/env';
 import { mockServer, mockServerWithCypress } from '@/mirage';
 import AccountCreate from '@/pages/AccountCreate/AccountCreate.tsx';

web-frontend/src/pages/Assets/AssetsList.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
 import { Token, getAssetIcons } from '@massalabs/react-ui-kit';
-import { useParams } from 'react-router-dom';
 
 import { useFTTransfer } from '@/custom/smart-contract/useFTTransfer';
 import Intl from '@/i18n/i18n';
@@ -24,8 +23,7 @@ export function AssetsList(props: AssetsListProps) {
     setModal(true);
   }
 
-  const { nickname } = useParams();
-  const { isMainnet } = useFTTransfer(nickname || '');
+  const { isMainnet } = useFTTransfer();
 
   return (
     <>

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

@@ -5,13 +5,15 @@ import {
   Balance,
   Clipboard,
   formatAmount,
+  Mns,
 } from '@massalabs/react-ui-kit';
 import { FiArrowDownLeft, FiArrowUpRight } from 'react-icons/fi';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { Loading } from './Loading';
 import { TAB_SEND, TAB_RECEIVE } from '@/const/tabs/tabs';
 import { useResource } from '@/custom/api';
+import { useMNS } from '@/custom/useMNS';
 import Intl from '@/i18n/i18n';
 import { WalletLayout, MenuItem } from '@/layouts/WalletLayout/WalletLayout';
 import { AccountObject } from '@/models/AccountModel';
@@ -20,12 +22,20 @@ import { routeFor } from '@/utils';
 export default function Home() {
   const navigate = useNavigate();
   const { nickname } = useParams();
+
   const {
     error,
     data: account,
     isLoading,
   } = useResource<AccountObject>(`accounts/${nickname}`);
 
+  const { reverseResolveDns, domainNameList } = useMNS();
+  const accountAddress = account?.address ?? '';
+
+  useEffect(() => {
+    reverseResolveDns(accountAddress);
+  }, [reverseResolveDns, accountAddress]);
+
   useEffect(() => {
     if (error) {
       navigate(routeFor('error'));
@@ -39,7 +49,6 @@ export default function Home() {
   const formattedBalance = formatAmount(
     balance.toString(),
   ).amountFormattedPreview;
-  const address = account?.address ?? '';
 
   return (
     <WalletLayout menuItem={MenuItem.Home}>
@@ -79,18 +88,35 @@ export default function Home() {
             </div>
           </div>
 
-          <div className="bg-secondary rounded-2xl w-full max-w-lg p-10">
+          <div className="bg-secondary rounded-2xl w-full max-w-lg p-10 flex flex-col justify-between">
             <p className="mas-body text-f-primary mb-6">
               {Intl.t('home.title-account-address')}
             </p>
-            <Clipboard
-              displayedContent={address}
-              rawContent={address}
-              error={Intl.t('errors.no-content-to-copy')}
-              className="flex flex-row items-center mas-body2 justify-between
+            <div className="flex w-full justify-between items-center">
+              <Clipboard
+                displayedContent={accountAddress}
+                rawContent={accountAddress}
+                error={Intl.t('errors.no-content-to-copy')}
+                className="flex flex-row items-center mas-body2 justify-between
               w-full h-12 px-3 rounded bg-primary cursor-pointer"
-            />
+              />
+            </div>
           </div>
+          {domainNameList.length > 0 && (
+            <div className="bg-secondary rounded-2xl w-full max-w-lg p-10 gap-6 flex flex-col justify-between">
+              <div className="flex flex-col">
+                <p className="mas-body text-f-primary">
+                  {Intl.t('home.title-mns')}
+                </p>
+                <p className="mas-caption">{Intl.t('home.desc-mns')}</p>
+              </div>
+              <div className="flex flex-col w-full gap-4 max-h-32 overflow-y-scroll ">
+                {domainNameList?.map((domainName) => (
+                  <Mns mns={domainName} />
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       )}
     </WalletLayout>

web-frontend/src/pages/TransferCoins/ReceiveCoins/GenerateLink.tsx

@@ -37,7 +37,7 @@ interface GenerateLinkProps {
 function GenerateLink(props: GenerateLinkProps) {
   const { account, presetURL, setURL, setModal } = props;
 
-  const { isMainnet } = useFTTransfer(account.nickname);
+  const { isMainnet } = useFTTransfer();
 
   const [amount, setAmount] = useState<string>('');
   const [link, setLink] = useState('');

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

@@ -23,7 +23,7 @@ interface AssetSelectorProps {
 export function AssetSelector(props: AssetSelectorProps) {
   const { selectedAsset, setSelectedAsset, selectSymbol } = props;
   const { nickname } = useParams();
-  const { isMainnet } = useFTTransfer(nickname || '');
+  const { isMainnet } = useFTTransfer();
 
   const { data: assets, isLoading: isAssetsLoading } = useResource<Asset[]>(
     `accounts/${nickname}/assets`,

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

@@ -16,7 +16,7 @@ import {
 } from '@/pages/TransferCoins/SendCoins/SendConfirmation';
 import { SendForm } from '@/pages/TransferCoins/SendCoins/SendForm';
 import { Redirect } from '@/pages/TransferCoins/TransferCoins';
-import { useAppStore } from '@/store/appStore';
+import { useAppStore } from '@/store/store';
 import { routeFor } from '@/utils';
 
 interface SendCoinsProps {
@@ -45,7 +45,7 @@ export default function SendCoins(props: SendCoinsProps) {
     transfer: transferFT,
     isOpPending: transferFTPending,
     isPending: transferFTLoading,
-  } = useFTTransfer(nickname || '');
+  } = useFTTransfer();
 
   useEffect(() => {
     if (transferMASError && !errorToastId) {