Fixing width for Sender Component. (#286)

* Setting margin left on balance and adding tooltip * Setting width and adding tooltip
paritytech · Sep 17, 2021 · 067d8bc · 067d8bc
1 parent 1eebe9a
commit 067d8bc
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 20 deletions.
diff --git a/src/components/SenderAccountsListByChain.tsx b/src/components/SenderAccountsListByChain.tsx
@@ -67,6 +67,7 @@ export default function SenderAccountsListByChain({ chain, showCompanion, showEm
             address={option.account.address}
             balance={option.account.balance.formattedBalance}
             companionBalance={option.companionAccount.balance.formattedBalance}
+            companionAddress={option.companionAccount.address}
             showCompanion={showCompanion}
           />
         );

diff --git a/src/components/SenderDropdownItem.tsx b/src/components/SenderDropdownItem.tsx
@@ -16,7 +16,7 @@
 
 import React, { useState } from 'react';
 import cx from 'classnames';
-import { Box, makeStyles, Typography } from '@material-ui/core';
+import { Box, makeStyles, Typography, Tooltip } from '@material-ui/core';
 import shorterItem from '../util/shortenItem';
 import AccountIdenticon from './AccountIdenticon';
 import { useGUIContext } from '../contexts/GUIContextProvider';
@@ -27,12 +27,15 @@ interface Props {
   companionBalance: string;
   address: string;
   showCompanion: boolean;
+  companionAddress: string;
 }
 
 const useStyles = makeStyles((theme) => ({
   topBalance: {
-    minWidth: theme.spacing(14)
+    minWidth: theme.spacing(14),
+    marginLeft: theme.spacing(5)
   },
+
   bottomBalance: {
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.spacing(0.5),
@@ -63,13 +66,27 @@ const useStyles = makeStyles((theme) => ({
   },
   address: {
     marginLeft: theme.spacing(0.5)
+  },
+  addressContainer: {
+    maxWidth: theme.spacing(30)
+  },
+  tooltip: {
+    maxWidth: 350
   }
 }));
 
-const SenderDropdownItem = ({ name, address, balance, companionBalance, showCompanion }: Props) => {
+const SenderDropdownItem = ({ name, address, balance, companionBalance, showCompanion, companionAddress }: Props) => {
   const classes = useStyles();
   const [hoover, setHoover] = useState(false);
   const { isBridged } = useGUIContext();
+
+  const companionTitle = ` Companion: ${companionAddress}`;
+  let title = `Native: ${address}`;
+
+  if (isBridged) {
+    title = title.concat(companionTitle);
+  }
+
   return (
     <div
       className={cx(classes.main, hoover ? classes.hoover : '')}
@@ -80,31 +97,41 @@ const SenderDropdownItem = ({ name, address, balance, companionBalance, showComp
         setHoover(false);
       }}
     >
-      <Box display="flex" className={classes.box} id="test-transaction-header" alignItems="start">
-        <AccountIdenticon address={address} />
-        <Typography classes={{ root: classes.address }}>
-          {name} [{shorterItem(address)}]
-        </Typography>
+      <Tooltip placement="top" title={title} aria-label="add" classes={{ tooltip: classes.tooltip }} arrow>
+        <Box display="flex" className={classes.box} id="test-transaction-header" alignItems="start">
+          <AccountIdenticon address={address} />
+          <div className={classes.addressContainer}>
+            <Typography noWrap classes={{ root: classes.address }}>
+              {name} [{shorterItem(address)}]
+            </Typography>
+          </div>
 
-        <Box marginLeft="auto" display="flex" flexDirection="column" alignItems="flex-end" id="test-transaction-header">
           <Box
-            className={cx(classes.topBalance, isBridged && showCompanion ? classes.border : '')}
+            marginLeft="auto"
             display="flex"
-            justifyContent="flex-end"
+            flexDirection="column"
+            alignItems="flex-end"
+            id="test-transaction-header"
           >
-            <Typography component="p" className={classes.balanceBody}>
-              {balance}
-            </Typography>
-          </Box>
-          {showCompanion && isBridged && (
-            <Box className={classes.bottomBalance} display="flex" justifyContent="flex-end">
+            <Box
+              className={cx(classes.topBalance, isBridged && showCompanion ? classes.border : '')}
+              display="flex"
+              justifyContent="flex-end"
+            >
               <Typography component="p" className={classes.balanceBody}>
-                {companionBalance}
+                {balance}
               </Typography>
             </Box>
-          )}
+            {showCompanion && isBridged && (
+              <Box className={classes.bottomBalance} display="flex" justifyContent="flex-end">
+                <Typography component="p" className={classes.balanceBody}>
+                  {companionBalance}
+                </Typography>
+              </Box>
+            )}
+          </Box>
         </Box>
-      </Box>
+      </Tooltip>
     </div>
   );
 };