log tab

data/txLogs.ts

-export const data = [
-  {
-    address: '0x12E80C27BfFBB76b4A8d26FF2bfd3C9f310FFA01',
-    topics: [
-      { hex: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef' },
-      { hex: '0x000000000000000000000000def171fe48cf0115b1d80b88dc8eab59176fee57' },
-      { hex: '0x000000000000000000000000c465c0a16228ef6fe1bf29c04fdb04bb797fd537' },
-    ],
-    data: '0x000000000000000000000000000000000000000000000000019faae14eb88000',
-  },
-  {
-    address: '0x73968b9a57c6e53d41345fd57a6e6ae27d6cdb2f',
-    topics: [
-      { hex: '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef' },
-      { hex: '0x000000000000000000000000c465c0a16228ef6fe1bf29c04fdb04bb797fd537' },
-      { hex: '0x0000000000000000000000008453d9385af5f49edad9905345cd2411b5c5831b' },
-    ],
-    data: '0x000000000000000000000000000000000000000000000013b6ee62022c95ced4',
-  },
-];

pages/api/transactions/[id]/logs.ts

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

ui/tx/TxLogs.tsx

-import { Box } from '@chakra-ui/react';
+import { Box, Alert } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import React from 'react';
 
-import { data } from 'data/txLogs';
+import type { LogsResponse } from 'types/api/log';
+
+import useFetch from 'lib/hooks/useFetch';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import TxLogItem from 'ui/tx/logs/TxLogItem';
+import TxLogSkeleton from 'ui/tx/logs/TxLogSkeleton';
 
 const TxLogs = () => {
+  const router = useRouter();
+  const fetch = useFetch();
+
+  const { data, isLoading, isError } = useQuery<unknown, unknown, LogsResponse>(
+    [ 'tx', router.query.id ],
+    async() => await fetch(`/api/transactions/${ router.query.id }/logs`),
+    {
+      enabled: Boolean(router.query.id),
+    },
+  );
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (isLoading) {
+    return (
+      <Box>
+        <TxLogSkeleton/>
+        <TxLogSkeleton/>
+      </Box>
+    );
+  }
+
+  if (data.items.length === 0) {
+    return <Alert>There are no logs for this transaction.</Alert>;
+  }
+
   return (
     <Box>
-      { data.map((item, index) => <TxLogItem key={ index } { ...item } index={ index }/>) }
+      { data.items.map((item, index) => <TxLogItem key={ index } { ...item }/>) }
     </Box>
   );
 };

ui/tx/logs/TxLogItem.tsx

 import { Text, Grid, GridItem, Link, Tooltip, Button, Icon, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import type { Log } from 'types/api/log';
+
 import searchIcon from 'icons/search.svg';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -8,12 +10,7 @@ import AddressLink from 'ui/shared/address/AddressLink';
 import TxLogTopic from 'ui/tx/logs/TxLogTopic';
 import DecodedInputData from 'ui/tx/TxDecodedInputData';
 
-interface Props {
-  address: string;
-  topics: Array<{ hex: string }>;
-  data: string;
-  index: number;
-}
+type Props = Log;
 
 const RowHeader = ({ children }: { children: React.ReactNode }) => (
   <GridItem _notFirst={{ my: { base: 4, lg: 0 } }}>
@@ -21,7 +18,8 @@ const RowHeader = ({ children }: { children: React.ReactNode }) => (
   </GridItem>
 );
 
-const TxLogItem = ({ address, index, topics, data }: Props) => {
+const TxLogItem = ({ address, index, topics, data, decoded }: Props) => {
+
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
@@ -41,27 +39,31 @@ const TxLogItem = ({ address, index, topics, data }: Props) => {
       <RowHeader>Address</RowHeader>
       <GridItem display="flex" alignItems="center">
         <Address>
-          <AddressIcon hash={ address }/>
-          <AddressLink hash={ address } ml={ 2 }/>
+          <AddressIcon hash={ address.hash }/>
+          <AddressLink hash={ address.hash } alias={ address.name } ml={ 2 }/>
         </Address>
         <Tooltip label="Find matches topic">
-          <Link ml={ 2 } display="inline-flex">
+          <Link ml={ 2 } mr={{ base: 9, lg: 0 }} display="inline-flex">
             <Icon as={ searchIcon } boxSize={ 5 }/>
           </Link>
         </Tooltip>
         <Tooltip label="Log index">
-          <Button variant="outline" colorScheme="gray" isActive ml={{ base: 9, lg: 'auto' }} size="sm" fontWeight={ 400 }>
+          <Button variant="outline" colorScheme="gray" isActive ml="auto" size="sm" fontWeight={ 400 }>
             { index }
           </Button>
         </Tooltip>
       </GridItem>
-      <RowHeader>Decode input data</RowHeader>
-      <GridItem>
-        <DecodedInputData/>
-      </GridItem>
+      { decoded && (
+        <>
+          <RowHeader>Decode input data</RowHeader>
+          <GridItem>
+            <DecodedInputData data={ decoded }/>
+          </GridItem>
+        </>
+      ) }
       <RowHeader>Topics</RowHeader>
       <GridItem>
-        { topics.map((item, index) => <TxLogTopic key={ index } { ...item } index={ index }/>) }
+        { topics.filter(Boolean).map((item, index) => <TxLogTopic key={ index } hex={ item } index={ index }/>) }
       </GridItem>
       <RowHeader>Data</RowHeader>
       <GridItem p={ 4 } fontSize="sm" borderRadius="md" bgColor={ dataBgColor }>

ui/tx/logs/TxLogSkeleton.tsx

+import { Flex, Grid, GridItem, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+const RowHeader = () => (
+  <GridItem _notFirst={{ my: { base: 4, lg: 0 } }} _first={{ alignSelf: 'center' }}>
+    <Skeleton h={ 6 } borderRadius="full" w="150px"/>
+  </GridItem>
+);
+
+const TopicRow = () => (
+  <Flex columnGap={ 3 }>
+    <SkeletonCircle size="6"/>
+    <Skeleton h={ 6 } w="70px" borderRadius="full"/>
+    <Skeleton h={ 6 } flexGrow={ 1 } borderRadius="full"/>
+  </Flex>
+);
+
+const TxLogSkeleton = () => {
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  return (
+    <Grid
+      gap={{ base: 2, lg: 8 }}
+      templateColumns={{ base: '1fr', lg: '200px 1fr' }}
+      py={ 8 }
+      _notFirst={{
+        borderTopWidth: '1px',
+        borderTopColor: borderColor,
+      }}
+      _first={{
+        pt: 0,
+      }}
+    >
+      <RowHeader/>
+      <GridItem display="flex" alignItems="center">
+        <SkeletonCircle size="6"/>
+        <Skeleton h={ 6 } flexGrow={ 1 } borderRadius="full" ml={ 2 } mr={ 9 }/>
+        <Skeleton h={ 8 } w={ 8 } borderRadius="base"/>
+      </GridItem>
+      <RowHeader/>
+      <GridItem>
+        <Skeleton h="150px" w="100%" borderRadius="base"/>
+      </GridItem>
+      <RowHeader/>
+      <GridItem display="flex" flexDir="column" rowGap={ 3 }>
+        <TopicRow/>
+        <TopicRow/>
+        <TopicRow/>
+      </GridItem>
+      <RowHeader/>
+      <GridItem>
+        <Skeleton h="60px" w="100%" borderRadius="base"/>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default TxLogSkeleton;

ui/tx/logs/TxLogTopic.tsx

@@ -23,22 +23,18 @@ const TxLogTopic = ({ hex, index }: Props) => {
       <Button variant="outline" colorScheme="gray" isActive size="xs" fontWeight={ 400 } mr={ 3 } w={ 6 }>
         { index }
       </Button>
-      { /* temporary condition juse to show different states of the component */ }
-      { /* delete when ther will be real data */ }
-      { index > 0 && (
-        <Select
-          size="sm"
-          borderRadius="base"
-          value={ selectedDataType }
-          onChange={ handleSelectChange }
-          focusBorderColor="none"
-          w="75px"
-          mr={ 3 }
-          flexShrink={ 0 }
-        >
-          { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
-        </Select>
-      ) }
+      <Select
+        size="sm"
+        borderRadius="base"
+        value={ selectedDataType }
+        onChange={ handleSelectChange }
+        focusBorderColor="none"
+        w="75px"
+        mr={ 3 }
+        flexShrink={ 0 }
+      >
+        { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
+      </Select>
       <Box overflow="hidden" whiteSpace="nowrap">
         <HashStringShortenDynamic hash={ hex }/>
       </Box>