base implementation of AddressFromTo component

ui/shared/InOutTag.tsx

@@ -10,6 +10,7 @@ interface Props {
   isLoading?: boolean;
 }
 
+// TODO @tom2drum remove this component
 const InOutTag = ({ isIn, isOut, className, isLoading }: Props) => {
   if (!isIn && !isOut) {
     return null;

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 }
+      <AddressFromTo
+        from={ from }
+        to={ to }
+        current={ baseAddress }
         isLoading={ isLoading }
-          noLink={ baseAddress === from.hash }
-          noCopy={ baseAddress === from.hash }
-          flexShrink={ 0 }
-          width={ addressWidth }
+        w="100%"
       />
-        { 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>
       { 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>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -5,12 +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 InOutTag from 'ui/shared/InOutTag';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
@@ -85,36 +84,13 @@ const TokenTransferTableItem = ({
         </Td>
       ) }
       <Td>
-        <AddressEntity
-          address={ from }
+        <AddressFromTo
+          from={ from }
+          to={ to }
+          current={ baseAddress }
           isLoading={ isLoading }
-          my="5px"
-          noLink={ baseAddress === from.hash }
-          noCopy={ baseAddress === from.hash }
-          flexGrow={ 1 }
-        />
-      </Td>
-      { baseAddress && (
-        <Td px={ 0 }>
-          <Box mt="3px">
-            <InOutTag
-              isIn={ baseAddress === to.hash }
-              isOut={ baseAddress === from.hash }
-              w="50px"
-              textAlign="center"
-              isLoading={ isLoading }
-            />
-          </Box>
-        </Td>
-      ) }
-      <Td>
-        <AddressEntity
-          address={ to }
-          isLoading={ isLoading }
-          my="5px"
-          noLink={ baseAddress === to.hash }
-          noCopy={ baseAddress === to.hash }
-          flexGrow={ 1 }
+          mt={ 1 }
+          mode={{ lg: 'compact', xl: 'long' }}
         />
       </Td>
       <Td isNumeric verticalAlign="top">

ui/shared/address/AddressFromTo.tsx

+import type { ThemeTypings } from '@chakra-ui/react';
+import { Flex, chakra, useBreakpointValue, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressParam } from 'types/api/addressParams';
+
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import IconSvg from 'ui/shared/IconSvg';
+
+type Mode = 'compact' | 'long';
+
+interface Props {
+  from: AddressParam;
+  to: AddressParam;
+  current?: string;
+  mode?: Mode | Partial<Record<ThemeTypings['breakpoints'], Mode>>;
+  className?: string;
+  isLoading?: boolean;
+}
+
+const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading }: Props) => {
+  const iconColor = useColorModeValue('gray.500', 'gray.300');
+  const mode = useBreakpointValue({
+    base: (typeof modeProp === 'object' ? modeProp.base : modeProp),
+    lg: (typeof modeProp === 'object' ? modeProp.lg : modeProp),
+    xl: (typeof modeProp === 'object' ? modeProp.xl : modeProp),
+  }) ?? 'long';
+
+  if (mode === 'compact') {
+    return (
+      <Flex className={ className } flexDir="column" rowGap="14px">
+        <Flex alignItems="center" columnGap={ 2 }>
+          <IconSvg
+            name="arrows/east"
+            color={ iconColor }
+            boxSize={ 5 }
+            flexShrink={ 0 }
+            transform="rotate(90deg)"
+          />
+          <AddressEntity
+            address={ from }
+            isLoading={ isLoading }
+            noLink={ current === from.hash }
+            noCopy={ current === from.hash }
+            maxW="calc(100% - 28px)"
+          />
+        </Flex>
+        <AddressEntity
+          address={ to }
+          isLoading={ isLoading }
+          noLink={ current === to.hash }
+          noCopy={ current === to.hash }
+          maxW="calc(100% - 28px)"
+          ml="28px"
+        />
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex className={ className } alignItems="center" columnGap={ 2 }>
+      <AddressEntity
+        address={ from }
+        isLoading={ isLoading }
+        noLink={ current === from.hash }
+        noCopy={ current === from.hash }
+        maxW="calc(50% - 18px)"
+      />
+      <IconSvg name="arrows/east" color={ iconColor } boxSize={ 5 } flexShrink={ 0 }/>
+      <AddressEntity
+        address={ to }
+        isLoading={ isLoading }
+        noLink={ current === to.hash }
+        noCopy={ current === to.hash }
+        maxW="calc(50% - 18px)"
+      />
+    </Flex>
+  );
+};
+
+export default chakra(AddressFromTo);