[MNY-303] Various UI/UX Improvements in Bridge components

Author: MananTank

.changeset/wild-steaks-agree.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+- Various UI/UX Improvements in Bridge components

packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx

@@ -219,7 +219,7 @@ export function TransactionPayment({
         }}
       >
         {/* USD Value */}
-        <Text color="primaryText" size="xl" weight={600}>
+        <Text color="primaryText" size="xl" weight={500}>
           {costToDisplay}
         </Text>
 

packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx

@@ -82,7 +82,7 @@ export function TokenAndChain({
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
           }}
-          weight={600}
+          weight={500}
           trackingTight
         >
           {token.name}

packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx

@@ -68,18 +68,9 @@ export function TokenBalanceRow({
             overflow: "hidden",
           }}
         >
-          <FiatValue
-            currency={currency}
-            chain={chain}
-            client={client}
+          <Text
             color="primaryText"
             size="sm"
-            token={token}
-            tokenAmount={amount}
-          />
-          <Text
-            color="secondaryText"
-            size="xs"
             style={{
               overflow: "hidden",
               textOverflow: "ellipsis",
@@ -91,6 +82,16 @@ export function TokenBalanceRow({
               minimumFractionDigits: 0,
             })} ${token.symbol}`}
           </Text>
+
+          <FiatValue
+            currency={currency}
+            chain={chain}
+            client={client}
+            color="secondaryText"
+            size="sm"
+            token={token}
+            tokenAmount={amount}
+          />
         </Container>
       </Container>
     </StyledButton>

packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx

@@ -100,13 +100,23 @@ export function SelectedTokenButton(props: {
               }}
             >
               <Img
-                src={props.chain?.icon}
+                src={props.chain?.icon || ""}
                 client={props.client}
                 width={iconSize.sm}
                 height={iconSize.sm}
                 style={{
                   borderRadius: radius.full,
                 }}
+                fallback={
+                  <Container
+                    style={{
+                      background: `linear-gradient(45deg, white, ${theme.colors.accentText})`,
+                      borderRadius: radius.full,
+                      width: `${iconSize.sm}px`,
+                      height: `${iconSize.sm}px`,
+                    }}
+                  />
+                }
               />
             </Container>
           )}

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

@@ -63,7 +63,7 @@ export function PaymentOverview(props: {
             <WalletRow
               address={sender}
               client={props.client}
-              iconSize="md"
+              iconSize="lg"
               textSize="sm"
             />
           </Container>
@@ -91,13 +91,14 @@ export function PaymentOverview(props: {
             py="sm"
             style={{ justifyContent: "space-between" }}
           >
+            {/* left */}
             <Container center="y" flex="row" gap="sm">
               {getFiatCurrencyIcon({
                 currency: props.paymentMethod.currency,
                 size: "lg",
               })}
               <Container center="y" flex="column" gap="3xs">
-                <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
+                <Text color="primaryText" size="sm" weight={500}>
                   {props.paymentMethod.currency}
                 </Text>
                 <Text color="secondaryText" size="xs">
@@ -106,7 +107,8 @@ export function PaymentOverview(props: {
                 </Text>
               </Container>
             </Container>
-            <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
+            {/* right */}
+            <Text color="primaryText" size="sm">
               {props.fromAmount}
             </Text>
           </Container>
@@ -136,11 +138,12 @@ export function PaymentOverview(props: {
             <WalletRow
               address={props.receiver}
               client={props.client}
-              iconSize="md"
+              iconSize="lg"
               textSize="sm"
             />
           </Container>
         )}
+
         {props.modeInfo.mode === "direct_payment" && (
           <Container
             center="y"
@@ -150,7 +153,7 @@ export function PaymentOverview(props: {
             style={{ justifyContent: "space-between" }}
           >
             <Container center="y" flex="column" gap="3xs" style={{ flex: 1 }}>
-              <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
+              <Text color="primaryText" size="sm" weight={500}>
                 {props.metadata.title || "Payment"}
               </Text>
               {props.metadata.description && (
@@ -173,7 +176,6 @@ export function PaymentOverview(props: {
                 size="sm"
                 token={props.toToken}
                 tokenAmount={props.modeInfo.paymentInfo.amount}
-                weight={600}
               />
               <Text color="secondaryText" size="xs">
                 {props.modeInfo.paymentInfo.amount} {props.toToken.symbol}
@@ -285,7 +287,7 @@ const TransactionOverViewCompact = (props: {
       style={{ justifyContent: "space-between" }}
     >
       <Container center="y" flex="column" gap="3xs" style={{ flex: 1 }}>
-        <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
+        <Text color="primaryText" size="sm" weight={500}>
           {props.metadata.title || "Transaction"}
         </Text>
         {props.metadata.description && (

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx

@@ -89,7 +89,7 @@ function PaymentMethodTokenRow({
             <Text
               color="primaryText"
               size="sm"
-              style={{ fontWeight: 600, textWrap: "nowrap" }}
+              style={{ fontWeight: 500, textWrap: "nowrap" }}
             >
               {formatCurrencyAmount(
                 currency || "USD",