thirdweb 5.64.2 → 5.64.3

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

@@ -6,23 +6,32 @@ import { formatNumber } from "../../../../../../utils/formatNumber.js";
 import { toTokens } from "../../../../../../utils/units.js";
 import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
-import { iconSize, spacing } from "../../../../../core/design-system/index.js";
+import { fontSize, spacing } from "../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useChainMetadata } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBalance.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 { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
 import { ChainIcon } from "../../../components/ChainIcon.js";
 import { Img } from "../../../components/Img.js";
+import { Skeleton } from "../../../components/Skeleton.js";
 import { Spacer } from "../../../components/Spacer.js";
 import { TokenIcon } from "../../../components/TokenIcon.js";
-import { WalletImage } from "../../../components/WalletImage.js";
 import { Container, Line, ModalHeader } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
+import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
 import { ConnectButton } from "../../ConnectButton.js";
-import type { ERC20OrNativeToken } from "../nativeToken.js";
+import { formatTokenBalance } from "../formatTokenBalance.js";
+import {
+  type ERC20OrNativeToken,
+  NATIVE_TOKEN,
+  isNativeToken,
+} from "../nativeToken.js";
+import { WalletRow } from "./WalletSelectorButton.js";
 import { useTransactionCostAndData } from "./main/useBuyTxStates.js";
 import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
 
@@ -54,8 +63,22 @@ export function TransactionModeScreen(props: {
   });
   const theme = useCustomTheme();
   const activeWallet = useActiveWallet();
+  const activeAccount = useActiveAccount();
   const sponsoredTransactionsEnabled =
     hasSponsoredTransactionsEnabled(activeWallet);
+  const balanceQuery = useWalletBalance(
+    {
+      address: activeAccount?.address,
+      chain: payUiOptions.transaction.chain,
+      tokenAddress: isNativeToken(transactionCostAndData?.token || NATIVE_TOKEN)
+        ? undefined
+        : transactionCostAndData?.token.address,
+      client: props.client,
+    },
+    {
+      enabled: !!transactionCostAndData,
+    },
+  );
 
   if (!transactionCostAndData || !chainData) {
     return <LoadingScreen />;
@@ -74,39 +97,47 @@ export function TransactionModeScreen(props: {
             style={{
               width: "100%",
               borderRadius: spacing.md,
+              border: `1px solid ${theme.colors.borderColor}`,
               backgroundColor: theme.colors.tertiaryBg,
             }}
           />
-        ) : activeWallet ? (
-          <Container
-            flex="row"
-            center="both"
-            style={{
-              padding: spacing.md,
-              marginBottom: spacing.md,
-              borderRadius: spacing.md,
-              backgroundColor: theme.colors.tertiaryBg,
-            }}
-          >
-            <WalletImage
-              size={iconSize.xl}
-              id={activeWallet.id}
-              client={client}
-            />
-            <div
+        ) : activeAccount ? (
+          <Container flex="column" gap="sm">
+            <Text size="sm" color="danger" style={{ textAlign: "center" }}>
+              Insufficient funds
+            </Text>
+            <Container
+              flex="row"
               style={{
-                flexGrow: 1,
-                borderBottom: "6px dotted",
-                borderColor: theme.colors.secondaryIconColor,
-                marginLeft: spacing.md,
-                marginRight: spacing.md,
+                justifyContent: "space-between",
+                padding: spacing.sm,
+                marginBottom: spacing.sm,
+                borderRadius: spacing.md,
+                backgroundColor: theme.colors.tertiaryBg,
+                border: `1px solid ${theme.colors.borderColor}`,
               }}
-            />
-            <ChainIcon
-              client={client}
-              size={iconSize.xl}
-              chainIconUrl={chainData.icon?.url}
-            />
+            >
+              <WalletRow
+                address={activeAccount?.address}
+                iconSize="md"
+                client={client}
+              />
+              {balanceQuery.data ? (
+                <Container flex="row" gap="3xs" center="y">
+                  <Text size="xs" color="secondaryText" weight={500}>
+                    {formatTokenBalance(balanceQuery.data, false, 3)}
+                  </Text>
+                  <TokenSymbol
+                    token={transactionCostAndData.token}
+                    chain={payUiOptions.transaction.chain}
+                    size="xs"
+                    color="secondaryText"
+                  />
+                </Container>
+              ) : (
+                <Skeleton width="70px" height={fontSize.xs} />
+              )}
+            </Container>
           </Container>
         ) : null}
         <Spacer y="md" />

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

@@ -1,83 +1,137 @@
-import { CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons";
+import styled from "@emotion/styled";
+import { useState } from "react";
+import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { shortenAddress } from "../../../../../../utils/address.js";
+import type { Wallet } from "../../../../../../wallets/interfaces/wallet.js";
 import type { WalletId } from "../../../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
 import {
+  type fontSize,
   iconSize,
   radius,
   spacing,
 } from "../../../../../core/design-system/index.js";
-import { useConnectedWallets } from "../../../../../core/hooks/wallets/useConnectedWallets.js";
+import { useChainName } from "../../../../../core/hooks/others/useChainQuery.js";
+import type { TokenInfo } from "../../../../../core/utils/defaultTokens.js";
 import { useEnsAvatar, useEnsName } from "../../../../../core/utils/wallet.js";
 import { Img } from "../../../components/Img.js";
+import { TokenIcon } from "../../../components/TokenIcon.js";
 import { WalletImage } from "../../../components/WalletImage.js";
 import { Container } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
+import { Blobbie } from "../../Blobbie.js";
+import { formatTokenBalance } from "../formatTokenBalance.js";
+import type { TokenBalance } from "./swap/PaymentSelectionScreen.js";
 
-export function WalletSelectorButton(props: {
-  address: string;
-  walletId: WalletId | undefined;
-  onClick: () => void;
+export function WalletRowWithBalances(props: {
   client: ThirdwebClient;
-  containerStyle?: React.CSSProperties;
-  disableChevron?: boolean;
-  disabled?: boolean;
-  checked?: boolean;
+  address: string;
+  wallet: Wallet;
+  balances: TokenBalance[];
+  onClick: (wallet: Wallet, token: TokenInfo, chain: Chain) => void;
 }) {
   const theme = useCustomTheme();
+  const [showAll, setShowAll] = useState(false);
+  const maxDisplayedBalances = 3;
+  const displayedBalances = showAll
+    ? props.balances
+    : props.balances.slice(0, maxDisplayedBalances);
+
   return (
     <Container
       bg="tertiaryBg"
       style={{
         borderRadius: radius.lg,
         border: `1px solid ${theme.colors.borderColor}`,
-        ...props.containerStyle,
       }}
     >
-      <Button
-        fullWidth
-        disabled={props.disabled}
-        onClick={props.onClick}
-        variant="ghost"
-        style={{
-          justifyContent: "space-between",
-          padding: spacing.sm,
-          backgroundColor: theme.colors.tertiaryBg,
-        }}
-        gap="sm"
-      >
-        <WalletRow client={props.client} address={props.address} />
-        {!props.disableChevron && (
-          <ChevronDownIcon
-            width={iconSize.sm}
-            height={iconSize.sm}
-            style={{
-              color: theme.colors.secondaryText,
-            }}
-          />
-        )}
-
-        {props.checked && (
-          <CheckIcon width={iconSize.md} height={iconSize.md} />
+      <Container style={{ padding: spacing.sm }}>
+        <WalletRow {...props} />
+      </Container>
+      <div style={{ borderTop: `1px solid ${theme.colors.borderColor}` }} />
+      <Container flex="column">
+        {props.balances.length > 0 ? (
+          <>
+            {displayedBalances.map((b) => (
+              <TokenBalanceRow
+                client={props.client}
+                onClick={() => props.onClick(props.wallet, b.token, b.chain)}
+                key={`${b.token.address}-${b.chain.id}`}
+                tokenBalance={b}
+                wallet={props.wallet}
+              />
+            ))}
+            {props.balances.length > maxDisplayedBalances && (
+              <StyledButton
+                variant="secondary"
+                onClick={() => setShowAll(!showAll)}
+                style={{
+                  justifyContent: "start",
+                }}
+              >
+                <Text size="xs">{showAll ? "Show less" : "Show more"}</Text>
+              </StyledButton>
+            )}
+          </>
+        ) : (
+          <Container style={{ padding: spacing.sm }}>
+            <Text size="sm" color="secondaryText">
+              Not enough funds
+            </Text>
+          </Container>
         )}
-      </Button>
+      </Container>
     </Container>
   );
 }
 
+function TokenBalanceRow(props: {
+  client: ThirdwebClient;
+  tokenBalance: TokenBalance;
+  wallet: Wallet;
+  onClick: (token: TokenInfo, wallet: Wallet) => void;
+}) {
+  const { tokenBalance, wallet, onClick, client } = props;
+  const chainInfo = useChainName(tokenBalance.chain);
+  return (
+    <StyledButton
+      onClick={() => onClick(tokenBalance.token, wallet)}
+      variant="secondary"
+    >
+      <TokenIcon
+        token={tokenBalance.token}
+        chain={tokenBalance.chain}
+        size="md"
+        client={client}
+      />
+      <Container flex="column" gap="3xs">
+        <Text size="xs" color="primaryText">
+          {tokenBalance.token.symbol}
+        </Text>
+        {chainInfo && <Text size="xs">{chainInfo.name}</Text>}
+      </Container>
+      <div style={{ flex: 1 }} />
+      <Container flex="row" center="y" gap="3xs">
+        <Text size="xs" color="secondaryText">
+          {formatTokenBalance(tokenBalance.balance, true, 3)}
+        </Text>
+      </Container>
+    </StyledButton>
+  );
+}
+
 export function WalletRow(props: {
   client: ThirdwebClient;
   address: string;
+  iconSize?: keyof typeof iconSize;
+  textSize?: keyof typeof fontSize;
   walletId?: WalletId;
 }) {
   const { client, address } = props;
-  const connectedWallets = useConnectedWallets();
-  const wallet = connectedWallets.find(
-    (x) => x.getAccount()?.address === props.address,
-  );
-  const walletId = props.walletId || wallet?.id;
+  const walletId = props.walletId;
+  const theme = useCustomTheme();
   const ensNameQuery = useEnsName({
     client,
     address,
@@ -92,20 +146,54 @@ export function WalletRow(props: {
       {ensAvatarQuery.data ? (
         <Img
           src={ensAvatarQuery.data}
-          width={iconSize.md}
-          height={iconSize.md}
+          width={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
+          height={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
           style={{
-            borderRadius: radius.sm,
+            borderRadius: "100%",
+            overflow: "hidden",
+            border: `1px solid ${theme.colors.borderColor}`,
           }}
           client={props.client}
         />
       ) : walletId ? (
-        <WalletImage id={walletId} size={iconSize.md} client={props.client} />
-      ) : null}
+        <WalletImage
+          id={walletId}
+          size={props.iconSize || iconSize.md}
+          client={props.client}
+        />
+      ) : (
+        <Container
+          style={{
+            width: iconSize.md,
+            height: iconSize.md,
+            borderRadius: "100%",
+            overflow: "hidden",
+            border: `1px solid ${theme.colors.borderColor}`,
+          }}
+        >
+          <Blobbie address={props.address} size={Number(iconSize.md)} />
+        </Container>
+      )}
 
-      <Text size="sm" color="primaryText">
+      <Text size={props.textSize || "sm"} color="primaryText">
         {addressOrENS || shortenAddress(props.address)}
       </Text>
     </Container>
   );
 }
+
+const StyledButton = /* @__PURE__ */ styled(Button)((_) => {
+  const theme = useCustomTheme();
+  return {
+    background: theme.colors.tertiaryBg,
+    justifyContent: "flex-start",
+    flexDirection: "row",
+    padding: spacing.sm,
+    gap: spacing.sm,
+    "&:hover": {
+      background: theme.colors.secondaryButtonBg,
+      transform: "scale(1.01)",
+    },
+    transition: "background 200ms ease, transform 150ms ease",
+  };
+});

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

@@ -13,7 +13,7 @@ export type TransactionCostAndData = {
 
 export type SelectedScreen =
   | {
-      id: "main" | "select-payment-method" | "buy-with-fiat" | "select-wallet";
+      id: "main" | "select-payment-method" | "buy-with-fiat";
     }
   | {
       id: "buy-with-crypto";

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

@@ -8,7 +8,6 @@ import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js"
 // change the current method if it should be disabled
 // return whether the payment selection should be shown or not ( if only one payment method is enabled, don't show the selection )
 export type PaymentMethods = {
-  showPaymentSelection: boolean;
   buyWithFiatEnabled: boolean;
   buyWithCryptoEnabled: boolean;
 };
@@ -59,11 +58,8 @@ export function useEnabledPaymentMethods(options: {
   const buyWithFiatEnabled = payOptions.buyWithFiat !== false && fiat;
   const buyWithCryptoEnabled = payOptions.buyWithCrypto !== false && swap;
 
-  const showPaymentSelection = buyWithFiatEnabled && buyWithCryptoEnabled;
-
   return {
     buyWithFiatEnabled,
     buyWithCryptoEnabled,
-    showPaymentSelection,
   };
 }

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

@@ -1,11 +1,10 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
+import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
-  iconSize,
   radius,
   spacing,
 } from "../../../../../../core/design-system/index.js";
@@ -14,13 +13,12 @@ import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletB
 import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Container } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
-import { GenericWalletIcon } from "../../../icons/GenericWalletIcon.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type NativeToken, isNativeToken } from "../../nativeToken.js";
 import { PayTokenIcon } from "../PayTokenIcon.js";
+import { WalletRow } from "../WalletSelectorButton.js";
 
 /**
  * Shows an amount "value" and renders the selected token and chain
@@ -28,9 +26,8 @@ import { PayTokenIcon } from "../PayTokenIcon.js";
  * It also renders the balance of active wallet for the selected token in selected chain
  * @internal
  */
-export function PayWithCrypto(props: {
+export function PayWithCryptoQuoteInfo(props: {
   value: string;
-  onSelectToken: () => void;
   chain: Chain;
   token: TokenInfo | NativeToken;
   isLoading: boolean;
@@ -39,8 +36,8 @@ export function PayWithCrypto(props: {
   payerAccount: Account;
   swapRequired: boolean;
 }) {
+  const theme = useCustomTheme();
   const { name } = useChainName(props.chain);
-
   const balanceQuery = useWalletBalance({
     address: props.payerAccount.address,
     chain: props.chain,
@@ -51,36 +48,56 @@ export function PayWithCrypto(props: {
   return (
     <Container
       bg="tertiaryBg"
-      borderColor="borderColor"
-      flex="row"
       style={{
-        borderWidth: "1px",
-        borderTopWidth: 0,
-        borderStyle: "solid",
-        flexWrap: "nowrap",
-        justifyContent: "space-between",
-        minHeight: "64px",
-        alignItems: "center",
+        borderRadius: radius.lg,
+        border: `1px solid ${theme.colors.borderColor}`,
         ...(props.swapRequired
-          ? { borderBottom: "none" }
-          : {
-              borderBottomLeftRadius: radius.md,
-              borderBottomRightRadius: radius.md,
-            }),
+          ? {
+              borderBottom: "none",
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+            }
+          : {}),
       }}
     >
-      {/* Left */}
-      <Button
-        variant="ghost"
-        onClick={props.onSelectToken}
+      {/* Wallet and balance */}
+      <Container
+        flex="row"
+        gap="sm"
+        style={{
+          justifyContent: "space-between",
+          padding: spacing.sm,
+          borderBottom: `1px solid ${theme.colors.borderColor}`,
+        }}
+      >
+        <WalletRow client={props.client} address={props.payerAccount.address} />
+        {balanceQuery.data ? (
+          <Container flex="row" gap="3xs" center="y">
+            <Text size="xs" color="secondaryText" weight={500}>
+              {formatTokenBalance(balanceQuery.data, false, 3)}
+            </Text>
+            <TokenSymbol
+              token={props.token}
+              chain={props.chain}
+              size="xs"
+              color="secondaryText"
+            />
+          </Container>
+        ) : (
+          <Skeleton width="70px" height={fontSize.xs} />
+        )}
+      </Container>
+      {/* Quoted price */}
+      <Container
+        flex="row"
         gap="sm"
         style={{
           paddingInline: spacing.sm,
           paddingBlock: spacing.sm,
           minWidth: "50%",
           justifyContent: "flex-start",
+          minHeight: "64px",
         }}
-        disabled={props.freezeChainAndTokenSelection}
       >
         <PayTokenIcon
           token={props.token}
@@ -89,57 +106,26 @@ export function PayWithCrypto(props: {
           client={props.client}
         />
         <Container flex="column" gap="3xs">
-          <Container flex="row" gap="xs" center="y" color="primaryText">
-            <TokenSymbol token={props.token} chain={props.chain} size="sm" />
-            <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
-          </Container>
+          {props.isLoading ? (
+            <Skeleton width="120px" height={fontSize.md} color="borderColor" />
+          ) : (
+            <Container flex="row" gap="xxs" center="y" color="primaryText">
+              <Text
+                size="md"
+                color={props.value ? "primaryText" : "secondaryText"}
+              >
+                {formatNumber(Number(props.value), 6) || ""}
+              </Text>
+              <TokenSymbol token={props.token} chain={props.chain} size="sm" />
+            </Container>
+          )}
           {name ? (
             <Text size="xs">{name}</Text>
           ) : (
             <Skeleton width="90px" height={fontSize.xs} />
           )}
         </Container>
-      </Button>
-
-      {/* Right */}
-      <div
-        style={{
-          flexGrow: 1,
-          flexShrink: 1,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "flex-end",
-          gap: spacing.xxs,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          justifyContent: "center",
-          paddingRight: spacing.sm,
-        }}
-      >
-        {props.isLoading ? (
-          <Skeleton width="120px" height={fontSize.md} color="borderColor" />
-        ) : (
-          <Text
-            size="md"
-            color={props.value ? "primaryText" : "secondaryText"}
-            style={{}}
-          >
-            {formatNumber(Number(props.value), 6) || ""}
-          </Text>
-        )}
-
-        <Container flex="row" gap="xxs" center="y" color="secondaryText">
-          <GenericWalletIcon size={fontSize.xs} />
-          {balanceQuery.data ? (
-            <Text size="xs" color="secondaryText" weight={500}>
-              {formatTokenBalance(balanceQuery.data, false)}
-            </Text>
-          ) : (
-            <Skeleton width="70px" height={fontSize.xs} />
-          )}
-        </Container>
-      </div>
+      </Container>
     </Container>
   );
 }