opynfinance · nikkaroraa · Oct 31, 2022 · Nov 2, 2022 · Nov 3, 2022 · Nov 3, 2022
diff --git 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
@@ -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 */}
+          <link
+            href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@300;400;500&display=swap"
+            rel="stylesheet"
+          />
         </Head>
         <body>
           <Main />

diff --git a/packages/frontend/pages/new-lp.tsx 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 (
+    <>
+      <Nav />
+      <PageHeader />
+
+      <Grid container spacing={10} justifyContent="center" className={classes.container}>
+        <Grid item xs={12} md={8}>
+          <Typography variant="h3" className={classes.title}>
+            Pool returns
+          </Typography>
+          <Typography variant="subtitle1" className={classes.subtitle}>
+            Total return combines fees and funding.
+          </Typography>
+        </Grid>
+
+        <Grid item xs md>
+          <Typography variant="h3" className={classes.title}>
+            Deposit ETH
+          </Typography>
+
+          <InputToken
+            id="eth-deposit-amount"
+            value={ethToDeposit}
+            onInputChange={setETHToDeposit}
+            error={!!inputError}
+            helperText={inputError}
+            symbol="ETH"
+            logo={ethLogo}
+            usdPrice={ethPrice}
+            balance={ethBalance}
+            onBalanceClick={handleBalanceClick}
+          />
+
+          <AltPrimaryButton
+            className={classes.margin}
+            id="preview-deposit-btn"
+            onClick={() => setPreviewModalOpen(true)}
+            disabled={isPreviewButtonDisabled}
+            fullWidth
+          >
+            {connectedWallet ? 'Preview deposit' : 'Connect wallet to deposit'}
+          </AltPrimaryButton>
+        </Grid>
+      </Grid>
+
+      <Footer />
+
+      <PreviewModal
+        ethToDeposit={ethToDeposit}
+        setETHToDeposit={setETHToDeposit}
+        isOpen={isPreviewModalOpen}
+        onClose={() => setPreviewModalOpen(false)}
+      />
+    </>
+  )
+}
+
+const ThemeWrapper: React.FC = () => (
+  <ThemeProvider theme={getTheme(Mode.NEW_DARK)}>
+    <LPPage />
+  </ThemeProvider>
+)
+
+export default ThemeWrapper
diff --git a/packages/frontend/public/images/eth-logo.svg b/packages/frontend/public/images/eth-logo.svg