diff --git a/src/components/pool/liquidity/common/add-liquidity.test.tsx b/src/components/pool/liquidity/common/add-liquidity.test.tsx new file mode 100644 index 00000000..8cb0581c --- /dev/null +++ b/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( + + ); + }; + + + 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(); + }); +}); diff --git a/src/components/pool/liquidity/common/add-liquidity.tsx b/src/components/pool/liquidity/common/add-liquidity.tsx index 789c75b3..a98fcaf4 100644 --- a/src/components/pool/liquidity/common/add-liquidity.tsx +++ b/src/components/pool/liquidity/common/add-liquidity.tsx @@ -1,23 +1,75 @@ 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({ + token1: "", + token2: "", + amount1: "", + amount2: "", + feeTier: "", + }); + const [priceRange, setPriceRange] = React.useState({ + 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 ( @@ -25,12 +77,46 @@ export default function AddLiquidity() { - + - + + +
{ + handlePreview(); + setPreviewOpen(true); + }} + > + +
+ + {previewOpen && ( + + + + )} diff --git a/src/components/pool/liquidity/common/add-liquidity/deposit-amounts/__snapshots__/deposit.amount.test.tsx.snap b/src/components/pool/liquidity/common/add-liquidity/deposit-amounts/__snapshots__/deposit.amount.test.tsx.snap new file mode 100644 index 00000000..21a7841f --- /dev/null +++ b/src/components/pool/liquidity/common/add-liquidity/deposit-amounts/__snapshots__/deposit.amount.test.tsx.snap @@ -0,0 +1,574 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DepositAmounts component checks if the component matches the snapshot 1`] = ` +.emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + min-width: 0; + padding: 0; + margin: 0; + border: 0; + vertical-align: top; +} + +.emotion-0 .MuiOutlinedInput-input { + font-size: 1.375rem; + width: 229px; +} + +.emotion-0 .MuiOutlinedInput-root fieldset { + border: 0px; +} + +.emotion-1 { + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 400; + font-size: 1rem; + line-height: 1.4375em; + letter-spacing: 0.00938em; + color: rgba(0, 0, 0, 0.87); + box-sizing: border-box; + position: relative; + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + border-radius: 4px; +} + +.emotion-1.Mui-disabled { + color: rgba(0, 0, 0, 0.38); + cursor: default; +} + +.emotion-1:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.87); +} + +@media (hover: none) { + .emotion-1:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } +} + +.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline { + border-color: #1976d2; + border-width: 2px; +} + +.emotion-1.Mui-error .MuiOutlinedInput-notchedOutline { + border-color: #d32f2f; +} + +.emotion-1.Mui-disabled .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.26); +} + +.emotion-2 { + font: inherit; + letter-spacing: inherit; + color: currentColor; + padding: 4px 0 5px; + border: 0; + box-sizing: content-box; + background: none; + height: 1.4375em; + margin: 0; + -webkit-tap-highlight-color: transparent; + display: block; + min-width: 0; + width: 100%; + -webkit-animation-name: mui-auto-fill-cancel; + animation-name: mui-auto-fill-cancel; + -webkit-animation-duration: 10ms; + animation-duration: 10ms; + padding: 16.5px 14px; +} + +.emotion-2::-webkit-input-placeholder { + color: currentColor; + opacity: 0.42; + -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.emotion-2::-moz-placeholder { + color: currentColor; + opacity: 0.42; + -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.emotion-2:-ms-input-placeholder { + color: currentColor; + opacity: 0.42; + -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.emotion-2::-ms-input-placeholder { + color: currentColor; + opacity: 0.42; + -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.emotion-2:focus { + outline: 0; +} + +.emotion-2:invalid { + box-shadow: none; +} + +.emotion-2::-webkit-search-decoration { + -webkit-appearance: none; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-2::-webkit-input-placeholder { + opacity: 0!important; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-2::-moz-placeholder { + opacity: 0!important; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:-ms-input-placeholder { + opacity: 0!important; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-2::-ms-input-placeholder { + opacity: 0!important; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-webkit-input-placeholder { + opacity: 0.42; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-moz-placeholder { + opacity: 0.42; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus:-ms-input-placeholder { + opacity: 0.42; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-2:focus::-ms-input-placeholder { + opacity: 0.42; +} + +.emotion-2.Mui-disabled { + opacity: 1; + -webkit-text-fill-color: rgba(0, 0, 0, 0.38); +} + +.emotion-2:-webkit-autofill { + -webkit-animation-duration: 5000s; + animation-duration: 5000s; + -webkit-animation-name: mui-auto-fill; + animation-name: mui-auto-fill; +} + +.emotion-2:-webkit-autofill { + border-radius: inherit; +} + +.emotion-3 { + text-align: left; + position: absolute; + bottom: 0; + right: 0; + top: -5px; + left: 0; + margin: 0; + padding: 0 8px; + pointer-events: none; + border-radius: inherit; + border-style: solid; + border-width: 1px; + overflow: hidden; + min-width: 0%; + border-color: rgba(0, 0, 0, 0.23); +} + +.emotion-4 { + float: unset; + overflow: hidden; + padding: 0; + line-height: 11px; + -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; + transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; +} + +.emotion-5 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + background-color: transparent; + outline: 0; + border: 0; + margin: 0; + border-radius: 0; + padding: 0; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + -moz-appearance: none; + -webkit-appearance: none; + -webkit-text-decoration: none; + text-decoration: none; + color: inherit; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 500; + font-size: 0.875rem; + line-height: 1.75; + letter-spacing: 0.02857em; + text-transform: uppercase; + min-width: 64px; + padding: 6px 8px; + border-radius: 4px; + -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + color: #1976d2; +} + +.emotion-5::-moz-focus-inner { + border-style: none; +} + +.emotion-5.Mui-disabled { + pointer-events: none; + cursor: default; +} + +@media print { + .emotion-5 { + -webkit-print-color-adjust: exact; + color-adjust: exact; + } +} + +.emotion-5:hover { + -webkit-text-decoration: none; + text-decoration: none; + background-color: rgba(25, 118, 210, 0.04); +} + +@media (hover: none) { + .emotion-5:hover { + background-color: transparent; + } +} + +.emotion-5.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-6 { + overflow: hidden; + pointer-events: none; + position: absolute; + z-index: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: inherit; +} + +
+
+
+
+
+
+
+
+ + +
+
+ +
+
+ + + + + + 0 + +
+
+
+
+
+ + + + +
+
+
+
+
+
+ + +
+
+ +
+
+ + + + + + 0 + +
+
+
+
+
+
+
+
+

+ Fee Tier +

+
+
+ + + + +
+
+
+
+
+`; diff --git a/src/components/pool/liquidity/common/add-liquidity/deposit-amounts/deposit-amounts.tsx b/src/components/pool/liquidity/common/add-liquidity/deposit-amounts/deposit-amounts.tsx index 5c6ad5bc..7988eb67 100644 --- a/src/components/pool/liquidity/common/add-liquidity/deposit-amounts/deposit-amounts.tsx +++ b/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,31 +26,24 @@ 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 ( @@ -57,12 +51,13 @@ export default function DepositAmounts() {
@@ -86,7 +81,7 @@ export default function DepositAmounts() {
-
+
); } diff --git a/src/components/pool/liquidity/common/add-liquidity/preview-screen/preview-screen.tsx b/src/components/pool/liquidity/common/add-liquidity/preview-screen/preview-screen.tsx new file mode 100644 index 00000000..ec0c5a4d --- /dev/null +++ b/src/components/pool/liquidity/common/add-liquidity/preview-screen/preview-screen.tsx @@ -0,0 +1,226 @@ +import * as React from "react"; +import { + Card, + CardContent, + Typography, +} from "@mui/material"; + +import { variables } from "../../../../../../theme"; +import { makeStyles } from "@mui/styles"; +import { MdClose } from "react-icons/md"; +import useOutsideClick from "../../../../../../lib/utility/click-functions/outside-click"; + +const useStyles = makeStyles({ + confirmSwapCard: { + position: "absolute", + top: "20vh", + left: "40%", + width: "451px", + zIndex: "2", + textAlign: "left", + backgroundColor: "#fff", + }, + confirmSwap: { + fontSize: "20px", + }, + mdClose: { + fontSize: "20px", + }, + + confirmLiquidityButton: { + display: "flex", + flexDirection: "row", + alignItems: "center", + padding: "16px ", + backgroundColor: variables.primary.superPurple, + borderRadius: "4px", + color: variables.white, + fontSize: "20px", + marginTop: "32px", + width: "100%", + height: "56px", + justifyContent: "center", + border: "none" + }, + mdHelpOutlineIcon: { + color: variables.primary.darkSilver, + cursor: "pointer", + }, + topBanner: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + marginBottom: "7%", + flexWrap: "wrap" + }, + tokenSection: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + listStyle: "none", + fontSize: "28px" + }, + poolTokens: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center" + }, + poolTokenNames: { + fontSize: "28px" + }, + poolTokenText: { + fontSize: "16px", + fontWeight: "600", + + }, + poolArea: { + + fontWeight: "600", + + }, + poolAreaToken: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + fontSize: "24px", + }, + selectedRange: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + + }, + selectedRangeButtons: { + backgroundColor: "#E7E9F9", + alignItems: "center", + borderRadius: "8px", + padding: "2px 1px 2px 1px" + }, + selectedRangeButton: { + border: "0px", + borderRadius: "8px", + backgroundColor: variables.white, + padding: "4px 10px 4px 10px" + }, + priceButtons: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + gap: "10px", + marginBottom: "2%" + }, + priceButton: { + textAlign: "center", + backgroundColor: "#FAFBFC", + borderRadius: "8px", + border: "1px solid #E7E9F9", + }, + currentPrice: { + width: "100%", + textAlign: "center", + backgroundColor: "#FAFBFC", + borderRadius: "8px", + border: "1px solid #E7E9F9", + fontWeight: "500" + } + +}); + +export default function PreviewScreen(props: any) { + const classes = useStyles(); + const checkClick = React.useRef(null); + useOutsideClick(checkClick, props.handlePreviewOpen); + return ( + + { + + <> +
+ + Add Liquidity + + { + props.handlePreviewOpen(false); + } + } + /> +
+
+
+

+ {props.depositAmount.token1 + + " / " + + props.depositAmount.token2} +

+
+
+

In range

+
+
+
+
+
{props.depositAmount.token1}
+
{props.depositAmount.amount1}
+
+
+
{props.depositAmount.token2}
+
{props.depositAmount.amount2}
+
+
+
Fee Tier
+
{props.depositAmount.feeTier}
+
+
+
+

Selected Range

+
+ + +
+
+
+
+

Min Price

+

{props.priceRange.minPrice}

+

{props.depositAmount.token1} per {props.depositAmount.token2}

+

Your position will be 100% composed of {props.depositAmount.token1} at this price.

+
+
+

Max Price

+

{props.priceRange.maxPrice}

+

{props.depositAmount.token1} per {props.depositAmount.token2}

+

Your position will be 100% composed of {props.depositAmount.token2} at this price.

+
+
+
+
+

Current Price

+

{props.priceRange.currentPrice}

+

ETH per LSK

+
+
+ + + + } + + ); +} diff --git a/src/components/pool/liquidity/common/add-liquidity/set-price-range/deposit-button.tsx b/src/components/pool/liquidity/common/add-liquidity/set-price-range/deposit-button.tsx index 7ca78794..0d09b8e7 100644 --- a/src/components/pool/liquidity/common/add-liquidity/set-price-range/deposit-button.tsx +++ b/src/components/pool/liquidity/common/add-liquidity/set-price-range/deposit-button.tsx @@ -9,18 +9,21 @@ const useStyles = makeStyles({ button: { width: "100%", border: "0px", - borderRadius: "4px", + borderRadius: "8px", color: variables.white, - backgroundColor: variables.primary.superPurple + backgroundColor: variables.primary.superPurple, + fontSize: "20px", + margin: "2% 0% 0% 0%", + cursor: "pointer" } }) export default function DepositButton(props:Iprops){ const classes = useStyles(); return( ) } \ No newline at end of file diff --git a/src/components/pool/liquidity/common/add-liquidity/set-price-range/price-banner.tsx b/src/components/pool/liquidity/common/add-liquidity/set-price-range/price-banner.tsx index 78cc350e..fce4cd9d 100644 --- a/src/components/pool/liquidity/common/add-liquidity/set-price-range/price-banner.tsx +++ b/src/components/pool/liquidity/common/add-liquidity/set-price-range/price-banner.tsx @@ -2,13 +2,6 @@ import { makeStyles } from "@mui/styles"; import React from "react"; import {MdAdd , MdRemove} from "react-icons/md"; -interface Iprops { - buttonTitle: string; - amount: string; - tokenTitle: string; - -} - const useStyles = makeStyles({ button: { width: "45%", @@ -49,8 +42,10 @@ export default function PriceBanner(props: Iprops) { } if (amountVal>0 ){ setCalculatedAmount(amountVal.toString()); + props.setPrice(amountVal.toString()); }else{ setCalculatedAmount("0"); + props.setPrice(amountVal.toString()); } }; diff --git a/src/components/pool/liquidity/common/add-liquidity/set-price-range/set-price-range.tsx b/src/components/pool/liquidity/common/add-liquidity/set-price-range/set-price-range.tsx index d941fe54..57730e14 100644 --- a/src/components/pool/liquidity/common/add-liquidity/set-price-range/set-price-range.tsx +++ b/src/components/pool/liquidity/common/add-liquidity/set-price-range/set-price-range.tsx @@ -1,11 +1,9 @@ import { makeStyles } from "@mui/styles"; import React from "react"; -import DepositButton from "./deposit-button"; +import CreatePool from "../../../create-pool/create-pool"; import PriceBanner from "./price-banner"; -interface Iprops { - componentName: string; -} + const useStyles = makeStyles({ setPriceRange: { @@ -29,23 +27,9 @@ const useStyles = makeStyles({ }, }); -export default function SetPriceRange(props: Iprops) { - const componentName: string = props.componentName; - const [buttonTitle, setButtonTile] = React.useState("Enter an Amount"); - const [userInputAmount, setUserInputAmount] = React.useState(""); - const [currentLSKperTokenAmount, setCurrentLSKperTokenAmount] = React.useState(""); - const [minAmount, setminAmount] = React.useState(""); - const [maxAmount, setmaxAmount] = React.useState(""); - - const classes = useStyles(); +export default function SetPriceRange(props:any) { - const handelButtonTitle = () =>{ - if (userInputAmount==null || userInputAmount.toLowerCase() == "0"){ - return("Enter an Amount"); - }else if (minAmount==null || minAmount.toLowerCase() == "0" || maxAmount==null || maxAmount.toLowerCase() == "0"){ - return("Set price Range"); - } - } + const classes = useStyles(); return (
@@ -58,6 +42,7 @@ export default function SetPriceRange(props: Iprops) { } }} */} +
Set price range
@@ -65,18 +50,18 @@ export default function SetPriceRange(props: Iprops) { buttonTitle={"Min Price"} amount={"0"} tokenTitle={"Eth per DAI"} + setPrice = {props.setMinPrice} />
-
- -
+
); } diff --git a/src/components/pool/liquidity/common/models/liquidity-models.tsx b/src/components/pool/liquidity/common/models/liquidity-models.tsx new file mode 100644 index 00000000..f7404863 --- /dev/null +++ b/src/components/pool/liquidity/common/models/liquidity-models.tsx @@ -0,0 +1,14 @@ +export interface IpriceRange { + minPrice: string, + maxPrice: string, + currentPrice: string + } + +export interface IdepositAmounts { + token1: string, + token2: string, + amount1: string, + amount2: string, + feeTier: string, + } + \ No newline at end of file diff --git a/src/components/pool/liquidity/create-pool/__snapshots__/price-input-box.test.tsx.snap b/src/components/pool/liquidity/create-pool/__snapshots__/price-input-box.test.tsx.snap new file mode 100644 index 00000000..9b2e4638 --- /dev/null +++ b/src/components/pool/liquidity/create-pool/__snapshots__/price-input-box.test.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PriceInputBox component checks if the component matches the snapshot 1`] = ` +
+
+

+ Current LSK per ETH price +

+ +
+
+`; diff --git a/src/components/pool/liquidity/create-pool/create-pool-text.tsx b/src/components/pool/liquidity/create-pool/create-pool-text.tsx new file mode 100644 index 00000000..defdd0ef --- /dev/null +++ b/src/components/pool/liquidity/create-pool/create-pool-text.tsx @@ -0,0 +1,26 @@ +import { makeStyles } from "@mui/styles" + +const useStyles = makeStyles ({ + textField: { + fontSize: "14px", + lineHeight: "24px", + backgroundColor: "#E7E9F9", + padding: "16px", + border: "1px solid #6953F4", + borderRadius: "8px", + margin: "0px", + fontWeight: "500" + } +}) +export default function CreatePoolText(){ + const classes = useStyles(); + return( + <> +

+ This pool must be initialized before you can add liquidity. To initialize, select a starting price for the pool. Then, enter your liquidity price range and deposit amount. Gas fees will be higher than usual due to the initialization transaction. +

+ + + + ) +} \ No newline at end of file diff --git a/src/components/pool/liquidity/create-pool/create-pool.tsx b/src/components/pool/liquidity/create-pool/create-pool.tsx new file mode 100644 index 00000000..4d9f2d09 --- /dev/null +++ b/src/components/pool/liquidity/create-pool/create-pool.tsx @@ -0,0 +1,12 @@ +import CreatePoolText from "./create-pool-text" +import PriceInputBox from "./price-input-box" + +export default function CreatePool(){ + return ( + <> + + + + + ) +} \ No newline at end of file diff --git a/src/components/pool/liquidity/create-pool/price-input-box.test.tsx b/src/components/pool/liquidity/create-pool/price-input-box.test.tsx new file mode 100644 index 00000000..070237f0 --- /dev/null +++ b/src/components/pool/liquidity/create-pool/price-input-box.test.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; +import "@testing-library/jest-dom/extend-expect"; +import { screen, fireEvent, render } from "@testing-library/react"; +import PriceInputBox from "./price-input-box"; + +const renderComponent = () => { + return render(); +}; + +describe("PriceInputBox component", () => { + it("checks if the component matches the snapshot", () => { + const { container } = renderComponent(); + expect(container).toMatchSnapshot(); + }); + + it("checks if input is working correctly on entering text", () => { + const wrapper = renderComponent(); + const amountInput = wrapper.getByTestId("amount-input"); + fireEvent.change(amountInput, { target: { value: "2000" } }); + expect(screen.getByTestId("amount-input")).toHaveValue("2000"); + }); +}); diff --git a/src/components/pool/liquidity/create-pool/price-input-box.tsx b/src/components/pool/liquidity/create-pool/price-input-box.tsx new file mode 100644 index 00000000..a9725514 --- /dev/null +++ b/src/components/pool/liquidity/create-pool/price-input-box.tsx @@ -0,0 +1,64 @@ +import { makeStyles } from "@mui/styles"; +import { variables } from "../../../../theme"; + + + + +const useStyles = makeStyles({ + amountTextTokenField: { + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + borderColor: variables.primary.stone, + border: "1px solid", + borderRadius: "4px", + height: "56px" + + }, + inputFieldText: { + padding: "0px 0px 0px 5px", + width: "100%", + fontSize: "20px", + lineHeight: "24px", + color: variables.primary.darkSilver, + textAlign: "left" + }, + input: { + padding: "0px 0px 0px 5px", + width: "25%", + fontSize: "20px", + lineHeight: "24px", + borderRadius: "4px", + textAlign: "left", + height: "50px", + border: "0px solid black", + outline: "none", + }, + +}) + +interface Iprops { + defaultText:string +} + + + +export default function PriceInputBox(props:Iprops){ + const classes = useStyles(); + const handleInputValue=()=>{ + if (props.defaultText!= null){ + return (

Current LSK per ETH price

) + } + } + return ( + <> +
+ {handleInputValue()} + + +
+ + + ) +} \ No newline at end of file diff --git a/src/components/pool/liquidity/home/liquidity-home.tsx b/src/components/pool/liquidity/home/liquidity-home.tsx index 1f39a280..115c5369 100644 --- a/src/components/pool/liquidity/home/liquidity-home.tsx +++ b/src/components/pool/liquidity/home/liquidity-home.tsx @@ -9,6 +9,7 @@ import theme from "../../../../theme/theme"; import PoolHomeButton from "./home-button"; import { MdHelpOutline } from "react-icons/md"; import { variables } from "../../../../theme"; +import Link from "next/link"; const useStyles = makeStyles({ grid: { display: "flex", @@ -99,8 +100,12 @@ export default function LiquidityHome() {
-
+
+ + + +