From 012605ee4c6c65b8cd44c7dcea18b698fa6739d8 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Mon, 25 Nov 2024 11:10:22 -0500
Subject: [PATCH 1/2] Update SwapConfirmationStep ui to fix overflow

---
 .../common/TransactionModal/SwapModal.tsx     |  1 +
 .../steps/SwapConfirmationStep.tsx            | 35 ++++++++++++-------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/common/TransactionModal/SwapModal.tsx b/packages/ui/src/components/common/TransactionModal/SwapModal.tsx
index abb0cea1..7af87510 100644
--- a/packages/ui/src/components/common/TransactionModal/SwapModal.tsx
+++ b/packages/ui/src/components/common/TransactionModal/SwapModal.tsx
@@ -285,6 +285,7 @@ const InnerSwapModal: FC<InnerSwapModalProps> = ({
             toToken={toToken}
             fromAmountFormatted={fromAmountFormatted}
             toAmountFormatted={toAmountFormatted}
+            quote={quote}
           />
         ) : null}
         {progressStep === TransactionProgressStep.Validating ? (
diff --git a/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
index 2b931aac..6dd35418 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
@@ -9,10 +9,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { LoadingSpinner } from '../../LoadingSpinner.js'
 import { type Token } from '../../../../types/index.js'
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight'
+import type { useQuote } from '@reservoir0x/relay-kit-hooks'
+import { formatDollar } from '../../../../utils/numbers.js'
 
 type SwapConfirmationStepProps = {
   fromToken?: Token
   toToken?: Token
+  quote?: ReturnType<typeof useQuote>['data']
   fromAmountFormatted: string
   toAmountFormatted: string
 }
@@ -20,9 +23,11 @@ type SwapConfirmationStepProps = {
 export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
   fromToken,
   toToken,
+  quote,
   fromAmountFormatted,
   toAmountFormatted
 }) => {
+  const details = quote?.details
   return (
     <>
       <Flex
@@ -41,20 +46,22 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
             width: '100%'
           }}
         >
-          <Text style="subtitle2" color="subtle">
-            From
-          </Text>
-
-          <Flex align="center" css={{ gap: '2', cursor: 'pointer' }}>
+          <Flex
+            direction="column"
+            align="start"
+            css={{ gap: '1', cursor: 'pointer' }}
+          >
             <ChainTokenIcon
               chainId={fromToken?.chainId}
               tokenlogoURI={fromToken?.logoURI}
               css={{ height: 32, width: 32 }}
             />
-
-            <Text style="subtitle1" ellipsify>
+            <Text style="h6" ellipsify>
               {fromAmountFormatted} {fromToken?.symbol}
             </Text>
+            <Text style="subtitle3" color="subtle">
+              {formatDollar(Number(details?.currencyIn?.amountUsd))}
+            </Text>
           </Flex>
         </Flex>
         <Text
@@ -77,18 +84,22 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
             width: '100%'
           }}
         >
-          <Text style="subtitle2" color="subtle">
-            To
-          </Text>
-          <Flex align="center" css={{ gap: '2', cursor: 'pointer' }}>
+          <Flex
+            direction="column"
+            align="start"
+            css={{ gap: '1', cursor: 'pointer' }}
+          >
             <ChainTokenIcon
               chainId={toToken?.chainId}
               tokenlogoURI={toToken?.logoURI}
               css={{ height: 32, width: 32 }}
             />
-            <Text style="subtitle1" ellipsify>
+            <Text style="h6" ellipsify>
               {toAmountFormatted} {toToken?.symbol}
             </Text>
+            <Text style="subtitle3" color="subtle">
+              {formatDollar(Number(details?.currencyOut?.amountUsd))}
+            </Text>
           </Flex>
         </Flex>
       </Flex>

From 9a34e7e24d6bc7e69efba35ab68f621422a1ab93 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Mon, 25 Nov 2024 11:10:46 -0500
Subject: [PATCH 2/2] feat: changeset

---
 .changeset/real-jokes-mate.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/real-jokes-mate.md

diff --git a/.changeset/real-jokes-mate.md b/.changeset/real-jokes-mate.md
new file mode 100644
index 00000000..baa35874
--- /dev/null
+++ b/.changeset/real-jokes-mate.md
@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Update SwapConfirmationStep ui to fix overflow