Skip to content

Commit

Permalink
UI: LP page redesign (#802)
Browse files Browse the repository at this point in the history 
* feat: using new ui components in LP trade section

* style: adjust layout of /lp page

* fix: use the new mint component on /mint as well

* style: lp page content redesign

* refactor: use standard MetricLabel

* style: <sup /> tag affecting line height

* refactor: change classname for consistency in naming

* refactor: minor refactor after self review

* rewording

* rebase adjustments
  • Loading branch information
@nikkaroraa
nikkaroraa authored Jan 10, 2023
1 parent 28b91cb commit 73ee440
Show file tree
Hide file tree
Showing 22 changed files with 885 additions and 884 deletions.
323 changes: 179 additions & 144 deletions packages/frontend/pages/lp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,209 @@
import { createStyles, makeStyles } from '@material-ui/core'
import Typography from '@material-ui/core/Typography'
import Image from 'next/image'
import { Box, Typography } from '@material-ui/core'
import React, { useState } from 'react'

import squeethTokenSymbol from '../public/images/Squeeth.svg'
import ObtainSqueeth from '@components/Lp/ObtainSqueeth'
import SqueethInfo from '@components/Lp/SqueethInfo'
import LPPosition from '@components/Lp/LPPosition'
import LPBuyChart from '@components/Charts/LPBuyChart'
import LPMintChart from '@components/Charts/LPMintChart'
import Nav from '@components/Nav'
import { LPProvider } from '@context/lp'
import { useRestrictUser } from '@context/restrict-user'
import { SqueethTabNew, SqueethTabsNew } from '@components/Tabs'
import { useETHPrice } from '@hooks/useETHPrice'
import { supportedNetworkAtom } from 'src/state/wallet/atoms'
import { useAtomValue } from 'jotai'

const useStyles = makeStyles((theme) =>
createStyles({
container: {
padding: theme.spacing(4, 10),
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: '1500px',
maxWidth: '1280px',
width: '80%',
display: 'flex',
justifyContent: 'space-between',
},
logoContainer: {
display: 'flex',
alignItems: 'center',
width: '100%',
},
logoTitle: {
marginLeft: theme.spacing(1),
justifyContent: 'center',
gridGap: '96px',
flexWrap: 'wrap',
padding: theme.spacing(6, 5),
margin: '0 auto',
[theme.breakpoints.down('lg')]: {
maxWidth: 'none',
width: '90%',
},
[theme.breakpoints.down('md')]: {
width: '100%',
gridGap: '40px',
},
[theme.breakpoints.down('sm')]: {
fontSize: 18,
padding: theme.spacing(3, 4),
},
[theme.breakpoints.down('xs')]: {
padding: theme.spacing(3, 3),
},
},
logoSubTitle: {
marginLeft: theme.spacing(1),
[theme.breakpoints.down('sm')]: {
fontSize: 16,
leftColumn: {
flex: 1,
minWidth: '480px',
[theme.breakpoints.down('xs')]: {
minWidth: '320px',
},
},
rightColumn: {
flexBasis: '452px',
[theme.breakpoints.down('xs')]: {
flex: '1',
},
},
logo: {
marginTop: theme.spacing(0.5),
alignSelf: 'flex-start',
title: {
fontSize: '28px',
fontWeight: 700,
letterSpacing: '-0.02em',
},
comparison: {
marginTop: theme.spacing(4),
//paddingBottom: theme.spacing(2),
description: {
fontSize: '18px',
fontWeight: 400,
color: theme.palette.grey[400],
},
comparisonItem: {
width: '400px',
subtitle: {
fontSize: '22px',
fontWeight: 700,
letterSpacing: '-0.01em',
},
comparisonPoint: {
marginTop: theme.spacing(2),
padding: theme.spacing(0, 2),
sectionTitle: {
marginTop: theme.spacing(3),
color: 'rgb(255, 255, 255)',
fontWeight: 500,
fontSize: '18px',
letterSpacing: '-0.01em',
},

details: {
marginTop: theme.spacing(4),
// paddingLeft: theme.spacing(4),
// display: 'flex',
},
heading: {
marginTop: theme.spacing(3),
},
tradeForm: {
tradeSection: {
position: 'sticky',
top: '100px',
border: '1px solid #242728',
boxShadow: '0px 4px 40px rgba(0, 0, 0, 0.25)',
borderRadius: theme.spacing(0.7),
padding: '32px 24px',
},
chartNav: {
border: `1px solid ${theme.palette.primary.main}30`,
},
content: {
color: '#bdbdbd',
marginTop: '4px',
},
}),
)

export function LPCalculator() {
const LPInfo: React.FC<{ lpType: number }> = ({ lpType }) => {
const classes = useStyles()
const { isRestricted } = useRestrictUser()
const ethPrice = useETHPrice()

if (lpType === 0) {
return (
<>
<Typography variant="h4" className={classes.subtitle}>
Buy squeeth and LP
</Typography>
<Typography variant="body1" className={classes.content}>
Earn a payoff similar to ETH<sup>1.5</sup>
</Typography>
<Typography variant="subtitle1" className={classes.sectionTitle}>
Strategy Overview
</Typography>
<Typography variant="body1" className={classes.content}>
Buying and LPing gives you a leverage position with a payoff similar to ETH<sup>1.5</sup>. You give up some of
your squeeth upside in exchange for trading fees. You are paying daily premiums for being long squeeth, but
earning fees from LPing on Uniswap.
</Typography>
<Typography variant="subtitle1" className={classes.sectionTitle}>
Payoff
</Typography>
<LPBuyChart ethPrice={ethPrice.toNumber()} />
<Typography variant="caption" color="textSecondary">
This payoff diagram does not include premiums or trading fees and assumes implied volatility stays constant.{' '}
</Typography>
<Typography variant="subtitle1" className={classes.sectionTitle}>
Risks
</Typography>
<Typography variant="body1" className={classes.content}>
You are exposed to squeeth premiums, so if you hold the position for a long period of time without upward
price movements in ETH, you can lose considerable funds to premium payments.
</Typography>
<br />
<Typography variant="body1" className={classes.content}>
{' '}
Squeeth smart contracts have been audited by Trail of Bits, Akira, and Sherlock. However, smart contracts are
experimental technology and we encourage caution only risking funds you can afford to lose.
</Typography>
</>
)
}

return (
<>
<Typography variant="h4" className={classes.subtitle}>
Mint squeeth and LP
</Typography>
<Typography variant="body1" className={classes.content}>
Earn yield from trading fees while being long ETH
</Typography>
<Typography variant="subtitle1" className={classes.sectionTitle}>
Strategy Overview
</Typography>
<Typography variant="body1" className={classes.content}>
Minting and LPing is similar to a covered call. You start off with a position similar to 1x long ETH that gets
less long ETH as the price moves up and longer ETH as the price moves down.
</Typography>
<Typography variant="subtitle1" className={classes.sectionTitle}>
Payoff
</Typography>
<LPMintChart ethPrice={ethPrice.toNumber()} />
<Typography variant="caption" color="textSecondary">
This payoff diagram does not included premiums or trading fees and assumes implied volatility stays constant.{' '}
</Typography>
<Typography variant="subtitle1" className={classes.sectionTitle}>
Risks
</Typography>
<Typography variant="body1" className={classes.content}>
You enter this position neutral to squeeth exposure, but could end up long squeeth exposed to premiums or short
squeeth depending on ETH price movements. If you fall below the minimum collateralization threshold (150%), you
are at risk of liquidation.
</Typography>
<br />
<Typography variant="body1" className={classes.content}>
Squeeth smart contracts have been audited by Trail of Bits, Akira, and Sherlock. However, smart contracts are
experimental technology and we encourage caution only risking funds you can afford to lose.
</Typography>
</>
)
}

export function LPCalculator() {
const classes = useStyles()
const [lpType, setLpType] = useState(0)
const supportedNetwork = useAtomValue(supportedNetworkAtom)

return (
<div>
<>
<Nav />

<div className={classes.container}>
<div style={{ width: '800px', paddingRight: '16px' }}>
<div style={{ display: 'flex' }}>
<div className={classes.logo}>
<Image src={squeethTokenSymbol} alt="squeeth token" width={37} height={37} />
</div>
<div>
<Typography variant="h5" className={classes.logoTitle}>
Uniswap V3 LP SQTH-ETH Pool
</Typography>
<Typography className={classes.logoSubTitle} variant="body1" color="textSecondary">
Earn LP fees for providing SQTH-ETH liquidity
</Typography>
</div>
</div>
<SqueethInfo />
<div className={classes.leftColumn}>
<>
<Typography variant="h3" className={classes.title}>
Uniswap V3 LP SQTH-ETH Pool
</Typography>
<Typography variant="subtitle1" className={classes.description}>
Earn LP fees for providing SQTH-ETH liquidity
</Typography>
</>

<Box marginTop="24px">
<LPPosition />
</Box>

<div className={classes.details}>
<div style={{ display: 'flex' }}>
<Box display="flex">
<SqueethTabsNew
style={{ background: 'transparent' }}
className={classes.chartNav}
Expand All @@ -116,101 +216,36 @@ export function LPCalculator() {
<SqueethTabNew label="Buy and LP" style={{ width: '140px' }} />
<SqueethTabNew label="Mint and LP" style={{ width: '140px' }} />
</SqueethTabsNew>
</div>
{lpType === 0 ? (
<div style={{ marginTop: '16px' }}>
<Typography color="primary" variant="h6">
Buy squeeth and LP
</Typography>
<Typography>
Earn a payoff similar to ETH<sup>1.5</sup>
</Typography>
<Typography className={classes.heading} variant="subtitle1" color="primary">
Details
</Typography>
<Typography>
Buying and LPing gives you a leverage position with a payoff similar to ETH<sup>1.5</sup>. You give up
some of your squeeth upside in exchange for trading fees. You are paying daily premiums for being long
squeeth, but earning fees from LPing on Uniswap.
</Typography>
<Typography className={classes.heading} variant="subtitle1" color="primary">
Payoff
</Typography>
<LPBuyChart ethPrice={ethPrice.toNumber()} />
<Typography variant="caption" color="textSecondary">
This payoff diagram does not include premiums or trading fees and assumes implied volatility stays
constant.{' '}
</Typography>
<Typography className={classes.heading} variant="subtitle1" color="primary">
Risks
</Typography>
<Typography variant="body1">
You are exposed to squeeth premiums, so if you hold the position for a long period of time without
upward price movements in ETH, you can lose considerable funds to premium payments.
</Typography>
<br />
<Typography variant="body1">
{' '}
Squeeth smart contracts have been audited by Trail of Bits, Akira, and Sherlock. However, smart
contracts are experimental technology and we encourage caution only risking funds you can afford to
lose.
</Typography>
</div>
) : (
<div style={{ marginTop: '16px' }}>
<Typography color="primary" variant="h6">
Mint squeeth and LP
</Typography>
<Typography>Earn yield from trading fees while being long ETH</Typography>
<Typography className={classes.heading} variant="subtitle1" color="primary">
Details
</Typography>
<Typography>
Minting and LPing is similar to a covered call. You start off with a position similar to 1x long ETH
that gets less long ETH as the price moves up and longer ETH as the price moves down.
</Typography>
<Typography className={classes.heading} variant="subtitle1" color="primary">
Payoff
</Typography>
<LPMintChart ethPrice={ethPrice.toNumber()} />
<Typography variant="caption" color="textSecondary">
This payoff diagram does not included premiums or trading fees and assumes implied volatility stays
constant.{' '}
</Typography>
<Typography className={classes.heading} variant="subtitle1" color="primary">
Risks
</Typography>
<Typography variant="body1">
You enter this position neutral to squeeth exposure, but could end up long squeeth exposed to premiums
or short squeeth depending on ETH price movements. If you fall below the minimum collateralization
threshold (150%), you are at risk of liquidation.
</Typography>
<br />
<Typography variant="body1">
{' '}
Squeeth smart contracts have been audited by Trail of Bits, Akira, and Sherlock. However, smart
contracts are experimental technology and we encourage caution only risking funds you can afford to
lose.
</Typography>
</div>
)}
</Box>

<Box marginTop="24px">
<LPInfo lpType={lpType} />
</Box>
</div>

<Box marginTop="32px">
<Typography variant="h4" className={classes.subtitle}>
Details
</Typography>
<SqueethInfo marginTop="16px" />
</Box>
</div>
<div>
{supportedNetwork && <div className={classes.tradeForm}>{!isRestricted ? <ObtainSqueeth /> : null}</div>}

<div className={classes.rightColumn}>
<div className={classes.tradeSection}>
<ObtainSqueeth />
</div>
</div>
</div>
</div>
</>
)
}

export function LPage() {
return (
// <TradeProvider>
<LPProvider>
<LPCalculator />
</LPProvider>
// </TradeProvider>
)
}

Expand Down
Loading

1 comment on commit 73ee440

@vercel
Copy link

@vercel vercel bot commented on 73ee440 Jan 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

continuouscall – ./

squeeth.opyn.co
continuouscall-opynfinance.vercel.app
continuouscall-git-main-opynfinance.vercel.app
www.squeeth.com
squeeth.com
levbev.squeeth.com

Please sign in to comment.