thirdweb 5.88.6-nightly-b182302f590e75c9881cebd0ca1cc8b1425d50b8-20250218000338 → 5.88.7

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

@@ -69,6 +69,7 @@ export function TokenSelectorScreen(props: {
   onSelectToken: (wallet: Wallet, token: TokenInfo, chain: Chain) => void;
   onConnect: () => void;
   onPayWithFiat: () => void;
+  fiatSupported: boolean;
 }) {
   const connectedWallets = useConnectedWallets();
   const activeAccount = useActiveAccount();
@@ -255,29 +256,31 @@ export function TokenSelectorScreen(props: {
               </Text>
             </Container>
           </Button>
-          <Button
-            variant="secondary"
-            fullWidth
-            onClick={props.onPayWithFiat}
-            bg="tertiaryBg"
-            style={{
-              border: `1px solid ${theme.colors.borderColor}`,
-              padding: spacing.sm,
-            }}
-          >
-            <Container
-              flex="row"
-              gap="sm"
-              center="y"
-              expand
-              color="secondaryIconColor"
+          {props.fiatSupported && (
+            <Button
+              variant="secondary"
+              fullWidth
+              onClick={props.onPayWithFiat}
+              bg="tertiaryBg"
+              style={{
+                border: `1px solid ${theme.colors.borderColor}`,
+                padding: spacing.sm,
+              }}
             >
-              <CardStackIcon width={iconSize.md} height={iconSize.md} />
-              <Text size="sm" color="primaryText">
-                Pay with credit card
-              </Text>
-            </Container>
-          </Button>
+              <Container
+                flex="row"
+                gap="sm"
+                center="y"
+                expand
+                color="secondaryIconColor"
+              >
+                <CardStackIcon width={iconSize.md} height={iconSize.md} />
+                <Text size="sm" color="primaryText">
+                  Pay with credit card
+                </Text>
+              </Container>
+            </Button>
+          )}
         </Container>
       </Container>
     </Container>
@@ -381,33 +384,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 +478,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 +493,7 @@ const StyledButton = /* @__PURE__ */ styled(Button)((props) => {
   return {
     background: "transparent",
     justifyContent: "space-between",
+    flexWrap: "nowrap",
     flexDirection: "row",
     padding: spacing.sm,
     paddingRight: spacing.xs,

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.88.6-nightly-b182302f590e75c9881cebd0ca1cc8b1425d50b8-20250218000338";
+export const version = "5.88.7";