Merge branch 'main' of github.com:blockscout/frontend into skeletons/rest-pages

.github/workflows/e2e-tests.yml

@@ -67,15 +67,15 @@ jobs:
           build-args: |
             GIT_COMMIT_SHA=${{ env.SHORT_SHA }}
             GIT_TAG=${{ github.ref_type == 'tag' && github.github.ref_name || '' }}
-  deploy_and_tests:
+  #deploy_and_tests:
     # if: github.event.review.state == 'approved'
-    needs: push_to_registry
-    uses: blockscout/blockscout-ci-cd/.github/workflows/e2e_new.yaml@master
-    with:
-      appNamespace: e2e-front-$GITHUB_SHA_SHORT
-      frontendImage: ${{ needs.push_to_registry.outputs.tags }}
-      blockscoutIngressHost: e2e-blockscout-$GITHUB_SHA_SHORT
-      frontendIngressHost: e2e-blockscout-$GITHUB_SHA_SHORT
-      gethIngressHost: e2e-geth-$GITHUB_SHA_SHORT
-      scVerifierIngressHost: e2e-sc-verifier-$GITHUB_SHA_SHORT
-    secrets: inherit
+  #  needs: push_to_registry
+  #  uses: blockscout/blockscout-ci-cd/.github/workflows/e2e_new.yaml@master
+  #  with:
+  #    appNamespace: e2e-front-$GITHUB_SHA_SHORT
+  #    frontendImage: ${{ needs.push_to_registry.outputs.tags }}
+  #    blockscoutIngressHost: e2e-blockscout-$GITHUB_SHA_SHORT
+  #    frontendIngressHost: e2e-blockscout-$GITHUB_SHA_SHORT
+  #    gethIngressHost: e2e-geth-$GITHUB_SHA_SHORT
+  #    scVerifierIngressHost: e2e-sc-verifier-$GITHUB_SHA_SHORT
+  #  secrets: inherit

lib/hooks/useQueryWithPages.ts

@@ -96,8 +96,7 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
       nextPageQuery = omit(router.query, [ 'next_page_params', 'page' ]);
       canGoBackwards.current = true;
     } else {
-      const nextPageParams = pageParams[page - 1];
-      nextPageParams && Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = String(val));
+      nextPageQuery.next_page_params = encodeURIComponent(JSON.stringify(pageParams[page - 1]));
       nextPageQuery.page = String(page - 1);
     }
 

ui/snippets/navigation/NavLinkGroupDesktop.tsx

@@ -88,7 +88,7 @@ const NavLinkGroupDesktop = ({ item, isCollapsed }: Props) => {
                   { subItem.map(subSubItem => <NavLink key={ subSubItem.text } item={ subSubItem } isCollapsed={ false }/>) }
                 </Box>
               ) :
-                <NavLink key={ item.text } item={ subItem } isCollapsed={ false }/>,
+                <NavLink key={ subItem.text } item={ subItem } isCollapsed={ false }/>,
               ) }
             </VStack>
           </PopoverBody>

ui/token/TokenDetails.tsx

@@ -49,8 +49,14 @@ const TokenDetails = ({ tokenQuery }: Props) => {
 
     const tab: TokenTabs = item === 'token_holders_count' ? 'holders' : 'token_transfers';
 
-    return <Link onClick={ changeUrlAndScroll(tab) }>{ Number(itemValue).toLocaleString() }</Link>;
-  }, [ tokenCountersQuery.data, changeUrlAndScroll ]);
+    return (
+      <Skeleton isLoaded={ !tokenCountersQuery.isPlaceholderData }>
+        <Link onClick={ changeUrlAndScroll(tab) }>
+          { Number(itemValue).toLocaleString() }
+        </Link>
+      </Skeleton>
+    );
+  }, [ tokenCountersQuery.data, tokenCountersQuery.isPlaceholderData, changeUrlAndScroll ]);
 
   if (tokenQuery.isError) {
     throw Error('Token fetch error', { cause: tokenQuery.error as unknown as Error });

ui/token/TokenTransfer/TokenTransferList.tsx

@@ -16,7 +16,7 @@ const TokenTransferList = ({ data, tokenId, isLoading }: Props) => {
     <Box>
       { data.map((item, index) => (
         <TokenTransferListItem
-          key={ index }
+          key={ item.tx_hash + item.block_hash + item.log_index + '_' + index }
           { ...item }
           tokenId={ tokenId }
           isLoading={ isLoading }

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -90,7 +90,7 @@ const TokenTransferListItem = ({
             Value
           </Skeleton>
           <Skeleton isLoaded={ !isLoading } color="text_secondary">
-            { value }
+            <span>{ value }</span>
           </Skeleton>
           <Skeleton isLoaded={ !isLoading }>{ trimTokenSymbol(token.symbol) }</Skeleton>
         </Flex>

ui/token/TokenTransfer/TokenTransferTable.tsx

@@ -48,7 +48,12 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
           />
         ) }
         { data.map((item, index) => (
-          <TokenTransferTableItem key={ index } { ...item } tokenId={ tokenId } isLoading={ isLoading }/>
+          <TokenTransferTableItem
+            key={ item.tx_hash + item.block_hash + item.log_index + '_' + index }
+            { ...item }
+            tokenId={ tokenId }
+            isLoading={ isLoading }
+          />
         )) }
       </Tbody>
     </Table>