Bean UI - Add Grown Stalk to Deposits table (#651)

projects/sdk/src/lib/silo.ts

@@ -332,7 +332,7 @@ export class Silo {
         if (!stemTip) throw new Error(`No stem tip found for ${token.address}`);
 
         utils.applyDeposit(balance, token, stemTip, {
-          stem: deposit.season, // FIXME
+          stem: deposit.stem || deposit.season,
           amount: deposit.amount,
           bdv: deposit.bdv
         });

projects/sdk/src/queries/silo/getSiloBalance.graphql

@@ -11,6 +11,7 @@ query getSiloBalance($token: String, $account: ID!, $season: Int!) {
       }
     ) {
       season
+      stem
       token
       #amount
       amount

projects/sdk/src/queries/silo/getSiloBalances.graphql

@@ -10,6 +10,7 @@ query getSiloBalances($account: ID!, $season: Int!) {
       }
     ) {
       season
+      stem
       token
       #amount
       amount

projects/ui/src/components/Silo/Actions/Deposits.tsx

@@ -2,10 +2,12 @@ import React, { useMemo } from 'react';
 import { useAccount as useWagmiAccount } from 'wagmi';
 import { Stack, Tooltip, Typography } from '@mui/material';
 import { GridColumns } from '@mui/x-data-grid';
+import { ERC20Token } from '@beanstalk/sdk';
+import { BigNumber } from 'ethers';
 import { Token } from '~/classes';
 import { FarmerSiloTokenBalance } from '~/state/farmer/silo';
 import type { LegacyDepositCrate } from '~/state/farmer/silo';
-import { displayBN, displayFullBN } from '~/util';
+import { displayBN, displayFullBN, transform } from '~/util';
 import { STALK } from '~/constants/tokens';
 import { ZERO_BN } from '~/constants';
 import useSiloTokenToFiat from '~/hooks/beanstalk/useSiloTokenToFiat';
@@ -14,6 +16,8 @@ import Fiat from '~/components/Common/Fiat';
 import TableCard, { TableCardProps } from '../../Common/TableCard';
 import StatHorizontal from '~/components/Common/StatHorizontal';
 import { FC } from '~/types';
+import useStemTipForToken from '~/hooks/beanstalk/useStemTipForToken';
+import useSdk from '~/hooks/sdk';
 
 const Deposits: FC<
   {
@@ -22,22 +26,30 @@ const Deposits: FC<
     useLegacySeason?: boolean;
   } & Partial<TableCardProps>
 > = ({ token, siloBalance, useLegacySeason, ...props }) => {
+  const sdk = useSdk();
   const getUSD = useSiloTokenToFiat();
   const account = useWagmiAccount();
+  const newToken = sdk.tokens.findBySymbol(token.symbol) as ERC20Token;
+
+  const stemTip = useStemTipForToken(newToken) || BigNumber.from(0);
+  const lastStem = siloBalance?.mowStatus?.lastStem || BigNumber.from(0);
+  const deltaStem = transform(stemTip.sub(lastStem), 'bnjs');
+
+  const decimalShift = sdk.tokens.BEAN.decimals - sdk.tokens.STALK.decimals;
 
   const rows: (LegacyDepositCrate & { id: string })[] = useMemo(
     () =>
       siloBalance?.deposited.crates.map((deposit) => ({
         id: deposit.stem?.toString(),
+        mowableStalk: deposit.bdv?.multipliedBy(deltaStem).shiftedBy(decimalShift),
         ...deposit,
       })) || [],
-    [siloBalance?.deposited.crates]
+    [siloBalance?.deposited.crates, deltaStem, decimalShift]
   );
 
   const columns = useMemo(
     () =>
       [
-        COLUMNS.depositId(useLegacySeason ? 'Season' : 'Stem'),
         {
           field: 'amount',
           flex: 1,
@@ -87,8 +99,8 @@ const Deposits: FC<
           field: 'stalk',
           flex: 1,
           headerName: 'Stalk',
-          align: 'right',
-          headerAlign: 'right',
+          align: 'left',
+          headerAlign: 'left',
           valueFormatter: (params) => displayBN(params.value.total),
           renderCell: (params) => (
             <Tooltip
@@ -98,9 +110,6 @@ const Deposits: FC<
                   <StatHorizontal label="Stalk at Deposit">
                     {displayFullBN(params.row.stalk.base, 2, 2)}
                   </StatHorizontal>
-                  <StatHorizontal label="Stalk grown since Deposit">
-                    {displayFullBN(params.row.stalk.grown, 2, 2)}
-                  </StatHorizontal>
                 </Stack>
               }
             >
@@ -120,9 +129,42 @@ const Deposits: FC<
           ),
           sortable: false,
         },
+        {
+          field: 'stalk.grown',
+          flex: 1,
+          headerName: 'Stalk Grown',
+          align: 'right',
+          headerAlign: 'right',
+          valueFormatter: (params) => displayBN(params.value),
+          renderCell: (params) => (
+          <Tooltip
+            placement="bottom"
+            title={
+              <Stack gap={0.5}>
+                <StatHorizontal label="Mown Grown Stalk">
+                  {displayFullBN(params.row.stalk.grown.minus(params.row.mowableStalk), 2, 2)}
+                </StatHorizontal>
+                <StatHorizontal label="Mowable Grown Stalk">
+                  {displayFullBN(params.row.mowableStalk, 2, 2)}
+                </StatHorizontal>
+              </Stack>
+            }
+          >
+            <span>
+              <Typography display={{ xs: 'none', md: 'block' }}>
+                {displayFullBN(params.row.stalk.grown, 2, 2)}
+              </Typography>
+              <Typography display={{ xs: 'block', md: 'none' }}>
+                {displayFullBN(params.row.stalk.grown, 2, 2)}
+              </Typography>
+            </span>
+          </Tooltip>
+          ),
+          sortable: false,
+        },
         COLUMNS.seeds,
       ] as GridColumns,
-    [useLegacySeason, token]
+    [token]
   );
 
   const amount = siloBalance?.deposited.amount;

projects/ui/src/state/farmer/silo/updater.ts

@@ -112,12 +112,11 @@ export const useFetchFarmerSilo = () => {
 
         // Get the mowStatus struct for each whitelisted token
         Promise.all(
-          []
-          // [...sdk.tokens.siloWhitelist].map((token) =>
-          //   sdk.contracts.beanstalk
-          //     .getMowStatus(account, token.address)
-          //     .then((status) => [token, status] as const)
-          // )
+          [...sdk.tokens.siloWhitelist].map((token) =>
+             sdk.contracts.beanstalk
+               .getMowStatus(account, token.address)
+               .then((status) => [token, status] as const)
+           )
         ).then(
           (statuses) =>
             new Map<