Merge pull request #494 from oraichain/feat/slippage-check

add: warning when slippage 0%
oraidex · Dec 12, 2023 · 084d1a7 · 084d1a7
2 parents 78ee886 + 7e06dcb
commit 084d1a7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 31 deletions.
diff --git a/src/pages/UniversalSwap/SwapV3/index.module.scss b/src/pages/UniversalSwap/SwapV3/index.module.scss
@@ -351,7 +351,7 @@
   .impact-warning {
     .title {
       span {
-        color: #e01600;
+        color: $warning-color;
       }
     }
   }
@@ -363,7 +363,7 @@
 
 .to {
   input.amount {
-    color: #505665;
+    color: $text-placeholder;
   }
 
   @include mobile {
@@ -450,7 +450,7 @@
 
   @include theme() {
     background-color: theme-get('primary-1');
-    color: #232521;
+    color: theme-get('neutral-text-text-btn-default');
   }
 
   &.disable {
@@ -471,7 +471,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #ffffff;
+  color: $white;
   cursor: pointer;
   margin: 16px 0;
 
@@ -507,6 +507,9 @@
     justify-content: space-between;
     align-items: center;
 
+    .warning-slippage-0 {
+      color: $warning-color;
+    }
     .title {
       width: 70%;
       display: flex;

diff --git a/src/pages/UniversalSwap/SwapV3/index.tsx b/src/pages/UniversalSwap/SwapV3/index.tsx
@@ -239,19 +239,27 @@ const SwapComponent: React.FC<{
   }, [fromToken, toToken]);
 
   const fromAmountTokenBalance = fromTokenInfoData && toAmount(fromAmountToken, fromTokenInfoData!.decimals);
-
-  const minimumReceive =
-    averageRatio && averageRatio.amount
-      ? calculateMinReceive(
-          // @ts-ignore
-          Math.trunc(new BigDecimal(averageRatio.amount) / INIT_AMOUNT).toString(),
-          fromAmountTokenBalance.toString(),
-          userSlippage,
-          originalFromToken.decimals
-        )
-      : '0';
+  const isAverageRatio = averageRatio && averageRatio.amount;
+  const isSimulateDataDisplay = simulateData && simulateData.displayAmount;
+  const minimumReceive = isAverageRatio
+    ? calculateMinReceive(
+      // @ts-ignore
+      Math.trunc(new BigDecimal(averageRatio.amount) / INIT_AMOUNT).toString(),
+      fromAmountTokenBalance.toString(),
+      userSlippage,
+      originalFromToken.decimals
+    )
+    : '0';
   const isWarningSlippage = +minimumReceive > +simulateData?.amount;
 
+  const minimumReceiveDisplay = isSimulateDataDisplay
+    ? new BigDecimal(simulateData.displayAmount - (simulateData.displayAmount / 100) * userSlippage).toNumber()
+    : 0;
+
+  const expectOutputDisplay = isSimulateDataDisplay
+    ? numberWithCommas(simulateData.displayAmount, undefined, { minimumFractionDigits: 6 })
+    : 0;
+
   const handleSubmit = async () => {
     if (fromAmountToken <= 0)
       return displayToast(TToastType.TX_FAILED, {
@@ -463,9 +471,8 @@ const SwapComponent: React.FC<{
               )}
 
               <div className={cx('ratio')}>
-                {`1 ${originalFromToken.name} ≈ ${
-                  averageRatio ? (averageRatio.displayAmount / INIT_AMOUNT).toFixed(6) : '0'
-                } ${originalToToken.name}`}
+                {`1 ${originalFromToken.name} ≈ ${averageRatio ? (averageRatio.displayAmount / INIT_AMOUNT).toFixed(6) : '0'
+                  } ${originalToToken.name}`}
               </div>
             </div>
           </div>
@@ -505,11 +512,7 @@ const SwapComponent: React.FC<{
                   <span> Expected Output</span>
                 </div>
                 <div className={cx('value')}>
-                  ≈{' '}
-                  {simulateData?.displayAmount
-                    ? numberWithCommas(simulateData?.displayAmount, undefined, { minimumFractionDigits: 6 })
-                    : '0'}{' '}
-                  {originalToToken.name}
+                  ≈ {expectOutputDisplay} {originalToToken.name}
                 </div>
               </div>
             }
@@ -518,17 +521,18 @@ const SwapComponent: React.FC<{
                 <span>Minimum Received after slippage ( {userSlippage}% )</span>
               </div>
               <div className={cx('value')}>
-                <TokenBalance
-                  balance={{
-                    amount: minimumReceive,
-                    decimals: originalFromToken.decimals,
-                    denom: originalToToken.name
-                  }}
-                  decimalScale={truncDecimals}
-                />
+                {Number(numberWithCommas(minimumReceiveDisplay, undefined, { minimumFractionDigits: 6 }))}{' '}
+                {originalToToken.name}
               </div>
             </div>
 
+            {!userSlippage && (
+              <div className={cx('row')}>
+                <span className={cx('warning-slippage-0')}>
+                  That transaction may failed if configured slippage is 0%!
+                </span>
+              </div>
+            )}
             {!!relayerFeeToken && (
               <div className={cx('row')}>
                 <div className={cx('title')}>

diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss
@@ -9,6 +9,7 @@ $shadow-btn: inset 0px -2px 0px #4b2993, inset 1px 2px 0px #804af2;
 $blue-color: #7e5cc5;
 $success-color: #00ad26;
 $error-color: #ff5947;
+$warning-color: #e01600;
 $primary-text-link: #78ca11;
 $primary-surface-default-light: #e5f7d6;
 $primary-bg-btn: #aee67f;