Merge pull request #303 from reservoirprotocol/feature/tweak-price-im…

…pact Tweak Price impact and improve no instant liquidity ux
reservoirprotocol · Oct 14, 2024 · d83ae10 · d83ae10
2 parents 6e35308 + af05332
commit d83ae10
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/.changeset/giant-cars-return.md b/.changeset/giant-cars-return.md
@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Improve price impact, handle no instant liquidity ux
diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx
@@ -829,9 +829,10 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       mb: '6px'
                     }}
                   />
-                  {isCapacityExceededError && supportsExternalLiquidity ? (
+                  {error && supportsExternalLiquidity ? (
                     <Flex css={{ mt: '6px', gap: '3' }}>
-                      {maxCapacityFormatted != '0' ? (
+                      {isCapacityExceededError &&
+                      maxCapacityFormatted != '0' ? (
                         <Button
                           color="white"
                           css={{ flexGrow: '1', justifyContent: 'center' }}

diff --git a/packages/ui/src/components/widgets/WidgetErrorWell.tsx b/packages/ui/src/components/widgets/WidgetErrorWell.tsx
@@ -75,6 +75,27 @@ export const WidgetErrorWell: FC<Props> = ({
           </Text>
         </Flex>
       )
+    } else if (supportsExternalLiquidity && currency) {
+      return (
+        <Flex
+          align="center"
+          css={{
+            gap: '2',
+            p: '3',
+            backgroundColor: 'red2',
+            borderRadius: 12,
+            mb: '3',
+            ...containerCss
+          }}
+        >
+          <Box css={{ color: 'red10' }}>
+            <FontAwesomeIcon icon={faExclamationCircle} width={16} />
+          </Box>
+          <Text style="subtitle3" css={{ color: 'red12' }}>
+            {fetchQuoteErrorMessage} Please switch to the native route.
+          </Text>
+        </Flex>
+      )
     } else {
       return (
         <Flex

diff --git a/packages/ui/src/utils/quote.ts b/packages/ui/src/utils/quote.ts
@@ -183,8 +183,12 @@ export const isHighRelayerServiceFeeUsd = (quote?: QuoteResponse) => {
     return false
   }
 
-  const fivePercentOfUsdIn = (usdIn * 5) / 100
-  return relayerServiceFeeUsd >= fivePercentOfUsdIn
+  const feeThresholdPercentage = (usdIn * 2.5) / 100
+  const feeThresholdUsd = 25
+  return (
+    relayerServiceFeeUsd > feeThresholdPercentage &&
+    relayerServiceFeeUsd > feeThresholdUsd
+  )
 }
 
 export const extractQuoteId = (steps?: Execute['steps']) => {