diff --git a/src/components/SenderAccountsListByChain.tsx b/src/components/SenderAccountsListByChain.tsx index d0ef6660..7dceb61a 100644 --- 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 index daa74fbf..89cb77fa 100644 --- 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 (