Add deposit time when not connected

packages/frontend/pages/api/getBlockNumber.ts

@@ -0,0 +1,24 @@
+import axios from 'axios'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+const ETHERSCAN_API = 'https://api.etherscan.io'
+
+const handleRequest = async (req: NextApiRequest, res: NextApiResponse) => {
+  const { timestamp } = req.query
+  // eslint-disable-next-line  no-undef
+  console.log('timestamp', timestamp)
+  const resp = await fetch(
+    `${ETHERSCAN_API}/api?module=block&action=getblocknobytime&timestamp=${Number(timestamp).toFixed(
+      0,
+    )}&closest=before&apikey=${process.env.ETHERSCAN_API_KEY}`,
+  )
+  const data = await resp.json()
+  console.log('data', data)
+  if (data.status === '1') {
+    return res.status(200).json({ blockNumber: Number(data.result) })
+  } else {
+    return res.status(200).json({ blockNumber: 0 })
+  }
+}
+
+export default handleRequest

packages/frontend/src/components/Strategies/Crab/About/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Box, Typography } from '@material-ui/core'
+import React, { 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'
 
@@ -10,6 +10,57 @@ import useStyles from '@components/Strategies/styles'
 import { LinkWrapper } from '@components/LinkWrapper'
 import useAmplitude from '@hooks/useAmplitude'
 import { SITE_EVENTS } from '@utils/amplitude'
+import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
+import DateFnsUtils from '@date-io/date-fns'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { addressAtom } from '@state/wallet/atoms'
+import { firstDepositBlockAtom, firstDepositTimeAtom } from '@state/crab/atoms'
+
+const useTextFieldStyles = makeStyles((theme) =>
+  createStyles({
+    labelRoot: {
+      color: '#8C8D8D',
+      fontSize: '14px',
+      fontWeight: 500,
+    },
+    inputRoot: {
+      padding: '10px 16px',
+      fontSize: '15px',
+      fontWeight: 500,
+      fontFamily: 'DM Mono',
+      width: '22ch',
+      border: '2px solid #303436',
+      borderRadius: '12px',
+    },
+    inputFocused: {
+      borderColor: theme.palette.primary.main,
+    },
+  }),
+)
+
+const CustomTextField: React.FC<TextFieldProps> = ({ inputRef, label, InputProps, id, variant, ...props }) => {
+  const classes = useTextFieldStyles()
+
+  return (
+    <Box display="flex" flexDirection="column" gridGap="4px">
+      <InputLabel htmlFor={id} classes={{ root: classes.labelRoot }}>
+        {label}
+      </InputLabel>
+      <TextField
+        id={id}
+        InputProps={{
+          classes: {
+            root: classes.inputRoot,
+            focused: classes.inputFocused,
+          },
+          disableUnderline: true,
+          ...InputProps,
+        }}
+        {...props}
+      />
+    </Box>
+  )
+}
 
 const useAboutStyles = makeStyles((theme) =>
   createStyles({
@@ -25,14 +76,64 @@ const useAboutStyles = makeStyles((theme) =>
         marginBottom: '16px',
       },
     },
+    dateContainer: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      marginTop: '16px',
+      height: '40px',
+    },
+    label: {
+      fontSize: '15px',
+      color: 'rgba(255, 255, 255, 0.5)',
+      fontWeight: 500,
+      textAlign: 'right',
+    },
   }),
 )
 const gitBookLink = 'https://opyn.gitbook.io/opyn-strategies/crab-strategy/introduction'
+
+const DepositTimePicker: React.FC = () => {
+  const aboutClasses = useAboutStyles()
+  const setDepositTime = useSetAtom(firstDepositTimeAtom)
+  const setDepositBlock = useSetAtom(firstDepositBlockAtom)
+  const [date, setDate] = useState(new Date())
+
+  const onDepositDateChange = async (date: Date | null) => {
+    if (date) {
+      setDepositTime(date.getTime() / 1000)
+      const resp = await fetch(`/api/getBlockNumber?timestamp=${date.getTime() / 1000}`)
+      const data = await resp.json()
+      console.log(data)
+      setDepositBlock(data.blockNumber)
+      setDate(date)
+    }
+  }
+
+  return (
+    <div>
+      <Typography className={aboutClasses.label}>Deposit date</Typography>
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <DateTimePicker
+          fullWidth
+          value={date}
+          onChange={onDepositDateChange}
+          DialogProps={{ disableScrollLock: true }}
+          TextFieldComponent={CustomTextField}
+          format={'MM/dd/yy HH:mm a'}
+          maxDate={new Date()}
+        />
+      </MuiPickersUtilsProvider>
+    </div>
+  )
+}
+
 const About: React.FC = () => {
   const classes = useStyles()
   const aboutClasses = useAboutStyles()
   const { track } = useAmplitude()
 
+  const address = useAtomValue(addressAtom)
+
   return (
     <div>
       <Box display="flex" flexDirection="column" gridGap="8px">
@@ -55,6 +156,8 @@ const About: React.FC = () => {
         </Typography>
       </Box>
 
+      <Box className={aboutClasses.dateContainer}>{!address ? <DepositTimePicker /> : null}</Box>
+
       <Box position="relative" marginTop="32px">
         <div className={aboutClasses.timerContainer}>
           <NextRebalanceTimer />

packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx

@@ -61,7 +61,7 @@ export type ChartDataInfo = {
   crabPnL: number
 }
 
-const CustomTextField: React.FC<TextFieldProps> = ({ inputRef, label, InputProps, id, variant, ...props }) => {
+export const CustomTextField: React.FC<TextFieldProps> = ({ inputRef, label, InputProps, id, variant, ...props }) => {
   const classes = useTextFieldStyles()
 
   return (

packages/frontend/src/state/crab/hooks.ts

@@ -1275,12 +1275,11 @@ export const useCrabProfitData = () => {
 
   useEffect(() => {
     if (!loading && data && data.strategy) {
-      if ( crabPosition.isGreaterThan(0)) {
-        if (data.strategy.lastHedgeBlockNumber < firstDepositBlock) {
-          setData(firstDepositBlock , firstDepositTime)
-        } else {
-          setData(data.strategy.lastHedgeBlockNumber , data.strategy.lastHedgeTimestamp)
-        }
+      if (firstDepositTime && firstDepositBlock && data.strategy.lastHedgeBlockNumber < firstDepositBlock) {
+        setData(firstDepositBlock , firstDepositTime)
+      } 
+      else if ( crabPosition.isGreaterThan(0)) {       
+        setData(data.strategy.lastHedgeBlockNumber , data.strategy.lastHedgeTimestamp)
       } else {
         setData()
       }