[SDK] fix: Text wrapping and balance display in token selector (#6281)

Author: joaquim-verges

.changeset/tall-buckets-build.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix text wrapping for long balances in token selector

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

@@ -10,7 +10,7 @@ export const arbitrumNova = /* @__PURE__ */ defineChain({
   blockExplorers: [
     {
       name: "Arbiscan",
-      url: "https://nova-explorer.arbitrum.io/",
+      url: "https://nova.arbiscan.io/",
     },
   ],
 });

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

@@ -635,11 +635,7 @@ function SelectedTokenInfo(props: {
             placeholder="0"
             type="text"
             data-placeholder={props.tokenAmount === ""}
-            value={
-              props.tokenAmount
-                ? formatNumber(Number(props.tokenAmount), 5)
-                : "0"
-            }
+            value={props.tokenAmount || "0"}
             disabled={props.disabled}
             onClick={(e) => {
               // put cursor at the end of the input

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

@@ -381,33 +381,90 @@ function TokenBalanceRow(props: {
     <StyledButton
       onClick={() => onClick(tokenBalance.token, wallet)}
       variant="secondary"
-      style={style}
+      style={{
+        ...style,
+        display: "flex",
+        justifyContent: "space-between",
+        minWidth: 0, // Needed for text truncation to work
+      }}
     >
-      <Container flex="row" center="y" gap="sm">
+      <Container
+        flex="row"
+        center="y"
+        gap="sm"
+        style={{
+          flex: "1 1 50%",
+          minWidth: 0,
+          maxWidth: "50%",
+          overflow: "hidden",
+          flexWrap: "nowrap",
+        }}
+      >
         <TokenIcon
           token={tokenBalance.token}
           chain={tokenBalance.chain}
           size="md"
           client={client}
         />
-        <Container flex="column" gap="4xs">
-          <Text size="xs" color="primaryText">
+        <Container flex="column" gap="4xs" style={{ minWidth: 0 }}>
+          <Text
+            size="xs"
+            color="primaryText"
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
             {tokenBalance.token.symbol}
           </Text>
-          {chainInfo && <Text size="xs">{chainInfo.name}</Text>}
+          {chainInfo && (
+            <Text
+              size="xs"
+              style={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {chainInfo.name}
+            </Text>
+          )}
         </Container>
       </Container>
-      <Container flex="row" center="y" gap="4xs" color="secondaryText">
+
+      <Container
+        flex="row"
+        center="y"
+        gap="4xs"
+        color="secondaryText"
+        style={{
+          flex: "1 1 50%",
+          maxWidth: "50%",
+          minWidth: 0,
+          justifyContent: "flex-end",
+          flexWrap: "nowrap",
+        }}
+      >
         <Container
           flex="column"
           color="secondaryText"
           gap="4xs"
           style={{
-            justifyContent: "flex-end",
             alignItems: "flex-end",
+            minWidth: 0,
+            overflow: "hidden",
           }}
         >
-          <Text size="xs" color="primaryText">
+          <Text
+            size="xs"
+            color="primaryText"
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
             {formatTokenBalance(tokenBalance.balance, true, 2)}
           </Text>
           <FiatValue
@@ -418,7 +475,11 @@ function TokenBalanceRow(props: {
             size="xs"
           />
         </Container>
-        <ChevronRightIcon width={iconSize.md} height={iconSize.md} />
+        <ChevronRightIcon
+          width={iconSize.md}
+          height={iconSize.md}
+          style={{ flexShrink: 0 }}
+        />
       </Container>
     </StyledButton>
   );
@@ -429,6 +490,7 @@ const StyledButton = /* @__PURE__ */ styled(Button)((props) => {
   return {
     background: "transparent",
     justifyContent: "space-between",
+    flexWrap: "nowrap",
     flexDirection: "row",
     padding: spacing.sm,
     paddingRight: spacing.xs,