mobile view

ui/shared/TokenTransfer/TokenTransfer.tsx

-import { Alert, Show } from '@chakra-ui/react';
+import { Alert, Hide, Show } from '@chakra-ui/react';
 import type { QueryKey } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
@@ -9,6 +9,8 @@ import type { TokenTransferResponse } from 'types/api/tokenTransfer';
 import useFetch from 'lib/hooks/useFetch';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import SkeletonTable from 'ui/shared/SkeletonTable';
+import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
+import TokenTransferSkeletonMobile from 'ui/shared/TokenTransfer/TokenTransferSkeletonMobile';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
 
 interface Props {
@@ -32,9 +34,11 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryKey, path, b
   if (isLoading || isLoadingProp) {
     return (
       <>
-        <Show below="lg">loading...</Show>
-        <Show above="lg">
+        <Hide below="lg">
           <SkeletonTable columns={ [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ] }/>
+        </Hide>
+        <Show below="lg">
+          <TokenTransferSkeletonMobile/>
         </Show>
       </>
     );
@@ -60,7 +64,16 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryKey, path, b
     return result;
   }, [] as Array<TokenTransfer>);
 
-  return <TokenTransferTable data={ items } baseAddress={ baseAddress }/>;
+  return (
+    <>
+      <Hide below="lg">
+        <TokenTransferTable data={ items } baseAddress={ baseAddress }/>
+      </Hide>
+      <Show below="lg">
+        <TokenTransferList data={ items } baseAddress={ baseAddress }/>
+      </Show>
+    </>
+  );
 };
 
 export default React.memo(TokenTransfer);

ui/shared/TokenTransfer/TokenTransferList.tsx

+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import type { TokenTransfer } from 'types/api/tokenTransfer';
+
+import TokenTransferListItem from 'ui/shared/TokenTransfer/TokenTransferListItem';
+
+interface Props {
+  data: Array<TokenTransfer>;
+  baseAddress?: string;
+}
+
+const TokenTransferList = ({ data, baseAddress }: Props) => {
+  return (
+    <Box>
+      { data.map((item, index) => <TokenTransferListItem key={ index } { ...item } baseAddress={ baseAddress }/>) }
+    </Box>
+  );
+};
+
+export default TokenTransferList;

ui/shared/TokenTransfer/TokenTransferListItem.tsx

+import { Text, Flex, Tag, Icon } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { TokenTransfer } from 'types/api/tokenTransfer';
+
+import eastArrowIcon from 'icons/arrows/east.svg';
+import nftPlaceholder from 'icons/nft_placeholder.svg';
+import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
+import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
+import InOutTag from 'ui/shared/InOutTag';
+import TokenSnippet from 'ui/shared/TokenSnippet';
+
+type Props = TokenTransfer & {
+  baseAddress?: string;
+}
+
+const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAddress }: Props) => {
+  const value = (() => {
+    if (!('value' in total)) {
+      return null;
+    }
+
+    return BigNumber(total.value).div(BigNumber(10 ** Number(total.decimals))).dp(8).toFormat();
+  })();
+
+  const addressWidth = `calc((100% - ${ baseAddress ? '50px' : '0px' }) / 2)`;
+  return (
+    <AccountListItemMobile rowGap={ 3 }>
+      <Flex w="100%">
+        <TokenSnippet hash={ token.address } w="auto" maxW="calc(100% - 140px)" name={ token.name || 'Unnamed token' }/>
+        <Tag flexShrink={ 0 } ml={ 2 } mr="auto">{ token.type }</Tag>
+        <AdditionalInfoButton/>
+      </Flex>
+      { 'token_id' in total && (
+        <Flex alignItems="center">
+          <Text fontWeight={ 500 }>Token ID</Text>
+          <Icon mx={ 2 } as={ nftPlaceholder } boxSize="30px"/>
+          <AddressLink hash={ token.address } id={ total.token_id } type="token_instance_item"/>
+        </Flex>
+      ) }
+      <Flex columnGap={ 2 } w="100%">
+        <Text fontWeight={ 500 } flexShrink={ 0 }>Txn hash</Text>
+        <Address display="inline-flex" maxW="100%">
+          <AddressLink type="transaction" hash={ txHash }/>
+        </Address>
+      </Flex>
+      <Flex w="100%" columnGap={ 3 }>
+        <Address width={ addressWidth }>
+          <AddressIcon hash={ from.hash }/>
+          <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash }/>
+        </Address>
+        { baseAddress ?
+          <InOutTag baseAddress={ baseAddress } addressFrom={ from.hash } w="50px" textAlign="center"/> :
+          <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
+        }
+        <Address width={ addressWidth }>
+          <AddressIcon hash={ to.hash }/>
+          <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash }/>
+        </Address>
+      </Flex>
+      { value && (
+        <Flex columnGap={ 2 } w="100%">
+          <Text fontWeight={ 500 } flexShrink={ 0 }>Value</Text>
+          <Text variant="secondary">{ value }</Text>
+        </Flex>
+      ) }
+    </AccountListItemMobile>
+  );
+};
+
+export default React.memo(TokenTransferListItem);

ui/shared/TokenTransfer/TokenTransferSkeletonMobile.tsx

+import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const TokenTransferSkeletonMobile = () => {
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  return (
+    <Box>
+      { Array.from(Array(2)).map((item, index) => (
+        <Flex
+          key={ index }
+          rowGap={ 3 }
+          flexDirection="column"
+          paddingY={ 6 }
+          borderTopWidth="1px"
+          borderColor={ borderColor }
+          _last={{
+            borderBottomWidth: '1px',
+          }}
+        >
+          <Flex h={ 6 }>
+            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton w="100px" mr={ 2 }/>
+            <Skeleton w="50px"/>
+            <Skeleton w="24px" ml="auto"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="70px"/>
+            <Skeleton w="24px"/>
+            <Skeleton w="90px"/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="70px" flexShrink={ 0 }/>
+            <Skeleton w="100%"/>
+          </Flex>
+          <Flex h={ 6 }>
+            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton flexGrow={ 1 } mr={ 3 }/>
+            <Skeleton w="50px" mr={ 3 }/>
+            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+            <Skeleton flexGrow={ 1 } mr={ 3 }/>
+          </Flex>
+          <Flex h={ 6 } columnGap={ 2 }>
+            <Skeleton w="45px"/>
+            <Skeleton w="90px"/>
+          </Flex>
+        </Flex>
+      )) }
+    </Box>
+  );
+};
+
+export default TokenTransferSkeletonMobile;

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -31,12 +31,12 @@ const TxInternalTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddr
         <AdditionalInfoButton/>
       </Td>
       <Td>
-        <Flex flexDir="column" rowGap={ 3 } alignItems="flex-start">
-          <TokenSnippet hash={ token.address } name={ token.name || 'Unnamed token' }/>
+        <Flex flexDir="column" alignItems="flex-start">
+          <TokenSnippet hash={ token.address } name={ token.name || 'Unnamed token' } lineHeight="30px"/>
           <Tag>{ token.type }</Tag>
         </Flex>
       </Td>
-      <Td>
+      <Td lineHeight="30px">
         { 'token_id' in total ? (
           <Flex align="center">
             <Icon as={ nftPlaceholder } boxSize="30px" mr={ 2 }/>
@@ -45,28 +45,28 @@ const TxInternalTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddr
         ) : '-' }
       </Td>
       <Td>
-        <Address display="inline-flex" maxW="100%" fontWeight={ 600 }>
+        <Address display="inline-flex" maxW="100%" fontWeight={ 600 } lineHeight="30px">
           <AddressLink type="transaction" hash={ txHash }/>
         </Address>
       </Td>
       <Td>
-        <Address display="inline-flex" maxW="100%">
+        <Address display="inline-flex" maxW="100%" lineHeight="30px">
           <AddressIcon hash={ from.hash }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 }/>
         </Address>
       </Td>
       { baseAddress && (
         <Td px={ 0 }>
-          <InOutTag baseAddress={ baseAddress } addressFrom={ from.hash } w="50px" textAlign="center"/>
+          <InOutTag baseAddress={ baseAddress } addressFrom={ from.hash } w="50px" textAlign="center" mt="3px"/>
         </Td>
       ) }
       <Td>
-        <Address display="inline-flex" maxW="100%">
+        <Address display="inline-flex" maxW="100%" lineHeight="30px">
           <AddressIcon hash={ to.hash }/>
           <AddressLink ml={ 2 } fontWeight="500" hash={ to.hash } alias={ to.name } flexGrow={ 1 }/>
         </Address>
       </Td>
-      <Td isNumeric verticalAlign="top">
+      <Td isNumeric verticalAlign="top" lineHeight="30px">
         { value }
       </Td>
     </Tr>