diff --git a/.changeset/kind-pets-mate.md b/.changeset/kind-pets-mate.md
new file mode 100644
index 00000000000..f4c04a92af6
--- /dev/null
+++ b/.changeset/kind-pets-mate.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+PayEmbed UI polish
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx
index 9abfe2decae..a183a509a0d 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx
@@ -1,4 +1,5 @@
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";
@@ -22,7 +23,7 @@ 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: {
@@ -100,23 +101,29 @@ function TokenBalanceRow(props: {
onClick={() => onClick(tokenBalance.token, wallet)}
variant="secondary"
>
-
-
-
- {tokenBalance.token.symbol}
-
- {chainInfo && {chainInfo.name}}
+
+
+
+
+ {tokenBalance.token.symbol}
+
+ {chainInfo && {chainInfo.name}}
+
-
-
-
- {formatTokenBalance(tokenBalance.balance, true)}
-
+
+
+
);
@@ -149,7 +156,7 @@ export function WalletRow(props: {
width={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
height={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
style={{
- borderRadius: "100%",
+ borderRadius: radius.sm,
overflow: "hidden",
border: `1px solid ${theme.colors.borderColor}`,
}}
@@ -166,7 +173,7 @@ export function WalletRow(props: {
style={{
width: iconSize.md,
height: iconSize.md,
- borderRadius: "100%",
+ borderRadius: radius.sm,
overflow: "hidden",
border: `1px solid ${theme.colors.borderColor}`,
}}
@@ -186,7 +193,7 @@ const StyledButton = /* @__PURE__ */ styled(Button)((_) => {
const theme = useCustomTheme();
return {
background: theme.colors.tertiaryBg,
- justifyContent: "flex-start",
+ justifyContent: "space-between",
flexDirection: "row",
padding: spacing.sm,
gap: spacing.sm,
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx
index 247a8d7ab0c..b53bfbcb665 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx
@@ -166,25 +166,37 @@ export function PaymentSelectionScreen(props: {
return ;
}
+ 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 (
- {Array.from(walletsAndBalances.data?.entries() || [])
- .filter(([w]) => !props.hiddenWallets?.includes(w.id))
- .map(([w, balances]) => {
- const address = w.getAccount()?.address;
- if (!address) return null;
- return (
-
- );
- })}
+ {filteredWallets.length === 0 && (
+
+
+ Insufficient funds in connected wallets
+
+
+ )}
+ {filteredWallets.map(([w, balances]) => {
+ const address = w.getAccount()?.address;
+ if (!address) return null;
+ return (
+
+ );
+ })}
{!hideConnectButton && (