From 178a73aa4257bf43310133eb906d88623d59017b Mon Sep 17 00:00:00 2001
From: Phoebe Lartisant <phoebelartisant@proton.me>
Date: Tue, 14 May 2024 18:17:33 +0200
Subject: [PATCH] add ms on confirmation screen

---
 web-frontend/src/i18n/en_US.json              |  3 +-
 web-frontend/src/pages/Home/Home.tsx          |  2 --
 .../SendCoins/SendConfirmation.tsx            | 36 ++++++++++++++-----
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/web-frontend/src/i18n/en_US.json b/web-frontend/src/i18n/en_US.json
index 53770134d..e33210d60 100644
--- a/web-frontend/src/i18n/en_US.json
+++ b/web-frontend/src/i18n/en_US.json
@@ -190,7 +190,8 @@
       "failed-timeout": "Operation failed due to timeout, please retry with more fees."
     },
     "mns": {
-      "mns-correlation": "MNS: {mns} correlates with the following address: {address}"
+      "mns-correlation": "MNS: {mns} correlates with the following address: {address}",
+      "mns": "MNS:"
     }
   },
   "receive-coins": {
diff --git a/web-frontend/src/pages/Home/Home.tsx b/web-frontend/src/pages/Home/Home.tsx
index 0a2a2cb02..7dedb0d15 100644
--- a/web-frontend/src/pages/Home/Home.tsx
+++ b/web-frontend/src/pages/Home/Home.tsx
@@ -14,13 +14,11 @@ 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 { useMNS } from '@/custom/useMNS';
 import Intl from '@/i18n/i18n';
 import { WalletLayout, MenuItem } from '@/layouts/WalletLayout/WalletLayout';
 import { AccountObject } from '@/models/AccountModel';
 import { maskAddress, routeFor } from '@/utils';
-// import { useMNS } from '@/custom/useMNS';
 
 export default function Home() {
   const navigate = useNavigate();
diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx
index 6a5b75d86..fd5ef8773 100644
--- a/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx
+++ b/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import {
   Balance,
   Button,
@@ -5,11 +7,13 @@ import {
   formatFTAmount,
   getAssetIcons,
   parseAmount,
+  Clipboard,
 } from '@massalabs/react-ui-kit';
 import { FiChevronLeft } from 'react-icons/fi';
 
 import { PRESET_HIGH, PRESET_LOW, PRESET_STANDARD } from './Advanced';
 import { useFTTransfer } from '@/custom/smart-contract/useFTTransfer';
+import { useMNS } from '@/custom/useMNS';
 import Intl from '@/i18n/i18n';
 import { Asset } from '@/models/AssetModel';
 import { maskAddress } from '@/utils';
@@ -50,6 +54,12 @@ export function SendConfirmation(props: SendConfirmationProps) {
     decimals,
   ).amountFormattedFull;
 
+  const { reverseResolveDns, mns } = useMNS();
+
+  useEffect(() => {
+    reverseResolveDns();
+  }, [reverseResolveDns]);
+
   let selectedFees;
 
   switch (fees) {
@@ -90,12 +100,12 @@ export function SendConfirmation(props: SendConfirmationProps) {
       </div>
       <div
         data-testid="send-confirmation"
-        className="flex flex-col items-center p-10 bg-secondary rounded-lg mb-6"
+        className="flex flex-col items-center gap-4 p-10 bg-secondary rounded-lg mb-6"
       >
         <p className="mb-6 mas-body">{Intl.t('send-coins.send-message')}</p>
 
         <Balance
-          customClass="p-0 bg-transparent mb-3"
+          customClass="p-0 bg-transparent"
           amount={formattedAmount}
           symbol={symbol}
           icon={getAssetIcons(
@@ -106,19 +116,29 @@ export function SendConfirmation(props: SendConfirmationProps) {
             'mr-3',
           )}
         />
-        <div className="flex flex-row items-center gap-8 mb-3">
-          <div className="flex flex-row items-center">
+        <div className="flex items-center gap-8 ">
+          <div className="flex items-center">
             <Tooltip body={content} />
             <p>{Intl.t('send-coins.fee')}</p>
           </div>
           <Balance amount={fees} symbol="MAS" size="xs" />
         </div>
         <div className="text-info flex items-center gap-2">
-          {Intl.t('send-coins.recipient')}
-          <p data-testid="send-confirmation-recipient">
-            {formattedRecipientAddress}
-          </p>
+          <div>{Intl.t('send-coins.recipient')}</div>
+          <Clipboard
+            displayedContent={formattedRecipientAddress}
+            rawContent={recipientAddress}
+            error={Intl.t('errors.no-content-to-copy')}
+            className="flex flex-row items-center mas-body2 justify-between
+              w-fit h-fit px-3 rounded bg-primary cursor-pointer"
+          />
         </div>
+        {mns && (
+          <div className="flex items-center gap-2 text-info">
+            <div>{Intl.t('send-coins.mns.mns')}</div>
+            <div>{mns}</div>
+          </div>
+        )}
       </div>
       <Button disabled={isLoading} onClick={() => handleConfirm(true)}>
         {Intl.t('send-coins.confirm-sign')}