added slippage to trade approval (#1252)

src/components/Asset/AssetActions/Pool/Actions.tsx

@@ -6,11 +6,13 @@ import ExplorerLink from '@shared/ExplorerLink'
 import SuccessConfetti from '@shared/SuccessConfetti'
 import { useWeb3 } from '@context/Web3'
 import TokenApproval from '@shared/TokenApproval'
+import Decimal from 'decimal.js'
 
 export default function Actions({
   isLoading,
   loaderMessage,
   successMessage,
+  slippage,
   txId,
   actionName,
   amount,
@@ -23,6 +25,7 @@ export default function Actions({
   isLoading: boolean
   loaderMessage: string
   successMessage: string
+  slippage?: string
   txId: string
   actionName: string
   amount?: string
@@ -45,6 +48,18 @@ export default function Actions({
     </Button>
   )
 
+  const applySlippage = (amount: string) => {
+    if (!amount) return '0'
+    const newAmount = new Decimal(amount)
+      .mul(
+        new Decimal(1)
+          .plus(new Decimal(slippage).div(new Decimal(100)))
+          .toString()
+      )
+      .toString()
+    return newAmount
+  }
+
   return (
     <>
       <div className={styles.actions}>
@@ -53,7 +68,7 @@ export default function Actions({
         ) : actionName === 'Supply' || actionName === 'Swap' ? (
           <TokenApproval
             actionButton={actionButton}
-            amount={amount}
+            amount={slippage ? applySlippage(amount) : amount}
             tokenAddress={tokenAddress}
             tokenSymbol={tokenSymbol}
             disabled={isDisabled}

src/components/Asset/AssetActions/Trade/FormTrade.tsx

@@ -193,6 +193,7 @@ export default function FormTrade({
             loaderMessage="Swapping tokens..."
             successMessage="Successfully swapped tokens."
             actionName={content.trade.action}
+            slippage={values.slippage}
             amount={
               values.type === 'sell'
                 ? values.datatoken