[TOOL-3238] Fix Engine backend wallet balances not updating on chain change (thirdweb-dev#6059)

Author: MananTank

apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx

@@ -168,6 +168,7 @@ export function SingleNetworkSelector(props: {
       onValueChange={(chainId) => {
         props.onChange(Number(chainId));
       }}
+      closeOnSelect={true}
       placeholder={isLoadingChains ? "Loading Chains..." : "Select Chain"}
       overrideSearchFn={searchFn}
       renderOption={renderOption}

apps/dashboard/src/@/components/blocks/select-with-search.tsx

@@ -33,6 +33,7 @@ interface SelectWithSearchProps
   popoverContentClassName?: string;
   side?: "left" | "right" | "top" | "bottom";
   align?: "center" | "start" | "end";
+  closeOnSelect?: boolean;
 }
 
 export const SelectWithSearch = React.forwardRef<
@@ -50,6 +51,7 @@ export const SelectWithSearch = React.forwardRef<
       overrideSearchFn,
       popoverContentClassName,
       searchPlaceholder,
+      closeOnSelect,
       ...props
     },
     ref,
@@ -177,7 +179,12 @@ export const SelectWithSearch = React.forwardRef<
                       key={option.value}
                       role="option"
                       aria-selected={isSelected}
-                      onClick={() => onValueChange(option.value)}
+                      onClick={() => {
+                        onValueChange(option.value);
+                        if (closeOnSelect) {
+                          setIsPopoverOpen(false);
+                        }
+                      }}
                       variant="ghost"
                       className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2 text-left"
                       ref={

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -10,7 +10,7 @@ import {
 import type { ResultItem } from "app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes";
 import type { EngineBackendWalletType } from "lib/engine";
 import { useState } from "react";
-import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
 import type { EngineStatus } from "../../../app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table";
 import { engineKeys } from "../cache-keys";
@@ -469,12 +469,12 @@ export function useEngineBackendWalletBalance(params: {
   instanceUrl: string;
   address: string;
   authToken: string;
+  chainId: number;
 }) {
-  const { instanceUrl, address, authToken } = params;
-  const chainId = useActiveWalletChain()?.id;
+  const { instanceUrl, address, authToken, chainId } = params;
 
   return useQuery({
-    queryKey: engineKeys.backendWalletBalance(address, chainId || 1),
+    queryKey: engineKeys.backendWalletBalance(address, chainId),
     queryFn: async () => {
       invariant(chainId, "chainId is required");
 

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx

@@ -5,6 +5,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import { FormItem } from "@/components/ui/form";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   type BackendWallet,
   useEngineBackendWalletBalance,
@@ -34,11 +35,9 @@ import { type ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { ChainIcon } from "components/icons/ChainIcon";
 import { TWTable } from "components/shared/TWTable";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useAllChainsData } from "hooks/chains/allChains";
 import { EngineBackendWalletOptions } from "lib/engine";
-import {
-  useActiveChainAsDashboardChain,
-  useV5DashboardChain,
-} from "lib/v5-adapter";
+import { useV5DashboardChain } from "lib/v5-adapter";
 import {
   DownloadIcon,
   PencilIcon,
@@ -52,7 +51,6 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { getAddress } from "thirdweb";
 import { shortenAddress } from "thirdweb/utils";
-import invariant from "tiny-invariant";
 import { FormHelperText, FormLabel, LinkButton, Text } from "tw-components";
 import { prettyPrintCurrency } from "./utils";
 
@@ -89,21 +87,21 @@ const BackendWalletBalanceCell: React.FC<BackendWalletBalanceCellProps> = ({
     instanceUrl: instanceUrl,
     address,
     authToken,
+    chainId,
   });
   const chain = useV5DashboardChain(chainId);
-  if (!chain || !backendWalletBalance) {
-    return;
+
+  if (!backendWalletBalance) {
+    return <Skeleton className="h-5 w-32 rounded-lg" />;
   }
 
   const balanceDisplay = prettyPrintCurrency({
     amount: backendWalletBalance.displayValue,
-    symbol: backendWalletBalance.symbol,
+    symbol: backendWalletBalance.symbol || chain.nativeCurrency?.symbol,
   });
 
   const balanceComponent = (
-    <Text fontWeight={backendWalletBalance.value === "0" ? "light" : "bold"}>
-      {balanceDisplay}
-    </Text>
+    <div className="text-muted-foreground">{balanceDisplay}</div>
   );
 
   const explorer = chain.blockExplorers?.[0];
@@ -250,6 +248,7 @@ export const BackendWalletsTable: React.FC<BackendWalletsTableProps> = ({
           disclosure={sendDisclosure}
           instanceUrl={instanceUrl}
           authToken={authToken}
+          chainId={chainId}
         />
       )}
       {selectedBackendWallet && deleteDisclosure.isOpen && (
@@ -425,36 +424,38 @@ const SendFundsModal = ({
   disclosure,
   instanceUrl,
   authToken,
+  chainId,
 }: {
   fromWallet: BackendWallet;
   backendWallets: BackendWallet[];
   disclosure: UseDisclosureReturn;
   instanceUrl: string;
   authToken: string;
+  chainId: number;
 }) => {
-  const chain = useActiveChainAsDashboardChain();
   const form = useForm<SendFundsInput>();
   const sendTokens = useEngineSendTokens({
     instanceUrl,
     authToken,
   });
+  const { idToChain } = useAllChainsData();
   const { data: backendWalletBalance } = useEngineBackendWalletBalance({
     instanceUrl,
     address: fromWallet.address,
     authToken,
+    chainId: chainId,
   });
+  const chain = idToChain.get(chainId);
   const toWalletDisclosure = useDisclosure();
 
   if (!backendWalletBalance) {
     return null;
   }
 
   const onSubmit = async (data: SendFundsInput) => {
-    invariant(chain, "chain is required");
-
     const promise = sendTokens.mutateAsync(
       {
-        chainId: chain.chainId,
+        chainId: chainId,
         fromAddress: fromWallet.address,
         toAddress: data.toAddress,
         amount: data.amount,

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/utils.ts

@@ -3,9 +3,9 @@ export const prettyPrintCurrency = ({
   symbol,
 }: {
   amount?: string | number;
-  symbol: string;
+  symbol?: string;
 }): string => {
   const amountNumber =
     typeof amount === "string" ? Number.parseFloat(amount) : (amount ?? 0);
-  return `${amountNumber.toFixed(6)} ${symbol}`;
+  return `${amountNumber.toFixed(6)} ${symbol || ""}`;
 };