Skip to content

Commit a0f3557

Browse files
[SDK] fix: Text wrapping and balance display in token selector (#6281)
1 parent b182302 commit a0f3557

File tree

4 files changed

+78
-15
lines changed

4 files changed

+78
-15
lines changed

.changeset/tall-buckets-build.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+
Fix text wrapping for long balances in token selector

packages/thirdweb/src/chains/chain-definitions/arbitrum-nova.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const arbitrumNova = /* @__PURE__ */ defineChain({
1010
blockExplorers: [
1111
{
1212
name: "Arbiscan",
13-
url: "https://nova-explorer.arbitrum.io/",
13+
url: "https://nova.arbiscan.io/",
1414
},
1515
],
1616
});

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -635,11 +635,7 @@ function SelectedTokenInfo(props: {
635635
placeholder="0"
636636
type="text"
637637
data-placeholder={props.tokenAmount === ""}
638-
value={
639-
props.tokenAmount
640-
? formatNumber(Number(props.tokenAmount), 5)
641-
: "0"
642-
}
638+
value={props.tokenAmount || "0"}
643639
disabled={props.disabled}
644640
onClick={(e) => {
645641
// put cursor at the end of the input

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

Lines changed: 71 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -381,33 +381,90 @@ function TokenBalanceRow(props: {
381381
<StyledButton
382382
onClick={() => onClick(tokenBalance.token, wallet)}
383383
variant="secondary"
384-
style={style}
384+
style={{
385+
...style,
386+
display: "flex",
387+
justifyContent: "space-between",
388+
minWidth: 0, // Needed for text truncation to work
389+
}}
385390
>
386-
<Container flex="row" center="y" gap="sm">
391+
<Container
392+
flex="row"
393+
center="y"
394+
gap="sm"
395+
style={{
396+
flex: "1 1 50%",
397+
minWidth: 0,
398+
maxWidth: "50%",
399+
overflow: "hidden",
400+
flexWrap: "nowrap",
401+
}}
402+
>
387403
<TokenIcon
388404
token={tokenBalance.token}
389405
chain={tokenBalance.chain}
390406
size="md"
391407
client={client}
392408
/>
393-
<Container flex="column" gap="4xs">
394-
<Text size="xs" color="primaryText">
409+
<Container flex="column" gap="4xs" style={{ minWidth: 0 }}>
410+
<Text
411+
size="xs"
412+
color="primaryText"
413+
style={{
414+
overflow: "hidden",
415+
textOverflow: "ellipsis",
416+
whiteSpace: "nowrap",
417+
}}
418+
>
395419
{tokenBalance.token.symbol}
396420
</Text>
397-
{chainInfo && <Text size="xs">{chainInfo.name}</Text>}
421+
{chainInfo && (
422+
<Text
423+
size="xs"
424+
style={{
425+
overflow: "hidden",
426+
textOverflow: "ellipsis",
427+
whiteSpace: "nowrap",
428+
}}
429+
>
430+
{chainInfo.name}
431+
</Text>
432+
)}
398433
</Container>
399434
</Container>
400-
<Container flex="row" center="y" gap="4xs" color="secondaryText">
435+
436+
<Container
437+
flex="row"
438+
center="y"
439+
gap="4xs"
440+
color="secondaryText"
441+
style={{
442+
flex: "1 1 50%",
443+
maxWidth: "50%",
444+
minWidth: 0,
445+
justifyContent: "flex-end",
446+
flexWrap: "nowrap",
447+
}}
448+
>
401449
<Container
402450
flex="column"
403451
color="secondaryText"
404452
gap="4xs"
405453
style={{
406-
justifyContent: "flex-end",
407454
alignItems: "flex-end",
455+
minWidth: 0,
456+
overflow: "hidden",
408457
}}
409458
>
410-
<Text size="xs" color="primaryText">
459+
<Text
460+
size="xs"
461+
color="primaryText"
462+
style={{
463+
overflow: "hidden",
464+
textOverflow: "ellipsis",
465+
whiteSpace: "nowrap",
466+
}}
467+
>
411468
{formatTokenBalance(tokenBalance.balance, true, 2)}
412469
</Text>
413470
<FiatValue
@@ -418,7 +475,11 @@ function TokenBalanceRow(props: {
418475
size="xs"
419476
/>
420477
</Container>
421-
<ChevronRightIcon width={iconSize.md} height={iconSize.md} />
478+
<ChevronRightIcon
479+
width={iconSize.md}
480+
height={iconSize.md}
481+
style={{ flexShrink: 0 }}
482+
/>
422483
</Container>
423484
</StyledButton>
424485
);
@@ -429,6 +490,7 @@ const StyledButton = /* @__PURE__ */ styled(Button)((props) => {
429490
return {
430491
background: "transparent",
431492
justifyContent: "space-between",
493+
flexWrap: "nowrap",
432494
flexDirection: "row",
433495
padding: spacing.sm,
434496
paddingRight: spacing.xs,

0 commit comments

Comments
 (0)