refactor: making PR ready for review

opynfinance · Nov 10, 2022 · e93ac9f · e93ac9f
1 parent 1a4e886
commit e93ac9f
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 103 deletions.
diff --git a/packages/frontend/src/components/Lp/MintAndLp/CollateralRatioSlider.tsx b/packages/frontend/src/components/Lp/MintAndLp/CollateralRatioSlider.tsx
@@ -107,7 +107,6 @@ function ValueLabelComponent(props: any) {
   const { children, open, value } = props
 
   const classes = useValueLabelStyles(value)
-
   const title = value < 200 ? 'Danger' : value < 225 ? 'Risky' : 'Safe'
 
   return (
@@ -140,7 +139,6 @@ const CollateralRatioSlider: React.FC<CollateralRatioSliderType> = ({
 
   const changeSlider = (val: number) => {
     if (val < MIN_COLLATERAL_RATIO) return
-
     onCollateralRatioChange(val)
   }
 

diff --git a/packages/frontend/src/components/Lp/MintAndLp/DepositPreviewModal.tsx b/packages/frontend/src/components/Lp/MintAndLp/DepositPreviewModal.tsx
@@ -191,7 +191,7 @@ const DepositPreviewModal: React.FC<DepositPreviewModalProps> = ({ isOpen, onClo
 
   const resetErrorAndGoBack = () => {
     setTxError('')
-    resetStep
+    resetStep()
   }
 
   const classes = useModalStyles()

diff --git a/packages/frontend/src/components/Lp/MintAndLp/LpSettings.tsx b/packages/frontend/src/components/Lp/MintAndLp/LpSettings.tsx
@@ -29,12 +29,6 @@ import CollateralRatioSlider from './CollateralRatioSlider'
 import { SimpleInput } from './Input'
 import squeethLogo from 'public/images/squeeth-logo.svg'
 
-const useTextStyles = makeStyles({
-  light: {
-    color: 'rgba(255, 255, 255, 0.8)',
-  },
-})
-
 const useToggleButtonStyles = makeStyles((theme) => ({
   root: {
     textTransform: 'none',
@@ -61,50 +55,29 @@ const useModalStyles = makeStyles((theme) =>
       overflow: 'scroll',
       display: 'block',
     },
-    titleSection: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    },
-    modalTitle: {
+    title: {
       fontSize: '24px',
       fontWeight: 700,
       letterSpacing: '-0.01em',
     },
+    sectionTitle: {
+      fontSize: '18px',
+      fontWeight: 700,
+    },
     priceContainer: {
       backgroundColor: theme.palette.background.lightStone,
       padding: theme.spacing(0.75, 1.5),
       borderRadius: '8px',
     },
-
-    subSection: {},
-    priceRangeSectionHeader: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    },
-    priceRangeSectionHeaderLeftColumn: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: theme.spacing(1),
-    },
-    sectionTitle: {
-      fontSize: '18px',
-      fontWeight: 700,
-    },
     divider: {
       height: '2px',
       backgroundColor: theme.palette.background.lightStone,
       margin: theme.spacing(4, 0),
       display: 'inline-block',
       width: '100%',
     },
-    priceRangeSection: {
-      marginTop: theme.spacing(3),
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      gap: theme.spacing(2),
+    lightFontColor: {
+      color: 'rgba(255, 255, 255, 0.8)',
     },
   }),
 )
@@ -145,7 +118,6 @@ const LpSettings: React.FC<{
 
   const classes = useModalStyles()
   const toggleButtonClasses = useToggleButtonStyles()
-  const textClasses = useTextStyles()
 
   const squeethPrice = getWSqueethPositionValue(1)
   const collatRatioVal = new BigNumber(collatRatio).div(100).toNumber()
@@ -220,17 +192,17 @@ const LpSettings: React.FC<{
 
   return (
     <>
-      <div className={classes.titleSection}>
-        <Typography id="modal-title" variant="h2" className={classes.modalTitle}>
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Typography id="modal-title" variant="h2" className={classes.title}>
           Mint and LP Preview
         </Typography>
 
         <div className={classes.priceContainer}>
           <TokenPrice symbol="ETH" price={formatNumber(Number(ethPrice))} />
         </div>
-      </div>
+      </Box>
 
-      <Box className={classes.subSection} marginTop="32px">
+      <Box marginTop="32px">
         <Typography variant="h4" className={classes.sectionTitle}>
           Mint amounts
         </Typography>
@@ -246,9 +218,9 @@ const LpSettings: React.FC<{
 
       <Divider className={classes.divider} />
 
-      <div className={classes.subSection}>
-        <div className={classes.priceRangeSectionHeader}>
-          <div className={classes.priceRangeSectionHeaderLeftColumn}>
+      <div>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Box display="flex" alignItems="center" gridGap="8px">
             <TokenLogo logoSrc={squeethLogo} />
 
             <div>
@@ -257,17 +229,17 @@ const LpSettings: React.FC<{
               </Typography>
               <TokenPrice symbol="oSQTH" price={formatNumber(squeethPrice.toNumber())} isSmall />
             </div>
-          </div>
+          </Box>
 
           <Checkbox
             isChecked={usingDefaultPriceRange}
             onChange={setUsingDefaultPriceRange}
             name="priceRangeDefault"
             label="Default"
           />
-        </div>
+        </Box>
 
-        <div className={classes.priceRangeSection}>
+        <Box marginTop="24px" display="flex" justifyContent="space-between" alignItems="center" gridGap="20px">
           <SimpleInput
             id="min-price"
             label="Min price"
@@ -301,12 +273,12 @@ const LpSettings: React.FC<{
               ),
             }}
           />
-        </div>
+        </Box>
       </div>
 
       <Divider className={classes.divider} />
 
-      <div className={classes.subSection}>
+      <div>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <Typography style={{ fontWeight: 500 }}>Use Uniswap LP NFT as collateral</Typography>
 
@@ -328,7 +300,7 @@ const LpSettings: React.FC<{
 
       <Divider className={classes.divider} />
 
-      <div className={classes.subSection}>
+      <div>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <Typography variant="h4" className={classes.sectionTitle}>
             Collateralization ratio
@@ -365,54 +337,54 @@ const LpSettings: React.FC<{
 
       <InfoBox marginTop="24px">
         <Box display="flex" justifyContent="space-between" gridGap="12px">
-          <Typography className={textClasses.light}>Liquidation price</Typography>
+          <Typography className={classes.lightFontColor}>Liquidation price</Typography>
           <Box display="flex" gridGap="8px">
             <Typography>$3,018.29</Typography>
-            <Typography className={textClasses.light}>per ETH</Typography>
+            <Typography className={classes.lightFontColor}>per ETH</Typography>
           </Box>
         </Box>
       </InfoBox>
 
       <InfoBox marginTop="6px">
         <Box display="flex" justifyContent="space-between" gridGap="12px">
-          <Typography className={textClasses.light}>Projected APY</Typography>
+          <Typography className={classes.lightFontColor}>Projected APY</Typography>
           <Typography>26.08 %</Typography>
         </Box>
       </InfoBox>
 
       <Divider className={classes.divider} />
 
-      <div className={classes.subSection}>
+      <div>
         <InfoBox>
           <Box display="flex" justifyContent="center" gridGap="6px">
             <Typography>Total Deposit</Typography>
-            <Typography className={textClasses.light}>=</Typography>
+            <Typography className={classes.lightFontColor}>=</Typography>
 
-            <Typography className={textClasses.light}>
+            <Typography className={classes.lightFontColor}>
               {loadingDepositAmounts ? 'loading' : formatTokenAmount(depositInTotal)}
             </Typography>
-            <Typography className={textClasses.light}>ETH</Typography>
+            <Typography className={classes.lightFontColor}>ETH</Typography>
           </Box>
         </InfoBox>
 
         <Box display="flex" justifyContent="space-between" gridGap="10px" marginTop="6px">
           <InfoBox>
             <Box display="flex" justifyContent="space-between" gridGap="12px">
-              <Typography className={textClasses.light}>{'To be LP’ed'}</Typography>
+              <Typography className={classes.lightFontColor}>{'To be LP’ed'}</Typography>
 
               <Box display="flex" gridGap="8px">
                 <Typography> {loadingDepositAmounts ? 'loading' : formatTokenAmount(depositInLp)}</Typography>
-                <Typography className={textClasses.light}>ETH</Typography>
+                <Typography className={classes.lightFontColor}>ETH</Typography>
               </Box>
             </Box>
           </InfoBox>
           <InfoBox>
             <Box display="flex" justifyContent="space-between" gridGap="12px">
-              <Typography className={textClasses.light}>{'Vault'}</Typography>
+              <Typography className={classes.lightFontColor}>{'Vault'}</Typography>
 
               <Box display="flex" gridGap="8px">
                 <Typography>{loadingDepositAmounts ? 'loading' : formatTokenAmount(depositInVault)}</Typography>
-                <Typography className={textClasses.light}>ETH</Typography>
+                <Typography className={classes.lightFontColor}>ETH</Typography>
               </Box>
             </Box>
           </InfoBox>

diff --git a/packages/frontend/src/components/Lp/MintAndLp/TokenAmount.tsx b/packages/frontend/src/components/Lp/MintAndLp/TokenAmount.tsx
@@ -1,6 +1,7 @@
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 import React from 'react'
 import { Typography, Box } from '@material-ui/core'
+import clsx from 'clsx'
 
 import { formatNumber } from '@utils/formatter'
 import TokenLogo from './TokenLogo'
@@ -15,7 +16,6 @@ const useStyles = makeStyles((theme) =>
       width: '50%',
       zIndex: 0,
     },
-
     mainSection: {
       display: 'flex',
       alignItems: 'center',
@@ -25,7 +25,6 @@ const useStyles = makeStyles((theme) =>
       marginTop: '1em',
       backgroundColor: theme.palette.background.default,
     },
-
     logoContainer: {
       width: '40px',
       height: '40px',
@@ -40,23 +39,11 @@ const useStyles = makeStyles((theme) =>
       height: '24px',
       width: '14px',
     },
-    depositContainer: {
-      marginLeft: theme.spacing(1),
-    },
-    amountContainer: {
-      display: 'flex',
-    },
-    amount: {
+    mediumBold: {
       fontWeight: 500,
     },
-    symbol: {
+    lightColor: {
       opacity: 0.5,
-      fontWeight: 400,
-      marginLeft: theme.spacing(0.5),
-    },
-    usdValue: {
-      opacity: 0.5,
-      fontWeight: 400,
     },
     subSection: {
       position: 'absolute',
@@ -70,9 +57,6 @@ const useStyles = makeStyles((theme) =>
       backgroundColor: theme.palette.background.stone,
       borderRadius: '10px',
     },
-    tokenBalanceLabel: {
-      opacity: 0.5,
-    },
     primaryColor: {
       color: theme.palette.primary.main,
     },
@@ -96,20 +80,20 @@ const TokenAmount: React.FC<TokenAmountType> = ({ amount, price, symbol, logo, b
     <div className={classes.container}>
       <div className={classes.mainSection}>
         <TokenLogo logoSrc={logo} />
-        <div className={classes.depositContainer}>
-          <div className={classes.amountContainer}>
-            <Typography className={classes.amount}>{amount}</Typography>
-            <Typography className={classes.symbol}>{symbol}</Typography>
-          </div>
+        <Box marginLeft="8px">
+          <Box display="flex" alignItems="center" gridGap="4px">
+            <Typography className={classes.mediumBold}>{amount}</Typography>
+            <Typography className={clsx(classes.mediumBold, classes.lightColor)}>{symbol}</Typography>
+          </Box>
 
-          <Typography variant="caption" className={classes.usdValue}>
+          <Typography variant="caption" className={clsx(classes.mediumBold, classes.lightColor)}>
             {'$' + formatNumber(usdValue)}
           </Typography>
-        </div>
+        </Box>
       </div>
 
       <div className={classes.subSection}>
-        <Typography variant="subtitle2" className={classes.tokenBalanceLabel}>
+        <Typography variant="subtitle2" className={classes.lightColor}>
           Available
         </Typography>
 

diff --git a/packages/frontend/src/state/lp/apis.ts b/packages/frontend/src/state/lp/apis.ts
diff --git a/packages/frontend/src/state/lp/hooks.ts b/packages/frontend/src/state/lp/hooks.ts
@@ -64,6 +64,7 @@ export const useGetDepositAmounts = () => {
       const vaultShortAmt = fromTokenAmount(vaultBefore.shortAmount, OSQUEETH_DECIMALS)
       const vaultCollateralAmt = fromTokenAmount(vaultBefore.collateralAmount, WETH_DECIMALS)
 
+      // Calculate collateralToMint
       const oSQTHInETH = mintWSqueethAmount.times(ethIndexPrice.div(INDEX_SCALE)).times(normFactor)
       const collateralToMint = new BigNumber(collatRatio)
         .times(vaultShortAmt.plus(mintWSqueethAmount).times(normFactor).times(ethIndexPrice).div(INDEX_SCALE))