fix

README.md

@@ -140,18 +140,6 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_IS_L2_NETWORK | `boolean` *(optional)* | Set to true for L2 solutions (Optimism Bedrock based)  | false |
 | NEXT_PUBLIC_L1_BASE_URL | `string` *(optional)* | Base Blockscout URL for L1 network | `'http://eth-goerli.blockscout.com'` |
 
-### L2 configuration
-| Variable | Type | Description | Default value
-| --- | --- | --- | --- |
-| NEXT_PUBLIC_IS_L2_NETWORK | `boolean` *(optional)* | Set to true for L2 solutions (Optimism Bedrock based)  | false |
-| NEXT_PUBLIC_L1_BASE_URL | `string` *(optional)* | Base Blockscout URL for L1 network | `'http://eth-goerli.blockscout.com'` |
-
-### L2 configuration
-| Variable | Type | Description | Default value
-| --- | --- | --- | --- |
-| NEXT_PUBLIC_IS_L2_NETWORK | `boolean` *(optional)* | Set to true for L2 solutions (Optimism Bedrock based)  | false |
-| NEXT_PUBLIC_L1_BASE_URL | `string` *(optional)* | Base Blockscout URL for L1 network | `'http://eth-goerli.blockscout.com'` |
-
 ### Marketplace app configuration properties
 
 | Property | Type | Description | Example value

pages/output-roots.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import OutputRoots from 'ui/pages/OutputRoots';
 
-const TokensPage: NextPage = () => {
+const OutputRootsPage: NextPage = () => {
   const title = getNetworkTitle();
   return (
     <>
@@ -17,6 +17,6 @@ const TokensPage: NextPage = () => {
   );
 };
 
-export default TokensPage;
+export default OutputRootsPage;
 
 export { getServerSideProps } from 'lib/next/getServerSidePropsL2';

ui/outputRoots/OutputRootsListItem.tsx

-/* eslint-disable @typescript-eslint/naming-convention */
 import { Box, Flex, Text, HStack, Icon } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
@@ -14,39 +13,38 @@ import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile';
 
-type Props = OutputRootsItem;
+type Props = { item: OutputRootsItem };
 
-const OutputRootsListItem = ({
-  l2_output_index,
-  l1_timestamp,
-  l2_block_number,
-  l1_tx_hash,
-  output_root,
-}: Props) => {
-  const timeAgo = useTimeAgoIncrement(l1_timestamp, false);
+const OutputRootsListItem = ({ item }: Props) => {
+  const timeAgo = useTimeAgoIncrement(item.l1_timestamp, false);
 
   return (
     <ListItemMobile rowGap={ 3 }>
       <Flex alignItems="center" justifyContent="space-between" w="100%">
-        #{ l2_output_index }
-        { l1_timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
+        #{ item.l2_output_index }
+        { item.l1_timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
       </Flex>
       <HStack spacing={ 3 }>
         <Text fontSize="sm" fontWeight={ 500 }>L2 block</Text>
-        <LinkInternal display="flex" alignItems="center" href={ route({ pathname: '/block/[height]', query: { height: l2_block_number.toString() } }) }>
-          { l2_block_number }
+        <LinkInternal
+          display="flex"
+          width="fit-content"
+          alignItems="center"
+          href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString() } }) }
+        >
+          { item.l2_block_number }
         </LinkInternal>
       </HStack>
       <HStack spacing={ 3 } width="100%">
         <Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">Output root</Text>
         <Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%">
-          <Text variant="secondary" w="calc(100% - 36px)"><HashStringShortenDynamic hash={ output_root }/></Text>
-          <CopyToClipboard text={ output_root } ml={ 2 }/>
+          <Text variant="secondary" w="calc(100% - 36px)"><HashStringShortenDynamic hash={ item.output_root }/></Text>
+          <CopyToClipboard text={ item.output_root } ml={ 2 }/>
         </Flex>
       </HStack>
-      <LinkExternal w="100%" href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: l1_tx_hash } }) }>
+      <LinkExternal w="100%" href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }>
         <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
-        <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ l1_tx_hash }/></Box>
+        <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box>
       </LinkExternal>
     </ListItemMobile>
   );

ui/outputRoots/OutputRootsTable.tsx

@@ -26,7 +26,7 @@ const OutputRootsTable = ({ items, top }: Props) => {
       </Thead>
       <Tbody>
         { items.map((item) => (
-          <OutputRootsTableItem key={ item.l2_output_index } { ...item }/>
+          <OutputRootsTableItem key={ item.l2_output_index } item={ item }/>
         )) }
       </Tbody>
     </Table>

ui/outputRoots/OutputRootsTableItem.tsx

-/* eslint-disable @typescript-eslint/naming-convention */
 import { Box, Flex, Td, Tr, Text, Icon } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
@@ -14,21 +13,15 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 
-type Props = OutputRootsItem;
+type Props = { item: OutputRootsItem };
 
-const OutputRootsTableItem = ({
-  l2_output_index,
-  l1_timestamp,
-  l2_block_number,
-  l1_tx_hash,
-  output_root,
-}: Props) => {
-  const timeAgo = useTimeAgoIncrement(l1_timestamp, false);
+const OutputRootsTableItem = ({ item }: Props) => {
+  const timeAgo = useTimeAgoIncrement(item.l1_timestamp, false);
 
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <Text>{ l2_output_index }</Text>
+        <Text>{ item.l2_output_index }</Text>
       </Td>
       <Td verticalAlign="middle">
         <Text variant="secondary">{ timeAgo }</Text>
@@ -37,25 +30,26 @@ const OutputRootsTableItem = ({
         <LinkInternal
           fontWeight={ 600 }
           display="flex"
+          width="fit-content"
           alignItems="center"
-          href={ route({ pathname: '/block/[height]', query: { height: l2_block_number.toString() } }) }
+          href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString() } }) }
         >
           <Icon as={ txBatchIcon } boxSize={ 6 } mr={ 1 }/>
-          { l2_block_number }
+          { item.l2_block_number }
         </LinkInternal>
       </Td>
       <Td verticalAlign="middle" pr={ 12 }>
         <Flex>
-          <LinkExternal w="100%" href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: l1_tx_hash } }) }>
+          <LinkExternal w="100%" href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }>
             <Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
-            <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ l1_tx_hash }/></Box>
+            <Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box>
           </LinkExternal>
         </Flex>
       </Td>
       <Td verticalAlign="middle">
         <Flex overflow="hidden" whiteSpace="nowrap" w="100%" alignItems="center">
-          <Box w="calc(100% - 36px)"><HashStringShortenDynamic hash={ output_root }/></Box>
-          <CopyToClipboard text={ output_root } ml={ 2 }/>
+          <Box w="calc(100% - 36px)"><HashStringShortenDynamic hash={ item.output_root }/></Box>
+          <CopyToClipboard text={ item.output_root } ml={ 2 }/>
         </Flex>
       </Td>
     </Tr>

ui/pages/OutputRoots.tsx

@@ -55,7 +55,7 @@ const OutputRoots = () => {
             </Flex>
           </ActionBar>
         ) }
-        <Show below="lg" ssr={ false }>{ data.items.map((item => <OutputRootsListItem key={ item.l2_output_index } { ...item }/>)) }</Show>
+        <Show below="lg" ssr={ false }>{ data.items.map((item => <OutputRootsListItem key={ item.l2_output_index } item={ item }/>)) }</Show>
         <Hide below="lg" ssr={ false }><OutputRootsTable items={ data.items } top={ isPaginationVisible ? 80 : 0 }/></Hide>
       </>
     );