thirdweb 5.88.5-nightly-0574eac02c832c382972fd545df79c36e11796e1-20250217000342 → 5.88.6-nightly-b182302f590e75c9881cebd0ca1cc8b1425d50b8-20250218000338

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapScreenContent.tsx

@@ -42,8 +42,8 @@ export function SwapScreenContent(props: {
   tokenAmount: string;
   toToken: ERC20OrNativeToken;
   toChain: Chain;
-  fromChain: Chain;
-  fromToken: ERC20OrNativeToken;
+  fromChain: Chain | undefined;
+  fromToken: ERC20OrNativeToken | undefined;
   showFromTokenSelector: () => void;
   payer: PayerInfo;
   client: ThirdwebClient;
@@ -81,42 +81,50 @@ export function SwapScreenContent(props: {
     "fees" | "receiver" | "payer"
   >("fees");
 
-  const fromTokenBalanceQuery = useWalletBalance({
-    address: payer.account.address,
-    chain: fromChain,
-    tokenAddress: isNativeToken(fromToken) ? undefined : fromToken.address,
-    client,
-  });
+  const fromTokenBalanceQuery = useWalletBalance(
+    {
+      address: payer.account.address,
+      chain: fromChain,
+      tokenAddress: isNativeToken(fromToken) ? undefined : fromToken?.address,
+      client,
+    },
+    {
+      enabled: !!fromChain && !!fromToken,
+    },
+  );
 
   const fromTokenId = isNativeToken(fromToken)
     ? NATIVE_TOKEN_ADDRESS
-    : fromToken.address.toLowerCase();
+    : fromToken?.address?.toLowerCase();
   const toTokenId = isNativeToken(toToken)
     ? NATIVE_TOKEN_ADDRESS
     : toToken.address.toLowerCase();
   const swapRequired =
     !!tokenAmount &&
-    !(fromChain.id === toChain.id && fromTokenId === toTokenId);
-  const quoteParams: GetBuyWithCryptoQuoteParams | undefined = swapRequired
-    ? {
-        // wallets
-        fromAddress: payer.account.address,
-        toAddress: receiverAddress,
-        // from
-        fromChainId: fromChain.id,
-        fromTokenAddress: isNativeToken(fromToken)
-          ? NATIVE_TOKEN_ADDRESS
-          : fromToken.address,
-        // to
-        toChainId: toChain.id,
-        toTokenAddress: isNativeToken(toToken)
-          ? NATIVE_TOKEN_ADDRESS
-          : toToken.address,
-        toAmount: tokenAmount,
-        client,
-        purchaseData: payOptions.purchaseData,
-      }
-    : undefined;
+    !!fromChain &&
+    !!fromTokenId &&
+    !(fromChain?.id === toChain.id && fromTokenId === toTokenId);
+  const quoteParams: GetBuyWithCryptoQuoteParams | undefined =
+    fromChain && fromToken && swapRequired
+      ? {
+          // wallets
+          fromAddress: payer.account.address,
+          toAddress: receiverAddress,
+          // from
+          fromChainId: fromChain.id,
+          fromTokenAddress: isNativeToken(fromToken)
+            ? NATIVE_TOKEN_ADDRESS
+            : fromToken.address,
+          // to
+          toChainId: toChain.id,
+          toTokenAddress: isNativeToken(toToken)
+            ? NATIVE_TOKEN_ADDRESS
+            : toToken.address,
+          toAmount: tokenAmount,
+          client,
+          purchaseData: payOptions.purchaseData,
+        }
+      : undefined;
 
   const quoteQuery = useBuyWithCryptoQuote(quoteParams, {
     // refetch every 30 seconds
@@ -159,11 +167,13 @@ export function SwapScreenContent(props: {
     Number(fromTokenBalanceQuery.data.displayValue) < Number(sourceTokenAmount);
 
   const disableContinue =
+    !fromChain ||
+    !fromToken ||
     (swapRequired && !quoteQuery.data) ||
     isNotEnoughBalance ||
     allowanceQuery.isLoading;
   const switchChainRequired =
-    props.payer.wallet.getChain()?.id !== fromChain.id;
+    props.payer.wallet.getChain()?.id !== fromChain?.id;
 
   const errorMsg =
     !quoteQuery.isLoading && quoteQuery.error
@@ -240,6 +250,19 @@ export function SwapScreenContent(props: {
 
       {/* Quote info */}
       <Container flex="column" gap="sm">
+        <Container flex="row" gap="xxs" center="y">
+          <Text size="sm">Pay with</Text>
+          {fromToken && fromChain ? (
+            <TokenSymbol
+              token={fromToken}
+              chain={fromChain}
+              size="sm"
+              color="secondaryText"
+            />
+          ) : (
+            "crypto"
+          )}
+        </Container>
         <div>
           <PayWithCryptoQuoteInfo
             value={sourceTokenAmount || ""}
@@ -252,7 +275,7 @@ export function SwapScreenContent(props: {
             swapRequired={swapRequired}
             onSelectToken={props.showFromTokenSelector}
           />
-          {swapRequired && (
+          {swapRequired && fromChain && fromToken && (
             <EstimatedTimeAndFees
               quoteIsLoading={quoteQuery.isLoading}
               estimatedSeconds={
@@ -288,7 +311,7 @@ export function SwapScreenContent(props: {
         {!errorMsg && isNotEnoughBalance && (
           <div>
             <Text color="danger" size="xs" center multiline>
-              Not enough funds.
+              Insufficient funds
             </Text>
           </div>
         )}
@@ -317,9 +340,10 @@ export function SwapScreenContent(props: {
           fullWidth
           onClick={() => props.showFromTokenSelector()}
         >
-          Select another token
+          Pay with another token
         </Button>
       ) : switchChainRequired &&
+        fromChain &&
         !quoteQuery.isLoading &&
         !allowanceQuery.isLoading &&
         !isNotEnoughBalance &&

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapSummary.tsx

@@ -0,0 +1,134 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import type { Chain } from "../../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
+import {
+  iconSize,
+  radius,
+} from "../../../../../../core/design-system/index.js";
+import { Container } from "../../../../components/basic.js";
+import { TokenRow } from "../../../../components/token/TokenRow.js";
+import type { ERC20OrNativeToken } from "../../nativeToken.js";
+import { WalletRow } from "./WalletRow.js";
+
+export function SwapSummary(props: {
+  sender: string;
+  receiver: string;
+  client: ThirdwebClient;
+  fromToken: ERC20OrNativeToken;
+  fromChain: Chain;
+  toToken: ERC20OrNativeToken;
+  toChain: Chain;
+  fromAmount: string;
+  toAmount: string;
+}) {
+  const theme = useCustomTheme();
+  const isDifferentRecipient =
+    props.receiver.toLowerCase() !== props.sender.toLowerCase();
+  return (
+    <Container>
+      {/* Sell */}
+      <Container
+        bg="tertiaryBg"
+        flex="column"
+        style={{
+          borderRadius: radius.lg,
+          border: `1px solid ${theme.colors.borderColor}`,
+        }}
+      >
+        {isDifferentRecipient && (
+          <Container
+            flex="row"
+            gap="sm"
+            p="sm"
+            style={{
+              borderBottom: `1px solid ${theme.colors.borderColor}`,
+            }}
+          >
+            <WalletRow
+              address={props.sender}
+              client={props.client}
+              iconSize="md"
+              textSize="sm"
+            />
+          </Container>
+        )}
+        <TokenRow
+          token={props.fromToken}
+          chain={props.fromChain}
+          client={props.client}
+          isLoading={false}
+          value={props.fromAmount}
+          freezeChainAndToken={true}
+          onSelectToken={() => {}}
+          style={{
+            background: "transparent",
+            borderRadius: 0,
+            border: "none",
+          }}
+        />
+      </Container>
+      {/* Connector Icon */}
+      <Container flex="row" center="both" py="xxs">
+        <Container flex="column" center="both">
+          <ChevronDownIcon
+            width={iconSize.md}
+            height={iconSize.md}
+            style={{
+              color: theme.colors.secondaryIconColor,
+            }}
+          />
+          <ChevronDownIcon
+            width={iconSize.md}
+            height={iconSize.md}
+            style={{
+              color: theme.colors.secondaryIconColor,
+              marginTop: "-17px",
+            }}
+          />
+        </Container>
+      </Container>
+      {/* Buy */}
+      <Container
+        flex="column"
+        bg="tertiaryBg"
+        style={{
+          borderRadius: radius.lg,
+          border: `1px solid ${theme.colors.borderColor}`,
+        }}
+      >
+        {isDifferentRecipient && (
+          <Container
+            flex="row"
+            gap="sm"
+            p="sm"
+            style={{
+              borderBottom: `1px solid ${theme.colors.borderColor}`,
+            }}
+          >
+            <WalletRow
+              address={props.receiver}
+              client={props.client}
+              iconSize="md"
+              textSize="sm"
+            />
+          </Container>
+        )}
+        <TokenRow
+          token={props.toToken}
+          chain={props.toChain}
+          client={props.client}
+          isLoading={false}
+          value={props.toAmount}
+          freezeChainAndToken={true}
+          onSelectToken={() => {}}
+          style={{
+            background: "transparent",
+            borderRadius: 0,
+            border: "none",
+          }}
+        />
+      </Container>
+    </Container>
+  );
+}