thirdweb 5.88.4 → 5.88.5-nightly-52cbcd2d57abf4d69ee417fe98fca815e19f2f34-20250216000400

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

@@ -5,11 +5,14 @@ import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
 import type { BuyWithCryptoStatus } from "../../../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../../../pay/buyWithFiat/getStatus.js";
+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 {
@@ -24,7 +27,7 @@ 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, Line, ModalHeader } from "../../../components/basic.js";
+import { Container, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Input } from "../../../components/formElements.js";
 import { Text } from "../../../components/text.js";
@@ -53,9 +56,9 @@ import {
 } from "./main/useUISelectionStates.js";
 import { BuyTokenInput } from "./swap/BuyTokenInput.js";
 import { FiatValue } from "./swap/FiatValue.js";
-import { PaymentSelectionScreen } from "./swap/PaymentSelectionScreen.js";
 import { SwapFlow } from "./swap/SwapFlow.js";
 import { SwapScreenContent } from "./swap/SwapScreenContent.js";
+import { TokenSelectorScreen } from "./swap/TokenSelectorScreen.js";
 import { TransferFlow } from "./swap/TransferFlow.js";
 import {
   type SupportedChainAndTokens,
@@ -453,30 +456,39 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     }
 
     return (
-      <TokenSelector
+      <TokenSelectorScreen
         onBack={goBack}
-        tokenList={(
-          (fromChain?.id ? sourceSupportedTokens[fromChain.id] : undefined) ||
-          []
-        ).filter((x) => x.address !== NATIVE_TOKEN_ADDRESS)}
-        onTokenSelect={(tokenInfo) => {
-          setFromToken(tokenInfo);
+        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();
         }}
-        chain={fromChain}
-        chainSelection={
-          // hide chain selection if it's disabled
-          payOptions.buyWithCrypto !== false &&
-          payOptions.buyWithCrypto?.prefillSource?.allowEdits?.chain !== false
-            ? {
-                chains: supportedSourcesQuery.data.map((x) => x.chain),
-                select: (c) => setFromChain(c),
-              }
-            : undefined
-        }
-        connectLocale={connectLocale}
-        client={client}
-        modalTitle="Pay with"
       />
     );
   }
@@ -517,6 +529,16 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           screen.id === "buy-with-fiat") &&
           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) ||
@@ -529,60 +551,9 @@ function BuyScreenContent(props: BuyScreenContentProps) {
               setTokenAmount={setTokenAmount}
               client={client}
               onBack={() => {
-                if (
-                  enabledPaymentMethods.buyWithCryptoEnabled &&
-                  screen.id === "buy-with-fiat"
-                ) {
-                  setScreen({ id: "select-payment-method" });
-                } else if (screen.id === "buy-with-crypto") {
-                  setScreen({ id: "select-payment-method" });
-                } else {
-                  setScreen({ id: "main" });
-                }
+                setScreen({ id: "main" });
               }}
             >
-              {screen.id === "select-payment-method" && (
-                <PaymentSelectionScreen
-                  client={client}
-                  mode={payOptions.mode}
-                  sourceSupportedTokens={sourceSupportedTokens}
-                  hiddenWallets={props.hiddenWallets}
-                  payWithFiatEnabled={props.payOptions.buyWithFiat !== false}
-                  toChain={toChain}
-                  toToken={toToken}
-                  tokenAmount={tokenAmount}
-                  onSelect={(w, token, chain) => {
-                    const account = w.getAccount();
-                    if (account) {
-                      setPayer({
-                        account,
-                        chain,
-                        wallet: w,
-                      });
-                      setFromToken(token);
-                      setFromChain(chain);
-                      setScreen({ id: "buy-with-crypto" });
-                    }
-                  }}
-                  onSelectFiat={() => {
-                    setScreen({ id: "buy-with-fiat" });
-                  }}
-                  showAllWallets={!!props.connectOptions?.showAllWallets}
-                  wallets={props.connectOptions?.wallets}
-                  onBack={() => {
-                    // no-op
-                  }}
-                  onConnect={() => {
-                    setScreen({
-                      id: "connect-payer-wallet",
-                      backScreen: {
-                        id: "select-payment-method",
-                      },
-                    });
-                  }}
-                />
-              )}
-
               {screen.id === "buy-with-crypto" && activeAccount && (
                 <SwapScreenContent
                   setScreen={setScreen}
@@ -659,8 +630,9 @@ function SelectedTokenInfo(props: {
   disabled?: boolean;
 }) {
   const getWidth = () => {
-    let chars = props.tokenAmount.replace(".", "").length;
-    const hasDot = props.tokenAmount.includes(".");
+    const amount = formatNumber(Number(props.tokenAmount), 5).toString();
+    let chars = amount.replace(".", "").length;
+    const hasDot = amount.includes(".");
     if (hasDot) {
       chars += 0.3;
     }
@@ -685,7 +657,11 @@ function SelectedTokenInfo(props: {
             placeholder="0"
             type="text"
             data-placeholder={props.tokenAmount === ""}
-            value={props.tokenAmount || "0"}
+            value={
+              props.tokenAmount
+                ? formatNumber(Number(props.tokenAmount), 5)
+                : "0"
+            }
             disabled={props.disabled}
             onClick={(e) => {
               // put cursor at the end of the input
@@ -826,7 +802,7 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "select-payment-method" });
+              props.setScreen({ id: "buy-with-crypto" });
             }
           }}
         />
@@ -849,7 +825,7 @@ function MainScreen(props: {
             if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
               props.setScreen({ id: "buy-with-fiat" });
             } else {
-              props.setScreen({ id: "select-payment-method" });
+              props.setScreen({ id: "buy-with-crypto" });
             }
           }}
         />
@@ -885,7 +861,7 @@ function MainScreen(props: {
             client={props.client}
           />
 
-          <Spacer y="xl" />
+          <Spacer y="md" />
 
           {/* Continue */}
           <Container flex="column" gap="sm">
@@ -912,7 +888,7 @@ function MainScreen(props: {
                   if (buyWithFiatEnabled && !buyWithCryptoEnabled) {
                     props.setScreen({ id: "buy-with-fiat" });
                   } else {
-                    props.setScreen({ id: "select-payment-method" });
+                    props.setScreen({ id: "buy-with-crypto" });
                   }
                 }}
               >
@@ -936,7 +912,12 @@ 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">
@@ -959,12 +940,77 @@ function TokenSelectedLayout(props: {
           disabled={props.disabled}
         />
 
-        <Spacer y="md" />
-        <Line />
         <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>
 
-        <Text size="sm"> Pay with </Text>
-        <Spacer y="sm" />
+        <Spacer y="lg" />
 
         {props.children}
       </Container>

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

@@ -82,7 +82,12 @@ export function PayWithCreditCard(props: {
           <Skeleton width="100px" height={fontSize.lg} />
         ) : (
           <Text size="lg" color={props.value ? "primaryText" : "secondaryText"}>
-            {props.value ? `${formatNumber(Number(props.value), 6)}` : "--"}
+            {props.value
+              ? `${props.currency.symbol}${formatNumber(
+                  Number(props.value),
+                  6,
+                )}`
+              : "--"}
           </Text>
         )}
       </div>

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

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

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

@@ -157,7 +157,7 @@ export function FiatScreenContent(props: {
       : undefined;
 
   return (
-    <Container flex="column" gap="md" animate="fadein">
+    <Container flex="column" gap="lg" animate="fadein">
       {isOpen && (
         <>
           <DrawerOverlay ref={drawerOverlayRef} />
@@ -198,74 +198,75 @@ export function FiatScreenContent(props: {
         </>
       )}
 
-      <div>
-        <PayWithCreditCard
-          isLoading={fiatQuoteQuery.isLoading}
-          value={fiatQuoteQuery.data?.fromCurrencyWithFees.amount}
-          client={client}
-          currency={selectedCurrency}
-          onSelectCurrency={showCurrencySelector}
-        />
-        <Container
-          bg="tertiaryBg"
-          flex="row"
-          borderColor="borderColor"
-          style={{
-            paddingLeft: spacing.md,
-            justifyContent: "space-between",
-            alignItems: "center",
-            borderWidth: "1px",
-            borderStyle: "solid",
-            borderBottom: "none",
-          }}
-        >
-          <Text size="xs" color="secondaryText">
-            Provider
-          </Text>
-          <Button variant="ghost" onClick={showProviders}>
-            <Container flex="row" center="y" gap="xxs" color="secondaryText">
-              <Text size="xs">
-                {preferredProvider
-                  ? `${preferredProvider.charAt(0).toUpperCase() + preferredProvider.slice(1).toLowerCase()}`
-                  : fiatQuoteQuery.data?.provider
-                    ? `${fiatQuoteQuery.data?.provider.charAt(0).toUpperCase() + fiatQuoteQuery.data?.provider.slice(1).toLowerCase()}`
-                    : ""}
-              </Text>
-              <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
-            </Container>
-          </Button>
-        </Container>
-        {/* Estimated time + View fees button */}
-        <EstimatedTimeAndFees
-          quoteIsLoading={fiatQuoteQuery.isLoading}
-          estimatedSeconds={fiatQuoteQuery.data?.estimatedDurationSeconds}
-          onViewFees={showFees}
-        />
-        <Spacer y="md" />
-      </div>
-
-      {/* Error message */}
-      {errorMsg && (
+      <Container flex="column" gap="sm">
         <div>
-          {errorMsg.data?.minimumAmountEth ? (
-            <Text color="danger" size="sm" center multiline>
-              Minimum amount is{" "}
-              {formatNumber(Number(errorMsg.data.minimumAmountEth), 6)}{" "}
-              <TokenSymbol
-                token={toToken}
-                chain={toChain}
-                size="sm"
-                inline
-                color="danger"
-              />
+          <PayWithCreditCard
+            isLoading={fiatQuoteQuery.isLoading}
+            value={fiatQuoteQuery.data?.fromCurrencyWithFees.amount}
+            client={client}
+            currency={selectedCurrency}
+            onSelectCurrency={showCurrencySelector}
+          />
+          <Container
+            bg="tertiaryBg"
+            flex="row"
+            borderColor="borderColor"
+            style={{
+              paddingLeft: spacing.md,
+              justifyContent: "space-between",
+              alignItems: "center",
+              borderWidth: "1px",
+              borderStyle: "solid",
+              borderBottom: "none",
+            }}
+          >
+            <Text size="xs" color="secondaryText">
+              Provider
             </Text>
-          ) : (
-            <Text color="danger" size="sm" center multiline>
-              {errorMsg.message || defaultMessage}
-            </Text>
-          )}
+            <Button variant="ghost" onClick={showProviders}>
+              <Container flex="row" center="y" gap="xxs" color="secondaryText">
+                <Text size="xs">
+                  {preferredProvider
+                    ? `${preferredProvider.charAt(0).toUpperCase() + preferredProvider.slice(1).toLowerCase()}`
+                    : fiatQuoteQuery.data?.provider
+                      ? `${fiatQuoteQuery.data?.provider.charAt(0).toUpperCase() + fiatQuoteQuery.data?.provider.slice(1).toLowerCase()}`
+                      : ""}
+                </Text>
+                <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
+              </Container>
+            </Button>
+          </Container>
+          {/* Estimated time + View fees button */}
+          <EstimatedTimeAndFees
+            quoteIsLoading={fiatQuoteQuery.isLoading}
+            estimatedSeconds={fiatQuoteQuery.data?.estimatedDurationSeconds}
+            onViewFees={showFees}
+          />
         </div>
-      )}
+
+        {/* Error message */}
+        {errorMsg && (
+          <div>
+            {errorMsg.data?.minimumAmountEth ? (
+              <Text color="danger" size="sm" center multiline>
+                Minimum amount is{" "}
+                {formatNumber(Number(errorMsg.data.minimumAmountEth), 6)}{" "}
+                <TokenSymbol
+                  token={toToken}
+                  chain={toChain}
+                  size="sm"
+                  inline
+                  color="danger"
+                />
+              </Text>
+            ) : (
+              <Text color="danger" size="sm" center multiline>
+                {errorMsg.message || defaultMessage}
+              </Text>
+            )}
+          </div>
+        )}
+      </Container>
 
       {errorMsg?.data?.minimumAmountEth ? (
         <Button

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

@@ -9,12 +9,14 @@ import type { IconFC } from "../../../icons/types.js";
 export type CurrencyMeta = {
   shorthand: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
   name: string;
+  symbol: string;
   icon: IconFC;
 };
 
 export const usdCurrency: CurrencyMeta = {
   shorthand: "USD",
   name: "US Dollar",
+  symbol: "$",
   icon: USDIcon,
 };
 
@@ -23,21 +25,25 @@ export const currencies: CurrencyMeta[] = [
   {
     shorthand: "CAD",
     name: "Canadian Dollar",
+    symbol: "$",
     icon: CADIcon,
   },
   {
     shorthand: "GBP",
     name: "British Pound",
+    symbol: "£",
     icon: GBPIcon,
   },
   {
     shorthand: "EUR",
     name: "Euro",
+    symbol: "€",
     icon: EURIcon,
   },
   {
     shorthand: "JPY",
     name: "Japanese Yen",
+    symbol: "¥",
     icon: JPYIcon,
   },
 ];
@@ -51,6 +57,7 @@ export function getCurrencyMeta(shorthand: string): CurrencyMeta {
       // This should never happen
       icon: UnknownCurrencyIcon,
       name: shorthand,
+      symbol: "$",
       shorthand: shorthand as CurrencyMeta["shorthand"],
     }
   );

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

@@ -80,7 +80,9 @@ export function useFromTokenSelectionStates(options: {
 
   // --------------------------------------------------------------------------
   const firstSupportedSource = supportedSources?.length
-    ? supportedSources[0]
+    ? 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;
 
   // Source token and chain selection ---------------------------------------------------

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

@@ -1,21 +1,10 @@
-import styled from "@emotion/styled";
-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 {
-  fontSize,
-  iconSize,
-  spacing,
-} from "../../../../../../core/design-system/index.js";
-import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { Skeleton } from "../../../../components/Skeleton.js";
+import { fontSize } from "../../../../../../core/design-system/index.js";
 import { Spacer } from "../../../../components/Spacer.js";
-import { TokenIcon } from "../../../../components/TokenIcon.js";
 import { Container } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
 import { Input } from "../../../../components/formElements.js";
-import { Text } from "../../../../components/text.js";
+import { TokenRow } from "../../../../components/token/TokenRow.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import { getBuyTokenAmountFontSize } from "../utils.js";
@@ -35,7 +24,6 @@ export function BuyTokenInput(props: {
   freezeAmount?: boolean;
   freezeChainAndToken?: boolean;
 }) {
-  const { name } = useChainName(props.chain);
   const getWidth = () => {
     let chars = props.value.replace(".", "").length;
     const hasDot = props.value.includes(".");
@@ -144,70 +132,16 @@ export function BuyTokenInput(props: {
 
           {/* Token / Chain selector */}
           <Container flex="row" center="x">
-            <TokenButton
-              variant="secondary"
-              fullWidth
-              style={{
-                fontSize: fontSize.sm,
-              }}
-              gap="xxs"
-              onClick={props.onSelectToken}
-              disabled={props.freezeChainAndToken}
-            >
-              <Container flex="row" center="y" gap="sm">
-                <TokenIcon
-                  token={props.token}
-                  chain={props.chain}
-                  size="md"
-                  client={props.client}
-                />
-
-                <Container
-                  flex="column"
-                  style={{
-                    gap: "4px",
-                  }}
-                >
-                  {/* Token Symbol */}
-                  <TokenSymbol
-                    token={props.token}
-                    chain={props.chain}
-                    size="sm"
-                  />
-
-                  {/* Network Name */}
-                  {name ? (
-                    <Text size="xs" color="secondaryText">
-                      {name}
-                    </Text>
-                  ) : (
-                    <Skeleton width="90px" height={fontSize.xs} />
-                  )}
-                </Container>
-              </Container>
-
-              <ChevronDownIcon
-                width={iconSize.sm}
-                height={iconSize.sm}
-                style={{
-                  marginLeft: "auto",
-                }}
-              />
-            </TokenButton>
+            <TokenRow
+              token={props.token}
+              chain={props.chain}
+              client={props.client}
+              onSelectToken={props.onSelectToken}
+              freezeChainAndToken={props.freezeChainAndToken}
+            />
           </Container>
         </>
       )}
     </Container>
   );
 }
-
-const TokenButton = /* @__PURE__ */ styled(Button)(() => {
-  const theme = useCustomTheme();
-  return {
-    background: theme.colors.tertiaryBg,
-    border: `1px solid ${theme.colors.borderColor}`,
-    justifyContent: "flex-start",
-    transition: "background 0.3s",
-    padding: spacing.sm,
-  };
-});