improvements

Author: joaquim-verges

apps/playground-web/src/components/pay/transaction-button.tsx

@@ -13,7 +13,6 @@ import {
   useActiveAccount,
   useReadContract,
 } from "thirdweb/react";
-import { toWei } from "thirdweb/utils";
 import { THIRDWEB_CLIENT } from "../../lib/client";
 import { StyledConnectButton } from "../styled-connect-button";
 

packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx

@@ -13,18 +13,19 @@ import {
 } from "../../../core/design-system/index.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { hasSponsoredTransactionsEnabled } from "../../../core/utils/wallet.js";
 import { ErrorState } from "../../wallets/shared/ErrorState.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
 import { CoinsIcon } from "../ConnectWallet/icons/CoinsIcon.js";
 import type { ConnectLocale } from "../ConnectWallet/locale/types.js";
 import { useTransactionCostAndData } from "../ConnectWallet/screens/Buy/main/useBuyTxStates.js";
 import { WalletRow } from "../ConnectWallet/screens/Buy/swap/WalletRow.js";
 import { formatTokenBalance } from "../ConnectWallet/screens/formatTokenBalance.js";
+import { isNativeToken } from "../ConnectWallet/screens/nativeToken.js";
 import { CopyIcon } from "../components/CopyIcon.js";
 import { QRCode } from "../components/QRCode.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { Spacer } from "../components/Spacer.js";
-import { Spinner } from "../components/Spinner.js";
 import { WalletImage } from "../components/WalletImage.js";
 import { Container, ModalHeader } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
@@ -99,6 +100,8 @@ export function DepositScreen(props: {
     refetchIntervalMs: 10_000,
   });
   const theme = useCustomTheme();
+  const sponsoredTransactionsEnabled =
+    hasSponsoredTransactionsEnabled(activeWallet);
 
   if (transactionCostAndDataError) {
     return (
@@ -122,13 +125,16 @@ export function DepositScreen(props: {
     return <LoadingScreen />;
   }
 
+  const totalCost =
+    isNativeToken(transactionCostAndData.token) && !sponsoredTransactionsEnabled
+      ? transactionCostAndData.transactionValueWei +
+        transactionCostAndData.gasCostWei
+      : transactionCostAndData.transactionValueWei;
   const insufficientFunds =
-    transactionCostAndData.walletBalance.value <
-    transactionCostAndData.transactionValueWei;
+    transactionCostAndData.walletBalance.value < totalCost;
   const requiredFunds = transactionCostAndData.walletBalance.value
-    ? transactionCostAndData.transactionValueWei -
-      transactionCostAndData.walletBalance.value
-    : transactionCostAndData.transactionValueWei;
+    ? totalCost - transactionCostAndData.walletBalance.value
+    : totalCost;
 
   const openFaucetLink = () => {
     window.open(
@@ -175,29 +181,26 @@ export function DepositScreen(props: {
               client={client}
             />
           )}
-          {transactionCostAndData.walletBalance.value ? (
+          {transactionCostAndData.walletBalance.value !== undefined &&
+          !transactionCostAndDataFetching ? (
             <Container flex="row" gap="3xs" center="y">
-              {transactionCostAndDataFetching ? (
-                <Spinner size="sm" color="secondaryText" />
-              ) : (
-                <>
-                  <Text size="xs" color="secondaryText" weight={500}>
-                    {formatTokenBalance(
-                      transactionCostAndData.walletBalance,
-                      false,
-                    )}
-                  </Text>
-                  <TokenSymbol
-                    token={transactionCostAndData.token}
-                    chain={props.tx.chain}
-                    size="xs"
-                    color="secondaryText"
-                  />
-                </>
-              )}
+              <Text size="xs" color="secondaryText" weight={500}>
+                {formatTokenBalance(
+                  transactionCostAndData.walletBalance,
+                  false,
+                )}
+              </Text>
+              <TokenSymbol
+                token={transactionCostAndData.token}
+                chain={props.tx.chain}
+                size="xs"
+                color="secondaryText"
+              />
             </Container>
           ) : (
-            <Skeleton width="70px" height={fontSize.xs} />
+            <Container flex="row" gap="3xs" center="y">
+              <Skeleton width="70px" height={fontSize.xs} />
+            </Container>
           )}
         </Container>
       </Container>

packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx

@@ -24,13 +24,15 @@ export function ExecutingTxScreen(props: {
     payModal: false,
   });
   const [txHash, setTxHash] = useState<Hex | undefined>();
+  const [txError, setTxError] = useState<Error | undefined>();
   const chainExplorers = useChainExplorers(props.tx.chain);
   const [status, setStatus] = useState<"loading" | "failed" | "sent">(
     "loading",
   );
 
   const sendTx = useCallback(async () => {
     setStatus("loading");
+    setTxError(undefined);
     try {
       const txData = await sendTxCore.mutateAsync(props.tx);
       setTxHash(txData.transactionHash);
@@ -40,6 +42,7 @@ export function ExecutingTxScreen(props: {
       // Do not reject the transaction here, because the user may want to try again
       // we only reject on modal close
       console.error(e);
+      setTxError(e as Error);
       setStatus("failed");
     }
   }, [sendTxCore, props.tx, props.onTxSent]);
@@ -81,9 +84,7 @@ export function ExecutingTxScreen(props: {
       </Text>
       <Spacer y="sm" />
       <Text color="danger" center size="sm">
-        {status === "failed" && sendTxCore.error
-          ? sendTxCore.error.message
-          : ""}
+        {status === "failed" && txError ? txError.message || "" : ""}
       </Text>
 
       <Spacer y="xxl" />