add token balances

pages/api/addresses/[id]/token-balances.ts

+import type { NextApiRequest } from 'next';
+
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/v2/addresses/${ req.query.id }/token-balances`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

types/api/address.ts

@@ -25,3 +25,9 @@ export interface AddressCounters {
   gas_usage_count: string;
   validation_count: string | null;
 }
+
+export interface AddressTokenBalance {
+  token: TokenInfo;
+  token_id: string | null;
+  value: string;
+}

types/client/queries.ts

@@ -19,4 +19,5 @@ export enum QueryKeys {
   jsonRpcUrl='json-rpc-url',
   address='address',
   addressCounters='address-counters',
+  addressTokenBalances='address-token-balances',
 }

ui/address/AddressDetails.tsx

-import { Box, Flex, Text, Icon, Button, Grid } from '@chakra-ui/react';
+import { Box, Flex, Text, Icon, Button, Grid, Select } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { Address as TAddress, AddressCounters } from 'types/api/address';
+import type { Address as TAddress, AddressCounters, AddressTokenBalance } from 'types/api/address';
 import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
 import metamaskIcon from 'icons/metamask.svg';
 import qrCodeIcon from 'icons/qr_code.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
+import walletIcon from 'icons/wallet.svg';
 import useFetch from 'lib/hooks/useFetch';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -34,11 +35,19 @@ const AddressDetails = ({ addressQuery }: Props) => {
     },
   );
 
-  if (countersQuery.isLoading || addressQuery.isLoading) {
+  const tokenBalancesQuery = useQuery<unknown, unknown, Array<AddressTokenBalance>>(
+    [ QueryKeys.addressTokenBalances, router.query.id ],
+    async() => await fetch(`/node-api/addresses/${ router.query.id }/token-balances`),
+    {
+      enabled: Boolean(router.query.id) && Boolean(addressQuery.data),
+    },
+  );
+
+  if (countersQuery.isLoading || addressQuery.isLoading || tokenBalancesQuery.isLoading) {
     return <Box>loading</Box>;
   }
 
-  if (countersQuery.isError || addressQuery.isError) {
+  if (countersQuery.isError || addressQuery.isError || tokenBalancesQuery.isError) {
     return <Box>error</Box>;
   }
 
@@ -73,6 +82,32 @@ const AddressDetails = ({ addressQuery }: Props) => {
         rowGap={{ base: 3, lg: 3 }}
         templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
       >
+        <DetailsInfoItem
+          title="Tokens"
+          hint="All tokens in the account and total value."
+          alignSelf="center"
+        >
+          { tokenBalancesQuery.data.length > 0 ? (
+            <>
+              { /* TODO will be fixed later when we implement select with custom menu */ }
+              <Select
+                size="sm"
+                borderRadius="base"
+                focusBorderColor="none"
+                display="inline-block"
+                w="auto"
+              >
+                { tokenBalancesQuery.data.map((token) =>
+                  <option key={ token.token.address } value={ token.token.address }>{ token.token.symbol }</option>) }
+              </Select>
+              <Button variant="outline" size="sm" ml={ 3 }>
+                <Icon as={ walletIcon } boxSize={ 5 }/>
+              </Button>
+            </>
+          ) : (
+            '-'
+          ) }
+        </DetailsInfoItem>
         <DetailsInfoItem
           title="Transactions"
           hint="Number of transactions related to this address."