Fix Swap Fees layout in Pay UI drawer (#4390)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing the Swap Fees layout in the fees drawer in the pay UI.

### Detailed summary
- Updated `SwapFees` component layout in `Fees.tsx` to align items to the left
- Removed `align` prop from `SwapFees` component in `BuyScreen.tsx`
- Created `SwapFeesRightAligned` component for right-aligned fees display in `ConfirmationScreen.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

.changeset/honest-poems-fix.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix Swap Fees layout in fees drawer in pay UI

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

@@ -1138,7 +1138,7 @@ function SwapScreenContent(props: {
                   Fees
                 </Text>
                 <Spacer y="lg" />
-                <SwapFees quote={quoteQuery.data} align="left" />
+                <SwapFees quote={quoteQuery.data} />
               </div>
             )}
           </Drawer>

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

@@ -27,7 +27,6 @@ import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import { PayTokenIcon } from "../PayTokenIcon.js";
 import { Step } from "../Stepper.js";
 import type { PayerInfo } from "../types.js";
-import { SwapFees } from "./Fees.js";
 import { formatSeconds } from "./formatSeconds.js";
 import { addPendingTx } from "./pendingSwapTx.js";
 
@@ -111,7 +110,7 @@ export function SwapConfirmationScreen(props: {
 
       {/* Fees  */}
       <ConfirmItem label="Fees">
-        <SwapFees quote={props.quote} align="right" />
+        <SwapFeesRightAligned quote={props.quote} />
       </ConfirmItem>
 
       {/* Time  */}
@@ -329,3 +328,39 @@ function ConfirmItem(props: {
     </>
   );
 }
+
+/**
+ * @internal
+ */
+export function SwapFeesRightAligned(props: {
+  quote: BuyWithCryptoQuote;
+}) {
+  return (
+    <Container
+      flex="column"
+      gap="xs"
+      style={{
+        alignItems: "flex-end",
+      }}
+    >
+      {props.quote.processingFees.map((fee) => {
+        const feeAmount = formatNumber(Number(fee.amount), 6);
+        return (
+          <Container
+            key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
+            flex="row"
+            gap="xxs"
+          >
+            <Text color="primaryText" size="sm">
+              {feeAmount === 0 ? "~" : ""}
+              {feeAmount} {fee.token.symbol}
+            </Text>
+            <Text color="secondaryText" size="sm">
+              (${(fee.amountUSDCents / 100).toFixed(2)})
+            </Text>
+          </Container>
+        );
+      })}
+    </Container>
+  );
+}

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

@@ -10,14 +10,13 @@ import { Text } from "../../../../components/text.js";
  */
 export function SwapFees(props: {
   quote: BuyWithCryptoQuote;
-  align: "left" | "right";
 }) {
   return (
     <Container
       flex="column"
       gap="xs"
       style={{
-        alignItems: props.align === "right" ? "flex-end" : "flex-start",
+        alignItems: "flex-start",
       }}
     >
       {props.quote.processingFees.map((fee) => {
@@ -25,19 +24,15 @@ export function SwapFees(props: {
         return (
           <Container
             key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
-            flex="column"
+            flex="row"
             gap="xxs"
           >
-            <Text color="primaryText" size="sm" style={{ textAlign: "right" }}>
+            <Text color="primaryText" size="sm">
               {feeAmount === 0 ? "~" : ""}
               {feeAmount} {fee.token.symbol}
             </Text>
-            <Text
-              color="secondaryText"
-              size="xs"
-              style={{ textAlign: "right" }}
-            >
-              ${(fee.amountUSDCents / 100).toFixed(2)}
+            <Text color="secondaryText" size="sm">
+              (${(fee.amountUSDCents / 100).toFixed(2)})
             </Text>
           </Container>
         );