Merge pull request #378 from reservoirprotocol/ted/relay-6285-content-overflows-on-trade-detail-page

Update SwapConfirmationStep ui to fix overflow

Author: pedromcunha

.changeset/real-jokes-mate.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Update SwapConfirmationStep ui to fix overflow

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 ? (

packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx

@@ -9,20 +9,25 @@ 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
 }
 
 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>