Morning + Sun (#1123)

projects/ui/src/components/Field/Chart/MorningTemperature.tsx

@@ -252,7 +252,9 @@ const MorningTemperature: React.FC<{
   const sunSeason = useAppSelector((s) => s._beanstalk.sun.season);
   const morning = useAppSelector((s) => s._beanstalk.sun.morning);
 
-  const [{ current, max }, { generate }] = useTemperature();
+  const [{ current, max }, { generate, getNextTemperatureWithBlock }] =
+    useTemperature();
+
   const temperatureMap = useMemo(() => generate(), [generate]);
 
   /// Local State
@@ -277,7 +279,7 @@ const MorningTemperature: React.FC<{
     timeStyle: 'short',
   });
 
-  const [temperatures, loading] = useMemo(() => {
+  const [seriesData, loading] = useMemo(() => {
     const _temperatures = Object.values(temperatureMap);
     const _loading = !_temperatures || _temperatures.length === 0;
 
@@ -287,16 +289,21 @@ const MorningTemperature: React.FC<{
   const temperatureIncrease = useMemo(() => {
     const nextInterval = interval.plus(1);
     if (getIsMorningInterval(nextInterval)) {
-      const nextTemp =
-        temperatureMap[blockNumber.plus(1).toString()]?.temperature;
+      const nextTemp = getNextTemperatureWithBlock(blockNumber);
       return nextTemp?.minus(temperatureDisplay || ZERO_BN) || ZERO_BN;
     }
     if (nextInterval.eq(26)) {
       return max?.minus(temperatureDisplay || ZERO_BN) || ZERO_BN;
     }
 
     return ZERO_BN;
-  }, [blockNumber, interval, max, temperatureDisplay, temperatureMap]);
+  }, [
+    blockNumber,
+    interval,
+    max,
+    temperatureDisplay,
+    getNextTemperatureWithBlock,
+  ]);
 
   // We debounce b/c part of the Stat is rendered conditionally
   // based on the hover state and causes flickering
@@ -348,7 +355,7 @@ const MorningTemperature: React.FC<{
           </Centered>
         ) : (
           <ChartWrapper
-            seriesData={temperatures}
+            seriesData={seriesData}
             interval={interval}
             onHover={(_block) => _setHovered(_block)}
           />

projects/ui/src/components/Field/FieldBlockCountdown.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useAppSelector } from '~/state';
+import { useRemainingUntilNextMorningInterval } from '~/state/beanstalk/sun/morning';
 
 const FieldBlockCountdown: React.FC<{}> = () => {
-  const { remaining } = useAppSelector((s) => s._beanstalk.sun.morningTime);
+  const remaining = useRemainingUntilNextMorningInterval();
 
   return <>{remaining.toFormat('s')} seconds</>;
 };

projects/ui/src/components/Field/FieldOverlay.tsx

@@ -1,18 +1,9 @@
-import React, { useMemo, useCallback } from 'react';
-import { TestUtils } from '@beanstalk/sdk';
-import { Box, Stack, Typography, Button } from '@mui/material';
-import { useDispatch } from 'react-redux';
-import { DateTime, Settings as LuxonSettings } from 'luxon';
-import useSdk from '~/hooks/sdk';
-import { getMorningResult, getDiffNow } from '~/state/beanstalk/sun';
-import { setMorning } from '~/state/beanstalk/sun/actions';
-import { useSun } from '~/state/beanstalk/sun/updater';
+import React from 'react';
+import { Box, Stack, Typography } from '@mui/material';
 
 import { BeanstalkPalette } from '~/components/App/muiTheme';
 import { IS_DEV } from '~/util';
 
-import Row from '~/components/Common/Row';
-import useFetchLatestBlock from '~/hooks/chain/useFetchLatestBlock';
 import useTemperature from '~/hooks/beanstalk/useTemperature';
 import { useAppSelector } from '~/state';
 
@@ -22,51 +13,20 @@ const minimize = false;
  * Used to help faciliate the starting of a new season
  */
 const FieldOverlay: React.FC<{}> = () => {
-  const sdk = useSdk();
-
-  const chainUtil = useMemo(() => new TestUtils.BlockchainUtils(sdk), [sdk]);
   const morning = useAppSelector((s) => s._beanstalk.sun.morning);
   const seasonTime = useAppSelector((s) => s._beanstalk.sun.seasonTime);
   const sunrise = useAppSelector((s) => s._beanstalk.sun.season);
   const temp = useAppSelector((s) => s._beanstalk.field.temperature);
 
-  const [fetchSun] = useSun();
-  const [fetchBlock] = useFetchLatestBlock();
-
   const [{ current }] = useTemperature();
 
   const calculatedTempData = current.toString();
 
-  const dispatch = useDispatch();
-
-  const setLuxonGlobal = useCallback((from: DateTime) => {
-    const diff = getDiffNow(from);
-    const millis = diff.as('seconds') * 1000;
-
-    LuxonSettings.now = () => Date.now() + millis;
-  }, []);
-
-  const handleClick = useCallback(async () => {
-    console.debug('forwarding season...');
-    await chainUtil.sunriseForward();
-    console.debug('fetching sun...');
-    const [s] = await fetchSun();
-    const b = await fetchBlock();
-    if (!s) return;
-    console.debug('sun fetched...');
-    setLuxonGlobal(s.timestamp);
-
-    const morningResult = getMorningResult({
-      timestamp: s.timestamp,
-      blockNumber: b.blockNumber,
-    });
-    dispatch(setMorning(morningResult));
-    // fetchMorningField();
-  }, [chainUtil, dispatch, fetchBlock, fetchSun, setLuxonGlobal]);
-
   if (minimize) return null;
   if (!IS_DEV) return null;
 
+  const deltaBlocks = morning.blockNumber.minus(sunrise.sunriseBlock);
+
   return (
     <Box
       position="absolute"
@@ -76,15 +36,16 @@ const FieldOverlay: React.FC<{}> = () => {
       sx={{ background: BeanstalkPalette.mediumGreen }}
     >
       <Box>
-        <Box sx={{ width: '800px' }}>
+        <Box sx={{ width: '400px' }}>
           <Stack gap={0.5} p={2}>
             <Typography>
               Current Block: {morning.blockNumber.toString()}
             </Typography>
-            <Typography>SunriseTime: {seasonTime.toString()}</Typography>
             <Typography>
               Sunrise Block: {sunrise.sunriseBlock.toString()}
             </Typography>
+            <Typography>Delta Blocks: {deltaBlocks.toString()}</Typography>
+            <Typography>SunriseTime: {seasonTime.toString()}</Typography>
             <Typography>
               Interval: {morning.index.plus(1).toString()}
             </Typography>
@@ -93,11 +54,6 @@ const FieldOverlay: React.FC<{}> = () => {
               calculated temp: {calculatedTempData?.toString()}
             </Typography>
             <Typography>max temp: {temp.max.toString()}</Typography>
-            <Row gap={1} width="100%" justifyContent="space-between">
-              <Button fullWidth size="small" onClick={handleClick}>
-                call sunrise
-              </Button>
-            </Row>
           </Stack>
         </Box>
       </Box>

projects/ui/src/components/Field/FieldOverview.tsx

@@ -23,13 +23,15 @@ const getSx = (isMorning: boolean) => ({
 const FieldOverview: React.FC<{}> = () => {
   const [open, show, hide] = useToggle();
 
-  const morning = useAppSelector((s) => s._beanstalk.sun.morning);
-  const isMorning = morning.isMorning;
+  const isMorning = useAppSelector((s) => s._beanstalk.sun.morning.isMorning);
 
   const toggle = () => {
     if (isMorning) return;
-    open && hide();
-    !open && show();
+    if (open) {
+      hide();
+    } else {
+      show();
+    }
   };
 
   useEffect(() => {

projects/ui/src/components/Nav/SettingsDialog.tsx

@@ -31,14 +31,12 @@ import { SGEnvironments, SUBGRAPH_ENVIRONMENTS } from '~/graph/endpoints';
 import useSetting from '~/hooks/app/useSetting';
 import useFarmerSiloBalances from '~/hooks/farmer/useFarmerSiloBalances';
 import { save } from '~/state';
-import {
-  setNextSunrise,
-  setRemainingUntilSunrise,
-} from '~/state/beanstalk/sun/actions';
+import { setNextSunrise } from '~/state/beanstalk/sun/actions';
 import { clearApolloCache, trimAddress } from '~/util';
 import useChainId from '~/hooks/chain/useChainId';
 import { CHAIN_INFO } from '~/constants';
 import { useAccount } from 'wagmi';
+import { useSetRemainingUntilSunrise } from '~/state/beanstalk/sun/updater';
 import OutputField from '../Common/Form/OutputField';
 
 const Split: FC<{}> = ({ children }) => (
@@ -92,6 +90,7 @@ const SettingsDialog: FC<{ open: boolean; onClose?: () => void }> = ({
   const dispatch = useDispatch();
   const siloBalances = useFarmerSiloBalances();
   const account = useAccount();
+  const setRemainingUntilSunrise = useSetRemainingUntilSunrise();
 
   const checkAddress = useCallback(
     (address: string) => {
@@ -137,8 +136,8 @@ const SettingsDialog: FC<{ open: boolean; onClose?: () => void }> = ({
   const setSeasonTimer = useCallback(() => {
     const _next = DateTime.now().plus({ second: 5 });
     dispatch(setNextSunrise(_next));
-    dispatch(setRemainingUntilSunrise(_next.diffNow()));
-  }, [dispatch]);
+    setRemainingUntilSunrise(_next.diffNow());
+  }, [dispatch, setRemainingUntilSunrise]);
   const exportDepositsCSV = useCallback(() => {
     const rows = Object.keys(siloBalances).reduce(
       (prev, curr) => {

projects/ui/src/components/Sun/SunriseButton.tsx

@@ -4,7 +4,6 @@ import { LoadingButton } from '@mui/lab';
 import { Box, Dialog, Divider, Link, Stack, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
 import BigNumber from 'bignumber.js';
-import { useSelector } from 'react-redux';
 import { useSigner } from '~/hooks/ledger/useSigner';
 import SunriseCountdown from '~/components/Sun/SunriseCountdown';
 import useToggle from '~/hooks/display/useToggle';
@@ -20,7 +19,7 @@ import { ZERO_BN } from '~/constants';
 import { displayBN } from '~/util';
 import TokenIcon from '~/components/Common/TokenIcon';
 import { BEAN } from '~/constants/tokens';
-import { AppState } from '~/state';
+import { useAppSelector } from '~/state';
 import Row from '~/components/Common/Row';
 
 import { FC } from '~/types';
@@ -41,10 +40,7 @@ const SunriseButton: FC<{}> = () => {
   const [open, show, hide] = useToggle();
   const [now, setNow] = useState(DateTime.now());
   const [reward, setReward] = useState(ZERO_BN);
-  const awaiting = useSelector<
-    AppState,
-    AppState['_beanstalk']['sun']['sunrise']['awaiting']
-  >((state) => state._beanstalk.sun.sunrise.awaiting);
+  const awaiting = useAppSelector((s) => s._beanstalk.sun.sunrise.awaiting);
 
   // Are we impersonating a different account while not in dev mode
   const isImpersonating =

projects/ui/src/components/Sun/SunriseCountdown.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { AppState } from '~/state';
+import { useRemainingUntilSunrise } from '~/state/beanstalk/sun/updater';
 
 import { FC } from '~/types';
 
 const SunriseCountdown: FC<{}> = () => {
-  const remaining = useSelector<
-    AppState,
-    AppState['_beanstalk']['sun']['sunrise']['remaining']
-  >((state) => state._beanstalk.sun.sunrise.remaining);
+  const remaining = useRemainingUntilSunrise();
 
   return <>in {remaining.toFormat('mm:ss')}</>;
 };

projects/ui/src/hooks/beanstalk/useSoil.ts

@@ -10,8 +10,8 @@ import useTemperature from './useTemperature';
  *
  * Beanstalk only exposes only 'totalSoil()', which returns the instantaneous amount of soil.
  *
- * 'Beanstalk.totalSoil()' utilizes s.f.soil (AppState.field.soil) in it's calculation, and unfortunately,
- * Beanstalk doesn't expose s.f.soil.
+ * 'Beanstalk.totalSoil()' utilizes s.sys.soil (AppState.field.soil) in it's calculation, but
+ * this is not exposed.
  *
  * refer to LibDibbler.sol for more information on how Beanstalk calculates 'totalSoil()'
  *
@@ -39,10 +39,9 @@ import useTemperature from './useTemperature';
  *
  * - We calculate 'nextSoil' instead of 'soil' b/c 'soil' would require us to know the temperature of the
  * previous morning interval.
- *    - If we are at index = 0, we cannot calculate the temperature of the previous interval, wheras if we
+ *    - If we are at index = 0, we cannot calculate the temperature of the previous interval, whereas if we
  * calculate the soil for the next interval, if we are at interval 25, we can assume 'nextTemperature' is
  * the maxTemperature for the season.
- *
  */
 
 /**