data for tx details tab

lib/tx/getConfirmationDuration.ts

+export default function getConfirmationString(durations: Array<number>) {
+  if (durations.length === 0) {
+    return '';
+  }
+
+  const [ lower, upper ] = durations.map((time) => time / 1_000);
+
+  if (!upper) {
+    return `Confirmed within ${ lower } secs`;
+  }
+
+  if (lower === 0) {
+    return `Confirmed within <= ${ upper } secs`;
+  }
+
+  return `Confirmed within ${ lower } - ${ upper } secs`;
+}

package.json

@@ -25,6 +25,7 @@
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/react-scroll": "^1.8.4",
     "dayjs": "^1.11.5",
+    "ethers": "^5.7.1",
     "framer-motion": "^6",
     "lodash": "^4.0.0",
     "next": "12.2.5",

pages/api/transactions/[id].ts

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

ui/pages/Transaction.tsx

@@ -13,13 +13,14 @@ import TxDetails from 'ui/tx/TxDetails';
 import TxInternals from 'ui/tx/TxInternals';
 import TxLogs from 'ui/tx/TxLogs';
 import TxRawTrace from 'ui/tx/TxRawTrace';
-import TxState from 'ui/tx/TxState';
+// import TxState from 'ui/tx/TxState';
 
 const TABS: Array<RoutedTab> = [
   { routeName: 'tx_index', title: 'Details', component: <TxDetails/> },
   { routeName: 'tx_internal', title: 'Internal txn', component: <TxInternals/> },
   { routeName: 'tx_logs', title: 'Logs', component: <TxLogs/> },
-  { routeName: 'tx_state', title: 'State', component: <TxState/> },
+  // will be implemented later, api is not ready
+  // { routeName: 'tx_state', title: 'State', component: <TxState/> },
   { routeName: 'tx_raw_trace', title: 'Raw trace', component: <TxRawTrace/> },
 ];
 

ui/tx/TokenTransfer.tsx

 import { Flex, Icon, Text } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer';
+
 import rightArrowIcon from 'icons/arrows/east.svg';
 import { space } from 'lib/html-entities';
 import AddressLink from 'ui/shared/address/AddressLink';
 import TokenSnippet from 'ui/shared/TokenSnippet';
 
-interface Props {
-  from: string;
-  to: string;
-  amount: number;
-  usd: number;
-  token: {
-    symbol: string;
-    hash: string;
-    name: string;
-  };
-}
+type Props = TTokenTransfer
 
-const TokenTransfer = ({ from, to, amount, usd, token }: Props) => {
+const TokenTransfer = ({ from, to, total, ...token }: Props) => {
+  // todo_tom API doesn't send exchange rate currently
+  // const usd = exchangeRate ? Number(total.value) / exchangeRate : 0;
   return (
     <Flex alignItems="center" flexWrap="wrap" columnGap={ 3 } rowGap={ 3 }>
       <Flex alignItems="center">
-        <AddressLink fontWeight="500" hash={ from } truncation="constant"/>
+        <AddressLink fontWeight="500" hash={ from.hash } truncation="constant"/>
         <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-        <AddressLink fontWeight="500" hash={ to } truncation="constant"/>
+        <AddressLink fontWeight="500" hash={ to.hash } truncation="constant"/>
       </Flex>
       <Text fontWeight={ 500 } as="span">For:{ space }
-        <Text fontWeight={ 600 } as="span">{ amount }</Text>{ space }
-        <Text fontWeight={ 400 } variant="secondary" as="span">(${ usd.toFixed(2) })</Text>
+        <Text fontWeight={ 600 } as="span">{ total.value }</Text>{ space }
+        { /* { usd > 0 && <Text fontWeight={ 400 } variant="secondary" as="span">(${ usd.toFixed(2) })</Text> } */ }
       </Text>
-      <TokenSnippet { ...token }/>
+      <TokenSnippet symbol={ token.token_symbol } hash={ token.token_address } name="Foo"/>
     </Flex>
   );
 };

ui/tx/TxDecodedInputData.tsx

 import { Flex, Text, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import type { DecodedInput } from 'types/api/decodedInput';
+
 import Address from 'ui/shared/address/Address';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -16,7 +18,7 @@ interface RowProps {
 const PADDING = 4;
 const GAP = 5;
 
-const TableRow = ({ isLast, name, type, children, indexed }: RowProps) => {
+const TableRow = ({ isLast, name, type, children }: RowProps) => {
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
@@ -39,14 +41,14 @@ const TableRow = ({ isLast, name, type, children, indexed }: RowProps) => {
       >
         { type }
       </GridItem>
-      <GridItem
+      { /* <GridItem
         pr={ GAP }
         pt={ GAP }
         pb={ isLast ? PADDING : 0 }
         bgColor={ bgColor }
       >
         { indexed ? 'true' : 'false' }
-      </GridItem>
+      </GridItem> */ }
       <GridItem
         pr={ PADDING }
         pt={ GAP }
@@ -60,14 +62,18 @@ const TableRow = ({ isLast, name, type, children, indexed }: RowProps) => {
   );
 };
 
-const TxDecodedInputData = () => {
+interface Props {
+  data: DecodedInput;
+}
+
+const TxDecodedInputData = ({ data }: Props) => {
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
-    <Grid gridTemplateColumns="minmax(80px, auto) minmax(80px, auto) minmax(80px, auto) minmax(0, 1fr)" fontSize="sm" lineHeight={ 5 } w="100%">
+    <Grid gridTemplateColumns="minmax(80px, auto) minmax(80px, auto) minmax(0, 1fr)" fontSize="sm" lineHeight={ 5 } w="100%">
       { /* FIRST PART OF BLOCK */ }
-      <GridItem fontWeight={ 600 } pl={{ base: 0, lg: PADDING }} pr={{ base: 0, lg: GAP }} colSpan={{ base: 4, lg: undefined }}>Method Id</GridItem>
-      <GridItem colSpan={{ base: 4, lg: 3 }} pr={{ base: 0, lg: PADDING }} mt={{ base: 2, lg: 0 }}>0xddf252ad</GridItem>
+      <GridItem fontWeight={ 600 } pl={{ base: 0, lg: PADDING }} pr={{ base: 0, lg: GAP }} colSpan={{ base: 3, lg: undefined }}>Method Id</GridItem>
+      <GridItem colSpan={{ base: 3, lg: 2 }} pr={{ base: 0, lg: PADDING }} mt={{ base: 2, lg: 0 }}>{ data.method_id }</GridItem>
       <GridItem
         py={ 2 }
         mt={ 2 }
@@ -76,7 +82,7 @@ const TxDecodedInputData = () => {
         fontWeight={ 600 }
         borderTopColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
         borderTopWidth="1px"
-        colSpan={{ base: 4, lg: undefined }}
+        colSpan={{ base: 3, lg: undefined }}
       >
         Call
       </GridItem>
@@ -84,13 +90,13 @@ const TxDecodedInputData = () => {
         py={{ base: 0, lg: 2 }}
         mt={{ base: 0, lg: 2 }}
         mb={{ base: 2, lg: 0 }}
-        colSpan={{ base: 4, lg: 3 }}
+        colSpan={{ base: 3, lg: 2 }}
         pr={{ base: 0, lg: PADDING }}
         borderTopColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
         borderTopWidth={{ base: '0px', lg: '1px' }}
         whiteSpace="normal"
       >
-        Transfer(address indexed from, address indexed to, uint256 indexed tokenId)
+        { data.method_call }
       </GridItem>
       { /* TABLE INSIDE OF BLOCK */ }
       <GridItem
@@ -112,7 +118,7 @@ const TxDecodedInputData = () => {
       >
         Type
       </GridItem>
-      <GridItem
+      { /* <GridItem
         pr={ GAP }
         pt={ PADDING }
         pb={ 1 }
@@ -120,7 +126,7 @@ const TxDecodedInputData = () => {
         fontWeight={ 600 }
       >
         Inde<wbr/>xed?
-      </GridItem>
+      </GridItem> */ }
       <GridItem
         pr={ PADDING }
         pt={ PADDING }
@@ -130,24 +136,21 @@ const TxDecodedInputData = () => {
       >
         Data
       </GridItem>
-      <TableRow name="from" type="address">
-        <Address justifyContent="space-between">
-          <AddressLink hash="0x0000000000000000000000000000000000000000"/>
-          <CopyToClipboard text="0x0000000000000000000000000000000000000000"/>
-        </Address>
-      </TableRow>
-      <TableRow name="to" type="address" indexed>
-        <Address justifyContent="space-between">
-          <AddressLink hash="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718"/>
-          <CopyToClipboard text="0xcf0c50b7ea8af37d57380a0ac199d55b0782c718"/>
-        </Address>
-      </TableRow>
-      <TableRow name="tokenId" type="uint256" isLast>
-        <Flex alignItems="center" justifyContent="space-between">
-          <Text>116842</Text>
-          <CopyToClipboard text="116842"/>
-        </Flex>
-      </TableRow>
+      { data.parameters.map(({ name, type, value }, index) => (
+        <TableRow key={ name } name={ name } type={ type } isLast={ index === data.parameters.length - 1 }>
+          { type === 'address' ? (
+            <Address justifyContent="space-between">
+              <AddressLink hash={ value }/>
+              <CopyToClipboard text={ value }/>
+            </Address>
+          ) : (
+            <Flex alignItems="center" justifyContent="space-between">
+              <Text>116842</Text>
+              <CopyToClipboard text="116842"/>
+            </Flex>
+          ) }
+        </TableRow>
+      )) }
     </Grid>
   );
 };

ui/tx/internals/TxInternalsTableItem.tsx

@@ -10,7 +10,7 @@ import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 interface Props {
   type: string;
-  status: 'success' | 'failed' | 'pending';
+  status: 'ok' | 'error' | null;
   from: { hash: string; alias?: string};
   to: { hash: string; alias?: string};
   value: number;