ERC-1155 token item

ui/address/details/TokenItem.tsx

+import { Flex, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const TokenItem = ({ children }: Props) => {
+  return (
+    <Flex
+      px={ 1 }
+      py="10px"
+      display="flex"
+      flexDir="column"
+      rowGap={ 2 }
+      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderBottomWidth="1px"
+      _hover={{
+        bgColor: useColorModeValue('blue.50', 'gray.800'),
+      }}
+      fontSize="sm"
+      cursor="pointer"
+    >
+      { children }
+    </Flex>
+  );
+};
+
+export default React.memo(TokenItem);

ui/address/details/TokenItemErc1155.tsx

+import { Flex, Text } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+import TokenItem from './TokenItem';
+
+interface Props {
+  data: AddressTokenBalance;
+}
+
+const TokenItemErc1155 = ({ data }: Props) => {
+  return (
+    <TokenItem>
+      <Flex alignItems="center" w="100%">
+        <TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/>
+        <Text fontWeight={ 700 } ml={ 2 }>
+          { data.token.name || <HashStringShorten hash={ data.token.address }/> }
+        </Text>
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between" w="100%">
+        <Text >#{ data.token_id || 0 }</Text>
+        <Text >{ BigNumber(data.value).toFormat() }</Text>
+      </Flex>
+    </TokenItem>
+  );
+};
+
+export default React.memo(TokenItemErc1155);

ui/address/details/TokenItemErc20.tsx

-import { Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -7,11 +7,13 @@ import type { AddressTokenBalance } from 'types/api/address';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import TokenLogo from 'ui/shared/TokenLogo';
 
+import TokenItem from './TokenItem';
+
 interface Props {
   data: AddressTokenBalance;
 }
 
-const AddressTokenSelect = ({ data }: Props) => {
+const TokenItemErc20 = ({ data }: Props) => {
   const tokenDecimals = Number(data.token.decimals) || 18;
 
   const { usd } = getCurrencyValue({
@@ -21,20 +23,7 @@ const AddressTokenSelect = ({ data }: Props) => {
   });
 
   return (
-    <Flex
-      px={ 1 }
-      py="10px"
-      display="flex"
-      flexDir="column"
-      rowGap={ 2 }
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
-      borderBottomWidth="1px"
-      _hover={{
-        bgColor: useColorModeValue('blue.50', 'gray.800'),
-      }}
-      fontSize="sm"
-      cursor="pointer"
-    >
+    <TokenItem>
       <Flex alignItems="center" w="100%">
         <TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/>
         <Text fontWeight={ 700 } ml={ 2 }>{ data.token.name }</Text>
@@ -44,8 +33,8 @@ const AddressTokenSelect = ({ data }: Props) => {
         <Text >{ BigNumber(data.value).dividedBy(10 ** tokenDecimals).dp(2).toFormat() } { data.token.symbol }</Text>
         { data.token.exchange_rate && <Text >@{ data.token.exchange_rate }</Text> }
       </Flex>
-    </Flex>
+    </TokenItem>
   );
 };
 
-export default React.memo(AddressTokenSelect);
+export default React.memo(TokenItemErc20);

ui/address/details/TokenItemErc721.tsx

+import { Flex, Text } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import TokenLogo from 'ui/shared/TokenLogo';
+
+import TokenItem from './TokenItem';
+
+interface Props {
+  data: AddressTokenBalance;
+}
+
+const TokenItemErc721 = ({ data }: Props) => {
+  return (
+    <TokenItem>
+      <Flex alignItems="center" w="100%">
+        <TokenLogo hash={ data.token.address } name={ data.token.name } boxSize={ 6 }/>
+        <Text fontWeight={ 700 } ml={ 2 }>{ data.token.name }</Text>
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between" w="100%">
+        <Text >{ BigNumber(data.value).toFormat() } { data.token.symbol }</Text>
+      </Flex>
+    </TokenItem>
+  );
+};
+
+export default React.memo(TokenItemErc721);

ui/address/details/Tokens.tsx

@@ -3,6 +3,7 @@ import {
   Input, InputGroup, InputLeftElement, useColorModeValue,
   Popover, PopoverTrigger, PopoverContent, PopoverBody, Box,
   useDisclosure,
+  Flex,
 } from '@chakra-ui/react';
 import _groupBy from 'lodash/groupBy';
 import type { ChangeEvent } from 'react';
@@ -12,7 +13,9 @@ import type { AddressTokenBalance } from 'types/api/address';
 
 import searchIcon from 'icons/search.svg';
 
+import TokenItemErc1155 from './TokenItemErc1155';
 import TokenItemErc20 from './TokenItemErc20';
+import TokenItemErc721 from './TokenItemErc721';
 import TokensButton from './TokensButton';
 
 interface Props {
@@ -35,7 +38,7 @@ const AddressTokenSelect = ({ data }: Props) => {
   const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
   const bgColor = useColorModeValue('white', 'gray.900');
 
-  const filteredData = data.filter(({ token }) => token.name?.toLowerCase().includes(searchTerm.toLowerCase()));
+  const filteredData = data.filter(({ token }) => !token.name && !searchTerm ? true : token.name?.toLowerCase().includes(searchTerm.toLowerCase()));
   const groupedData = _groupBy(filteredData, 'token.type');
 
   return (
@@ -58,12 +61,26 @@ const AddressTokenSelect = ({ data }: Props) => {
               onKeyDown={ handleKeyDown }
             />
           </InputGroup>
-          { groupedData['ERC-20'] && (
-            <Box color="gray.500">
-              <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">ERC-20 tokens ({ groupedData['ERC-20'].length })</Text>
-              { groupedData['ERC-20'].map((data) => <TokenItemErc20 key={ data.token.address } data={ data }/>) }
-            </Box>
-          ) }
+          <Flex flexDir="column" rowGap={ 6 }>
+            { groupedData['ERC-20'] && (
+              <Box>
+                <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">ERC-20 tokens ({ groupedData['ERC-20'].length })</Text>
+                { groupedData['ERC-20'].map((data) => <TokenItemErc20 key={ data.token.address } data={ data }/>) }
+              </Box>
+            ) }
+            { groupedData['ERC-721'] && (
+              <Box>
+                <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">ERC-721 tokens ({ groupedData['ERC-721'].length })</Text>
+                { groupedData['ERC-721'].map((data) => <TokenItemErc721 key={ data.token.address } data={ data }/>) }
+              </Box>
+            ) }
+            { groupedData['ERC-1155'] && (
+              <Box>
+                <Text mb={ 3 } color="gray.500" fontWeight={ 600 } fontSize="sm">ERC-1155 tokens ({ groupedData['ERC-1155'].length })</Text>
+                { groupedData['ERC-1155'].map((data) => <TokenItemErc1155 key={ data.token.address } data={ data }/>) }
+              </Box>
+            ) }
+          </Flex>
           { filteredData.length === 0 && searchTerm && <Text fontSize="sm">Could not find any matches.</Text> }
         </PopoverBody>
       </PopoverContent>