Bean UI - Misc fixes (#691)

projects/sdk/src/constants/actions.ts

@@ -16,7 +16,7 @@ export enum ActionType {
 
   /// FIELD
   BUY_BEANS,
-  BURN_BEANS,
+  SOW_BEANS,
   RECEIVE_PODS,
   HARVEST,
   RECEIVE_BEANS,

projects/ui/src/components/Analytics/Bean/Crosses.tsx

@@ -17,7 +17,7 @@ const getValue = (season: SnapshotData<SeasonalCrossesQuery>) => season.crosses;
 const formatValue = (value: number) => `${value}`;
 const statProps = {
   title: 'Peg Crosses',
-  titleTooltip: 'The number of times Bean has crossed its peg. Does not include peg crosses due to ETH price movement.',
+  titleTooltip: 'The total number of times Bean has crossed its peg at the beginning of every Season.',
   gap: 0.25,
   sx: { ml: 0 },
 };

projects/ui/src/components/Analytics/Bean/DeltaB.tsx

@@ -20,7 +20,7 @@ const formatValue = (value: number) =>
   `${value.toLocaleString('en-us', { maximumFractionDigits: 2 })}`;
 const statProps = {
   title: 'deltaB',
-  titleTooltip: 'The liquidity and time weighted average shortage of Beans in liquidity pools on the Oracle Whitelist at the end of every Season.',
+  titleTooltip: 'The liquidity and time weighted average shortage of Beans in liquidity pools on the Oracle Whitelist at the beginning of every Season.',
   gap: 0.25,
 };
 

projects/ui/src/components/Analytics/Bean/Liquidity.tsx

@@ -18,8 +18,7 @@ const formatValue = (value: number) =>
   `$${value.toLocaleString('en-US', { maximumFractionDigits: 0 })}`;
 const statProps = {
   title: 'Liquidity',
-  titleTooltip:
-    'The USD value of the tokens in the BEAN:3CRV and BEAN:ETH pools at the end of every Season.',
+  titleTooltip: 'The total USD value of tokens in liquidity pools on the Oracle Whitelist at the beginning of every Season.',
   gap: 0.25,
 };
 const queryConfig = {

projects/ui/src/components/Analytics/Bean/LiquiditySupplyRatio.tsx

@@ -15,9 +15,9 @@ const getValue = (season: LiquiditySupplyRatioQuery['seasons'][number]) =>
 const formatValue = (value: number) =>
   `${value.toFixed(4)}%`;
 const statProps = {
-  title: 'Liquidity:Supply Ratio',
+  title: 'Liquidity to Supply Ratio',
   titleTooltip:
-    `The ratio of Beans in liquidity pools on the Oracle Whitelist per Bean, displayed as a percentage. The Liquidity:Supply Ratio is a useful indicator of Beanstalk's health.`,
+    `The ratio of Beans in liquidity pools on the Oracle Whitelist per Bean, displayed as a percentage, at the beginning of every Season. The Liquidity to Supply Ratio is a useful indicator of Beanstalk's health.`,
   gap: 0.25,
 };
 const queryConfig = {

projects/ui/src/components/Analytics/Bean/MarketCap.tsx

@@ -15,7 +15,7 @@ const formatValue = (value: number) =>
 const statProps = {
   title: 'Market Cap',
   titleTooltip:
-    'The USD value of the total Bean supply at the end of every Season.',
+    'The USD value of the Bean supply at the beginning of every Season.',
   gap: 0.25,
 };
 const lineChartProps: Partial<LineChartProps> = {

projects/ui/src/components/Analytics/Bean/Price.tsx

@@ -15,7 +15,7 @@ const getValue = (season: Season) => parseFloat(season.price);
 const formatValue = (value: number) => `$${value.toFixed(4)}`;
 const statProps = {
   title: 'Bean Price',
-  titleTooltip: 'The price at the end of every Season.',
+  titleTooltip: 'The USD price of 1 Bean at the beginning of every Season.',
   gap: 0.25,
 };
 const lineChartProps: Partial<LineChartProps> = {

projects/ui/src/components/Analytics/Bean/Supply.tsx

@@ -25,7 +25,7 @@ const useStatProps = () => {
   const isTiny = useMediaQuery(theme.breakpoints.down('md'));
   return {
     title: isTiny ? 'Supply' : 'Bean Supply',
-    titleTooltip: 'The total Bean supply at the end of every Season.',
+    titleTooltip: 'The total Bean supply at the beginning of every Season.',
     gap: 0.25,
   };
 };

projects/ui/src/components/Analytics/Bean/Volume.tsx

@@ -18,7 +18,7 @@ const formatValue = (value: number) =>
   `$${value.toLocaleString('en-US', { maximumFractionDigits: 0 })}`;
 const statProps = {
   title: 'Volume',
-  titleTooltip: 'The total volume in the BEAN:3CRV and BEAN:ETH pools in every Season.',
+  titleTooltip: 'The total USD volume in liquidity pools on the Oracle Whitelist every Season.',
   gap: 0.25,
 };
 const queryConfig = { context: { subgraph: 'bean' } };

projects/ui/src/components/Analytics/Bean/VolumeChart.tsx

@@ -112,7 +112,7 @@ const VolumeChart: FC<{ width?: number; height: number }> = ({
       >
         <ChartInfoOverlay
           title="Volume"
-          titleTooltip="The total volume in the BEAN:3CRV and BEAN:ETH pools in every Season."
+          titleTooltip="The total USD volume in liquidity pools on the Oracle Whitelist every Season."
           gap={0.25}
           isLoading={queryData?.loading}
           amount={formatValue(currentHoverBar?.count ?? 0)}

projects/ui/src/components/Analytics/Bean/index.tsx

@@ -40,7 +40,7 @@ const BeanAnalytics: FC<{}> = () => {
         <Tab label="Supply" />
         <Tab label="Crosses" />
         <Tab label="deltaB" />
-        <Tab label="Liquidity:Supply Ratio" />
+        <Tab label="L2SR" />
       </Tabs>
       {/* 
         TODO: The height prop currently *only* reflects in the chart height. However, the full component

projects/ui/src/components/Analytics/Field/HarvestedPods.tsx

@@ -19,8 +19,8 @@ const getValue = (season: SnapshotData<SeasonalHarvestedPodsQuery>) =>
 const formatValue = (value: number) =>
   `${value.toLocaleString('en-US', { maximumFractionDigits: 0 })}`;
 const StatProps = {
-  title: 'Harvested Pods',
-  titleTooltip: 'The total number of Pods Harvested at the end of each Season.',
+  title: 'Pods Harvested',
+  titleTooltip: 'The total number of Pods Harvested at the beginning of every Season.',
   gap: 0.5,
 };
 const lineChartProps: Partial<LineChartProps> = {

projects/ui/src/components/Analytics/Field/PodRate.tsx

@@ -20,7 +20,7 @@ const formatValue = (value: number) => `${value.toFixed(2)}%`;
 const statProps = {
   title: 'Pod Rate',
   titleTooltip:
-    'The ratio of outstanding Pods per Bean, displayed as a percentage. The Pod Rate is used by Beanstalk as a proxy for its health.',
+    'The ratio of Unharvestable Pods per Bean, displayed as a percentage, at the beginning of every Season. The Pod Rate is used by Beanstalk as a proxy for its health.',
   gap: 0.25,
   sx: { ml: 0 },
 };

projects/ui/src/components/Analytics/Field/Pods.tsx

@@ -17,7 +17,7 @@ const formatValue = (value: number) =>
   `${value.toLocaleString('en-US', { maximumFractionDigits: 0 })}`;
 const statProps = {
   title: 'Pods',
-  titleTooltip: 'The total number of Pods at the end of each Season.',
+  titleTooltip: 'The total number of Unharvestable Pods at the beginning of every Season.',
   gap: 0.5,
 };
 const lineChartProps: Partial<LineChartProps> = {

projects/ui/src/components/Analytics/Field/RRoR.tsx

@@ -15,7 +15,7 @@ const formatValue = (value: number) => `${value.toFixed(2)}%`;
 const statProps = {
   title: 'Real Rate of Return',
   titleTooltip:
-    'The return for Sowing Beans at the beginning of each Season, accounting for the Bean price. RRoR = (1 + Temperature) / TWAP.',
+    'The return for Sowing Beans at the beginning of every Season, accounting for the Bean price. RRoR = (1 + Temperature) / TWAP.',
   gap: 0.5,
 };
 const lineChartProps: Partial<LineChartProps> = {

projects/ui/src/components/Analytics/Field/Sown.tsx

@@ -18,7 +18,7 @@ const formatValue = (value: number) =>
   `${value.toLocaleString('en-US', { maximumFractionDigits: 0 })}`;
 const statProps = {
   title: 'Beans Sown',
-  titleTooltip: 'The total number of Beans Sown at the end of each Season.',
+  titleTooltip: 'The total number of Beans Sown at the beginning of every Season.',
   gap: 0.25,
   sx: { ml: 0 },
 };

projects/ui/src/components/Analytics/Field/Temperature.tsx

@@ -20,7 +20,7 @@ const getValue = (snapshot: SnapshotData<SeasonalTemperatureQuery>) =>
 const formatValue = (value: number) => `${value.toFixed(0)}%`;
 const statProps = {
   title: 'Max Temperature',
-  titleTooltip: 'The maximum interest rate for Sowing Beans each Season.',
+  titleTooltip: 'The maximum interest rate for Sowing Beans every Season.',
   gap: 0.5,
 };
 const lineChartProps: Partial<LineChartProps> = {

projects/ui/src/components/Analytics/Field/TotalSowers.tsx

@@ -18,7 +18,7 @@ const getValue = (season: SnapshotData<SeasonalTotalSowersQuery>) =>
 const formatValue = (value: number) => `${value}`;
 const statProps = {
   title: 'Total Sowers',
-  titleTooltip: 'The total number of unique Sowers at the end of each Season.',
+  titleTooltip: 'The total number of unique Sowers at the beginning of every Season.',
   gap: 0.25,
   sx: { ml: 0 },
 };

projects/ui/src/components/Analytics/Silo/DepositedAsset.tsx

@@ -39,7 +39,7 @@ const DepositedAsset: FC<{
           : asset.symbol === 'urBEAN'
           ? 'Unripe Beans'
           : asset.name
-      } at the end of each Season.`,
+      } at the beginning of every Season.`,
       gap: 0.5,
     }),
     [asset]

projects/ui/src/components/Analytics/Silo/Seeds.tsx

@@ -17,7 +17,7 @@ const formatValue = (value: number) =>
   `${value.toLocaleString('en-US', { maximumFractionDigits: 0 })}`;
 const statProps = {
   title: 'Seeds',
-  titleTooltip: 'The total number of Seeds at the end of each Season.',
+  titleTooltip: 'The total number of Seeds at the beginning of every Season.',
   gap: 0.5,
 };
 const queryConfig = {

projects/ui/src/components/Analytics/Silo/Stalk.tsx

@@ -17,7 +17,7 @@ const formatValue = (value: number) =>
   `${value.toLocaleString('en-US', { maximumFractionDigits: 0 })}`;
 const statProps = {
   title: 'Stalk',
-  titleTooltip: 'The total number of Stalk at the end of each Season.',
+  titleTooltip: 'The total number of Stalk at the beginning of every Season.',
   gap: 0.5,
 };
 const queryConfig = {

projects/ui/src/components/App/index.tsx

@@ -204,6 +204,7 @@ export default function App() {
             <Route path="/404" element={<PageNotFound />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
+          {/*
           <Box
             sx={{
               position: 'fixed',
@@ -220,7 +221,8 @@ export default function App() {
               &middot; {sgEnvKey}
             </Typography>
           </Box>
-        </Box>
+          */}
+          </Box>
       </Box>
     </>
   );

projects/ui/src/components/Balances/SiloBalances.tsx

@@ -443,7 +443,7 @@ const SiloBalances: React.FC<{}> = () => {
                         <Typography color="text.primary" component="span">
                           {displayFullBN(
                             token.getSeeds(deposits?.bdv ?? ZERO_BN),
-                            0
+                            2
                           )}
                         </Typography>
                       </Row>

projects/ui/src/components/Balances/SiloBalancesHistory.tsx

@@ -53,13 +53,21 @@ const SiloBalancesHistory: React.FC<{}> = () => {
   };
 
   return (
-    <Box sx={{ width: '100%', height: '380px', position: 'relative' }}>
+    <Box sx={{ width: '100%', height: '390px', position: 'relative' }}>
       {account !== undefined ? (
         <BaseSeasonPlot
           queryData={queryData}
           height={300}
           StatProps={{
-            title: 'Total Deposited Value',
+            title: 'Value Deposited',
+            titleTooltip:
+              <>
+                  The historical USD value of your Silo Deposits at the beginning of every Season. <br />
+                <Typography variant="bodySmall">
+                  Note: Unripe assets are valued based on the current Chop Rate. Earned Beans are shown upon Plant.
+                </Typography>
+              </>
+            ,
             gap: 0.25,
           }}
           timeTabParams={timeTabParams}

projects/ui/src/components/Balances/TokenBalanceTable.tsx

@@ -97,7 +97,7 @@ const TokenBalanceTable: React.FC<{
       ) : (
         <Stack height="100%" alignItems="center" justifyContent="center" pb={2}>
           <Typography color="text.tertiary">
-            {`You don't have any tokens in your ${pageName} Balance`}
+            {`You don't have any tokens in your ${pageName} Balance.`}
           </Typography>
         </Stack>
       )}

projects/ui/src/components/Barn/Actions/Buy.tsx

@@ -43,7 +43,7 @@ import useFarmerBalances from '~/hooks/farmer/useFarmerBalances';
 import usePreferredToken, {
   PreferredToken,
 } from '~/hooks/farmer/usePreferredToken';
-import { getTokenIndex, normaliseTV, tokenValueToBN } from '~/util';
+import { displayTokenAmount, getTokenIndex, normaliseTV, tokenValueToBN } from '~/util';
 import { useFetchFarmerAllowances } from '~/state/farmer/allowances/updater';
 import { FarmerBalances } from '~/state/farmer/balances';
 import FertilizerItem from '../FertilizerItem';
@@ -206,7 +206,7 @@ const BuyForm: FC<
           balanceFrom={values.balanceFrom}
           params={quoteProviderParams}
         />
-        <ClaimBeanDrawerToggle />
+        <ClaimBeanDrawerToggle actionText='Buy Fert with'/>
         {/* Outputs */}
         {fert?.gt(0) ? (
           <>
@@ -229,10 +229,34 @@ const BuyForm: FC<
               </Box>
               <WarningAlert>
                 The amount of Fertilizer received is: <br />
-                {values.tokens[0].amount?.toFixed(2)}{' '}
-                {values.tokens[0].token.symbol}
+                {values.tokens[0].amount?.gt(0) && (
+                  <>
+                    {displayTokenAmount(
+                      values.tokens[0].amount || BigNumber(0),
+                      values.tokens[0].token,
+                      { showName: false, showSymbol: true }
+                    )}
+                  </>
+                )}{' '}
+                {values.claimableBeans.amount?.gt(0) && (
+                  <> 
+                    {values.tokens[0].amount?.gt(0) && (<>+ </>)} 
+                    {displayTokenAmount(
+                      values.claimableBeans.amount, 
+                      sdk.tokens.BEAN, 
+                      { showName: false, showSymbol: true }
+                    )}
+                  </>
+                )}{' '}
                 {values.tokens[0].token.symbol !== 'WETH' && (
-                  <> → {values.tokens[0].amountOut?.toFixed(2)} WETH </>
+                  <> 
+                    →{' '} 
+                    {displayTokenAmount(
+                      values.tokens[0].amountOut?.plus(values.claimableBeans.amountOut || BigNumber(0)) || BigNumber(0), 
+                      sdk.tokens.WETH, 
+                      { showName: false, showSymbol: true }
+                    )}
+                  </>
                 )}{' '}
                 * ${ethPrice.toHuman('short')} = {fert.toFixed(0)} Fertilizer
               </WarningAlert>
@@ -287,7 +311,7 @@ const BuyForm: FC<
           Buy
         </SmartSubmitButton>
       </Stack>
-      <FormWithDrawer.Drawer title="Use Claimable Beans">
+      <FormWithDrawer.Drawer title="Buy Fert with Claimable Beans">
         <ClaimBeanDrawerContent<BuyQuoteHandlerParams>
           quoteProviderProps={{
             tokenOut: token,

projects/ui/src/components/Common/Balances/BeanstalkBalances.tsx

@@ -205,6 +205,7 @@ const BeanstalkBalances: FC<{
                     WHITELIST[address],
                     breakdown.tokens[address].amount
                   )}
+                  amountTooltipLocation="right"
                 />
               ))}
             </Stack>

projects/ui/src/components/Common/Balances/TokenRow.tsx

@@ -24,6 +24,8 @@ const TokenRow: FC<{
   amount?: string | JSX.Element;
   /* Display a tooltip when hovering over the amount */
   amountTooltip?: string | JSX.Element;
+  /* Override the default tooltip location */
+  amountTooltipLocation?: any;
   /* The USD value of the amount of Token */
   value?: string | JSX.Element;
   /* Fade this row out when others are selected */
@@ -42,6 +44,7 @@ const TokenRow: FC<{
   token,
   amount,
   amountTooltip,
+  amountTooltipLocation,
   value,
   isFaded = false,
   isSelected = false,
@@ -90,7 +93,7 @@ const TokenRow: FC<{
         </Tooltip>
       )}
     </Row>
-    <Tooltip title={amountTooltip || ''} placement="top-end">
+    <Tooltip title={amountTooltip || ''} placement={amountTooltipLocation || "top-end"}>
       <div>
         <Row gap={0.5}>
           {token && <TokenIcon token={token} />}

projects/ui/src/components/Common/Charts/ChartPropProvider.tsx

@@ -200,6 +200,11 @@ const defaultChartStyles: ChartMultiStyles = {
     fillPrimary: chartColors.yellowLight,
     strokeWidth: 2,
   },
+  4: {
+    stroke: chartColors.blue,
+    fillPrimary: chartColors.blueLight,
+    strokeWidth: 2,
+  },
 };
 
 /**

projects/ui/src/components/Common/Form/FormTxn/AddPlantTxnToggle.tsx

@@ -53,7 +53,8 @@ const sx = {
  */
 const AddPlantTxnToggle: React.FC<{
   plantAndDoX: PlantAndDoX | undefined;
-}> = ({ plantAndDoX }) => {
+  actionText?: string;
+}> = ({ plantAndDoX, actionText }) => {
   /// Local State
   const [open, show, hide] = useToggle();
 
@@ -123,10 +124,10 @@ const AddPlantTxnToggle: React.FC<{
               />
               <Stack>
                 <Typography variant="h4" color="primary.main">
-                  Use Earned Beans
+                  {`${actionText || 'Use'} Earned Beans`}
                 </Typography>
                 <Typography variant="body1" color="text.tertiary">
-                  Toggle to claim Earned Beans in your transaction
+                  {`Toggle to ${actionText || 'Claim'} Earned Beans in this transaction.`}
                 </Typography>
               </Stack>
             </Row>
@@ -149,7 +150,7 @@ const AddPlantTxnToggle: React.FC<{
           >
             <Stack gap={1} p={1}>
               <Typography variant="body1" color="text.tertiary">
-                You will Plant to claim these Silo rewards
+                You will claim these Silo rewards:
               </Typography>
               <Grid container spacing={1} direction="row">
                 {items.map((item, i) => (