feat: public transactions, token fetch bug fix

Author: kemuru

web/src/hooks/useNativeTokenSymbol.ts

@@ -1,6 +1,5 @@
-import { useAccount } from "wagmi";
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
 
 export const useNativeTokenSymbol = () => {
-  const { chain } = useAccount();
-  return chain?.nativeCurrency.symbol;
+  return getChain(DEFAULT_CHAIN)?.nativeCurrency.symbol;
 };

web/src/hooks/useTokenMetadata.ts

@@ -1,16 +1,16 @@
 import { useState, useEffect } from "react";
 import { Alchemy } from "alchemy-sdk";
-import { useAccount } from "wagmi";
+
+import { DEFAULT_CHAIN } from "consts/chains";
 import { alchemyConfig } from "utils/alchemyConfig";
 
 export const useTokenMetadata = (tokenAddress: string) => {
-  const { chain } = useAccount();
   const [tokenMetadata, setTokenMetadata] = useState<any>(null);
 
   useEffect(() => {
     const fetchTokenMetadata = async () => {
-      if (!tokenAddress || tokenAddress === "native" || !chain) return;
-      const alchemy = new Alchemy(alchemyConfig(chain.id));
+      if (!tokenAddress || tokenAddress === "native") return;
+      const alchemy = new Alchemy(alchemyConfig(DEFAULT_CHAIN));
       try {
         const metadata = await alchemy.core.getTokenMetadata(tokenAddress);
         setTokenMetadata(metadata);
@@ -21,7 +21,7 @@ export const useTokenMetadata = (tokenAddress: string) => {
     };
 
     fetchTokenMetadata();
-  }, [tokenAddress, chain]);
+  }, [tokenAddress]);
 
   return { tokenMetadata };
 };

web/src/pages/MyTransactions/TransactionsFetcher.tsx

@@ -1,14 +1,22 @@
 import React, { useMemo } from "react";
+
+import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
+
 import { useParams, useNavigate } from "react-router-dom";
 import { useWindowSize } from "react-use";
 import { useAccount } from "wagmi";
+
+import { DEFAULT_CHAIN } from "consts/chains";
 import { useRootPath, decodeURIFilter } from "utils/uri";
-import { useMyTransactionsQuery } from "hooks/queries/useTransactionsQuery";
-import { useUserQuery } from "hooks/queries/useUserQuery";
-import TransactionsDisplay from "components/TransactionsDisplay";
-import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
+
+import { useMyTransactionsQuery } from "queries/useTransactionsQuery";
+import { useUserQuery } from "queries/useUserQuery";
 import { OrderDirection, TransactionDetailsFragment } from "src/graphql/graphql";
 
+import TransactionsDisplay from "components/TransactionsDisplay";
+import ConnectWallet from "components/ConnectWallet";
+import { ConnectWalletContainer } from "./index";
+
 const TransactionsFetcher: React.FC = () => {
   const { page, order, filter } = useParams();
   const navigate = useNavigate();
@@ -28,6 +36,8 @@ const TransactionsFetcher: React.FC = () => {
     decodedFilter,
     order === "asc" ? OrderDirection.Asc : OrderDirection.Desc
   );
+  const { isConnected, chain } = useAccount();
+  const isOnSupportedChain = chain?.id === DEFAULT_CHAIN;
 
   const { totalTransactions, totalConcludedTransactions } = useMemo(() => {
     switch (decodedFilter.status) {
@@ -68,7 +78,7 @@ const TransactionsFetcher: React.FC = () => {
     return Math.ceil(totalTransactions / transactionsPerPage) || 1;
   }, [totalTransactions, transactionsPerPage]);
 
-  return (
+  return isConnected && isOnSupportedChain ? (
     <TransactionsDisplay
       transactions={escrowData?.escrows as TransactionDetailsFragment[]}
       totalTransactions={totalTransactions}
@@ -78,6 +88,12 @@ const TransactionsFetcher: React.FC = () => {
       totalPages={totalPages}
       transactionsPerPage={transactionsPerPage}
     />
+  ) : (
+    <ConnectWalletContainer>
+      To see your transactions, connect first and switch to the supported chain
+      <hr />
+      <ConnectWallet />
+    </ConnectWalletContainer>
   );
 };
 

web/src/pages/MyTransactions/index.tsx

@@ -5,12 +5,9 @@ import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import { Route, Routes } from "react-router-dom";
-import { useAccount } from "wagmi";
 
-import { DEFAULT_CHAIN } from "consts/chains";
 import { TransactionDetailsProvider } from "context/TransactionDetailsContext";
 
-import ConnectWallet from "components/ConnectWallet";
 import TransactionsFetcher from "./TransactionsFetcher";
 import TransactionDetails from "./TransactionDetails";
 
@@ -23,8 +20,8 @@ const Container = styled.div`
 
   ${landscapeStyle(
     () => css`
-      padding: 48px ${responsiveSize(0, 132)} 60px;
-    `
+        padding: 48px ${responsiveSize(0, 132)} 60px;
+      `
   )}
 `;
 
@@ -36,34 +33,22 @@ export const ConnectWalletContainer = styled.div`
   color: ${({ theme }) => theme.primaryText};
 `;
 
-const Dashboard: React.FC = () => {
-  const { isConnected, chain } = useAccount();
-  const isOnSupportedChain = chain?.id === DEFAULT_CHAIN;
+const Dashboard: React.FC = () =>
 
-  return (
+  (
     <Container>
-      {isConnected && isOnSupportedChain ? (
-        <Routes>
-          <Route path="/display/:page/:order/:filter" element={<TransactionsFetcher />} />
-
-          <Route
-            path="/:id/*"
-            element={
-              <TransactionDetailsProvider>
-                <TransactionDetails />
-              </TransactionDetailsProvider>
-            }
-          />
-        </Routes>
-      ) : (
-        <ConnectWalletContainer>
-          To see your transactions, connect first and switch to the supported chain
-          <hr />
-          <ConnectWallet />
-        </ConnectWalletContainer>
-      )}
+      <Routes>
+        <Route path="/display/:page/:order/:filter" element={<TransactionsFetcher />} />
+        <Route
+          path="/:id/*"
+          element={
+            <TransactionDetailsProvider>
+              <TransactionDetails />
+            </TransactionDetailsProvider>
+          }
+        />
+      </Routes>
     </Container>
   );
-};
 
 export default Dashboard;