Skip to content

Commit dfda8ed

Browse files
nikkaroraanikkaroraa
committed
refactor: making PR ready for review
1 parent 1a4e886 commit dfda8ed

File tree

5 files changed

+43
-102
lines changed

5 files changed

+43
-102
lines changed

‎packages/frontend/src/components/Lp/MintAndLp/CollateralRatioSlider.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,6 @@ function ValueLabelComponent(props: any) {
107107
const { children, open, value } = props
108108

109109
const classes = useValueLabelStyles(value)
110-
111110
const title = value < 200 ? 'Danger' : value < 225 ? 'Risky' : 'Safe'
112111

113112
return (
@@ -140,7 +139,6 @@ const CollateralRatioSlider: React.FC<CollateralRatioSliderType> = ({
140139

141140
const changeSlider = (val: number) => {
142141
if (val < MIN_COLLATERAL_RATIO) return
143-
144142
onCollateralRatioChange(val)
145143
}
146144

‎packages/frontend/src/components/Lp/MintAndLp/LpSettings.tsx

+31-59
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,6 @@ import CollateralRatioSlider from './CollateralRatioSlider'
2929
import { SimpleInput } from './Input'
3030
import squeethLogo from 'public/images/squeeth-logo.svg'
3131

32-
const useTextStyles = makeStyles({
33-
light: {
34-
color: 'rgba(255, 255, 255, 0.8)',
35-
},
36-
})
37-
3832
const useToggleButtonStyles = makeStyles((theme) => ({
3933
root: {
4034
textTransform: 'none',
@@ -61,50 +55,29 @@ const useModalStyles = makeStyles((theme) =>
6155
overflow: 'scroll',
6256
display: 'block',
6357
},
64-
titleSection: {
65-
display: 'flex',
66-
justifyContent: 'space-between',
67-
alignItems: 'center',
68-
},
69-
modalTitle: {
58+
title: {
7059
fontSize: '24px',
7160
fontWeight: 700,
7261
letterSpacing: '-0.01em',
7362
},
63+
sectionTitle: {
64+
fontSize: '18px',
65+
fontWeight: 700,
66+
},
7467
priceContainer: {
7568
backgroundColor: theme.palette.background.lightStone,
7669
padding: theme.spacing(0.75, 1.5),
7770
borderRadius: '8px',
7871
},
79-
80-
subSection: {},
81-
priceRangeSectionHeader: {
82-
display: 'flex',
83-
justifyContent: 'space-between',
84-
alignItems: 'center',
85-
},
86-
priceRangeSectionHeaderLeftColumn: {
87-
display: 'flex',
88-
alignItems: 'center',
89-
gap: theme.spacing(1),
90-
},
91-
sectionTitle: {
92-
fontSize: '18px',
93-
fontWeight: 700,
94-
},
9572
divider: {
9673
height: '2px',
9774
backgroundColor: theme.palette.background.lightStone,
9875
margin: theme.spacing(4, 0),
9976
display: 'inline-block',
10077
width: '100%',
10178
},
102-
priceRangeSection: {
103-
marginTop: theme.spacing(3),
104-
display: 'flex',
105-
justifyContent: 'space-between',
106-
alignItems: 'center',
107-
gap: theme.spacing(2),
79+
lightFontColor: {
80+
color: 'rgba(255, 255, 255, 0.8)',
10881
},
10982
}),
11083
)
@@ -145,7 +118,6 @@ const LpSettings: React.FC<{
145118

146119
const classes = useModalStyles()
147120
const toggleButtonClasses = useToggleButtonStyles()
148-
const textClasses = useTextStyles()
149121

150122
const squeethPrice = getWSqueethPositionValue(1)
151123
const collatRatioVal = new BigNumber(collatRatio).div(100).toNumber()
@@ -220,17 +192,17 @@ const LpSettings: React.FC<{
220192

221193
return (
222194
<>
223-
<div className={classes.titleSection}>
224-
<Typography id="modal-title" variant="h2" className={classes.modalTitle}>
195+
<Box display="flex" justifyContent="space-between" alignItems="center">
196+
<Typography id="modal-title" variant="h2" className={classes.title}>
225197
Mint and LP Preview
226198
</Typography>
227199

228200
<div className={classes.priceContainer}>
229201
<TokenPrice symbol="ETH" price={formatNumber(Number(ethPrice))} />
230202
</div>
231-
</div>
203+
</Box>
232204

233-
<Box className={classes.subSection} marginTop="32px">
205+
<Box marginTop="32px">
234206
<Typography variant="h4" className={classes.sectionTitle}>
235207
Mint amounts
236208
</Typography>
@@ -246,9 +218,9 @@ const LpSettings: React.FC<{
246218

247219
<Divider className={classes.divider} />
248220

249-
<div className={classes.subSection}>
250-
<div className={classes.priceRangeSectionHeader}>
251-
<div className={classes.priceRangeSectionHeaderLeftColumn}>
221+
<div>
222+
<Box display="flex" justifyContent="space-between" alignItems="center">
223+
<Box display="flex" alignItems="center" gridGap="8px">
252224
<TokenLogo logoSrc={squeethLogo} />
253225

254226
<div>
@@ -257,17 +229,17 @@ const LpSettings: React.FC<{
257229
</Typography>
258230
<TokenPrice symbol="oSQTH" price={formatNumber(squeethPrice.toNumber())} isSmall />
259231
</div>
260-
</div>
232+
</Box>
261233

262234
<Checkbox
263235
isChecked={usingDefaultPriceRange}
264236
onChange={setUsingDefaultPriceRange}
265237
name="priceRangeDefault"
266238
label="Default"
267239
/>
268-
</div>
240+
</Box>
269241

270-
<div className={classes.priceRangeSection}>
242+
<Box marginTop="24px" display="flex" justifyContent="space-between" alignItems="center" gridGap="20px">
271243
<SimpleInput
272244
id="min-price"
273245
label="Min price"
@@ -301,12 +273,12 @@ const LpSettings: React.FC<{
301273
),
302274
}}
303275
/>
304-
</div>
276+
</Box>
305277
</div>
306278

307279
<Divider className={classes.divider} />
308280

309-
<div className={classes.subSection}>
281+
<div>
310282
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
311283
<Typography style={{ fontWeight: 500 }}>Use Uniswap LP NFT as collateral</Typography>
312284

@@ -328,7 +300,7 @@ const LpSettings: React.FC<{
328300

329301
<Divider className={classes.divider} />
330302

331-
<div className={classes.subSection}>
303+
<div>
332304
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
333305
<Typography variant="h4" className={classes.sectionTitle}>
334306
Collateralization ratio
@@ -365,54 +337,54 @@ const LpSettings: React.FC<{
365337

366338
<InfoBox marginTop="24px">
367339
<Box display="flex" justifyContent="space-between" gridGap="12px">
368-
<Typography className={textClasses.light}>Liquidation price</Typography>
340+
<Typography className={classes.lightFontColor}>Liquidation price</Typography>
369341
<Box display="flex" gridGap="8px">
370342
<Typography>$3,018.29</Typography>
371-
<Typography className={textClasses.light}>per ETH</Typography>
343+
<Typography className={classes.lightFontColor}>per ETH</Typography>
372344
</Box>
373345
</Box>
374346
</InfoBox>
375347

376348
<InfoBox marginTop="6px">
377349
<Box display="flex" justifyContent="space-between" gridGap="12px">
378-
<Typography className={textClasses.light}>Projected APY</Typography>
350+
<Typography className={classes.lightFontColor}>Projected APY</Typography>
379351
<Typography>26.08 %</Typography>
380352
</Box>
381353
</InfoBox>
382354

383355
<Divider className={classes.divider} />
384356

385-
<div className={classes.subSection}>
357+
<div>
386358
<InfoBox>
387359
<Box display="flex" justifyContent="center" gridGap="6px">
388360
<Typography>Total Deposit</Typography>
389-
<Typography className={textClasses.light}>=</Typography>
361+
<Typography className={classes.lightFontColor}>=</Typography>
390362

391-
<Typography className={textClasses.light}>
363+
<Typography className={classes.lightFontColor}>
392364
{loadingDepositAmounts ? 'loading' : formatTokenAmount(depositInTotal)}
393365
</Typography>
394-
<Typography className={textClasses.light}>ETH</Typography>
366+
<Typography className={classes.lightFontColor}>ETH</Typography>
395367
</Box>
396368
</InfoBox>
397369

398370
<Box display="flex" justifyContent="space-between" gridGap="10px" marginTop="6px">
399371
<InfoBox>
400372
<Box display="flex" justifyContent="space-between" gridGap="12px">
401-
<Typography className={textClasses.light}>{'To be LP’ed'}</Typography>
373+
<Typography className={classes.lightFontColor}>{'To be LP’ed'}</Typography>
402374

403375
<Box display="flex" gridGap="8px">
404376
<Typography> {loadingDepositAmounts ? 'loading' : formatTokenAmount(depositInLp)}</Typography>
405-
<Typography className={textClasses.light}>ETH</Typography>
377+
<Typography className={classes.lightFontColor}>ETH</Typography>
406378
</Box>
407379
</Box>
408380
</InfoBox>
409381
<InfoBox>
410382
<Box display="flex" justifyContent="space-between" gridGap="12px">
411-
<Typography className={textClasses.light}>{'Vault'}</Typography>
383+
<Typography className={classes.lightFontColor}>{'Vault'}</Typography>
412384

413385
<Box display="flex" gridGap="8px">
414386
<Typography>{loadingDepositAmounts ? 'loading' : formatTokenAmount(depositInVault)}</Typography>
415-
<Typography className={textClasses.light}>ETH</Typography>
387+
<Typography className={classes.lightFontColor}>ETH</Typography>
416388
</Box>
417389
</Box>
418390
</InfoBox>

‎packages/frontend/src/components/Lp/MintAndLp/TokenAmount.tsx

+11-27
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { makeStyles, createStyles } from '@material-ui/core/styles'
22
import React from 'react'
33
import { Typography, Box } from '@material-ui/core'
4+
import clsx from 'clsx'
45

56
import { formatNumber } from '@utils/formatter'
67
import TokenLogo from './TokenLogo'
@@ -15,7 +16,6 @@ const useStyles = makeStyles((theme) =>
1516
width: '50%',
1617
zIndex: 0,
1718
},
18-
1919
mainSection: {
2020
display: 'flex',
2121
alignItems: 'center',
@@ -25,7 +25,6 @@ const useStyles = makeStyles((theme) =>
2525
marginTop: '1em',
2626
backgroundColor: theme.palette.background.default,
2727
},
28-
2928
logoContainer: {
3029
width: '40px',
3130
height: '40px',
@@ -40,23 +39,11 @@ const useStyles = makeStyles((theme) =>
4039
height: '24px',
4140
width: '14px',
4241
},
43-
depositContainer: {
44-
marginLeft: theme.spacing(1),
45-
},
46-
amountContainer: {
47-
display: 'flex',
48-
},
49-
amount: {
42+
mediumBold: {
5043
fontWeight: 500,
5144
},
52-
symbol: {
45+
lightColor: {
5346
opacity: 0.5,
54-
fontWeight: 400,
55-
marginLeft: theme.spacing(0.5),
56-
},
57-
usdValue: {
58-
opacity: 0.5,
59-
fontWeight: 400,
6047
},
6148
subSection: {
6249
position: 'absolute',
@@ -70,9 +57,6 @@ const useStyles = makeStyles((theme) =>
7057
backgroundColor: theme.palette.background.stone,
7158
borderRadius: '10px',
7259
},
73-
tokenBalanceLabel: {
74-
opacity: 0.5,
75-
},
7660
primaryColor: {
7761
color: theme.palette.primary.main,
7862
},
@@ -96,20 +80,20 @@ const TokenAmount: React.FC<TokenAmountType> = ({ amount, price, symbol, logo, b
9680
<div className={classes.container}>
9781
<div className={classes.mainSection}>
9882
<TokenLogo logoSrc={logo} />
99-
<div className={classes.depositContainer}>
100-
<div className={classes.amountContainer}>
101-
<Typography className={classes.amount}>{amount}</Typography>
102-
<Typography className={classes.symbol}>{symbol}</Typography>
103-
</div>
83+
<Box marginLeft="8px">
84+
<Box display="flex" alignItems="center" gridGap="4px">
85+
<Typography className={classes.mediumBold}>{amount}</Typography>
86+
<Typography className={clsx(classes.mediumBold, classes.lightColor)}>{symbol}</Typography>
87+
</Box>
10488

105-
<Typography variant="caption" className={classes.usdValue}>
89+
<Typography variant="caption" className={clsx(classes.mediumBold, classes.lightColor)}>
10690
{'$' + formatNumber(usdValue)}
10791
</Typography>
108-
</div>
92+
</Box>
10993
</div>
11094

11195
<div className={classes.subSection}>
112-
<Typography variant="subtitle2" className={classes.tokenBalanceLabel}>
96+
<Typography variant="subtitle2" className={classes.lightColor}>
11397
Available
11498
</Typography>
11599

‎packages/frontend/src/state/lp/apis.ts

-14
This file was deleted.

‎packages/frontend/src/state/lp/hooks.ts

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const useGetDepositAmounts = () => {
6464
const vaultShortAmt = fromTokenAmount(vaultBefore.shortAmount, OSQUEETH_DECIMALS)
6565
const vaultCollateralAmt = fromTokenAmount(vaultBefore.collateralAmount, WETH_DECIMALS)
6666

67+
// Calculate collateralToMint
6768
const oSQTHInETH = mintWSqueethAmount.times(ethIndexPrice.div(INDEX_SCALE)).times(normFactor)
6869
const collateralToMint = new BigNumber(collatRatio)
6970
.times(vaultShortAmt.plus(mintWSqueethAmount).times(normFactor).times(ethIndexPrice).div(INDEX_SCALE))

0 commit comments

Comments
 (0)