Merge pull request #384 from reservoirprotocol/fix/slippage-ui-bugs

Fix slippage UI bugs
reservoirprotocol · Dec 4, 2024 · 19763cb · 19763cb
2 parents 13eb4f7 + 3a71c56
commit 19763cb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/.changeset/twenty-pets-love.md b/.changeset/twenty-pets-love.md
@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Fix slippage ui bugs
diff --git a/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ReviewQuoteStep.tsx
@@ -116,7 +116,11 @@ export const ReviewQuoteStep: FC<ReviewQuoteProps> = ({
 
   let breakdown: { title: string; value: ReactNode }[] = []
 
-  if (minimumAmountFormatted) {
+  if (
+    minimumAmountFormatted &&
+    quote?.details?.slippageTolerance?.destination?.percent &&
+    quote.details.slippageTolerance.destination.percent != '0.00'
+  ) {
     breakdown.push({
       title: 'Min. Received',
       value: (
@@ -150,7 +154,8 @@ export const ReviewQuoteStep: FC<ReviewQuoteProps> = ({
                 <Flex css={{ color: 'gray9' }}>
                   <FontAwesomeIcon
                     icon={faInfoCircle}
-                    width={16}
+                    width={14}
+                    height={14}
                     style={{
                       display: 'inline-block'
                     }}
@@ -406,7 +411,11 @@ export const ReviewQuoteStep: FC<ReviewQuoteProps> = ({
               align="center"
               css={{ width: '100%', gap: '4' }}
             >
-              <Text style="subtitle2" color="subtle">
+              <Text
+                style="subtitle2"
+                color="subtle"
+                css={{ alignSelf: 'flex-start' }}
+              >
                 {item.title}
               </Text>
               {isFetchingQuote ? (