diff --git a/packages/crab-netting/lib/forge-std b/packages/crab-netting/lib/forge-std index 0aa99eb845..2a2ce3692b 160000 --- a/packages/crab-netting/lib/forge-std +++ b/packages/crab-netting/lib/forge-std @@ -1 +1 @@ -Subproject commit 0aa99eb8456693c015350c5e6c4f442ebe912f77 +Subproject commit 2a2ce3692b8c1523b29de3ec9d961ee9fbbc43a6 diff --git a/packages/crab-netting/lib/openzeppelin-contracts b/packages/crab-netting/lib/openzeppelin-contracts index b1c2c43d6a..a1948250ab 160000 --- a/packages/crab-netting/lib/openzeppelin-contracts +++ b/packages/crab-netting/lib/openzeppelin-contracts @@ -1 +1 @@ -Subproject commit b1c2c43d6af6adf0b0a74cc77683b1d13d66e8bc +Subproject commit a1948250ab8c441f6d327a65754cb20d2b1b4554 diff --git a/packages/frontend/pages/api/getBlockNumber.ts b/packages/frontend/pages/api/getBlockNumber.ts new file mode 100644 index 0000000000..5d901c15d0 --- /dev/null +++ b/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×tamp=${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 diff --git a/packages/frontend/src/components/Strategies/Crab/About/index.tsx b/packages/frontend/src/components/Strategies/Crab/About/index.tsx index eadd8e936e..bf8fa9f204 100644 --- a/packages/frontend/src/components/Strategies/Crab/About/index.tsx +++ b/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 = ({ inputRef, label, InputProps, id, variant, ...props }) => { + const classes = useTextFieldStyles() + + return ( + + + {label} + + + + ) +} 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 ( +
+ Deposit date + + + +
+ ) +} + const About: React.FC = () => { const classes = useStyles() const aboutClasses = useAboutStyles() const { track } = useAmplitude() + const address = useAtomValue(addressAtom) + return (
@@ -55,6 +156,8 @@ const About: React.FC = () => { + {!address ? : null} +
diff --git a/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx b/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx index 6913177d6a..7ee5780107 100644 --- a/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx +++ b/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx @@ -61,7 +61,7 @@ export type ChartDataInfo = { crabPnL: number } -const CustomTextField: React.FC = ({ inputRef, label, InputProps, id, variant, ...props }) => { +export const CustomTextField: React.FC = ({ inputRef, label, InputProps, id, variant, ...props }) => { const classes = useTextFieldStyles() return ( diff --git a/packages/frontend/src/state/crab/hooks.ts b/packages/frontend/src/state/crab/hooks.ts index e5116466cb..a181648ed5 100644 --- a/packages/frontend/src/state/crab/hooks.ts +++ b/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() }