From 6e5265c4506c38cd978590359e0565a8c7e57f95 Mon Sep 17 00:00:00 2001
From: TomerHFB <158162596+TomerHFB@users.noreply.github.com>
Date: Thu, 4 Apr 2024 20:52:18 +0300
Subject: [PATCH] style: :lipstick: signature modal ui fixes

---
 .../WithdrawModal/SignTransaction/index.tsx   | 75 ++++++++++++++-----
 .../recovery-utility/renderer/pages/setup.tsx |  2 +-
 2 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/apps/recovery-utility/renderer/components/Modals/WithdrawModal/SignTransaction/index.tsx b/apps/recovery-utility/renderer/components/Modals/WithdrawModal/SignTransaction/index.tsx
index afd3db5a..a9611eda 100644
--- a/apps/recovery-utility/renderer/components/Modals/WithdrawModal/SignTransaction/index.tsx
+++ b/apps/recovery-utility/renderer/components/Modals/WithdrawModal/SignTransaction/index.tsx
@@ -1,5 +1,17 @@
-import { ReactNode, useEffect } from 'react';
-import { Typography, Box, Grid, List, ListItem, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material';
+import { ReactNode } from 'react';
+import {
+  Typography,
+  Box,
+  Grid,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  SxProps,
+  Theme,
+  Tooltip,
+  IconButton,
+} from '@mui/material';
 import {
   VaultAccount,
   RelayRxTx,
@@ -14,7 +26,7 @@ import {
   useWrappedState,
 } from '@fireblocks/recovery-shared';
 import { AssetConfig } from '@fireblocks/asset-config';
-import { CallMade, CallReceived, LeakAdd, Toll } from '@mui/icons-material';
+import { CallMade, CallReceived, LeakAdd, Toll, FileCopy } from '@mui/icons-material';
 import { useWorkspace } from '../../../../context/Workspace';
 import { useSettings } from '../../../../context/Settings';
 import { SigningWallet } from '../../../../lib/wallets/SigningWallet';
@@ -40,6 +52,7 @@ const textOverflowStyles: SxProps<Theme> = {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
+  userSelect: 'text',
 };
 
 type Props = {
@@ -123,6 +136,10 @@ export const SignTransaction = ({ txId, account, asset, inboundRelayParams }: Pr
     );
   };
 
+  const handleCopyClick = (textToCopy: string) => {
+    navigator.clipboard.writeText(textToCopy);
+  };
+
   if (inboundRelayParams.accountId !== account.id || unsignedTx.path[2] !== account.id) {
     return <BlockedMessage>Unexpected account ID from Recovery Relay.</BlockedMessage>;
   }
@@ -134,7 +151,7 @@ export const SignTransaction = ({ txId, account, asset, inboundRelayParams }: Pr
   if (unsignedTx.id !== txId) {
     return <BlockedMessage>Unexpected transaction ID from Recovery Relay.</BlockedMessage>;
   }
-
+  let fromAddressRef;
   return (
     <Box display='flex' flexDirection='column' alignItems='center'>
       {outboundRelayUrl ? (
@@ -162,6 +179,17 @@ export const SignTransaction = ({ txId, account, asset, inboundRelayParams }: Pr
                     secondaryTypographyProps={{ display: 'flex', alignItems: 'center', sx: textOverflowStyles }}
                   />
                 </ListItem>
+                <ListItem disablePadding>
+                  <ListItemIcon sx={{ minWidth: '42px' }}>
+                    <Toll />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary='Amount'
+                    secondary={unsignedTx.amount}
+                    primaryTypographyProps={{ fontWeight: '600', color: '#000' }}
+                    secondaryTypographyProps={{ fontFamily: monospaceFontFamily, sx: textOverflowStyles }}
+                  />
+                </ListItem>
                 <ListItem disablePadding>
                   <ListItemIcon sx={{ minWidth: '42px' }}>
                     <CallMade />
@@ -173,9 +201,16 @@ export const SignTransaction = ({ txId, account, asset, inboundRelayParams }: Pr
                         <Typography component='span' variant='body1' display='flex' alignItems='center' sx={textOverflowStyles}>
                           <VaultAccountIcon color='primary' fontSize='small' sx={{ marginRight: '0.25em' }} /> {account.name}
                         </Typography>
-                        <Typography component='span' variant='body1' fontFamily={monospaceFontFamily} sx={textOverflowStyles}>
-                          {unsignedTx.from}
-                        </Typography>
+                        <Tooltip title='Copy' arrow>
+                          <IconButton aria-label='copy' onClick={() => handleCopyClick(unsignedTx.from)}>
+                            <FileCopy sx={{ fontSize: 'medium' }} />
+                          </IconButton>
+                        </Tooltip>
+                        <Tooltip title={unsignedTx.from}>
+                          <Typography component='span' variant='body1' fontFamily={monospaceFontFamily} sx={textOverflowStyles}>
+                            {unsignedTx.from}
+                          </Typography>
+                        </Tooltip>
                       </>
                     }
                     primaryTypographyProps={{ fontWeight: '600', color: '#000' }}
@@ -188,18 +223,20 @@ export const SignTransaction = ({ txId, account, asset, inboundRelayParams }: Pr
                   </ListItemIcon>
                   <ListItemText
                     primary='To'
-                    secondary={unsignedTx.to}
-                    primaryTypographyProps={{ fontWeight: '600', color: '#000' }}
-                    secondaryTypographyProps={{ fontFamily: monospaceFontFamily, sx: textOverflowStyles }}
-                  />
-                </ListItem>
-                <ListItem disablePadding>
-                  <ListItemIcon sx={{ minWidth: '42px' }}>
-                    <Toll />
-                  </ListItemIcon>
-                  <ListItemText
-                    primary='Amount'
-                    secondary={unsignedTx.amount}
+                    secondary={
+                      <>
+                        <Tooltip title='Copy' arrow>
+                          <IconButton aria-label='copy' onClick={() => handleCopyClick(unsignedTx.to)}>
+                            <FileCopy sx={{ fontSize: 'medium' }} />
+                          </IconButton>
+                        </Tooltip>
+                        <Tooltip title={unsignedTx.to}>
+                          <Typography component='span' variant='body1' fontFamily={monospaceFontFamily} sx={textOverflowStyles}>
+                            {unsignedTx.to}
+                          </Typography>
+                        </Tooltip>
+                      </>
+                    }
                     primaryTypographyProps={{ fontWeight: '600', color: '#000' }}
                     secondaryTypographyProps={{ fontFamily: monospaceFontFamily, sx: textOverflowStyles }}
                   />
diff --git a/apps/recovery-utility/renderer/pages/setup.tsx b/apps/recovery-utility/renderer/pages/setup.tsx
index 44f3e0d7..da119590 100644
--- a/apps/recovery-utility/renderer/pages/setup.tsx
+++ b/apps/recovery-utility/renderer/pages/setup.tsx
@@ -247,7 +247,7 @@ const Setup = () => {
             primaryTypographyProps={{ variant: 'h2' }}
             secondary={
               <Typography variant='body1' paragraph>
-                If you already have a privatae-public key pair, you can simply upload the public key here instead of generating a
+                If you already have a private-public key pair, you can simply upload the public key here instead of generating a
                 public key
               </Typography>
             }