thirdweb 5.88.4 → 5.88.5-nightly-52cbcd2d57abf4d69ee417fe98fca815e19f2f34-20250216000400

package/dist/esm/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.js

@@ -1,139 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IdCardIcon } from "@radix-ui/react-icons";
-import { useQuery } from "@tanstack/react-query";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import { getWalletBalance, } from "../../../../../../../wallets/utils/getWalletBalance.js";
-import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import { iconSize, radius, spacing, } from "../../../../../../core/design-system/index.js";
-import { useChainMetadata } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
-import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js";
-import { LoadingScreen } from "../../../../../wallets/shared/LoadingScreen.js";
-import { Spacer } from "../../../../components/Spacer.js";
-import { Container } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
-import { Text } from "../../../../components/text.js";
-import { OutlineWalletIcon } from "../../../icons/OutlineWalletIcon.js";
-import { isNativeToken } from "../../nativeToken.js";
-import { WalletRowWithBalances } from "../WalletSelectorButton.js";
-export function PaymentSelectionScreen(props) {
-    const theme = useCustomTheme();
-    const connectedWallets = useConnectedWallets();
-    // if all wallets are connected and showAll wallets is disabled, hide the connect button
-    const hideConnectButton = !props.showAllWallets &&
-        props.wallets?.every((w) => connectedWallets.includes(w));
-    const chainInfo = useChainMetadata(props.toChain);
-    const activeAccount = useActiveAccount();
-    const walletsAndBalances = useQuery({
-        queryKey: [
-            "wallets-and-balances",
-            connectedWallets.map((w) => w.getAccount()?.address),
-            props.sourceSupportedTokens,
-            props.toChain.id,
-            props.toToken,
-            props.tokenAmount,
-            props.mode,
-            activeAccount?.address,
-        ],
-        queryFn: async () => {
-            // in parallel, get the balances of all the wallets on each of the sourceSupportedTokens
-            const walletBalanceMap = new Map();
-            const balancePromises = connectedWallets.flatMap((wallet) => {
-                const account = wallet.getAccount();
-                if (!account)
-                    return [];
-                walletBalanceMap.set(wallet, []);
-                // inject the destination token too since it can be used as well to pay/transfer
-                const toToken = isNativeToken(props.toToken)
-                    ? {
-                        address: NATIVE_TOKEN_ADDRESS,
-                        name: chainInfo.data?.nativeCurrency.name || "",
-                        symbol: chainInfo.data?.nativeCurrency.symbol || "",
-                        icon: chainInfo.data?.icon?.url,
-                    }
-                    : props.toToken;
-                const tokens = {
-                    ...props.sourceSupportedTokens,
-                    [props.toChain.id]: [
-                        toToken,
-                        ...(props.sourceSupportedTokens?.[props.toChain.id] || []),
-                    ],
-                };
-                return Object.entries(tokens).flatMap(([chainId, tokens]) => {
-                    return tokens.map(async (token) => {
-                        try {
-                            const chain = getCachedChain(Number(chainId));
-                            const balance = await getWalletBalance({
-                                address: account.address,
-                                chain,
-                                tokenAddress: isNativeToken(token) ? undefined : token.address,
-                                client: props.client,
-                            });
-                            // show the token if:
-                            // - its not the destination token and balance is greater than 0
-                            // - its the destination token and balance is greater than the token amount AND we the account is not the default account in fund_wallet mode
-                            const shouldInclude = token.address === toToken.address &&
-                                chain.id === props.toChain.id
-                                ? props.mode === "fund_wallet" &&
-                                    account.address === activeAccount?.address
-                                    ? false
-                                    : Number(balance.displayValue) > Number(props.tokenAmount)
-                                : balance.value > 0n;
-                            if (shouldInclude) {
-                                const existingBalances = walletBalanceMap.get(wallet) || [];
-                                existingBalances.push({ balance, chain, token });
-                                existingBalances.sort((a, b) => {
-                                    if (a.chain.id === props.toChain.id &&
-                                        a.token.address === toToken.address)
-                                        return -1;
-                                    if (b.chain.id === props.toChain.id &&
-                                        b.token.address === toToken.address)
-                                        return 1;
-                                    if (a.chain.id === props.toChain.id)
-                                        return -1;
-                                    if (b.chain.id === props.toChain.id)
-                                        return 1;
-                                    return a.chain.id > b.chain.id ? 1 : -1;
-                                });
-                            }
-                        }
-                        catch (error) {
-                            console.error(`Failed to fetch balance for wallet ${wallet.id} on chain ${chainId} for token ${token.symbol}:`, error);
-                        }
-                    });
-                });
-            });
-            await Promise.all(balancePromises);
-            return walletBalanceMap;
-        },
-        enabled: !!props.sourceSupportedTokens && !!chainInfo.data,
-    });
-    if (walletsAndBalances.isLoading || !walletsAndBalances.data) {
-        return _jsx(LoadingScreen, {});
-    }
-    const filteredWallets = Array.from(walletsAndBalances.data?.entries() || [])
-        .filter(([w]) => !props.hiddenWallets?.includes(w.id))
-        .filter(([, balances]) => {
-        const hasEnoughBalance = balances.some((b) => b.balance.value > 0);
-        return hasEnoughBalance;
-    });
-    return (_jsxs(Container, { children: [_jsxs(Container, { flex: "column", gap: "xs", children: [filteredWallets.length === 0 && (_jsx(Container, { flex: "column", gap: "xs", py: "md", children: _jsx(Text, { size: "xs", color: "secondaryText", center: true, children: _jsx("i", { children: "Insufficient funds in connected wallets" }) }) })), filteredWallets.map(([w, balances]) => {
-                        const address = w.getAccount()?.address;
-                        if (!address)
-                            return null;
-                        return (_jsx(WalletRowWithBalances, { wallet: w, balances: balances, client: props.client, address: address, onClick: props.onSelect }, w.id));
-                    }), !hideConnectButton && (_jsx(Button, { variant: "secondary", fullWidth: true, onClick: props.onConnect, gap: "xs", bg: "tertiaryBg", style: {
-                            borderRadius: radius.lg,
-                            border: `1px solid ${theme.colors.borderColor}`,
-                            padding: spacing.sm,
-                        }, children: _jsxs(Container, { flex: "row", gap: "sm", center: "y", expand: true, color: "secondaryIconColor", children: [_jsx(OutlineWalletIcon, { size: iconSize.md }), _jsx(Text, { size: "sm", color: "primaryText", children: "Pay with another wallet" })] }) })), props.payWithFiatEnabled && (_jsx(Button, { variant: "secondary", fullWidth: true, gap: "xs", bg: "tertiaryBg", onClick: props.onSelectFiat, style: {
-                            borderRadius: radius.lg,
-                            border: `1px solid ${theme.colors.borderColor}`,
-                            padding: spacing.sm,
-                        }, children: _jsxs(Container, { flex: "row", gap: "sm", center: "y", expand: true, color: "secondaryIconColor", children: [_jsx(IdCardIcon, { style: {
-                                        width: iconSize.md,
-                                        height: iconSize.md,
-                                    } }), _jsx(Text, { size: "sm", color: "primaryText", children: "Pay with credit card" })] }) }))] }), _jsx(Spacer, { y: "sm" })] }));
-}
-//# sourceMappingURL=PaymentSelectionScreen.js.map

package/dist/esm/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PaymentSelectionScreen.js","sourceRoot":"","sources":["../../../../../../../../../src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx"],"names":[],"mappings":"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"}

package/dist/types/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.d.ts

@@ -1,22 +0,0 @@
-import type { Chain } from "../../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../../client/client.js";
-import type { Wallet } from "../../../../../../wallets/interfaces/wallet.js";
-import type { WalletId } from "../../../../../../wallets/wallet-types.js";
-import { type fontSize, iconSize } from "../../../../../core/design-system/index.js";
-import type { TokenInfo } from "../../../../../core/utils/defaultTokens.js";
-import type { TokenBalance } from "./swap/PaymentSelectionScreen.js";
-export declare function WalletRowWithBalances(props: {
-    client: ThirdwebClient;
-    address: string;
-    wallet: Wallet;
-    balances: TokenBalance[];
-    onClick: (wallet: Wallet, token: TokenInfo, chain: Chain) => void;
-}): import("react/jsx-runtime.js").JSX.Element;
-export declare function WalletRow(props: {
-    client: ThirdwebClient;
-    address: string;
-    iconSize?: keyof typeof iconSize;
-    textSize?: keyof typeof fontSize;
-    walletId?: WalletId;
-}): import("react/jsx-runtime.js").JSX.Element;
-//# sourceMappingURL=WalletSelectorButton.d.ts.map

package/dist/types/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletSelectorButton.d.ts","sourceRoot":"","sources":["../../../../../../../../src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAEzE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAE1E,OAAO,EACL,KAAK,QAAQ,EACb,QAAQ,EAGT,MAAM,4CAA4C,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AAW5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAErE,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IAC3C,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnE,8CAsDA;AAwDD,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,8CAoDA"}

package/dist/types/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PaymentSelectionScreen.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAE5E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mDAAmD,CAAC;AAChF,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8CAA8C,CAAC;AAO7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+DAA+D,CAAC;AAIlG,OAAO,KAAK,EACV,eAAe,EACf,SAAS,EACV,MAAM,+CAA+C,CAAC;AAOvD,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,sBAAsB,CAAC;AAG9E,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE;IAC5C,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;IACxB,qBAAqB,EAAE,eAAe,GAAG,SAAS,CAAC;IACnD,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,kBAAkB,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACnE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;CAC7B,8CA8MA"}

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

@@ -1,220 +0,0 @@
-import styled from "@emotion/styled";
-import { ChevronRightIcon } from "@radix-ui/react-icons";
-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 { 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 { FiatValue } from "./swap/FiatValue.js";
-import type { TokenBalance } from "./swap/PaymentSelectionScreen.js";
-
-export function WalletRowWithBalances(props: {
-  client: ThirdwebClient;
-  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}`,
-      }}
-    >
-      <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>
-        )}
-      </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"
-    >
-      <Container flex="row" center="y" gap="md">
-        <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>
-      </Container>
-      <Container flex="row" center="y" gap="3xs" color="secondaryText">
-        <Container
-          flex="column"
-          color="secondaryText"
-          gap="3xs"
-          style={{
-            justifyContent: "flex-end",
-            alignItems: "flex-end",
-          }}
-        >
-          <Text size="xs" color="primaryText">
-            {formatTokenBalance(tokenBalance.balance, true, 2)}
-          </Text>
-          <FiatValue
-            tokenAmount={tokenBalance.balance.displayValue}
-            token={tokenBalance.token}
-            chain={tokenBalance.chain}
-            client={client}
-            size="xs"
-          />
-        </Container>
-        <ChevronRightIcon width={iconSize.md} height={iconSize.md} />
-      </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 walletId = props.walletId;
-  const theme = useCustomTheme();
-  const ensNameQuery = useEnsName({
-    client,
-    address,
-  });
-  const addressOrENS = ensNameQuery.data || shortenAddress(address);
-  const ensAvatarQuery = useEnsAvatar({
-    client,
-    ensName: ensNameQuery.data,
-  });
-  return (
-    <Container flex="row" center="y" gap="sm" color="secondaryText">
-      {ensAvatarQuery.data ? (
-        <Img
-          src={ensAvatarQuery.data}
-          width={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
-          height={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
-          style={{
-            borderRadius: radius.sm,
-            overflow: "hidden",
-            border: `1px solid ${theme.colors.borderColor}`,
-          }}
-          client={props.client}
-        />
-      ) : walletId ? (
-        <WalletImage
-          id={walletId}
-          size={props.iconSize || iconSize.md}
-          client={props.client}
-        />
-      ) : (
-        <Container
-          style={{
-            width: iconSize.md,
-            height: iconSize.md,
-            borderRadius: radius.sm,
-            overflow: "hidden",
-            border: `1px solid ${theme.colors.borderColor}`,
-          }}
-        >
-          <Blobbie address={props.address} size={Number(iconSize.md)} />
-        </Container>
-      )}
-
-      <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: "space-between",
-    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/swap/PaymentSelectionScreen.tsx

@@ -1,263 +0,0 @@
-import { IdCardIcon } from "@radix-ui/react-icons";
-import { useQuery } from "@tanstack/react-query";
-import type { Chain } from "../../../../../../../chains/types.js";
-import { getCachedChain } from "../../../../../../../chains/utils.js";
-import type { ThirdwebClient } from "../../../../../../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
-import {
-  type GetWalletBalanceResult,
-  getWalletBalance,
-} from "../../../../../../../wallets/utils/getWalletBalance.js";
-import type { WalletId } from "../../../../../../../wallets/wallet-types.js";
-import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import {
-  iconSize,
-  radius,
-  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 { useActiveAccount } from "../../../../../../core/hooks/wallets/useActiveAccount.js";
-import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js";
-import type {
-  SupportedTokens,
-  TokenInfo,
-} from "../../../../../../core/utils/defaultTokens.js";
-import { LoadingScreen } from "../../../../../wallets/shared/LoadingScreen.js";
-import { Spacer } from "../../../../components/Spacer.js";
-import { Container } from "../../../../components/basic.js";
-import { Button } from "../../../../components/buttons.js";
-import { Text } from "../../../../components/text.js";
-import { OutlineWalletIcon } from "../../../icons/OutlineWalletIcon.js";
-import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
-import { WalletRowWithBalances } from "../WalletSelectorButton.js";
-
-export type TokenBalance = {
-  balance: GetWalletBalanceResult;
-  chain: Chain;
-  token: TokenInfo;
-};
-
-export function PaymentSelectionScreen(props: {
-  client: ThirdwebClient;
-  mode: PayUIOptions["mode"];
-  showAllWallets: boolean;
-  sourceSupportedTokens: SupportedTokens | undefined;
-  toChain: Chain;
-  toToken: ERC20OrNativeToken;
-  tokenAmount: string;
-  wallets: Wallet[] | undefined;
-  onSelect: (wallet: Wallet, token: TokenInfo, chain: Chain) => void;
-  onSelectFiat: () => void;
-  onBack: () => void;
-  onConnect: () => void;
-  hiddenWallets?: WalletId[];
-  payWithFiatEnabled: boolean;
-}) {
-  const theme = useCustomTheme();
-  const connectedWallets = useConnectedWallets();
-
-  // if all wallets are connected and showAll wallets is disabled, hide the connect button
-  const hideConnectButton =
-    !props.showAllWallets &&
-    props.wallets?.every((w) => connectedWallets.includes(w));
-
-  const chainInfo = useChainMetadata(props.toChain);
-  const activeAccount = useActiveAccount();
-
-  const walletsAndBalances = useQuery({
-    queryKey: [
-      "wallets-and-balances",
-      connectedWallets.map((w) => w.getAccount()?.address),
-      props.sourceSupportedTokens,
-      props.toChain.id,
-      props.toToken,
-      props.tokenAmount,
-      props.mode,
-      activeAccount?.address,
-    ],
-    queryFn: async () => {
-      // in parallel, get the balances of all the wallets on each of the sourceSupportedTokens
-      const walletBalanceMap = new Map<Wallet, TokenBalance[]>();
-
-      const balancePromises = connectedWallets.flatMap((wallet) => {
-        const account = wallet.getAccount();
-        if (!account) return [];
-        walletBalanceMap.set(wallet, []);
-
-        // inject the destination token too since it can be used as well to pay/transfer
-        const toToken = isNativeToken(props.toToken)
-          ? {
-              address: NATIVE_TOKEN_ADDRESS,
-              name: chainInfo.data?.nativeCurrency.name || "",
-              symbol: chainInfo.data?.nativeCurrency.symbol || "",
-              icon: chainInfo.data?.icon?.url,
-            }
-          : props.toToken;
-
-        const tokens = {
-          ...props.sourceSupportedTokens,
-          [props.toChain.id]: [
-            toToken,
-            ...(props.sourceSupportedTokens?.[props.toChain.id] || []),
-          ],
-        };
-
-        return Object.entries(tokens).flatMap(([chainId, tokens]) => {
-          return tokens.map(async (token) => {
-            try {
-              const chain = getCachedChain(Number(chainId));
-              const balance = await getWalletBalance({
-                address: account.address,
-                chain,
-                tokenAddress: isNativeToken(token) ? undefined : token.address,
-                client: props.client,
-              });
-
-              // show the token if:
-              // - its not the destination token and balance is greater than 0
-              // - its the destination token and balance is greater than the token amount AND we the account is not the default account in fund_wallet mode
-              const shouldInclude =
-                token.address === toToken.address &&
-                chain.id === props.toChain.id
-                  ? props.mode === "fund_wallet" &&
-                    account.address === activeAccount?.address
-                    ? false
-                    : Number(balance.displayValue) > Number(props.tokenAmount)
-                  : balance.value > 0n;
-
-              if (shouldInclude) {
-                const existingBalances = walletBalanceMap.get(wallet) || [];
-                existingBalances.push({ balance, chain, token });
-                existingBalances.sort((a, b) => {
-                  if (
-                    a.chain.id === props.toChain.id &&
-                    a.token.address === toToken.address
-                  )
-                    return -1;
-                  if (
-                    b.chain.id === props.toChain.id &&
-                    b.token.address === toToken.address
-                  )
-                    return 1;
-                  if (a.chain.id === props.toChain.id) return -1;
-                  if (b.chain.id === props.toChain.id) return 1;
-                  return a.chain.id > b.chain.id ? 1 : -1;
-                });
-              }
-            } catch (error) {
-              console.error(
-                `Failed to fetch balance for wallet ${wallet.id} on chain ${chainId} for token ${token.symbol}:`,
-                error,
-              );
-            }
-          });
-        });
-      });
-
-      await Promise.all(balancePromises);
-      return walletBalanceMap;
-    },
-    enabled: !!props.sourceSupportedTokens && !!chainInfo.data,
-  });
-
-  if (walletsAndBalances.isLoading || !walletsAndBalances.data) {
-    return <LoadingScreen />;
-  }
-
-  const filteredWallets = Array.from(walletsAndBalances.data?.entries() || [])
-    .filter(([w]) => !props.hiddenWallets?.includes(w.id))
-    .filter(([, balances]) => {
-      const hasEnoughBalance = balances.some((b) => b.balance.value > 0);
-      return hasEnoughBalance;
-    });
-
-  return (
-    <Container>
-      <Container flex="column" gap="xs">
-        {filteredWallets.length === 0 && (
-          <Container flex="column" gap="xs" py="md">
-            <Text size="xs" color="secondaryText" center>
-              <i>Insufficient funds in connected wallets</i>
-            </Text>
-          </Container>
-        )}
-        {filteredWallets.map(([w, balances]) => {
-          const address = w.getAccount()?.address;
-          if (!address) return null;
-          return (
-            <WalletRowWithBalances
-              key={w.id}
-              wallet={w}
-              balances={balances}
-              client={props.client}
-              address={address}
-              onClick={props.onSelect}
-            />
-          );
-        })}
-        {!hideConnectButton && (
-          <Button
-            variant="secondary"
-            fullWidth
-            onClick={props.onConnect}
-            gap="xs"
-            bg="tertiaryBg"
-            style={{
-              borderRadius: radius.lg,
-              border: `1px solid ${theme.colors.borderColor}`,
-              padding: spacing.sm,
-            }}
-          >
-            <Container
-              flex="row"
-              gap="sm"
-              center="y"
-              expand
-              color="secondaryIconColor"
-            >
-              <OutlineWalletIcon size={iconSize.md} />
-              <Text size="sm" color="primaryText">
-                Pay with another wallet
-              </Text>
-            </Container>
-          </Button>
-        )}
-        {props.payWithFiatEnabled && (
-          <Button
-            variant="secondary"
-            fullWidth
-            gap="xs"
-            bg="tertiaryBg"
-            onClick={props.onSelectFiat}
-            style={{
-              borderRadius: radius.lg,
-              border: `1px solid ${theme.colors.borderColor}`,
-              padding: spacing.sm,
-            }}
-          >
-            <Container
-              flex="row"
-              gap="sm"
-              center="y"
-              expand
-              color="secondaryIconColor"
-            >
-              <IdCardIcon
-                style={{
-                  width: iconSize.md,
-                  height: iconSize.md,
-                }}
-              />
-              <Text size="sm" color="primaryText">
-                Pay with credit card
-              </Text>
-            </Container>
-          </Button>
-        )}
-      </Container>
-      <Spacer y="sm" />
-    </Container>
-  );
-}