ui: add bdv to chop estimate

BeanstalkFarms · Oct 17, 2023 · 6e7ec3d · 6e7ec3d
1 parent f691036
commit 6e7ec3d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 38 deletions.
diff --git a/projects/ui/src/components/Chop/Actions/Chop.tsx b/projects/ui/src/components/Chop/Actions/Chop.tsx
@@ -57,6 +57,7 @@ import { FC } from '~/types';
 import TransactionToast from '~/components/Common/TxnToast';
 import useFormMiddleware from '~/hooks/ledger/useFormMiddleware';
 import useSdk from '~/hooks/sdk';
+import useBDV from '~/hooks/beanstalk/useBDV';
 
 type ChopFormValues = FormState & {
   destination: FarmToMode | undefined;
@@ -70,11 +71,12 @@ const ChopForm: FC<
   }
 > = ({ values, setFieldValue, balances, beanstalk }) => {
   const sdk = useSdk();
+  const getBDV = useBDV();
   const erc20TokenMap = useTokenMap<ERC20Token | NativeToken>(UNRIPE_TOKENS);
   const [isTokenSelectVisible, showTokenSelect, hideTokenSelect] = useToggle();
   const unripeUnderlying = useUnripeUnderlyingMap();
   const [quote, setQuote] = useState<BigNumber>(new BigNumber(0));
-  // const [loading, setLoading] = useState(false);
+  const [quoteBdv, setQuoteBdv] = useState<BigNumber>(new BigNumber(0));
 
   /// Derived values
   const state = values.tokens[0];
@@ -97,16 +99,17 @@ const ChopForm: FC<
       const resbn = new BigNumber(result.toString()).div(
         10 ** outputToken.decimals
       );
-      console.log(resbn.toString());
       setQuote(resbn);
+      const bdv = getBDV(outputToken).times(resbn);
+      setQuoteBdv(bdv);
     };
 
     if (state.amount?.gt(0)) {
       fetchQuote();
     } else {
       setQuote(new BigNumber(0));
     }
-  }, [state, inputToken, sdk, outputToken]);
+  }, [state, inputToken, sdk, outputToken, getBDV]);
 
   // Clear quote when token changes
   useEffect(() => {
@@ -194,7 +197,11 @@ const ChopForm: FC<
         {isSubmittable ? (
           <>
             <TxnSeparator />
-            <TokenOutputField token={outputToken} amount={quote || ZERO_BN} />
+            <TokenOutputField
+              token={outputToken}
+              amount={quote || ZERO_BN}
+              bdv={quoteBdv}
+            />
             <Box>
               <Accordion variant="outlined">
                 <StyledAccordionSummary title="Transaction Details" />

diff --git a/projects/ui/src/components/Common/Form/TokenOutputField.tsx b/projects/ui/src/components/Common/Form/TokenOutputField.tsx
@@ -29,6 +29,8 @@ const TokenOutputField: FC<{
   override?: any;
   /** */
   size?: 'small';
+  /** BDV  */
+  bdv?: BigNumber;
 }> = ({
   token,
   amount,
@@ -39,6 +41,7 @@ const TokenOutputField: FC<{
   isLoading = false,
   override,
   size,
+  bdv,
 }) => {
   const isZero = amount.eq(0);
   const isNegative = amount.lt(0);
@@ -47,41 +50,51 @@ const TokenOutputField: FC<{
     <OutputField isNegative={isNegative} size={size}>
       {!isLoading ? (
         <Tooltip title={amountTooltip}>
-          <Typography
-            display="inline"
-            variant={size === 'small' ? 'body1' : 'bodyLarge'}
-            sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' } }}
-          >
-            {amount.abs().gt(new BigNumber(1000000)) ? (
-              <>
-                {prefix}&nbsp;{displayFullBN(amount.abs(), 0)}
-              </>
-            ) : (
-              <>
-                {prefix}&nbsp;
-                {displayFullBN(
-                  amount.abs(),
-                  token.displayDecimals,
-                  token.displayDecimals
-                )}
-              </>
-            )}
-            {amountSecondary && (
-              <>
-                &nbsp;&nbsp;
-                <Typography display="inline" variant="bodySmall">
-                  (
-                  {typeof amountSecondary === 'string'
-                    ? amountSecondary
-                    : displayFullBN(
-                        amountSecondary,
-                        token.displayDecimals || 2
-                      )}
-                  )
-                </Typography>
-              </>
+          <Box>
+            <Typography
+              display="inline"
+              variant={size === 'small' ? 'body1' : 'bodyLarge'}
+              sx={{
+                display: 'flex',
+                flexDirection: { xs: 'column', sm: 'row' },
+              }}
+            >
+              {amount.abs().gt(new BigNumber(1000000)) ? (
+                <>
+                  {prefix}&nbsp;{displayFullBN(amount.abs(), 0)}
+                </>
+              ) : (
+                <>
+                  {prefix}&nbsp;
+                  {displayFullBN(
+                    amount.abs(),
+                    token.displayDecimals,
+                    token.displayDecimals
+                  )}
+                </>
+              )}
+              {amountSecondary && (
+                <>
+                  &nbsp;&nbsp;
+                  <Typography display="inline" variant="bodySmall">
+                    (
+                    {typeof amountSecondary === 'string'
+                      ? amountSecondary
+                      : displayFullBN(
+                          amountSecondary,
+                          token.displayDecimals || 2
+                        )}
+                    )
+                  </Typography>
+                </>
+              )}
+            </Typography>
+            {bdv && (
+              <Typography variant="bodySmall" color="text.secondary">
+                ~{displayFullBN(bdv!, 0)} BDV
+              </Typography>
             )}
-          </Typography>
+          </Box>
         </Tooltip>
       ) : (
         <CircularProgress size={16} thickness={5} />