Add review changes

opynfinance · Feb 5, 2023 · d80ef79 · d80ef79
1 parent 54c37b3
commit d80ef79
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 40 deletions.
diff --git a/packages/frontend/src/components/Strategies/Bull/About/ProfitabilityChart.tsx b/packages/frontend/src/components/Strategies/Bull/About/ProfitabilityChart.tsx
@@ -103,35 +103,6 @@ function getStrategyReturn(funding: number, ethReturn: number) {
   return (funding - Math.pow(ethReturn, 2)) * 100 * 0.5
 }
 
-// generate data from -percentRange to +percentRange
-const getDataPoints = (funding: number, ethPriceAtLastHedge: number, percentRange: number) => {
-  const dataPoints = []
-
-  const starting = new BigNumber(-percentRange)
-  const increment = new BigNumber(0.05)
-  const ending = new BigNumber(percentRange)
-
-  let current = starting
-  while (current.lte(ending)) {
-    const ethReturn = current.div(100).toNumber()
-
-    const strategyReturn = getStrategyReturn(funding, ethReturn)
-    const strategyReturnPositive = strategyReturn >= 0 ? strategyReturn : null
-    const strategyReturnNegative = strategyReturn < 0 ? strategyReturn : null
-
-    dataPoints.push({
-      ethPrice: ethPriceAtLastHedge + ethReturn * ethPriceAtLastHedge,
-      strategyReturn,
-      strategyReturnPositive,
-      strategyReturnNegative,
-    })
-
-    current = current.plus(increment)
-  }
-
-  return dataPoints
-}
-
 const Chart: React.FC<{ currentFunding: number }> = ({ currentFunding }) => {
   const ethPriceAtLastHedgeValue = useAtomValue(ethPriceAtLastHedgeAtomV2)
   const ethPrice = useOnChainETHPrice()
@@ -158,7 +129,7 @@ const Chart: React.FC<{ currentFunding: number }> = ({ currentFunding }) => {
       profitData.oSqthPrice,
       30,
       currentEthPrice,
-      timeUntilNextHedge / 1000 / 60 / 60 / 24,
+      2,
       profitData.eulerEth,
       profitData.ethSupplyApy,
       profitData.eulerUsdc,
@@ -260,7 +231,7 @@ const Chart: React.FC<{ currentFunding: number }> = ({ currentFunding }) => {
             />
 
             <Tooltip
-              wrapperStyle={{ outline: 'none' }}
+              wrapperStyle={{ outline: 'none', zIndex: 201 }}
               cursor={{ stroke: '#fff', strokeOpacity: '0.5', strokeWidth: 1 }}
               content={<CustomTooltip ethPriceAtLastHedge={ethPriceAtLastHedge} />}
             />

diff --git a/packages/frontend/src/components/Strategies/Bull/About/index.tsx b/packages/frontend/src/components/Strategies/Bull/About/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Box, InputLabel, TextField, TextFieldProps, Typography } from '@material-ui/core'
 import clsx from 'clsx'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
@@ -99,6 +99,10 @@ const DepositTimePicker: React.FC = () => {
   const setDepositBlock = useSetAtom(bullFirstDepositBlockAtom)
   const [date, setDate] = useState(new Date(depositTime ? depositTime * 1000 : Date.now()))
 
+  useEffect(() => {
+    setDate(new Date(depositTime ? depositTime * 1000 : Date.now()))
+  }, [depositTime])
+
   const onDepositDateChange = async (date: Date | null) => {
     if (date) {
       setDate(date)
@@ -143,8 +147,8 @@ const About: React.FC = () => {
         </Typography>
 
         <Typography className={clsx(classes.text, classes.textMargin)}>
-          Zen bull makes money when ETH goes up, slow and steady. It stacks ETH if ETH is within the below bands at the
-          next rebalance.{' '}
+          Zen bull makes money when ETH goes up, slow and steady. It stacks ETH if ETH is within the below bands over
+          the period of 2 days.{' '}
           <LinkWrapper
             href={gitBookLink}
             onClick={() => track(SITE_EVENTS.CLICK_LEARN_MORE_BULL, { link: gitBookLink })}
@@ -157,7 +161,7 @@ const About: React.FC = () => {
       <Box position="relative" marginTop="32px">
         <div className={aboutClasses.timerContainer}>
           <DepositTimePicker />
-          <NextRebalanceTimer />
+          {/* <NextRebalanceTimer /> */}
         </div>
         <ProfitabilityChart />
       </Box>

diff --git a/packages/frontend/src/components/Strategies/Crab/About/ProfitabilityChart.tsx b/packages/frontend/src/components/Strategies/Crab/About/ProfitabilityChart.tsx
@@ -117,7 +117,7 @@ const Chart: React.FC<{ currentImpliedFunding: number }> = ({ currentImpliedFund
       profitData.oSqthPrice,
       30,
       currentEthPrice,
-      timeUntilNextHedge / 1000 / 60 / 60 / 24,
+      2,
     )
   }, [
     currentEthPrice,
@@ -205,7 +205,7 @@ const Chart: React.FC<{ currentImpliedFunding: number }> = ({ currentImpliedFund
             />
 
             <Tooltip
-              wrapperStyle={{ outline: 'none' }}
+              wrapperStyle={{ outline: 'none', zIndex: 201 }}
               cursor={{ stroke: '#fff', strokeOpacity: '0.5', strokeWidth: 1 }}
               content={<CustomTooltip />}
             />

diff --git a/packages/frontend/src/components/Strategies/Crab/About/index.tsx b/packages/frontend/src/components/Strategies/Crab/About/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Box, InputLabel, TextField, TextFieldProps, Typography } from '@material-ui/core'
 import clsx from 'clsx'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
@@ -99,6 +99,11 @@ const DepositTimePicker: React.FC = () => {
   const setDepositBlock = useSetAtom(firstDepositBlockAtom)
   const [date, setDate] = useState(new Date(depositTime ? depositTime * 1000 : Date.now()))
 
+  useEffect(() => {
+    setDate(new Date(depositTime ? depositTime * 1000 : Date.now()))
+    console.log('depositTime', depositTime)
+  }, [depositTime])
+
   const onDepositDateChange = async (date: Date | null) => {
     if (date) {
       setDate(date)
@@ -147,7 +152,7 @@ const About: React.FC = () => {
 
         <Typography className={clsx(classes.text, classes.textMargin)}>
           In general, Crab earns USDC returns except when there is high ETH volatility in the market, when it may draw
-          down. Most often, the strategy stacks USDC if ETH is within the below bands at the next hedge.{' '}
+          down. Most often, the strategy stacks USDC if ETH is within the below bands over the period of 2 days.{' '}
           <LinkWrapper
             href={gitBookLink}
             onClick={() => track(SITE_EVENTS.CLICK_LEARN_MORE_CRAB, { link: gitBookLink })}
@@ -160,7 +165,7 @@ const About: React.FC = () => {
       <Box position="relative" marginTop="32px">
         <div className={aboutClasses.timerContainer}>
           <DepositTimePicker />
-          <NextRebalanceTimer />
+          {/* <NextRebalanceTimer /> */}
         </div>
         <ProfitabilityChart />
       </Box>