Skip to content

Commit fbafb65

Browse files
[SDK] fix: Polish PayEmbed UI and balance display (#6237)
1 parent 6b286c7 commit fbafb65

File tree

4 files changed

+66
-37
lines changed

4 files changed

+66
-37
lines changed

.changeset/kind-pets-mate.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
PayEmbed UI polish

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import styled from "@emotion/styled";
2+
import { ChevronRightIcon } from "@radix-ui/react-icons";
23
import { useState } from "react";
34
import type { Chain } from "../../../../../../chains/types.js";
45
import type { ThirdwebClient } from "../../../../../../client/client.js";
@@ -22,7 +23,7 @@ import { Container } from "../../../components/basic.js";
2223
import { Button } from "../../../components/buttons.js";
2324
import { Text } from "../../../components/text.js";
2425
import { Blobbie } from "../../Blobbie.js";
25-
import { formatTokenBalance } from "../formatTokenBalance.js";
26+
import { FiatValue } from "./swap/FiatValue.js";
2627
import type { TokenBalance } from "./swap/PaymentSelectionScreen.js";
2728

2829
export function WalletRowWithBalances(props: {
@@ -100,23 +101,29 @@ function TokenBalanceRow(props: {
100101
onClick={() => onClick(tokenBalance.token, wallet)}
101102
variant="secondary"
102103
>
103-
<TokenIcon
104-
token={tokenBalance.token}
105-
chain={tokenBalance.chain}
106-
size="md"
107-
client={client}
108-
/>
109-
<Container flex="column" gap="3xs">
110-
<Text size="xs" color="primaryText">
111-
{tokenBalance.token.symbol}
112-
</Text>
113-
{chainInfo && <Text size="xs">{chainInfo.name}</Text>}
104+
<Container flex="row" center="y" gap="md">
105+
<TokenIcon
106+
token={tokenBalance.token}
107+
chain={tokenBalance.chain}
108+
size="md"
109+
client={client}
110+
/>
111+
<Container flex="column" gap="3xs">
112+
<Text size="xs" color="primaryText">
113+
{tokenBalance.token.symbol}
114+
</Text>
115+
{chainInfo && <Text size="xs">{chainInfo.name}</Text>}
116+
</Container>
114117
</Container>
115-
<div style={{ flex: 1 }} />
116-
<Container flex="row" center="y" gap="3xs">
117-
<Text size="xs" color="secondaryText">
118-
{formatTokenBalance(tokenBalance.balance, true)}
119-
</Text>
118+
<Container flex="row" center="y" gap="3xs" color="secondaryText">
119+
<FiatValue
120+
tokenAmount={tokenBalance.balance.displayValue}
121+
token={tokenBalance.token}
122+
chain={tokenBalance.chain}
123+
client={client}
124+
size="xs"
125+
/>
126+
<ChevronRightIcon width={iconSize.md} height={iconSize.md} />
120127
</Container>
121128
</StyledButton>
122129
);
@@ -149,7 +156,7 @@ export function WalletRow(props: {
149156
width={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
150157
height={props.iconSize ? iconSize[props.iconSize] : iconSize.md}
151158
style={{
152-
borderRadius: "100%",
159+
borderRadius: radius.sm,
153160
overflow: "hidden",
154161
border: `1px solid ${theme.colors.borderColor}`,
155162
}}
@@ -166,7 +173,7 @@ export function WalletRow(props: {
166173
style={{
167174
width: iconSize.md,
168175
height: iconSize.md,
169-
borderRadius: "100%",
176+
borderRadius: radius.sm,
170177
overflow: "hidden",
171178
border: `1px solid ${theme.colors.borderColor}`,
172179
}}
@@ -186,7 +193,7 @@ const StyledButton = /* @__PURE__ */ styled(Button)((_) => {
186193
const theme = useCustomTheme();
187194
return {
188195
background: theme.colors.tertiaryBg,
189-
justifyContent: "flex-start",
196+
justifyContent: "space-between",
190197
flexDirection: "row",
191198
padding: spacing.sm,
192199
gap: spacing.sm,

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PaymentSelectionScreen.tsx

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -166,25 +166,37 @@ export function PaymentSelectionScreen(props: {
166166
return <LoadingScreen />;
167167
}
168168

169+
const filteredWallets = Array.from(walletsAndBalances.data?.entries() || [])
170+
.filter(([w]) => !props.hiddenWallets?.includes(w.id))
171+
.filter(([, balances]) => {
172+
const hasEnoughBalance = balances.some((b) => b.balance.value > 0);
173+
return hasEnoughBalance;
174+
});
175+
169176
return (
170177
<Container>
171178
<Container flex="column" gap="xs">
172-
{Array.from(walletsAndBalances.data?.entries() || [])
173-
.filter(([w]) => !props.hiddenWallets?.includes(w.id))
174-
.map(([w, balances]) => {
175-
const address = w.getAccount()?.address;
176-
if (!address) return null;
177-
return (
178-
<WalletRowWithBalances
179-
key={w.id}
180-
wallet={w}
181-
balances={balances}
182-
client={props.client}
183-
address={address}
184-
onClick={props.onSelect}
185-
/>
186-
);
187-
})}
179+
{filteredWallets.length === 0 && (
180+
<Container flex="column" gap="xs" py="md">
181+
<Text size="xs" color="secondaryText" center>
182+
<i>Insufficient funds in connected wallets</i>
183+
</Text>
184+
</Container>
185+
)}
186+
{filteredWallets.map(([w, balances]) => {
187+
const address = w.getAccount()?.address;
188+
if (!address) return null;
189+
return (
190+
<WalletRowWithBalances
191+
key={w.id}
192+
wallet={w}
193+
balances={balances}
194+
client={props.client}
195+
address={address}
196+
onClick={props.onSelect}
197+
/>
198+
);
199+
})}
188200
{!hideConnectButton && (
189201
<Button
190202
variant="secondary"

packages/thirdweb/src/react/web/utils/errors.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,12 @@ export const defaultMessage = "Unable to get price quote";
1313
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
1414
export function getErrorMessage(err: any): ApiError {
1515
if (typeof err.error === "object" && err.error.code) {
16-
return err.error;
16+
if (err.error.code === "MINIMUM_PURCHASE_AMOUNT") {
17+
return {
18+
code: "MINIMUM_PURCHASE_AMOUNT",
19+
message: "Purchase amount is too low",
20+
};
21+
}
1722
}
1823
return {
1924
code: "UNABLE_TO_GET_PRICE_QUOTE",

0 commit comments

Comments
 (0)