From 31d3c339df560f28aaaa1189ce82712d74d9fdea Mon Sep 17 00:00:00 2001
From: Hau Nguyen Van <nguyenvanhauit1997@gmail.com>
Date: Mon, 11 Dec 2023 11:44:39 +0700
Subject: [PATCH 1/3] add: warning when slippage 0%

---
 src/pages/UniversalSwap/SwapV3/index.module.scss | 11 +++++++----
 src/pages/UniversalSwap/SwapV3/index.tsx         | 13 ++++++++++++-
 src/styles/_themes.scss                          |  1 +
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/pages/UniversalSwap/SwapV3/index.module.scss b/src/pages/UniversalSwap/SwapV3/index.module.scss
index ddac805dd..59579369e 100644
--- 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
index 0596ad59d..73b88196e 100644
--- a/src/pages/UniversalSwap/SwapV3/index.tsx
+++ b/src/pages/UniversalSwap/SwapV3/index.tsx
@@ -496,7 +496,11 @@ const SwapComponent: React.FC<{
                   <span> Expected Output</span>
                 </div>
                 <div className={cx('value')}>
-                  ≈ {simulateData?.displayAmount ? numberWithCommas(simulateData?.displayAmount, undefined, { minimumFractionDigits: 6 }) : "0"} {originalToToken.name}
+                  ≈
+                  {simulateData?.displayAmount
+                    ? numberWithCommas(simulateData?.displayAmount, undefined, { minimumFractionDigits: 6 })
+                    : '0'}
+                  {originalToToken.name}
                 </div>
               </div>
             }
@@ -516,6 +520,13 @@ const SwapComponent: React.FC<{
               </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
index 1dd313c40..53435b7b3 100644
--- 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;

From 6fdc419908ddff949b53f83d4a195784c87a7e3a Mon Sep 17 00:00:00 2001
From: Hau Nguyen Van <nguyenvanhauit1997@gmail.com>
Date: Mon, 11 Dec 2023 17:44:13 +0700
Subject: [PATCH 2/3] fix display slippage minimum

---
 src/pages/UniversalSwap/SwapV3/index.tsx | 25 ++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/pages/UniversalSwap/SwapV3/index.tsx b/src/pages/UniversalSwap/SwapV3/index.tsx
index 73b88196e..87a1e0747 100644
--- a/src/pages/UniversalSwap/SwapV3/index.tsx
+++ b/src/pages/UniversalSwap/SwapV3/index.tsx
@@ -244,6 +244,15 @@ const SwapComponent: React.FC<{
       : '0';
   const isWarningSlippage = +minimumReceive > +simulateData?.amount;
 
+  const minimumReceiveDisplay =
+    simulateData && simulateData.displayAmount
+      ? new BigDecimal(simulateData.displayAmount - (simulateData.displayAmount / 100) * userSlippage).toNumber()
+      : 0;
+
+  const expectOutputDisplay = simulateData && simulateData.displayAmount
+    ? numberWithCommas(simulateData?.displayAmount, undefined, { minimumFractionDigits: 6 })
+    : 0
+
   const handleSubmit = async () => {
     if (fromAmountToken <= 0)
       return displayToast(TToastType.TX_FAILED, {
@@ -496,10 +505,8 @@ const SwapComponent: React.FC<{
                   <span> Expected Output</span>
                 </div>
                 <div className={cx('value')}>
-                  ≈
-                  {simulateData?.displayAmount
-                    ? numberWithCommas(simulateData?.displayAmount, undefined, { minimumFractionDigits: 6 })
-                    : '0'}
+                  ≈{' '}
+                  {expectOutputDisplay}{' '}
                   {originalToToken.name}
                 </div>
               </div>
@@ -509,14 +516,8 @@ 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>
 

From 7e06dcbec10528115afe4e8f25ea3d039c36023c Mon Sep 17 00:00:00 2001
From: Hau Nguyen Van <nguyenvanhauit1997@gmail.com>
Date: Tue, 12 Dec 2023 10:59:04 +0700
Subject: [PATCH 3/3] refactor condition variable

---
 src/pages/UniversalSwap/SwapV3/index.tsx | 39 +++++++++++-------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/pages/UniversalSwap/SwapV3/index.tsx b/src/pages/UniversalSwap/SwapV3/index.tsx
index 64d5d20e9..b079eaee9 100644
--- a/src/pages/UniversalSwap/SwapV3/index.tsx
+++ b/src/pages/UniversalSwap/SwapV3/index.tsx
@@ -239,27 +239,26 @@ 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 =
-    simulateData && simulateData.displayAmount
-      ? new BigDecimal(simulateData.displayAmount - (simulateData.displayAmount / 100) * userSlippage).toNumber()
-      : 0;
+  const minimumReceiveDisplay = isSimulateDataDisplay
+    ? new BigDecimal(simulateData.displayAmount - (simulateData.displayAmount / 100) * userSlippage).toNumber()
+    : 0;
 
-  const expectOutputDisplay = simulateData && simulateData.displayAmount
-    ? numberWithCommas(simulateData?.displayAmount, undefined, { minimumFractionDigits: 6 })
-    : 0
+  const expectOutputDisplay = isSimulateDataDisplay
+    ? numberWithCommas(simulateData.displayAmount, undefined, { minimumFractionDigits: 6 })
+    : 0;
 
   const handleSubmit = async () => {
     if (fromAmountToken <= 0)
@@ -513,9 +512,7 @@ const SwapComponent: React.FC<{
                   <span> Expected Output</span>
                 </div>
                 <div className={cx('value')}>
-                  ≈{' '}
-                  {expectOutputDisplay}{' '}
-                  {originalToToken.name}
+                  ≈ {expectOutputDisplay} {originalToToken.name}
                 </div>
               </div>
             }