diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 791668934..aef0803eb 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -67,6 +67,7 @@ "react-use": "^17.3.2", "set-interval-async": "^2.0.3", "subscriptions-transport-ws": "^0.11.0", + "use-debounce": "^8.0.4", "web3": "^1.5.2" }, "devDependencies": { diff --git a/packages/frontend/pages/_document.tsx b/packages/frontend/pages/_document.tsx index aaa8fff62..ec3eae1a9 100644 --- a/packages/frontend/pages/_document.tsx +++ b/packages/frontend/pages/_document.tsx @@ -11,6 +11,11 @@ export default class MyDocument extends Document { href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;300;400;500;700&display=swap" rel="stylesheet" /> + {/* new font introduced with the new lp page */} +
diff --git a/packages/frontend/pages/new-lp.tsx b/packages/frontend/pages/new-lp.tsx new file mode 100644 index 000000000..1e2b4a4a9 --- /dev/null +++ b/packages/frontend/pages/new-lp.tsx @@ -0,0 +1,132 @@ +import Nav from '@components/Nav' +import { createStyles, makeStyles, ThemeProvider } from '@material-ui/core/styles' +import { Grid, Typography } from '@material-ui/core' +import React, { useState, useCallback, useEffect } from 'react' +import { useAtomValue } from 'jotai' +import BigNumber from 'bignumber.js' + +import { AltPrimaryButton } from '@components/Button' +import { PageHeader, PreviewModal, InputToken, Footer } from '@components/Lp' +import { useWalletBalance } from '@state/wallet/hooks' +import { connectedWalletAtom } from '@state/wallet/atoms' +import { useETHPrice } from '@hooks/useETHPrice' +import { BIG_ZERO } from '@constants/index' +import { toTokenAmount } from '@utils/calculations' +import ethLogo from 'public/images/eth-logo.svg' +import getTheme, { Mode } from '../src/theme' + +const useStyles = makeStyles((theme) => + createStyles({ + container: { + padding: theme.spacing(9, 10), + maxWidth: '1500px', + width: '95%', + marginLeft: 'auto', + marginRight: 'auto', + }, + title: { + fontSize: '24px', + fontWeight: 700, + letterSpacing: '-0.02em', + }, + subtitle: { + fontSize: '18px', + fontWeight: 400, + color: theme.palette.grey[400], + }, + margin: { + marginTop: theme.spacing(4), + }, + }), +) + +const LPPage: React.FC = () => { + const { data: walletBalance } = useWalletBalance() + const ethPrice = useETHPrice() + const connectedWallet = useAtomValue(connectedWalletAtom) + + const [ethToDeposit, setETHToDeposit] = useState('0') + const [isPreviewModalOpen, setPreviewModalOpen] = useState(false) + const [inputError, setInputError] = useState('') + + const ethBalance = toTokenAmount(walletBalance ?? BIG_ZERO, 18) + const classes = useStyles() + const isPreviewButtonDisabled = !connectedWallet || Number(ethToDeposit) === 0 || inputError !== '' + + useEffect(() => { + if (ethBalance.lt(ethToDeposit)) { + setInputError('Insufficient balance') + } else { + setInputError('') + } + }, [ethToDeposit, ethBalance]) + + const handleBalanceClick = useCallback( + () => setETHToDeposit(ethBalance.toFixed(4, BigNumber.ROUND_DOWN)), + [ethBalance], + ) + + return ( + <> +