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

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -8,11 +8,9 @@ import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getSta
 import { formatNumber } from "../../../../../../utils/formatNumber.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import type { WalletId } from "../../../../../../wallets/wallet-types.js";
-import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
 import {
   type Theme,
   fontSize,
-  radius,
   spacing,
 } from "../../../../../core/design-system/index.js";
 import type {
@@ -27,10 +25,9 @@ import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainName } from "../../../components/ChainName.js";
 import { Spacer } from "../../../components/Spacer.js";
-import { Container, ModalHeader } from "../../../components/basic.js";
+import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Input } from "../../../components/formElements.js";
-import { Text } from "../../../components/text.js";
 import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
 import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
@@ -432,67 +429,6 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     );
   }
 
-  if (
-    screen.id === "select-from-token" &&
-    supportedSourcesQuery.data &&
-    sourceSupportedTokens
-  ) {
-    const chains = supportedSourcesQuery.data.map((x) => x.chain);
-    const goBack = () => setScreen(screen.backScreen);
-    // if token selection is disabled - only show network selector screen
-    if (
-      payOptions.buyWithCrypto !== false &&
-      payOptions.buyWithCrypto?.prefillSource?.allowEdits?.token === false
-    ) {
-      return (
-        <ChainSelectionScreen
-          chains={chains}
-          client={props.client}
-          connectLocale={props.connectLocale}
-          setChain={setFromChain}
-          goBack={goBack}
-        />
-      );
-    }
-
-    return (
-      <TokenSelectorScreen
-        onBack={goBack}
-        onConnect={() => {
-          setScreen({
-            id: "connect-payer-wallet",
-            backScreen: screen,
-          });
-        }}
-        modalTitle="Available tokens"
-        connectLocale={props.connectLocale}
-        client={props.client}
-        sourceTokens={sourceSupportedTokens}
-        sourceSupportedTokens={sourceSupportedTokens}
-        toChain={toChain}
-        toToken={toToken}
-        tokenAmount={tokenAmount}
-        fromChain={fromChain}
-        fromToken={fromToken}
-        mode={payOptions.mode}
-        hiddenWallets={props.hiddenWallets}
-        onSelect={(w, token, chain) => {
-          const account = w.getAccount();
-          if (account) {
-            setPayer({
-              account,
-              chain,
-              wallet: w,
-            });
-            setFromToken(token);
-            setFromChain(chain);
-          }
-          goBack();
-        }}
-      />
-    );
-  }
-
   return (
     <Container animate="fadein">
       <div>
@@ -526,19 +462,10 @@ function BuyScreenContent(props: BuyScreenContentProps) {
 
         {(screen.id === "select-payment-method" ||
           screen.id === "buy-with-crypto" ||
-          screen.id === "buy-with-fiat") &&
+          screen.id === "buy-with-fiat" ||
+          screen.id === "select-from-token") &&
           payer && (
             <TokenSelectedLayout
-              isBuyWithFiatEnabled={enabledPaymentMethods.buyWithFiatEnabled}
-              isBuyWithCryptoEnabled={
-                enabledPaymentMethods.buyWithCryptoEnabled
-              }
-              mode={screen.id === "buy-with-fiat" ? "buy" : "swap"}
-              onModeChange={(mode) => {
-                setScreen({
-                  id: mode === "swap" ? "buy-with-crypto" : "buy-with-fiat",
-                });
-              }}
               disabled={
                 ("prefillBuy" in payOptions &&
                   payOptions.prefillBuy?.allowEdits?.amount === false) ||
@@ -551,7 +478,19 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               setTokenAmount={setTokenAmount}
               client={client}
               onBack={() => {
-                setScreen({ id: "main" });
+                if (
+                  screen.id === "buy-with-crypto" ||
+                  screen.id === "buy-with-fiat"
+                ) {
+                  setScreen({
+                    id: "select-from-token",
+                    backScreen: { id: "main" },
+                  });
+                } else if (screen.id === "select-from-token") {
+                  setScreen(screen.backScreen);
+                } else {
+                  setScreen({ id: "main" });
+                }
               }}
             >
               {screen.id === "buy-with-crypto" && activeAccount && (
@@ -614,6 +553,45 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   setHasEditedAmount={setHasEditedAmount}
                 />
               )}
+
+              {screen.id === "select-from-token" &&
+                supportedSourcesQuery.data &&
+                sourceSupportedTokens && (
+                  <TokenSelectorScreen
+                    client={props.client}
+                    sourceTokens={sourceSupportedTokens}
+                    sourceSupportedTokens={sourceSupportedTokens}
+                    toChain={toChain}
+                    toToken={toToken}
+                    tokenAmount={tokenAmount}
+                    mode={payOptions.mode}
+                    hiddenWallets={props.hiddenWallets}
+                    onConnect={() => {
+                      setScreen({
+                        id: "connect-payer-wallet",
+                        backScreen: screen,
+                      });
+                    }}
+                    onPayWithFiat={() => {
+                      setScreen({
+                        id: "buy-with-fiat",
+                      });
+                    }}
+                    onSelectToken={(w, token, chain) => {
+                      const account = w.getAccount();
+                      if (account) {
+                        setPayer({
+                          account,
+                          chain,
+                          wallet: w,
+                        });
+                        setFromToken(token);
+                        setFromChain(chain);
+                      }
+                      setScreen({ id: "buy-with-crypto" });
+                    }}
+                  />
+                )}
             </TokenSelectedLayout>
           )}
       </div>
@@ -802,7 +780,10 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "buy-with-crypto" });
+              props.setScreen({
+                id: "select-from-token",
+                backScreen: { id: "main" },
+              });
             }
           }}
         />
@@ -825,7 +806,10 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "buy-with-crypto" });
+              props.setScreen({
+                id: "select-from-token",
+                backScreen: { id: "main" },
+              });
             }
           }}
         />
@@ -888,7 +872,10 @@ function MainScreen(props: {
                   if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
                     props.setScreen({ id: "buy-with-fiat" });
                   } else {
-                    props.setScreen({ id: "buy-with-crypto" });
+                    props.setScreen({
+                      id: "select-from-token",
+                      backScreen: { id: "main" },
+                    });
                   }
                 }}
               >
@@ -912,12 +899,7 @@ function TokenSelectedLayout(props: {
   client: ThirdwebClient;
   onBack: () => void;
   disabled?: boolean;
-  mode: "buy" | "swap";
-  onModeChange: (mode: "buy" | "swap") => void;
-  isBuyWithFiatEnabled: boolean;
-  isBuyWithCryptoEnabled: boolean;
 }) {
-  const theme = useCustomTheme();
   return (
     <Container>
       <Container p="lg">
@@ -940,78 +922,9 @@ function TokenSelectedLayout(props: {
           disabled={props.disabled}
         />
 
-        <Spacer y="lg" />
-        <Container flex="row" gap="md" center="y">
-          <Text size="sm"> Pay with </Text>
-          {props.isBuyWithFiatEnabled && props.isBuyWithCryptoEnabled && (
-            <Container
-              flex="row"
-              style={{
-                flex: 1,
-                justifyContent: "center",
-                borderRadius: radius.xl,
-                border: `1px solid ${theme.colors.borderColor}`,
-                alignItems: "stretch",
-              }}
-            >
-              <Button
-                variant="ghost"
-                style={{
-                  flex: 1,
-                  background:
-                    props.mode === "swap"
-                      ? theme.colors.tertiaryBg
-                      : "transparent",
-                  borderRadius: radius.xl,
-                  borderTopRightRadius: 0,
-                  borderBottomRightRadius: 0,
-                  padding: spacing.xs,
-                }}
-                onClick={() => props.onModeChange("swap")}
-              >
-                <Text
-                  size="sm"
-                  color={
-                    props.mode === "swap" ? "primaryText" : "secondaryText"
-                  }
-                >
-                  Crypto
-                </Text>
-              </Button>
-              <div
-                style={{
-                  width: "1px",
-                  background: theme.colors.borderColor,
-                }}
-              />
-              <Button
-                variant="ghost"
-                style={{
-                  flex: 1,
-                  background:
-                    props.mode === "buy"
-                      ? theme.colors.tertiaryBg
-                      : "transparent",
-                  borderRadius: radius.xl,
-                  borderTopLeftRadius: 0,
-                  borderBottomLeftRadius: 0,
-                  padding: spacing.xs,
-                }}
-                onClick={() => props.onModeChange("buy")}
-              >
-                <Text
-                  size="sm"
-                  color={props.mode === "buy" ? "primaryText" : "secondaryText"}
-                >
-                  Card
-                </Text>
-              </Button>
-            </Container>
-          )}
-        </Container>
-
-        <Spacer y="lg" />
-
+        <Spacer y="sm" />
+        <Line />
+        <Spacer y="sm" />
         {props.children}
       </Container>
     </Container>

package/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx

@@ -33,7 +33,7 @@ import {
   isNativeToken,
 } from "../nativeToken.js";
 import { useTransactionCostAndData } from "./main/useBuyTxStates.js";
-import { WalletRow } from "./swap/TokenSelectorScreen.js";
+import { WalletRow } from "./swap/WalletRow.js";
 import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
 
 export function TransactionModeScreen(props: {

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

@@ -199,6 +199,7 @@ export function FiatScreenContent(props: {
       )}
 
       <Container flex="column" gap="sm">
+        <Text size="sm">Pay with credit card</Text>
         <div>
           <PayWithCreditCard
             isLoading={fiatQuoteQuery.isLoading}

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>