fix bugs

frontend-v2/package.json

@@ -12,7 +12,7 @@
     "schema:generate": "apollo client:codegen ./src/nft --no-addTypename --target=typescript --localSchemaFile=src/aptos-indexer.graphql"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.1",
+    "@apollo/client": "^3.9.10",
     "@fortawesome/fontawesome-free": "^6.2.1",
     "@next/third-parties": "^14.1.4",
     "@types/node": "18.11.9",

frontend-v2/pages/_document.js

@@ -1,24 +1,27 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import { Provider as StyletronProvider } from "styletron-react";
 import { styletron } from "../src/styletron";
+import { chainConfig } from "../src/common/use-chain-config";
 
 const beConfig = {
-  tagline: "tagline",
-  previewImageUrl: "https://tianpan.co/favicon.png",
-  title: `title`,
-  description: "title",
+  tagline: `${chainConfig.chainName} Blockchain Explorer`,
+  previewImageUrl: "/favicon.svg",
+  title: chainConfig.chainName,
+  description:
+    "Blockroma is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.",
   twitter: "@stargately",
 };
 
 class MyDocument extends Document {
   static async getInitialProps(context) {
     const renderPage = () =>
       context.renderPage({
-        enhanceApp: (App) => (props) => (
-          <StyletronProvider value={styletron}>
-            <App {...props} />
-          </StyletronProvider>
-        ),
+        enhanceApp: (App) => (props) =>
+          (
+            <StyletronProvider value={styletron}>
+              <App {...props} />
+            </StyletronProvider>
+          ),
       });
 
     const initialProps = await Document.getInitialProps({

frontend-v2/src/address-details-container/address-details-container.tsx

@@ -38,7 +38,7 @@ export const AddressDetailsContainer: React.FC = () => {
   }
   if (error && error.graphQLErrors[0]?.extensions?.code !== "NOT_FOUND") {
     // TODO(dora):
-    return <button onClick={refetch}>error</button>;
+    return <button onClick={() => refetch()}>error</button>;
   }
   const addr: Addr = data?.address ?? {};
 

frontend-v2/src/address-details-container/address-transactions-container.tsx

@@ -77,7 +77,7 @@ export const AddressTransactionsContainer: React.FC<Props> = ({
               <button
                 data-error-message
                 className="alert alert-danger col-12 text-left"
-                onClick={refetch}
+                onClick={() => refetch()}
               >
                 <span className="alert-link">{t("info.err")}</span>
               </button>

frontend-v2/src/blks-table-container/blks-table-container.tsx

@@ -84,7 +84,7 @@ const TableWithPagination = () => {
     <>
       {error && (
         <button
-          onClick={refetch}
+          onClick={() => refetch()}
           data-error-message
           className="alert alert-danger col-12 text-left"
         >

frontend-v2/src/block-details-container/block-transactions-list-container.tsx

@@ -38,7 +38,7 @@ export const BlockTransactionsListContainer: React.FC<Props> = ({
         <button
           data-error-message
           className="alert alert-danger col-12 text-left"
-          onClick={refetch}
+          onClick={() => refetch()}
         >
           <span className="alert-link">{t("info.err")}</span>
         </button>

frontend-v2/src/common/use-chain-config.ts

@@ -1,5 +1,3 @@
-import { useSelector } from "react-redux";
-
 export type ChainConfig = {
   chainId: number;
   chainName: string;
@@ -9,13 +7,15 @@ export type ChainConfig = {
   networkPath: string;
 };
 
+export const chainConfig = {
+  chainId: 7778,
+  chainName: "Blockroma",
+  symbol: "BLO",
+  rpcUrls: ["https://example.com"],
+  decimals: 18,
+  networkPath: "",
+};
+
 export function useChainConfig(): ChainConfig {
-  return {
-    chainId: 7778,
-    chainName: "Blockroma",
-    symbol: "BLO",
-    rpcUrls: ["https://example.com"],
-    decimals: 18,
-    networkPath: "",
-  };
+  return chainConfig;
 }

frontend-v2/src/home/home-blocks-container.tsx

@@ -31,7 +31,7 @@ export const HomeBlocksContainer: React.FC = () => {
           <button
             data-error-message
             className="alert alert-danger col-12 text-left"
-            onClick={refetch}
+            onClick={() => refetch()}
           >
             <span className="alert-link">{t("info.err")}</span>
           </button>

frontend-v2/src/home/home-transactions-container.tsx

@@ -54,7 +54,7 @@ export function HomeTransactionsContainer(): JSX.Element {
           <button
             data-error-message
             className="alert alert-danger col-12 text-left"
-            onClick={refetch}
+            onClick={() => refetch()}
           >
             <span className="alert-link">{t("info.err")}</span>
           </button>

frontend-v2/src/tx-details-container/hooks/use-query-tx.ts

@@ -2,17 +2,23 @@ import { useQuery } from "@apollo/client";
 import { queryTx } from "@/shared/tx-details-container/data/query-tx";
 import { QueryTx } from "../data/__generated__/QueryTx";
 
+function isEthHash(hash: string): boolean {
+  const ethHashRegex = /^0x[a-fA-F0-9]{64}$/;
+  return ethHashRegex.test(hash);
+}
+
 export const useQueryTx = ({ hash }: { hash: string }) => {
   const { data, loading, error, refetch } = useQuery<QueryTx>(queryTx, {
     ssr: false,
     variables: {
       hash,
     },
+    pollInterval: isEthHash(hash) ? 5000 : undefined,
   });
   return {
     data,
     loading,
     error,
-    refetch,
+    refetch: () => refetch(),
   };
 };

frontend-v2/src/tx-details-container/tx-details-container.tsx

@@ -35,12 +35,17 @@ export function TxDetailsContainer(): JSX.Element {
     return <></>;
   }
   if (error && error.graphQLErrors[0]?.extensions?.code === "NOT_FOUND") {
-    // TODO(dora):
     return (
-      <>
-        Transaction not found
-        <button onClick={refetch}>Refetch</button>
-      </>
+      <div className="container-fluid h-100">
+        <div className="row h-100 justify-content-center align-items-center">
+          <div className="col-xs-12 text-center" style={{height: "100vh", display: "flex", justifyContent: "center", alignItems: "center"}}>
+            <div className="message-box">
+              <p>Transaction not found. The </p>
+              <button className="btn btn-primary" onClick={() => refetch()}>Refetch</button>
+            </div>
+          </div>
+        </div>
+      </div>
     );
   }
 
@@ -54,8 +59,8 @@ export function TxDetailsContainer(): JSX.Element {
 
   return (
     <main className="pt-4">
-      <p className="alert alert-info" role="alert" />
-      <p className="alert alert-danger" role="alert" />
+      <p className="alert alert-info" role="alert"/>
+      <p className="alert alert-danger" role="alert"/>
       <section className="container">
         <section
           className="fs-14"

frontend-v2/src/txs-table-container/txs-table-container.tsx

@@ -84,7 +84,7 @@ const TableWithPagination = () => {
     <>
       {error && (
         <button
-          onClick={refetch}
+          onClick={() => refetch()}
           data-error-message
           className="alert alert-danger col-12 text-left"
         >

frontend-v2/yarn.lock

@@ -2,19 +2,20 @@
 # yarn lockfile v1
 
 
-"@apollo/client@^3.7.1":
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.7.1.tgz#86ce47c18a0714e229231148b0306562550c2248"
-  integrity sha512-xu5M/l7p9gT9Fx7nF3AQivp0XukjB7TM7tOd5wifIpI8RskYveL4I+rpTijzWrnqCPZabkbzJKH7WEAKdctt9w==
+"@apollo/client@^3.9.10":
+  version "3.9.10"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.9.10.tgz#f381f67f3559cb5f5b66ce9183f84f49616acbe4"
+  integrity sha512-w8i/Lk1P0vvWZF0Xb00XPonn79/0rgRJ1vopBlVudVuy9QP29/NZXK0rI2xJIN6VrKuEqJZaVGJC+7k23I2sfA==
   dependencies:
     "@graphql-typed-document-node/core" "^3.1.1"
-    "@wry/context" "^0.7.0"
-    "@wry/equality" "^0.5.0"
-    "@wry/trie" "^0.3.0"
+    "@wry/caches" "^1.0.0"
+    "@wry/equality" "^0.5.6"
+    "@wry/trie" "^0.5.0"
     graphql-tag "^2.12.6"
     hoist-non-react-statics "^3.3.2"
-    optimism "^0.16.1"
+    optimism "^0.18.0"
     prop-types "^15.7.2"
+    rehackt "0.0.6"
     response-iterator "^0.2.6"
     symbol-observable "^4.0.0"
     ts-invariant "^0.10.3"
@@ -337,24 +338,38 @@
     "@typescript-eslint/types" "6.21.0"
     eslint-visitor-keys "^3.4.1"
 
+"@wry/caches@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@wry/caches/-/caches-1.0.1.tgz#8641fd3b6e09230b86ce8b93558d44cf1ece7e52"
+  integrity sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==
+  dependencies:
+    tslib "^2.3.0"
+
 "@wry/context@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.7.0.tgz#be88e22c0ddf62aeb0ae9f95c3d90932c619a5c8"
   integrity sha512-LcDAiYWRtwAoSOArfk7cuYvFXytxfVrdX7yxoUmK7pPITLk5jYh2F8knCwS7LjgYL8u1eidPlKKV6Ikqq0ODqQ==
   dependencies:
     tslib "^2.3.0"
 
-"@wry/equality@^0.5.0":
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.3.tgz#fafebc69561aa2d40340da89fa7dc4b1f6fb7831"
-  integrity sha512-avR+UXdSrsF2v8vIqIgmeTY0UR91UT+IyablCyKe/uk22uOJ8fusKZnH9JH9e1/EtLeNJBtagNmL3eJdnOV53g==
+"@wry/equality@^0.5.6":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.7.tgz#72ec1a73760943d439d56b7b1e9985aec5d497bb"
+  integrity sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==
   dependencies:
     tslib "^2.3.0"
 
-"@wry/trie@^0.3.0":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.3.2.tgz#a06f235dc184bd26396ba456711f69f8c35097e6"
-  integrity sha512-yRTyhWSls2OY/pYLfwff867r8ekooZ4UI+/gxot5Wj8EFwSf2rG+n+Mo/6LoLQm1TKA4GRj2+LCpbfS937dClQ==
+"@wry/trie@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.4.3.tgz#077d52c22365871bf3ffcbab8e95cb8bc5689af4"
+  integrity sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/trie@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.5.0.tgz#11e783f3a53f6e4cd1d42d2d1323f5bc3fa99c94"
+  integrity sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==
   dependencies:
     tslib "^2.3.0"
 
@@ -2423,13 +2438,15 @@ open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
-optimism@^0.16.1:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.16.2.tgz#519b0c78b3b30954baed0defe5143de7776bf081"
-  integrity sha512-zWNbgWj+3vLEjZNIh/okkY2EUfX+vB9TJopzIZwT1xxaMqC5hRLLraePod4c5n4He08xuXNH+zhKFFCu390wiQ==
+optimism@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.18.0.tgz#e7bb38b24715f3fdad8a9a7fc18e999144bbfa63"
+  integrity sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==
   dependencies:
+    "@wry/caches" "^1.0.0"
     "@wry/context" "^0.7.0"
-    "@wry/trie" "^0.3.0"
+    "@wry/trie" "^0.4.3"
+    tslib "^2.3.0"
 
 optionator@^0.9.1:
   version "0.9.1"
@@ -2725,6 +2742,11 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
+rehackt@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/rehackt/-/rehackt-0.0.6.tgz#7a0a2247f2295e7548915417e44fbbf03bf004f4"
+  integrity sha512-l3WEzkt4ntlEc/IB3/mF6SRgNHA6zfQR7BlGOgBTOmx7IJJXojDASav+NsgXHFjHn+6RmwqsGPFgZpabWpeOdw==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"