Replace "in/out" with arrow

ui/address/internals/AddressIntTxsListItem.tsx

@@ -1,17 +1,15 @@
-import { Flex, Box, HStack, Skeleton } from '@chakra-ui/react';
+import { Flex, HStack, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import IconSvg from 'ui/shared/IconSvg';
-import InOutTag from 'ui/shared/InOutTag';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
@@ -35,9 +33,6 @@ const TxInternalsListItem = ({
   const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
   const toData = to ? to : createdContract;
 
-  const isOut = Boolean(currentAddress && currentAddress === from.hash);
-  const isIn = Boolean(currentAddress && currentAddress === toData?.hash);
-
   return (
     <ListItemMobile rowGap={ 3 }>
       <Flex columnGap={ 2 }>
@@ -65,28 +60,13 @@ const TxInternalsListItem = ({
           lineHeight={ 5 }
         />
       </HStack>
-      <Box w="100%" display="flex" columnGap={ 3 }>
-        <AddressEntity
-          address={ from }
-          isLoading={ isLoading }
-          noLink={ isOut }
-          noCopy={ isOut }
-          width="calc((100% - 48px) / 2)"
-        />
-        { (isIn || isOut) ?
-          <InOutTag isIn={ isIn } isOut={ isOut } isLoading={ isLoading }/> :
-          <IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
-        }
-        { toData && (
-          <AddressEntity
-            address={ toData }
-            isLoading={ isLoading }
-            noLink={ isIn }
-            noCopy={ isIn }
-            width="calc((100% - 48px) / 2)"
-          />
-        ) }
-      </Box>
+      <AddressFromTo
+        from={ from }
+        to={ toData }
+        current={ currentAddress }
+        isLoading={ isLoading }
+        w="100%"
+      />
       <HStack spacing={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { config.chain.currency.symbol }</Skeleton>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW={ 6 }>

ui/address/internals/AddressIntTxsTable.tsx

@@ -24,11 +24,9 @@ const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
             <Th width="15%">Parent txn hash</Th>
             <Th width="15%">Type</Th>
             <Th width="10%">Block</Th>
-            <Th width="20%">From</Th>
-            <Th width="48px" px={ 0 }/>
-            <Th width="20%">To</Th>
+            <Th width="40%">From/To</Th>
             <Th width="20%" isNumeric>
-            Value { config.chain.currency.symbol }
+              Value { config.chain.currency.symbol }
             </Th>
           </Tr>
         </Thead>

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -6,12 +6,10 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import IconSvg from 'ui/shared/IconSvg';
-import InOutTag from 'ui/shared/InOutTag';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
@@ -34,9 +32,6 @@ const AddressIntTxsTableItem = ({
   const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
   const toData = to ? to : createdContract;
 
-  const isOut = Boolean(currentAddress && currentAddress === from.hash);
-  const isIn = Boolean(currentAddress && currentAddress === toData?.hash);
-
   const timeAgo = useTimeAgoIncrement(timestamp, true);
 
   return (
@@ -77,33 +72,13 @@ const AddressIntTxsTableItem = ({
         />
       </Td>
       <Td verticalAlign="middle">
-        <AddressEntity
-          address={ from }
+        <AddressFromTo
+          from={ from }
+          to={ toData }
+          current={ currentAddress }
           isLoading={ isLoading }
-          noLink={ isOut }
-          noCopy={ isOut }
-          w="min-content"
-          maxW="100%"
         />
       </Td>
-      <Td px={ 0 } verticalAlign="middle">
-        { (isIn || isOut) ?
-          <InOutTag isIn={ isIn } isOut={ isOut } isLoading={ isLoading } w="100%"/> :
-          <IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
-        }
-      </Td>
-      <Td verticalAlign="middle">
-        { toData && (
-          <AddressEntity
-            address={ toData }
-            isLoading={ isLoading }
-            noLink={ isIn }
-            noCopy={ isIn }
-            w="min-content"
-            maxW="100%"
-          />
-        ) }
-      </Td>
       <Td isNumeric verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } display="inline-block" minW={ 6 }>
           { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }

ui/home/LatestTxsItem.tsx

@@ -13,9 +13,8 @@ import type { Transaction } from 'types/api/transaction';
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import IconSvg from 'ui/shared/IconSvg';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TxFeeStability from 'ui/shared/tx/TxFeeStability';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
@@ -35,7 +34,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
   return (
     <Grid
       gridTemplateColumns={{
-        lg: columnNum === 2 ? '3fr minmax(auto, 160px)' : '3fr minmax(auto, 160px) 150px',
+        lg: columnNum === 2 ? '3fr minmax(auto, 180px)' : '3fr minmax(auto, 180px) 150px',
         xl: columnNum === 2 ? '3fr minmax(auto, 250px)' : '3fr minmax(auto, 275px) 150px',
       }}
       gridGap={ 8 }
@@ -80,36 +79,12 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           </Flex>
         </Box>
       </Flex>
-      <Flex alignItems="center" alignSelf="flex-start">
-        <IconSvg
-          name="arrows/east"
-          boxSize={ 6 }
-          color="gray.500"
-          transform="rotate(90deg)"
-          isLoading={ isLoading }
-          flexShrink={ 0 }
-        />
-        <Flex ml={ 1 } maxW="calc(100% - 24px)" flexDir="column" rowGap="1px">
-          <AddressEntity
-            isLoading={ isLoading }
-            address={ tx.from }
-            fontSize="sm"
-            lineHeight={ 5 }
-            my="5px"
-            fontWeight="500"
-          />
-          { dataTo && (
-            <AddressEntity
-              isLoading={ isLoading }
-              address={ dataTo }
-              fontSize="sm"
-              lineHeight={ 5 }
-              my="5px"
-              fontWeight="500"
-            />
-          ) }
-        </Flex>
-      </Flex>
+      <AddressFromTo
+        from={ tx.from }
+        to={ dataTo }
+        isLoading={ isLoading }
+        mode="compact"
+      />
       <Flex flexDir="column">
         { !config.UI.views.tx.hiddenFields?.value && (
           <Skeleton isLoaded={ !isLoading } my="3px">

ui/home/LatestTxsItemMobile.tsx

@@ -12,9 +12,8 @@ import type { Transaction } from 'types/api/transaction';
 import config from 'configs/app';
 import getValueWithUnit from 'lib/getValueWithUnit';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import IconSvg from 'ui/shared/IconSvg';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TxFeeStability from 'ui/shared/tx/TxFeeStability';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
@@ -66,31 +65,14 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           </Skeleton>
         ) }
       </Flex>
-      <Flex alignItems="center" mb={ 3 }>
-        <AddressEntity
-          isLoading={ isLoading }
-          address={ tx.from }
-          truncation="constant"
-          fontSize="sm"
-          fontWeight="500"
-          mr={ 2 }
-        />
-        <IconSvg
-          name="arrows/east"
-          boxSize={ 6 }
-          color="gray.500"
-          isLoading={ isLoading }
-        />
-        { dataTo && (
-          <AddressEntity
-            isLoading={ isLoading }
-            address={ dataTo }
-            truncation="constant"
-            fontSize="sm"
-            fontWeight="500"
-          />
-        ) }
-      </Flex>
+      <AddressFromTo
+        from={ tx.from }
+        to={ dataTo }
+        isLoading={ isLoading }
+        fontSize="sm"
+        fontWeight="500"
+        mb={ 3 }
+      />
       { !config.UI.views.tx.hiddenFields?.value && (
         <Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">
           <Text as="span">Value { config.chain.currency.symbol } </Text>

ui/shared/CopyToClipboard.tsx

@@ -1,4 +1,4 @@
-import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton } from '@chakra-ui/react';
+import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 
 import IconSvg from 'ui/shared/IconSvg';
@@ -14,6 +14,7 @@ const CopyToClipboard = ({ text, className, isLoading }: Props) => {
   const [ copied, setCopied ] = useState(false);
   // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const iconColor = useColorModeValue('gray.400', 'gray.500');
 
   useEffect(() => {
     if (hasCopied) {
@@ -34,7 +35,7 @@ const CopyToClipboard = ({ text, className, isLoading }: Props) => {
         icon={ <IconSvg name="copy" boxSize={ 5 }/> }
         w="20px"
         h="20px"
-        color="gray.400"
+        color={ iconColor }
         variant="simple"
         display="inline-block"
         flexShrink={ 0 }

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -5,13 +5,11 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
-import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import IconSvg from 'ui/shared/IconSvg';
-import InOutTag from 'ui/shared/InOutTag';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -45,7 +43,6 @@ const TokenTransferListItem = ({
     decimals: total.decimals || '0',
   }) : { usd: null, valueStr: null };
 
-  const addressWidth = `calc((100% - ${ baseAddress ? '50px - 24px' : '24px - 24px' }) / 2)`;
   return (
     <ListItemMobile rowGap={ 3 } isAnimated>
       <Flex w="100%" justifyContent="space-between">
@@ -80,36 +77,13 @@ const TokenTransferListItem = ({
           ) }
         </Flex>
       ) }
-      <Flex w="100%" columnGap={ 3 }>
-        <AddressEntity
-          address={ from }
-          isLoading={ isLoading }
-          noLink={ baseAddress === from.hash }
-          noCopy={ baseAddress === from.hash }
-          flexShrink={ 0 }
-          width={ addressWidth }
-        />
-        { baseAddress ? (
-          <InOutTag
-            isIn={ baseAddress === to.hash }
-            isOut={ baseAddress === from.hash }
-            w="50px"
-            textAlign="center"
-            isLoading={ isLoading }
-            flexShrink={ 0 }
-          />
-        ) :
-          <IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading } flexShrink={ 0 }/>
-        }
-        <AddressEntity
-          address={ to }
-          isLoading={ isLoading }
-          noLink={ baseAddress === to.hash }
-          noCopy={ baseAddress === to.hash }
-          flexShrink={ 0 }
-          width={ addressWidth }
-        />
-      </Flex>
+      <AddressFromTo
+        from={ from }
+        to={ to }
+        current={ baseAddress }
+        isLoading={ isLoading }
+        w="100%"
+      />
       { valueStr && (
         <Flex columnGap={ 2 } w="100%">
           <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } flexShrink={ 0 }>Value</Skeleton>

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -40,11 +40,9 @@ const TokenTransferTable = ({
             { showTxInfo && <Th width="44px"></Th> }
             <Th width="185px">Token</Th>
             <Th width="160px">Token ID</Th>
-            { showTxInfo && <Th width="25%">Txn hash</Th> }
-            <Th width="25%">From</Th>
-            { baseAddress && <Th width="50px" px={ 0 }/> }
-            <Th width="25%">To</Th>
-            <Th width="25%" isNumeric>Value</Th>
+            { showTxInfo && <Th width="30%">Txn hash</Th> }
+            <Th width="40%">From/To</Th>
+            <Th width="30%" isNumeric>Value</Th>
           </Tr>
         </Thead>
         <Tbody>