From 32d32dc7cf90906666b4b917c063ca73765e4d21 Mon Sep 17 00:00:00 2001
From: Tim Lind <tim@incremental.co>
Date: Fri, 25 Nov 2022 10:01:19 +0200
Subject: [PATCH] hook up asymmetric liquidity add toggle

---
 .../ManageLiquidityModal/AddLiquidityForm.tsx       | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/dex/src/compounds/ManageLiquidityModal/AddLiquidityForm.tsx b/apps/dex/src/compounds/ManageLiquidityModal/AddLiquidityForm.tsx
index e5a3e41e..91ee10b5 100644
--- a/apps/dex/src/compounds/ManageLiquidityModal/AddLiquidityForm.tsx
+++ b/apps/dex/src/compounds/ManageLiquidityModal/AddLiquidityForm.tsx
@@ -1,5 +1,5 @@
-import { Button, PlusIcon, RacetrackSpinnerIcon } from "@sifchain/ui";
-import { FormEventHandler, useCallback, useMemo } from "react";
+import { Button, PlusIcon, RacetrackSpinnerIcon, LockIcon, SettingsIcon } from "@sifchain/ui";
+import { FormEventHandler, useCallback, useMemo, useState } from "react";
 import { useBalanceQuery } from "~/domains/bank/hooks/balances";
 import useAddLiquidity from "~/domains/clp/formHooks/useAddLiquidity";
 import useAddLiquidityMutation from "~/domains/clp/hooks/useAddLiquidityMutation";
@@ -9,6 +9,7 @@ import TokenAmountFieldset from "../TokenAmountFieldset";
 import type { ManageLiquidityModalProps } from "./types";
 
 const AddLiquidityForm = (props: ManageLiquidityModalProps) => {
+  const [symmetric, setSymmetric] = useState<boolean>(false);
   const { data } = useSifnodeQuery("margin.getParams", [{}]);
   const isPoolUsedForMargin = useMemo(
     () => data?.params?.pools.includes(props.denom),
@@ -22,7 +23,7 @@ const AddLiquidityForm = (props: ManageLiquidityModalProps) => {
     nativeAmountDecimal,
     externalAmountDecimal,
     poolShare,
-  } = useAddLiquidity(props.denom);
+  } = useAddLiquidity(props.denom, symmetric);
   const addLiquidityMutation = useAddLiquidityMutation();
 
   const { data: nativeBalance } = useBalanceQuery(env?.sifChainId ?? "", env?.nativeAsset.symbol.toLowerCase() ?? "", {
@@ -59,6 +60,10 @@ const AddLiquidityForm = (props: ManageLiquidityModalProps) => {
     return <>{addLiquidityMutation.isLoading && <RacetrackSpinnerIcon />}Add liquidity</>;
   }, [addLiquidityMutation.isError, addLiquidityMutation.isLoading, addLiquidityMutation.isSuccess, validationError]);
 
+  const toggleSymmetry = useCallback(() => {
+    setSymmetric(!symmetric);
+  }, [setSymmetric, symmetric]);
+
   const onSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
     (event) => {
       event.preventDefault();
@@ -96,7 +101,7 @@ const AddLiquidityForm = (props: ManageLiquidityModalProps) => {
       />
       <div className="my-[-1em] flex items-center justify-center">
         <div className="rounded-full border-2 border-gray-800 bg-black p-3">
-          <PlusIcon />
+          { (symmetric) ? <LockIcon onClick={toggleSymmetry}/>  : <SettingsIcon onClick={toggleSymmetry}/> }
         </div>
       </div>
       <TokenAmountFieldset