Merge pull request #832 from invariant-labs/add-price-impact-warn

Add new warn label
invariant-labs · Dec 29, 2024 · c064f17 · c064f17
2 parents e67edf8 + ffc07d6
commit c064f17
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx
@@ -41,7 +41,7 @@ import { useNavigate } from 'react-router-dom'
 import { PoolWithAddress } from '@store/reducers/pools'
 import { PublicKey } from '@solana/web3.js'
 import { Decimal, Tick, Tickmap } from '@invariant-labs/sdk/lib/market'
-import { fromFee, SimulationStatus } from '@invariant-labs/sdk/lib/utils'
+import { DECIMAL, fromFee, SimulationStatus } from '@invariant-labs/sdk/lib/utils'
 import { TooltipHover } from '@components/TooltipHover/TooltipHover'
 
 export interface Pools {
@@ -591,6 +591,11 @@ export const Swap: React.FC<ISwap> = ({
     void setSimulateAmount()
   }, [isFetchingNewPool])
 
+  const IS_ERROR_LABEL_SHOW =
+    +printBN(simulateResult.priceImpact, DECIMAL - 2) > 25 ||
+    tokens[tokenFrom?.toString() ?? '']?.isUnknown ||
+    tokens[tokenTo?.toString() ?? '']?.isUnknown
+
   return (
     <Grid container className={classes.swapWrapper} alignItems='center'>
       {/* {wrappedETHAccountExist && (
@@ -810,7 +815,16 @@ export const Swap: React.FC<ISwap> = ({
             network={network}
           />
         </Box>
-        <Box className={classes.unknownWarningContainer}>
+        <Box
+          className={classes.unknownWarningContainer}
+          style={{ height: IS_ERROR_LABEL_SHOW ? '34px' : '0px' }}>
+          {+printBN(simulateResult.priceImpact, DECIMAL - 2) > 25 && (
+            <TooltipHover text='Your trade size might be too large'>
+              <Box className={classes.unknownWarning}>
+                {(+printBN(simulateResult.priceImpact, DECIMAL - 2)).toFixed(2)}% Price impact
+              </Box>
+            </TooltipHover>
+          )}
           {tokens[tokenFrom?.toString() ?? '']?.isUnknown && (
             <TooltipHover
               text={`${
@@ -832,6 +846,7 @@ export const Swap: React.FC<ISwap> = ({
             </TooltipHover>
           )}
         </Box>
+
         <Box className={classes.transactionDetails}>
           <Box className={classes.transactionDetailsInner}>
             <button

diff --git a/src/components/Swap/style.ts b/src/components/Swap/style.ts
@@ -1,4 +1,4 @@
-import { Theme } from '@mui/material'
+import { alpha, Theme } from '@mui/material'
 import { colors, typography } from '@static/theme'
 import { makeStyles } from 'tss-react/mui'
 
@@ -347,17 +347,20 @@ export const useStyles = makeStyles()((theme: Theme) => ({
   },
   unknownWarningContainer: {
     marginTop: 12,
+    width: '100%',
     display: 'flex',
+    alignItems: 'center',
     gap: 12
   },
   unknownWarning: {
     width: 'fit-content',
-    background: colors.invariant.yellow,
-    color: colors.invariant.black,
-    padding: 4,
+    background: alpha(colors.invariant.Error, 0.25),
+    border: `1px solid ${colors.invariant.Error}`,
+    ...typography.caption2,
+    color: colors.invariant.Error,
+    padding: 8,
     paddingInline: 8,
-    borderRadius: 8,
-    fontSize: 12
+    borderRadius: 10
   }
 }))