Fix query cache for block explorers for raw chains

Author: joaquim-verges

.changeset/eight-zoos-invent.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix query cache for block explorers for raw chains

packages/thirdweb/src/react/core/hooks/others/useChainQuery.ts

@@ -15,17 +15,15 @@ export function useChainName(chain?: Chain) {
   // only if we have a chain and no chain name!
   const isEnabled = !!chain && !chain.name;
   const chainQuery = useQuery({
-    enabled: isEnabled,
     queryFn: async () => {
       if (!chain) {
         throw new Error("chain is required");
       }
       return convertApiChainToChain(await getChainMetadata(chain));
     },
-    queryKey: ["chain", chain?.id],
+    ...getQueryOptions(chain),
+    enabled: isEnabled,
     retry: false,
-    // 1 hour
-    staleTime: 60 * 60 * 1000,
   });
 
   return {
@@ -39,17 +37,15 @@ export function useChainIconUrl(chain?: Chain) {
   const isEnabled = !!chain && !chain.icon?.url;
   const chainQuery = useQuery({
     // only if we have a chain and no chain icon url!
-    enabled: isEnabled,
     queryFn: async () => {
       if (!chain) {
         throw new Error("chain is required");
       }
       return convertApiChainToChain(await getChainMetadata(chain));
     },
-    queryKey: ["chain", chain?.id],
+    ...getQueryOptions(chain),
+    enabled: isEnabled,
     retry: false,
-    // 1 hour
-    staleTime: 60 * 60 * 1000,
   });
 
   return {
@@ -67,17 +63,14 @@ export function useChainFaucets(chain?: Chain) {
     chain.id !== 1337;
 
   const chainQuery = useQuery({
-    enabled: isEnabled,
     queryFn: async () => {
       if (!chain) {
         throw new Error("chain is required");
       }
-      return convertApiChainToChain(await getChainMetadata(chain));
+      return getChainMetadata(chain);
     },
-    queryKey: ["chain", chain?.id],
-    retry: false,
-    // 1 hour
-    staleTime: 60 * 60 * 1000,
+    ...getQueryOptions(chain),
+    enabled: isEnabled,
   });
 
   return {
@@ -90,18 +83,14 @@ export function useChainSymbol(chain?: Chain) {
   // only if we have a chain and no chain icon url!
   const isEnabled = !!chain && !chain.nativeCurrency?.symbol;
   const chainQuery = useQuery({
-    // only if we have a chain and no chain icon url!
-    enabled: isEnabled,
     queryFn: async () => {
       if (!chain) {
         throw new Error("chain is required");
       }
-      return convertApiChainToChain(await getChainMetadata(chain));
+      return getChainMetadata(chain);
     },
-    queryKey: ["chain", chain?.id],
-    retry: false,
-    // 1 hour
-    staleTime: 60 * 60 * 1000,
+    ...getQueryOptions(chain),
+    enabled: isEnabled,
   });
 
   return {
@@ -116,21 +105,19 @@ export function useChainExplorers(chain?: Chain) {
   const isEnabled = !!chain && !chain.blockExplorers?.length;
 
   const chainQuery = useQuery({
-    enabled: isEnabled,
     queryFn: async () => {
       if (!chain) {
         throw new Error("chain is required");
       }
-      return convertApiChainToChain(await getChainMetadata(chain));
+      return getChainMetadata(chain);
     },
-    queryKey: ["chain", chain?.id],
-    retry: false,
-    // 1 hour
-    staleTime: 60 * 60 * 1000,
+    ...getQueryOptions(chain),
+    enabled: isEnabled,
   });
 
+  const toChain = chainQuery.data ?convertApiChainToChain(chainQuery.data) : undefined;
   return {
-    explorers: chain?.blockExplorers ?? chainQuery.data?.blockExplorers ?? [],
+    explorers: chain?.blockExplorers && chain?.blockExplorers?.length > 0 ? chain?.blockExplorers : toChain?.blockExplorers ?? [],
     isLoading: isEnabled && chainQuery.isLoading,
   };
 }

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletTransactionHistory.tsx

@@ -24,7 +24,6 @@ import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWa
 import { Container } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { ChainIcon } from "../../components/ChainIcon.js";
-import { ChainName } from "../../components/ChainName.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
 import { Text } from "../../components/text.js";
@@ -141,6 +140,7 @@ function TransactionButton(props: {
   });
   const chainIconQuery = useChainIconUrl(getCachedChain(props.tx.chainId));
   const receipt = props.tx.receipt ?? fetchedReceipt;
+  const decoded = props.tx.decoded;
 
   const content = (
     <TxButton
@@ -181,9 +181,7 @@ function TransactionButton(props: {
             }}
           >
             <Text color="primaryText" size="sm">
-              {receipt?.to
-                ? `Interacted with ${shortenHex(receipt?.to, 4)}`
-                : `Hash: ${shortenHex(props.tx.transactionHash, 4)}`}
+              {decoded ? decoded.name : `Transaction Sent`}
             </Text>
           </Container>
 
@@ -198,11 +196,9 @@ function TransactionButton(props: {
               justifyContent: "space-between",
             }}
           >
-            <ChainName
-              chain={getCachedChain(props.tx.chainId)}
-              client={props.client}
-              size="xs"
-            />
+            <Text color="secondaryText" size="xs">
+              {receipt?.to ? shortenHex(receipt?.to, 4) : shortenHex(props.tx.transactionHash, 4)}
+            </Text>
           </Container>
         </div>
       </Container>

packages/thirdweb/src/transaction/transaction-store.ts

@@ -11,6 +11,13 @@ export type StoredTransaction = {
     status: "success" | "failed";
     to: string;
   };
+  decoded?: {
+    name: string;
+    signature: string;
+    inputs?: {
+      [key: string]: unknown;
+    };
+  };
 };
 
 const transactionsByAddress = new Map<string, Store<StoredTransaction[]>>();
@@ -81,6 +88,7 @@ export async function getPastTransactions(options: {
     queryOptions: {
       filter_block_timestamp_gte: oneMonthsAgoInSeconds,
       limit: 20,
+      decode: true,
     },
     walletAddress,
   });
@@ -90,9 +98,10 @@ export async function getPastTransactions(options: {
         ? Number(tx.chain_id)
         : (tx.chain_id as number),
     receipt: {
-      status: tx.status === 1 ? "success" : "failed",
+      status: tx.status === 0 ? "failed" : "success",
       to: tx.to_address,
     },
     transactionHash: tx.hash as Hex,
+    decoded: tx.decoded,
   }));
 }