Implement add liquidity create pool -Closes (#32)

src/components/pool/liquidity/common/add-liquidity.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import AddLiquidity from './add-liquidity';
+import { screen, render } from "@testing-library/react";
+
+
+jest.mock('./add-liquidity/deposit-amounts/deposit-amounts.tsx', () => ({
+    __esModule: true,
+    default: jest.fn().mockReturnValue('deposit-amounts'),
+  }));
+
+  jest.mock('./add-liquidity/set-price-range/set-price-range.tsx', () => ({
+    __esModule: true,
+    default: jest.fn().mockReturnValue('set-price-range'),
+  }));
+
+  const renderComponent = () => {
+    return render(
+      <AddLiquidity />
+    );
+  };
+
+
+  describe("AddLiquidity component", () => {
+    it("checks if the component matches the snapshot", () => {
+      renderComponent();
+      expect(screen.getByText('deposit-amounts')).toBeInTheDocument();
+      expect(screen.getByText('set-price-range')).toBeInTheDocument();
+    });  
+});

src/components/pool/liquidity/common/add-liquidity.tsx

@@ -1,36 +1,129 @@
 import * as React from "react";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
-import { Container, Grid, } from "@mui/material";
+import { Container, Grid } from "@mui/material";
 import TopBanner from "./add-liquidity/top-banner";
 import DepositAmounts from "./add-liquidity/deposit-amounts/deposit-amounts";
 import SetPriceRange from "./add-liquidity/set-price-range/set-price-range";
 import { makeStyles } from "@mui/styles";
+import { IdepositAmounts, IpriceRange } from "./models/liquidity-models";
+import PreviewScreen from "./add-liquidity/preview-screen/preview-screen";
+import DepositButton from "./add-liquidity/set-price-range/deposit-button";
 
-const useStyles = makeStyles ({
+const useStyles = makeStyles({
   container: {
-    padding: "5%"
+    padding: "5%",
   },
   card: {
-    width: "95%"
-  }
-})
+    width: "95%",
+  },
+});
 
 export default function AddLiquidity() {
   const classes = useStyles();
+  const [previewOpen, setPreviewOpen] = React.useState(false);
+
+  const [depositAmount, setDepositAmount] = React.useState<IdepositAmounts>({
+    token1: "",
+    token2: "",
+    amount1: "",
+    amount2: "",
+    feeTier: "",
+  });
+  const [priceRange, setPriceRange] = React.useState<IpriceRange>({
+    minPrice: "",
+    maxPrice: "",
+    currentPrice: "",
+  });
+
+  const [token1, setToken1] = React.useState("");
+  const [token2, setToken2] = React.useState("");
+  const [amount1, setAmount1] = React.useState("");
+  const [amount2, setAmount2] = React.useState("");
+  const [feeTier, setFeeTier] = React.useState("");
+  const [minPrice, setMinPrice] = React.useState("0");
+  const [maxPrice, setMaxPrice] = React.useState("0");
+  const [currentPrice, setCurrentPrice] = React.useState("3000");
+
+  // const handleDepositAmountToken1 = (val:string) =>{
+  //   setDepositAmount({token1:val, token2: "",amount1: "",amount2: "",feeTier: ""});
+  //   console.log(depositAmount);
+  // }
+
+  const handlePreview = () => {
+    setDepositAmount({
+      token1: token1,
+      token2: token2,
+      amount1: amount1,
+      amount2: amount2,
+      feeTier: feeTier,
+    });
+    setPriceRange({
+      minPrice: minPrice,
+      maxPrice: maxPrice,
+      currentPrice: currentPrice,
+    });
+
+
+
+  };
+
+  const handlePreviewOpen = (clickEvent: boolean) => {
+    setPreviewOpen(clickEvent);
+  };
+
   return (
     <Container className={classes.container}>
       <Card className={classes.card}>
         <CardContent>
           <TopBanner />
           <Grid container spacing={6} direction="row">
             <Grid item lg={6}>
-              <DepositAmounts />
+              <DepositAmounts
+                token1={token1}
+                token2={token2}
+                amount1={amount1}
+                amount2={amount2}
+                setToken1={setToken1}
+                setToken2={setToken2}
+                setAmount1={setAmount1}
+                setAmount2={setAmount2}
+                setFeeTier={setFeeTier}
+              />
             </Grid>
             <Grid item lg={6}>
-              <SetPriceRange />
+              <SetPriceRange
+                setMinPrice={setMinPrice}
+                setMaxPrice={setMaxPrice}
+                setCurrentPrice={setCurrentPrice}
+                depositAmount={depositAmount}
+                priceRange={priceRange}
+                token1={token1}
+                token2={token2}
+
+              />
             </Grid>
           </Grid>
+          <Grid>
+            <div
+              onClick={() => {
+                handlePreview();
+                setPreviewOpen(true);
+              }}
+            >
+              <DepositButton buttonTitle={"Preview"} />
+            </div>
+          </Grid>
+          {previewOpen && (
+            <Card>
+              <PreviewScreen
+                depositAmount={depositAmount}
+                priceRange={priceRange}
+                open={true}
+                handlePreviewOpen={handlePreviewOpen}
+              />
+            </Card>
+          )}
         </CardContent>
       </Card>
     </Container>

src/components/pool/liquidity/common/add-liquidity/deposit-amounts/deposit-amounts.tsx

@@ -4,6 +4,7 @@ import TokenAmount from "../../../../../token-swap/swap-tokens/card/token-amount
 import FeeTier from "./fee-tier";
 import { MdOutlineSwapVerticalCircle } from "react-icons/md";
 
+
 const useStyles = makeStyles({
   depositAmounts: {
     width: "100%",
@@ -25,44 +26,38 @@ const useStyles = makeStyles({
   },
 });
 
-export default function DepositAmounts() {
+export default function DepositAmounts(props:any) {
   const classes = useStyles();
   const [selectOpen, setSelectOpen] = React.useState(false);
-  const [token1, setToken1] = React.useState("");
-  const [token2, setToken2] = React.useState("");
-
-  const [amount1, setAmount1] = React.useState("");
-  const [amount2, setAmount2] = React.useState("");
-
-  const [feetier, setFeeTier] = React.useState("");
 
   const handlePopularPairing = (token1: string, token2: string) => {
-    setToken2(token2);
-    setToken1(token1);
+    props.setToken2(token2);
+    props.setToken1(token1);
   };
 
   const handleTokenRotateButtonClick = () => {
-    setAmount1(amount2);
-    setAmount2(amount1);
-    setToken2(token1);
-    setToken1(token2);
+    props.setAmount1(props.amount2);
+    props.setAmount2(props.amount1);
+    props.setToken2(props.token1);
+    props.setToken1(props.token2);
   };
 
   const handleFeeTier  = (value:string) =>{
-    setFeeTier(value);
+    props.setFeeTier(value);
   }
 
   return (
     <section>
       <div className={classes.tokenAmounts}>
         <div>
           <TokenAmount
-            handleAmount={setAmount1}
-            amount={amount1}
-            handleToken={setToken1}
-            token={token1}
+            handleAmount={props.setAmount1}
+            amount={props.amount1}
+            handleToken={props.setToken1}
+            token={props.token1}
             click={selectOpen}
             handlePopularPairing = {handlePopularPairing}
+
           />
         </div>
         <div
@@ -75,18 +70,18 @@ export default function DepositAmounts() {
         </div>
         <div>
           <TokenAmount
-            handleAmount={setAmount2}
-            amount={amount2}
-            handleToken={setToken2}
-            token={token2}
+            handleAmount={props.setAmount2}
+            amount={props.amount2}
+            handleToken={props.setToken2}
+            token={props.token2}
             click={selectOpen}
             handlePopularPairing={handlePopularPairing}
           />
         </div>
       </div>
       <div className={classes.feeTier}>
         <FeeTier handleFeeTier={handleFeeTier}/>
-      </div>
+      </div>      
     </section>
   );
 }