thirdweb 5.88.5-nightly-52cbcd2d57abf4d69ee417fe98fca815e19f2f34-20250216000400 → 5.88.5

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatTxDetailsTable.tsx

@@ -62,7 +62,7 @@ export function OnRampTxDetailsTable(props: {
           justifyContent: "space-between",
         }}
       >
-        <Text>Pay</Text>
+        <Text size="sm">Pay</Text>
         <Container
           flex="column"
           gap="xxs"

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts

@@ -76,14 +76,9 @@ export function useFromTokenSelectionStates(options: {
   payOptions: PayUIOptions;
   supportedSources: SupportedSourcesInputData[];
 }) {
-  const { payOptions, supportedSources } = options;
+  const { payOptions } = options;
 
-  // --------------------------------------------------------------------------
-  const firstSupportedSource = supportedSources?.length
-    ? supportedSources.length === 1
-      ? supportedSources[0]
-      : supportedSources.find((x) => x.chain.id !== 1) // dont use mainnet as a default source, unless its the only source
-    : undefined;
+  // TODO (pay) - auto select token based on connected wallet balances
 
   // Source token and chain selection ---------------------------------------------------
   const [fromChain_, setFromChain] = useState<Chain>();
@@ -95,12 +90,7 @@ export function useFromTokenSelectionStates(options: {
     (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
     (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain);
 
-  const fromChainFromApi = firstSupportedSource?.chain
-    ? firstSupportedSource.chain
-    : undefined;
-
-  const fromChain =
-    fromChain_ || fromChainDevSpecified || fromChainFromApi || polygon;
+  const fromChain = fromChain_ || fromChainDevSpecified || undefined;
 
   const [fromToken_, setFromToken] = useState<ERC20OrNativeToken>();
 
@@ -110,12 +100,8 @@ export function useFromTokenSelectionStates(options: {
       payOptions.buyWithCrypto?.prefillSource?.token) ||
     (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token);
 
-  // May be updated in the future
-  const fromTokenFromApi = NATIVE_TOKEN;
-
   // supported tokens query in here
-  const fromToken =
-    fromToken_ || fromTokenDevSpecified || fromTokenFromApi || NATIVE_TOKEN;
+  const fromToken = fromToken_ || fromTokenDevSpecified || undefined;
 
   return {
     fromChain,

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

@@ -12,29 +12,20 @@ import {
   type WaitForReceiptOptions,
   waitForReceipt,
 } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
-import { shortenAddress } from "../../../../../../../utils/address.js";
-import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import {
-  fontSize,
-  iconSize,
-} from "../../../../../../core/design-system/index.js";
-import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useEnsName } from "../../../../../../core/utils/wallet.js";
-import { Skeleton } from "../../../../components/Skeleton.js";
+import { iconSize } from "../../../../../../core/design-system/index.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { StepBar } from "../../../../components/StepBar.js";
 import { SwitchNetworkButton } from "../../../../components/SwitchNetwork.js";
-import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { Container, ModalHeader } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { StyledDiv } from "../../../../design-system/elements.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
-import { PayTokenIcon } from "../PayTokenIcon.js";
 import { Step } from "../Stepper.js";
 import type { PayerInfo } from "../types.js";
-import { formatSeconds } from "./formatSeconds.js";
+import { SwapSummary } from "./SwapSummary.js";
 import { addPendingTx } from "./pendingSwapTx.js";
 
 /**
@@ -74,9 +65,6 @@ export function SwapConfirmationScreen(props: {
 
   const receiver = props.quote.swapDetails.toAddress;
   const sender = props.quote.swapDetails.fromAddress;
-  const isDifferentRecipient = receiver.toLowerCase() !== sender.toLowerCase();
-
-  const ensName = useEnsName({ client: props.client, address: receiver });
 
   return (
     <Container p="lg">
@@ -94,58 +82,26 @@ export function SwapConfirmationScreen(props: {
           <Spacer y="md" />
         </>
       ) : (
-        <Spacer y="lg" />
-      )}
-
-      {/* Pay */}
-      <ConfirmItem label="Pay">
-        <RenderTokenInfo
-          chain={props.fromChain}
-          amount={String(formatNumber(Number(props.fromAmount), 6))}
-          symbol={props.fromTokenSymbol || ""}
-          token={props.fromToken}
-          client={props.client}
-        />
-      </ConfirmItem>
-
-      {/* Receive */}
-      {!isDifferentRecipient && (
-        <ConfirmItem label="Receive">
-          <RenderTokenInfo
-            chain={props.toChain}
-            amount={String(formatNumber(Number(props.toAmount), 6))}
-            symbol={props.toTokenSymbol}
-            token={props.toToken}
-            client={props.client}
-          />
-        </ConfirmItem>
+        <>
+          <Spacer y="lg" />
+          <Text size="sm">Confirm payment</Text>
+          <Spacer y="md" />
+        </>
       )}
 
-      {/* Fees  */}
-      <ConfirmItem label="Fees">
-        <SwapFeesRightAligned quote={props.quote} />
-      </ConfirmItem>
-
-      {/* Time  */}
-      <ConfirmItem label="Time">
-        <Text size="sm" color="primaryText">
-          ~
-          {formatSeconds(
-            props.quote.swapDetails.estimated.durationSeconds || 0,
-          )}
-        </Text>
-      </ConfirmItem>
-
-      {/* Send to  */}
-      {isDifferentRecipient && (
-        <ConfirmItem label="Receiver">
-          <Text color="primaryText" size="sm">
-            {ensName.data || shortenAddress(receiver)}
-          </Text>
-        </ConfirmItem>
-      )}
+      <SwapSummary
+        sender={sender}
+        receiver={receiver}
+        client={props.client}
+        fromToken={props.fromToken}
+        fromChain={props.fromChain}
+        toToken={props.toToken}
+        toChain={props.toChain}
+        fromAmount={props.fromAmount}
+        toAmount={props.toAmount}
+      />
 
-      <Spacer y="xl" />
+      <Spacer y="md" />
 
       {/* Show 2 steps - Approve and confirm  */}
       {needsApprovalStep && (
@@ -348,100 +304,3 @@ export const ConnectorLine = /* @__PURE__ */ StyledDiv(() => {
     flex: 1,
   };
 });
-
-function RenderTokenInfo(props: {
-  chain: Chain;
-  token: ERC20OrNativeToken;
-  amount: string;
-  symbol: string;
-  client: ThirdwebClient;
-}) {
-  const { name } = useChainName(props.chain);
-  return (
-    <Container
-      flex="column"
-      gap="xxs"
-      style={{
-        alignItems: "flex-end",
-      }}
-    >
-      <Container flex="row" center="y" gap="xs">
-        <Text color="primaryText" size="sm">
-          {props.amount} {props.symbol}
-        </Text>
-        <PayTokenIcon
-          token={props.token}
-          chain={props.chain}
-          size="xs"
-          client={props.client}
-        />
-      </Container>
-
-      {name ? (
-        <Text size="xs">{name}</Text>
-      ) : (
-        <Skeleton width="100px" height={fontSize.xs} />
-      )}
-    </Container>
-  );
-}
-
-function ConfirmItem(props: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <Container
-        flex="row"
-        gap="md"
-        py="md"
-        style={{
-          justifyContent: "space-between",
-        }}
-      >
-        <Text size="sm" color="secondaryText">
-          {props.label}
-        </Text>
-        {props.children}
-      </Container>
-      <Line />
-    </>
-  );
-}
-
-/**
- * @internal
- */
-function SwapFeesRightAligned(props: {
-  quote: BuyWithCryptoQuote;
-}) {
-  return (
-    <Container
-      flex="column"
-      gap="xs"
-      style={{
-        alignItems: "flex-end",
-      }}
-    >
-      {props.quote.processingFees.map((fee) => {
-        const feeAmount = formatNumber(Number(fee.amount), 6);
-        return (
-          <Container
-            key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
-            flex="row"
-            gap="xxs"
-          >
-            <Text color="primaryText" size="sm">
-              {feeAmount === 0 ? "~" : ""}
-              {feeAmount} {fee.token.symbol}
-            </Text>
-            <Text color="secondaryText" size="sm">
-              (${(fee.amountUSDCents / 100).toFixed(2)})
-            </Text>
-          </Container>
-        );
-      })}
-    </Container>
-  );
-}

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

@@ -16,7 +16,7 @@ import { TokenRow } from "../../../../components/token/TokenRow.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type NativeToken, isNativeToken } from "../../nativeToken.js";
-import { WalletRow } from "./TokenSelectorScreen.js";
+import { WalletRow } from "./WalletRow.js";
 
 /**
  * Shows an amount "value" and renders the selected token and chain
@@ -26,8 +26,8 @@ import { WalletRow } from "./TokenSelectorScreen.js";
  */
 export function PayWithCryptoQuoteInfo(props: {
   value: string;
-  chain: Chain;
-  token: TokenInfo | NativeToken;
+  chain: Chain | undefined;
+  token: TokenInfo | NativeToken | undefined;
   isLoading: boolean;
   client: ThirdwebClient;
   freezeChainAndTokenSelection?: boolean;
@@ -36,12 +36,19 @@ export function PayWithCryptoQuoteInfo(props: {
   onSelectToken: () => void;
 }) {
   const theme = useCustomTheme();
-  const balanceQuery = useWalletBalance({
-    address: props.payerAccount.address,
-    chain: props.chain,
-    tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
-    client: props.client,
-  });
+  const balanceQuery = useWalletBalance(
+    {
+      address: props.payerAccount.address,
+      chain: props.chain,
+      tokenAddress: isNativeToken(props.token)
+        ? undefined
+        : props.token?.address,
+      client: props.client,
+    },
+    {
+      enabled: !!props.chain && !!props.token,
+    },
+  );
 
   return (
     <Container
@@ -69,10 +76,10 @@ export function PayWithCryptoQuoteInfo(props: {
         }}
       >
         <WalletRow client={props.client} address={props.payerAccount.address} />
-        {balanceQuery.data ? (
+        {props.token && props.chain && balanceQuery.data ? (
           <Container flex="row" gap="3xs" center="y">
             <Text size="xs" color="secondaryText" weight={500}>
-              {formatTokenBalance(balanceQuery.data, false)}
+              {formatTokenBalance(balanceQuery.data, false, 4)}
             </Text>
             <TokenSymbol
               token={props.token}
@@ -81,11 +88,11 @@ export function PayWithCryptoQuoteInfo(props: {
               color="secondaryText"
             />
           </Container>
-        ) : (
+        ) : props.token && props.chain && balanceQuery.isLoading ? (
           <Skeleton width="70px" height={fontSize.xs} />
-        )}
+        ) : null}
       </Container>
-      {/* Quoted price */}
+      {/* Quoted price & token selector */}
       <TokenRow
         token={props.token}
         chain={props.chain}
@@ -96,6 +103,10 @@ export function PayWithCryptoQuoteInfo(props: {
         style={{
           border: "none",
           borderRadius: 0,
+          borderBottomLeftRadius:
+            !props.token || !props.chain || !props.swapRequired ? radius.lg : 0,
+          borderBottomRightRadius:
+            !props.token || !props.chain || !props.swapRequired ? radius.lg : 0,
         }}
       />
     </Container>

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>
+  );
+}