From 38e7c7b9ec65aeba7ffbbd18d453b26f4fda9032 Mon Sep 17 00:00:00 2001
From: pedromcunha <pedro.spinsomewebs@gmail.com>
Date: Wed, 18 Dec 2024 16:10:43 -0500
Subject: [PATCH 1/2] Design tweaks and fixes for slippage

---
 .../steps/ReviewQuoteStep.tsx                 | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx
index 3144f975..0352a41b 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx
@@ -116,16 +116,18 @@ export const ReviewQuoteStep: FC<ReviewQuoteProps> = ({
 
   let breakdown: { title: string; value: ReactNode }[] = []
 
-  if (
-    minimumAmountFormatted &&
-    quote?.details?.slippageTolerance?.destination?.percent &&
-    quote.details.slippageTolerance.destination.percent != '0.00'
-  ) {
+  const slippage = Number(
+    quote?.details?.slippageTolerance?.destination?.percent ??
+      quote?.details?.slippageTolerance?.origin?.percent ??
+      0
+  )
+
+  if (minimumAmountFormatted && slippage && slippage != 0) {
     breakdown.push({
       title: 'Min. Received',
       value: (
         <Flex
-          align="center"
+          align="end"
           direction="column"
           css={{
             gap: '1'
@@ -151,7 +153,7 @@ export const ReviewQuoteStep: FC<ReviewQuoteProps> = ({
                   {quote?.details?.slippageTolerance?.destination?.percent ?? 0}
                   %
                 </Text>
-                <Flex css={{ color: 'gray9' }}>
+                <Flex css={{ color: 'gray8' }}>
                   <FontAwesomeIcon
                     icon={faInfoCircle}
                     width={14}
@@ -169,9 +171,8 @@ export const ReviewQuoteStep: FC<ReviewQuoteProps> = ({
     })
   }
 
-  breakdown = [
-    ...breakdown,
-    {
+  if (timeEstimate.time) {
+    breakdown.push({
       title: 'Estimated time',
       value: (
         <Flex
@@ -188,7 +189,11 @@ export const ReviewQuoteStep: FC<ReviewQuoteProps> = ({
           <Text style="subtitle2">~ {timeEstimate?.formattedTime}</Text>
         </Flex>
       )
-    },
+    })
+  }
+
+  breakdown = [
+    ...breakdown,
     {
       title: 'Network cost',
       value: (

From cd44e8009f8c5b085debe4ab866f89eab02c1e72 Mon Sep 17 00:00:00 2001
From: pedromcunha <pedro.spinsomewebs@gmail.com>
Date: Wed, 18 Dec 2024 16:11:21 -0500
Subject: [PATCH 2/2] feat: changeset

---
 .changeset/perfect-walls-turn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/perfect-walls-turn.md

diff --git a/.changeset/perfect-walls-turn.md b/.changeset/perfect-walls-turn.md
new file mode 100644
index 00000000..f8d39f9e
--- /dev/null
+++ b/.changeset/perfect-walls-turn.md
@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Fix slippage ui bugs