UI polish + auto refresh

Author: joaquim-verges

packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -234,7 +234,10 @@ export function useSendTransactionCore(args: {
                 return null;
               });
 
-              if (!supportedDestinations) {
+              if (
+                !supportedDestinations ||
+                supportedDestinations.length === 0
+              ) {
                 // not a supported detination -> show deposit screen
                 trackPayEvent({
                   client: tx.client,

packages/thirdweb/src/react/web/ui/ConnectWallet/locale/en.ts

@@ -68,7 +68,7 @@ const connectLocaleEn: ConnectLocale = {
   },
   receiveFundsScreen: {
     title: "Receive Funds",
-    instruction: "Copy the wallet address to send funds to this wallet",
+    instruction: "Copy the address to send funds to this wallet",
   },
   sendFundsScreen: {
     title: "Send Funds",

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/types.ts

@@ -1,3 +1,4 @@
+import type { ChainMetadata } from "../../../../../../../chains/types.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import type { GetWalletBalanceResult } from "../../../../../../../wallets/utils/getWalletBalance.js";
@@ -9,6 +10,7 @@ export type TransactionCostAndData = {
   walletBalance: GetWalletBalanceResult;
   transactionValueWei: bigint;
   gasCostWei: bigint;
+  chainMetadata: ChainMetadata;
 };
 
 export type SelectedScreen =

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts

@@ -18,6 +18,7 @@ export function useTransactionCostAndData(args: {
   transaction: PreparedTransaction;
   account: Account | undefined;
   supportedDestinations: SupportedChainAndTokens;
+  refetchIntervalMs?: number;
 }) {
   const { transaction, account, supportedDestinations } = args;
   // Compute query key of the transaction first
@@ -62,22 +63,24 @@ export function useTransactionCostAndData(args: {
 
       const erc20Value = await resolvePromisedValue(transaction.erc20Value);
       if (erc20Value) {
-        const [tokenBalance, tokenMeta, gasCostWei] = await Promise.all([
-          getWalletBalance({
-            address: account.address,
-            chain: transaction.chain,
-            client: transaction.client,
-            tokenAddress: erc20Value.tokenAddress,
-          }),
-          getCurrencyMetadata({
-            contract: getContract({
-              address: erc20Value.tokenAddress,
+        const [tokenBalance, tokenMeta, gasCostWei, chainMetadata] =
+          await Promise.all([
+            getWalletBalance({
+              address: account.address,
               chain: transaction.chain,
               client: transaction.client,
+              tokenAddress: erc20Value.tokenAddress,
             }),
-          }),
-          getTransactionGasCost(transaction, account?.address),
-        ]);
+            getCurrencyMetadata({
+              contract: getContract({
+                address: erc20Value.tokenAddress,
+                chain: transaction.chain,
+                client: transaction.client,
+              }),
+            }),
+            getTransactionGasCost(transaction, account?.address),
+            getChainMetadata(transaction.chain),
+          ]);
         const transactionValueWei = erc20Value.amountWei;
         const walletBalance = tokenBalance;
         const currency = {
@@ -95,6 +98,7 @@ export function useTransactionCostAndData(args: {
         return {
           token: currency,
           decimals: tokenMeta.decimals,
+          chainMetadata,
           walletBalance,
           gasCostWei,
           transactionValueWei,
@@ -121,19 +125,14 @@ export function useTransactionCostAndData(args: {
           symbol: chainMetadata.nativeCurrency.symbol,
           icon: chainMetadata.icon?.url,
         },
+        chainMetadata,
         decimals: 18,
         walletBalance,
         gasCostWei,
         transactionValueWei,
       } satisfies TransactionCostAndData;
     },
     enabled: !!transaction && !!txQueryKey,
-    refetchInterval: () => {
-      if (transaction.erc20Value) {
-        // if erc20 value is set, we don't need to poll
-        return undefined;
-      }
-      return 30_000;
-    },
+    refetchInterval: args.refetchIntervalMs || 30_000,
   });
 }