diff --git a/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx index 6c3043d70d6..bb1ca8a1d7e 100644 --- a/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx +++ b/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} diff --git a/apps/dashboard/src/@/components/blocks/select-with-search.tsx b/apps/dashboard/src/@/components/blocks/select-with-search.tsx index 15cf8031f2f..fbeebfdb80b 100644 --- a/apps/dashboard/src/@/components/blocks/select-with-search.tsx +++ b/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={ diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts index 848b18d2177..d1f42871e43 100644 --- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts +++ b/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"); diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx index 1942f0c3a02..6bca0c96c2f 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx +++ b/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 = ({ instanceUrl: instanceUrl, address, authToken, + chainId, }); const chain = useV5DashboardChain(chainId); - if (!chain || !backendWalletBalance) { - return; + + if (!backendWalletBalance) { + return ; } const balanceDisplay = prettyPrintCurrency({ amount: backendWalletBalance.displayValue, - symbol: backendWalletBalance.symbol, + symbol: backendWalletBalance.symbol || chain.nativeCurrency?.symbol, }); const balanceComponent = ( - - {balanceDisplay} - +
{balanceDisplay}
); const explorer = chain.blockExplorers?.[0]; @@ -250,6 +248,7 @@ export const BackendWalletsTable: React.FC = ({ disclosure={sendDisclosure} instanceUrl={instanceUrl} authToken={authToken} + chainId={chainId} /> )} {selectedBackendWallet && deleteDisclosure.isOpen && ( @@ -425,24 +424,28 @@ const SendFundsModal = ({ disclosure, instanceUrl, authToken, + chainId, }: { fromWallet: BackendWallet; backendWallets: BackendWallet[]; disclosure: UseDisclosureReturn; instanceUrl: string; authToken: string; + chainId: number; }) => { - const chain = useActiveChainAsDashboardChain(); const form = useForm(); 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) { @@ -450,11 +453,9 @@ const SendFundsModal = ({ } 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, diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/utils.ts b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/utils.ts index 03d7bd77db4..75e6f6ca219 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/utils.ts +++ b/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 || ""}`; };