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,122 @@
 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}
+              />
             </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>