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 && (