Liquidity slippage

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": false,
+  "bracketSpacing": false
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

src/components/common/SlippageSetting/SlippageSetting.module.css

@@ -0,0 +1,13 @@
+.slippageLabel {
+  padding: 4px 8px;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 16px;
+  border-radius: 8px;
+  background-color: var(--background-grey-light);
+  color: var(--content-dimmed-light);
+}
+
+.settingsButton:hover {
+  color: var(--content-primary);
+}

src/components/common/SlippageSetting/SlippageSetting.tsx

@@ -0,0 +1,19 @@
+import SettingsIcon from "../../icons/Settings/SettingsIcon";
+import IconButton from "../IconButton/IconButton";
+import styles from "./SlippageSetting.module.css";
+
+type Props = {
+  slippage: number;
+  openSettingsModal: () => void;
+};
+
+export const SlippageSetting = ({ slippage, openSettingsModal }: Props) => {
+  return (
+    <>
+      <p className={styles.slippageLabel}>{slippage / 100}% slippage</p>
+      <IconButton onClick={openSettingsModal} className={styles.settingsButton}>
+        <SettingsIcon />
+      </IconButton>
+    </>
+  );
+};

src/components/common/Swap/Swap.module.css

@@ -43,16 +43,6 @@
   color: var(--content-primary);
 }
 
-.slippageLabel {
-  padding: 4px 8px;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 16px;
-  border-radius: 8px;
-  background-color: var(--background-grey-light);
-  color: var(--content-dimmed-light);
-}
-
 .splitter {
   position: relative;
   width: 100%;
@@ -81,7 +71,7 @@
   transition: transform 0.3s;
 }
 
-.settingsButton:hover, .convertButton:hover {
+.convertButton:hover {
   color: var(--content-primary);
 }
 

src/components/common/Swap/Swap.tsx

@@ -4,7 +4,6 @@ import { useDebounceCallback, useLocalStorage } from "usehooks-ts";
 import { clsx } from "clsx";
 
 import CurrencyBox from "@/src/components/common/Swap/components/CurrencyBox/CurrencyBox";
-import SettingsIcon from "@/src/components/icons/Settings/SettingsIcon";
 import ActionButton from "@/src/components/common/ActionButton/ActionButton";
 import ConvertIcon from "@/src/components/icons/Convert/ConvertIcon";
 import IconButton from "@/src/components/common/IconButton/IconButton";
@@ -32,6 +31,7 @@ import { PoolId } from "mira-dex-ts";
 import { useAssetImage } from "@/src/hooks/useAssetImage";
 import { useAssetPrice } from "@/src/hooks/useAssetPrice";
 import useAssetMetadata from "@/src/hooks/useAssetMetadata";
+import { SlippageSetting } from "../SlippageSetting/SlippageSetting";
 
 export type CurrencyBoxMode = "buy" | "sell";
 export type CurrencyBoxState = {
@@ -428,10 +428,10 @@ const Swap = () => {
         <div className={clsx(styles.swapContainer, swapPending && styles.swapContainerLoading)}>
           <div className={styles.heading}>
             <p className={styles.title}>Swap</p>
-            <p className={styles.slippageLabel}>{slippage / 100}% slippage</p>
-            <IconButton onClick={openSettingsModal} className={styles.settingsButton}>
-              <SettingsIcon />
-            </IconButton>
+            <SlippageSetting
+              slippage={slippage}
+              openSettingsModal={openSettingsModal}
+            />
           </div>
           <CurrencyBox
             value={sellValue}

src/components/pages/add-liquidity-page/components/AddLiquidity/AddLiquidity.module.css

@@ -21,6 +21,11 @@
   align-items: center;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--background-grey-light);
+  gap: 10px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  color: var(--content-grey);
 }
 
 .addButton {
@@ -29,8 +34,7 @@
 
 .title {
   flex: 1;
-  text-align: center;
-  font-weight: 500;
+  color: var(--content-primary);
 }
 
 .section {

src/components/pages/add-liquidity-page/components/AddLiquidity/AddLiquidity.tsx

@@ -7,15 +7,22 @@ import {useRouter} from "next/navigation";
 import IconButton from "@/src/components/common/IconButton/IconButton";
 import CloseIcon from "@/src/components/icons/Close/CloseIcon";
 import {PoolId} from "mira-dex-ts";
+import { SlippageSetting } from '@/src/components/common/SlippageSetting/SlippageSetting';
+import SettingsModalContent from '@/src/components/common/Swap/components/SettingsModalContent/SettingsModalContent';
+import useModal from '@/src/hooks/useModal/useModal';
+import { DefaultSlippageValue, SlippageMode } from '@/src/components/common/Swap/Swap';
 
 type Props = {
   poolId: PoolId;
 }
 
 const AddLiquidity = ({ poolId }: Props) => {
   const router = useRouter();
+  const [SettingsModal, openSettingsModal, closeSettingsModal] = useModal();
 
   const [previewData, setPreviewData] = useState<AddLiquidityPreviewData | null>(null);
+  const [slippage, setSlippage] = useState<number>(DefaultSlippageValue);
+  const [slippageMode, setSlippageMode] = useState<SlippageMode>("auto");
 
   const handleBackClick = useCallback(() => {
     if (previewData) {
@@ -39,21 +46,35 @@ const AddLiquidity = ({ poolId }: Props) => {
           <p className={styles.title}>
             Add Liquidity
           </p>
+          <SlippageSetting slippage={slippage} openSettingsModal={openSettingsModal} />
           {showPreview && (
             <IconButton onClick={handleCloseClick}>
               <CloseIcon />
             </IconButton>
           )}
         </div>
         {showPreview ? (
-          <PreviewAddLiquidityDialog previewData={previewData!} setPreviewData={setPreviewData} />
+          <PreviewAddLiquidityDialog
+            previewData={previewData!}
+            setPreviewData={setPreviewData}
+            slippage={slippage}
+          />
         ) : (
           <AddLiquidityDialog poolId={poolId} setPreviewData={setPreviewData} />
         )}
       </section>
       {showPreview && (
         <div className={styles.loadingOverlay}/>
       )}
+      <SettingsModal title="Settings">
+        <SettingsModalContent
+          slippage={slippage}
+          slippageMode={slippageMode}
+          setSlippage={setSlippage}
+          setSlippageMode={setSlippageMode}
+          closeModal={closeSettingsModal}
+        />
+      </SettingsModal>
     </>
   );
 };

src/components/pages/add-liquidity-page/components/AddLiquidity/PreviewAddLiquidityDialog.tsx

@@ -26,9 +26,10 @@ export type AddLiquidityPreviewData = {
 type Props = {
   previewData: AddLiquidityPreviewData;
   setPreviewData: Dispatch<SetStateAction<AddLiquidityPreviewData | null>>;
+  slippage: number;
 }
 
-const PreviewAddLiquidityDialog = ({ previewData, setPreviewData }: Props) => {
+const PreviewAddLiquidityDialog = ({ previewData, setPreviewData, slippage }: Props) => {
   const [SuccessModal, openSuccessModal] = useModal();
   const [FailureModal, openFailureModal, closeFailureModal] = useModal();
 
@@ -48,6 +49,7 @@ const PreviewAddLiquidityDialog = ({ previewData, setPreviewData }: Props) => {
     secondAsset: previewData.assets[1].assetId,
     secondAssetAmount,
     isPoolStable: isStablePool,
+    slippage
   });
 
   const firstAssetAmountString = firstAssetAmount.formatUnits(firstAssetMetadata.decimals);

src/hooks/useAddLiquidity.ts

@@ -3,20 +3,28 @@ import useMiraDex from "@/src/hooks/useMiraDex/useMiraDex";
 import {useCallback} from "react";
 import {useWallet} from "@fuels/react";
 import {DefaultTxParams, MaxDeadline} from "@/src/utils/constants";
-import {BN} from "fuels";
-import { buildPoolId } from "mira-dex-ts";
+import {bn, BN} from "fuels";
+import {buildPoolId} from "mira-dex-ts";
 
 type Props = {
   firstAsset: string;
   firstAssetAmount: BN;
   secondAsset: string;
   secondAssetAmount: BN;
   isPoolStable: boolean;
+  slippage: number;
 };
 
-const useAddLiquidity = ({ firstAsset, firstAssetAmount, secondAsset, secondAssetAmount, isPoolStable }: Props) => {
+const useAddLiquidity = ({
+  firstAsset,
+  firstAssetAmount,
+  secondAsset,
+  secondAssetAmount,
+  isPoolStable,
+  slippage,
+}: Props) => {
   const mira = useMiraDex();
-  const { wallet } = useWallet();
+  const {wallet} = useWallet();
 
   const mutationFn = useCallback(async () => {
     if (!mira || !wallet) {
@@ -30,27 +38,55 @@ const useAddLiquidity = ({ firstAsset, firstAssetAmount, secondAsset, secondAsse
     if (poolId[0].bits === firstAsset && poolId[1].bits === secondAsset) {
       asset0Amount = firstAssetAmount;
       asset1Amount = secondAssetAmount;
-    } else if (poolId[0].bits === secondAsset && poolId[1].bits === firstAsset) {
+    } else if (
+      poolId[0].bits === secondAsset &&
+      poolId[1].bits === firstAsset
+    ) {
       asset0Amount = secondAssetAmount;
       asset1Amount = firstAssetAmount;
     } else {
-      throw new Error('Invalid pool id or asset configs');
+      throw new Error("Invalid pool id or asset configs");
     }
 
-    const minAsset0Amount = asset0Amount.mul(99).div(100);
-    const minAsset1Amount = asset1Amount.mul(99).div(100);
-    const txRequest = await mira.addLiquidity(poolId, asset0Amount, asset1Amount, minAsset0Amount, minAsset1Amount, MaxDeadline, DefaultTxParams);
+    const minAsset0Amount = asset0Amount
+      .mul(bn(10_000).sub(bn(slippage)))
+      .div(bn(10_000));
+
+    const minAsset1Amount = asset1Amount
+      .mul(bn(10_000).sub(bn(slippage)))
+      .div(bn(10_000));
+
+    const txRequest = await mira.addLiquidity(
+      poolId,
+      asset0Amount,
+      asset1Amount,
+      minAsset0Amount,
+      minAsset1Amount,
+      MaxDeadline,
+      DefaultTxParams
+    );
     const gasCost = await wallet.getTransactionCost(txRequest);
     const fundedTx = await wallet.fund(txRequest, gasCost);
-    const tx = await wallet.sendTransaction(fundedTx, { estimateTxDependencies: true });
+    const tx = await wallet.sendTransaction(fundedTx, {
+      estimateTxDependencies: true,
+    });
     return await tx.waitForResult();
-  }, [mira, wallet, firstAsset, secondAsset, isPoolStable, firstAssetAmount, secondAssetAmount]);
+  }, [
+    mira,
+    wallet,
+    firstAsset,
+    secondAsset,
+    isPoolStable,
+    firstAssetAmount,
+    secondAssetAmount,
+    slippage,
+  ]);
 
-  const { data, mutateAsync, isPending, error  } = useMutation({
+  const {data, mutateAsync, isPending, error} = useMutation({
     mutationFn,
   });
 
-  return { data, mutateAsync, isPending, error };
+  return {data, mutateAsync, isPending, error};
 };
 
 export default useAddLiquidity;