Merge pull request #320 from yieldprotocol/marcomariscal/issue308

issue308: update pool view to include strategy language instead of pool
yieldprotocol · Sep 18, 2021 · 4c6c15d · 4c6c15d
2 parents f442778 + b55cb7a
commit 4c6c15d
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 68 deletions.
diff --git a/src/components/positionItems/StrategyItem.tsx b/src/components/positionItems/StrategyItem.tsx
@@ -7,19 +7,11 @@ import { cleanValue, nFormatter } from '../../utils/appUtils';
 import PositionAvatar from '../PositionAvatar';
 import ItemWrap from '../wraps/ItemWrap';
 
-function StrategyItem({
-  strategy,
-  index,
-  condensed,
-}: {
-  strategy: IStrategy;
-  index: number;
-  condensed?: boolean;
-}) {
+function StrategyItem({ strategy, index, condensed }: { strategy: IStrategy; index: number; condensed?: boolean }) {
   const history = useHistory();
 
   const { userState, userActions } = useContext(UserContext) as IUserContext;
-  
+
   const handleSelect = (_series: IStrategy) => {
     userActions.setSelectedBase(strategy.baseId);
     userActions.setSelectedSeries(strategy.currentSeriesId);
@@ -41,13 +33,13 @@ function StrategyItem({
             {strategy.name}
           </Text>
           <Box direction="row" gap="small">
-              <Text weight={450} size="xsmall">
-                {/* Tokens:  {cleanValue(series.poolTokens_, 2)} */}
-                Tokens: {nFormatter(parseFloat(strategy.accountBalance_!), 2)}
-              </Text>
-              <Text weight={450} size="xsmall">
-                Strategy %: {cleanValue(strategy.accountBalance_, 2)}
-              </Text>
+            <Text weight={450} size="xsmall">
+              {/* Tokens:  {cleanValue(series.poolTokens_, 2)} */}
+              Tokens: {nFormatter(parseFloat(strategy.accountBalance_!), 2)}
+            </Text>
+            <Text weight={450} size="xsmall">
+              Strategy %: {cleanValue(strategy.accountStrategyPercent, 2)}
+            </Text>
           </Box>
         </Box>
       </Box>

diff --git a/src/contexts/ChainContext.tsx b/src/contexts/ChainContext.tsx
@@ -188,7 +188,6 @@ const ChainProvider = ({ children }: any) => {
   // const [lastSeriesUpdate, setLastSeriesUpdate] = useCachedState('lastSeriesUpdate', 27090000);
   const [lastSeriesUpdate, setLastSeriesUpdate] = useCachedState('lastSeriesUpdate', 0);
 
-
   /**
    * Update on FALLBACK connection/state on network changes (id/library)
    */
@@ -270,7 +269,7 @@ const ChainProvider = ({ children }: any) => {
             const { assetId: id, asset: address } = Cauldron.interface.parseLog(x).args;
             const ERC20 = contracts.ERC20Permit__factory.connect(address, fallbackLibrary);
             /* Add in any extra static asset Data */ // TODO is there any other fixed asset data needed?
-            const [ name, symbol, decimals ] = await Promise.all([
+            const [name, symbol, decimals] = await Promise.all([
               ERC20.name(),
               ERC20.symbol(),
               ERC20.decimals(),
@@ -337,7 +336,7 @@ const ChainProvider = ({ children }: any) => {
           oppStartColor,
           oppEndColor,
           oppTextColor,
-          seriesMark: <YieldMark colors={[startColor, endColor] } />,
+          seriesMark: <YieldMark colors={[startColor, endColor]} />,
 
           // built-in helper functions:
           getTimeTillMaturity: () => series.maturity - Math.round(new Date().getTime() / 1000),
@@ -373,17 +372,16 @@ const ChainProvider = ({ children }: any) => {
                 const poolContract = contracts.Pool__factory.connect(poolAddress, fallbackLibrary);
                 const fyTokenContract = contracts.FYToken__factory.connect(fyToken, fallbackLibrary);
                 // const baseContract = contracts.ERC20__factory.connect(fyToken, fallbackLibrary);
-                const [name, symbol, version, decimals, poolName, poolVersion, poolSymbol ] =
-                  await Promise.all([
-                    fyTokenContract.name(),
-                    fyTokenContract.symbol(),
-                    fyTokenContract.version(),
-                    fyTokenContract.decimals(),
-                    poolContract.name(),
-                    poolContract.version(),
-                    poolContract.symbol(),
-                    // poolContract.decimals(),
-                  ]);
+                const [name, symbol, version, decimals, poolName, poolVersion, poolSymbol] = await Promise.all([
+                  fyTokenContract.name(),
+                  fyTokenContract.symbol(),
+                  fyTokenContract.version(),
+                  fyTokenContract.decimals(),
+                  poolContract.name(),
+                  poolContract.version(),
+                  poolContract.symbol(),
+                  // poolContract.decimals(),
+                ]);
                 const newSeries = {
                   id,
                   baseId,
@@ -426,11 +424,10 @@ const ChainProvider = ({ children }: any) => {
         const newStrategyList: any[] = [];
         await Promise.all(
           strategyAddresses.map(async (strategyAddr: string) => {
-
             /* if the strategy is already in the cache : */
             if (cachedStrategies.findIndex((_s: any) => _s.address === strategyAddr) === -1) {
               const Strategy = contracts.Strategy__factory.connect(strategyAddr, fallbackLibrary);
-              const [name, symbol, baseId, decimals, version ] = await Promise.all([
+              const [name, symbol, baseId, decimals, version] = await Promise.all([
                 Strategy.name(),
                 Strategy.symbol(),
                 Strategy.baseId(),

diff --git a/src/hooks/actionHelperHooks/usePoolHelpers.ts b/src/hooks/actionHelperHooks/usePoolHelpers.ts
@@ -1,4 +1,48 @@
+import { useContext, useEffect, useState } from 'react';
+import { ethers, BigNumber } from 'ethers';
+import { UserContext } from '../../contexts/UserContext';
+import { ChainContext } from '../../contexts/ChainContext';
+import { IAsset, IStrategy } from '../../types';
+import { cleanValue } from '../../utils/appUtils';
+import { mulDecimal, divDecimal } from '../../utils/yieldMath';
+
 export const usePoolHelpers = (input: string | undefined) => {
-  const poolMax = input;
-  return { poolMax };
+  /* STATE FROM CONTEXT */
+  const {
+    userState: { selectedStrategyAddr, strategyMap, assetMap, activeAccount },
+  } = useContext(UserContext);
+
+  const strategy: IStrategy | undefined = strategyMap?.get(selectedStrategyAddr);
+  const strategyBase: IAsset | undefined = assetMap?.get(strategy?.baseId);
+
+  /* LOCAL STATE */
+  const [poolPercentPreview, setPoolPercentPreview] = useState<string | undefined>();
+  const [poolTokenPreview, setPoolTokenPreview] = useState<string | undefined>(input);
+  const [maxPool, setMaxPool] = useState<string | undefined>();
+
+  /* SET MAX VALUES */
+  useEffect(() => {
+    if (activeAccount) {
+      /* Checks asset selection and sets the max available value */
+      (async () => {
+        const max = await strategyBase?.getBalance(activeAccount);
+        if (max) setMaxPool(ethers.utils.formatUnits(max, strategyBase?.decimals).toString());
+      })();
+    }
+  }, [input, activeAccount, strategyBase]);
+
+  useEffect(() => {
+    if (input && strategy) {
+      // update the below to get an actual estimated token value based on the input
+      const _poolTokenPreview = BigNumber.from(ethers.utils.parseUnits(input, strategyBase?.decimals));
+      const _poolPercentPreview = cleanValue(
+        mulDecimal(divDecimal(_poolTokenPreview, strategy.strategyTotalSupply!), '100'),
+        2
+      );
+
+      setPoolPercentPreview(_poolPercentPreview);
+    }
+  }, [input, strategy, strategyBase]);
+
+  return { maxPool, poolTokenPreview, poolPercentPreview };
 };
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -129,6 +129,8 @@ export interface IStrategyRoot extends ISignable {
   baseId: string;
   decimals: number;
   strategyContract: Strategy;
+  strategyTotalSupply?: BigNumber;
+  strategyTotalSupply_?: string;
 }
 
 export interface IVaultRoot {
@@ -191,9 +193,6 @@ export interface IStrategy extends IStrategyRoot {
   nextSeries: ISeries | undefined;
   active: boolean;
 
-  strategyTotalSupply?: BigNumber;
-  strategyTotalSupply_?: string;
-
   poolTotalSupply?: BigNumber;
   poolTotalSupply_?: string;
 

diff --git a/src/utils/yieldMath.ts b/src/utils/yieldMath.ts
@@ -165,7 +165,7 @@ export function burn(
  * @param { BigNumber | string } fyToken
  * @param { BigNumber | string } timeTillMaturity
  *  @param { number } decimals
- * 
+ *
  * @returns {[BigNumber, BigNumber]}
  */
 export function mintWithBase(
@@ -175,7 +175,7 @@ export function mintWithBase(
   supply: BigNumber | string,
   fyToken: BigNumber | string,
   timeTillMaturity: BigNumber | string,
-  decimals: number = 18,
+  decimals: number = 18
 ): [BigNumber, BigNumber] {
   const Z = new Decimal(baseReserves.toString());
   const YR = new Decimal(fyTokenReservesReal.toString());
@@ -198,8 +198,8 @@ export function mintWithBase(
  * @param { BigNumber | string } totalSupply
  * @param { BigNumber | string } lpTokens
  * @param { BigNumber | string } timeTillMaturity
- * 
-  *  @param { number } decimals
+ *
+ *  @param { number } decimals
  * @returns { BigNumber }
  */
 export function burnForBase(
@@ -209,7 +209,7 @@ export function burnForBase(
   supply: BigNumber,
   lpTokens: BigNumber,
   timeTillMaturity: BigNumber,
-  decimals: number=18,
+  decimals: number = 18
 ): BigNumber {
   // Burn FyToken
   const [z1, y] = burn(baseReserves, fyTokenReservesReal, supply, lpTokens);
@@ -299,7 +299,7 @@ export function sellFYToken(
   const Yxa = fyTokenReserves_.add(fyDai_).pow(a);
   const sum = Za.add(Ya.sub(Yxa));
   const y = baseReserves_.sub(sum.pow(invA));
-  
+
   const yFee = y.sub(precisionFee);
 
   // return yFee.isNaN() ? ethers.constants.Zero : toBn(yFee);

diff --git a/src/views/Pool.tsx b/src/views/Pool.tsx
@@ -1,10 +1,11 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { Box, RadioButtonGroup, ResponsiveContext, Text, TextInput } from 'grommet';
+import { Box, RadioButtonGroup, ResponsiveContext, Text, TextInput, Tip } from 'grommet';
 
 import { ethers } from 'ethers';
 
-import { FiClock, FiPercent } from 'react-icons/fi';
+import { FiClock, FiInfo, FiPercent } from 'react-icons/fi';
 import { BiCoinStack, BiMessageSquareAdd } from 'react-icons/bi';
+import { MdAutorenew } from 'react-icons/md';
 import { cleanValue, nFormatter } from '../utils/appUtils';
 import AssetSelector from '../components/selectors/AssetSelector';
 import MainViewWrap from '../components/wraps/MainViewWrap';
@@ -29,26 +30,29 @@ import YieldCardHeader from '../components/YieldCardHeader';
 import { useAddLiquidity } from '../hooks/actionHooks/useAddLiquidity';
 import StrategySelector from '../components/selectors/StrategySelector';
 import ColorText from '../components/texts/ColorText';
+import { usePoolHelpers } from '../hooks/actionHelperHooks/usePoolHelpers';
 import { useProcess } from '../hooks/useProcess';
 
 function Pool() {
   const mobile: boolean = useContext<any>(ResponsiveContext) === 'small';
 
   /* STATE FROM CONTEXT */
   const { userState } = useContext(UserContext) as IUserContext;
-  const { activeAccount, assetMap, seriesMap, selectedSeriesId, selectedBaseId } = userState;
+  const { activeAccount, assetMap, seriesMap, selectedSeriesId, selectedBaseId, selectedStrategyAddr, strategyMap } =
+    userState;
   const selectedSeries = seriesMap.get(selectedSeriesId!);
   const selectedBase = assetMap.get(selectedBaseId!);
+  const selectedStrategy = strategyMap.get(selectedStrategyAddr!);
 
   /* LOCAL STATE */
   const [poolInput, setPoolInput] = useState<string | undefined>(undefined);
-  const [maxPool, setMaxPool] = useState<string | undefined>();
   const [poolDisabled, setPoolDisabled] = useState<boolean>(true);
   const [poolMethod, setPoolMethod] = useState<'BUY' | 'BORROW'>('BUY');
   const [stepPosition, setStepPosition] = useState<number>(0);
 
   /* HOOK FNS */
   const addLiquidity = useAddLiquidity();
+  const { maxPool, poolPercentPreview } = usePoolHelpers(poolInput);
 
   /* input validation hooks */
   const { inputError: poolError } = useInputValidation(poolInput, ActionCodes.ADD_LIQUIDITY, selectedSeries, [
@@ -61,24 +65,14 @@ function Pool() {
   /* LOCAL ACTION FNS */
   const handleAdd = () => {
     // !poolDisabled &&
+    // TODO update for strategy
     selectedSeries && addLiquidity(poolInput!, selectedSeries, poolMethod);
   };
 
-  /* SET MAX VALUES */
-  useEffect(() => {
-    if (activeAccount) {
-      /* Checks asset selection and sets the max available value */
-      (async () => {
-        const max = await selectedBase?.getBalance(activeAccount);
-        if (max) setMaxPool(ethers.utils.formatUnits(max, selectedSeries?.decimals).toString());
-      })();
-    }
-  }, [activeAccount, poolInput, selectedBase, setMaxPool]);
-
   /* ACTION DISABLING LOGIC  - if ANY conditions are met: block action */
   useEffect(() => {
-    !activeAccount || !poolInput || !selectedSeries || poolError ? setPoolDisabled(true) : setPoolDisabled(false);
-  }, [poolInput, activeAccount, poolError, selectedSeries]);
+    !activeAccount || !poolInput || poolError || !selectedStrategy ? setPoolDisabled(true) : setPoolDisabled(false);
+  }, [poolInput, activeAccount, poolError, selectedStrategy]);
 
   const resetInputs = useCallback(() => {
     setPoolInput(undefined);
@@ -171,7 +165,19 @@ function Pool() {
                   {!selectedSeries?.seriesIsMature && (
                     <SectionWrap>
                       <Box direction="row" justify="between" fill align="center">
-                        {!mobile && <Text size="small"> Pooling method: </Text>}
+                        {!mobile && (
+                          <Box direction="row" gap="xsmall">
+                            <Text size="small">Pooling method:</Text>
+                            {/* <Tip
+                              content={<Text size="xsmall">some info</Text>}
+                              dropProps={{ align: { bottom: 'top' } }}
+                            >
+                              <Text size="small">
+                                <FiInfo />
+                              </Text>
+                            </Tip> */}
+                          </Box>
+                        )}
                         <RadioButtonGroup
                           name="strategy"
                           options={[
@@ -199,13 +205,13 @@ function Pool() {
                         icon={<BiMessageSquareAdd />}
                         value={`${cleanValue(poolInput, selectedBase?.digitFormat!)} ${selectedBase?.symbol}`}
                       />
-                      <InfoBite label="Series Maturity" icon={<FiClock />} value={`${selectedSeries?.displayName}`} />
-                      <InfoBite
+                      <InfoBite label="Strategy" icon={<MdAutorenew />} value={`${selectedStrategy?.name}`} />
+                      {/* <InfoBite
                         label="Amount of liquidity tokens recieved"
                         icon={<BiCoinStack />}
                         value={`${'[todo]'} Liquidity tokens`}
-                      />
-                      <InfoBite label="Percentage of pool" icon={<FiPercent />} value={`${'[todo]'}%`} />
+                      /> */}
+                      <InfoBite label="Percentage of pool" icon={<FiPercent />} value={`~${poolPercentPreview}%`} />
                     </Box>
                   </SectionWrap>
                 </Box>

diff --git a/src/views/PoolPosition.tsx b/src/views/PoolPosition.tsx
@@ -201,7 +201,7 @@ const PoolPosition = () => {
                     {selectedStrategy.currentSeries && (
                       <InfoBite
                         label="Strategy Token percentage"
-                        value={`${cleanValue(selectedStrategy?.accountStrategyPercent, 4)} %  of ${nFormatter(
+                        value={`${cleanValue(selectedStrategy?.accountStrategyPercent, 2)} %  of ${nFormatter(
                           parseFloat(selectedStrategy?.strategyTotalSupply_!),
                           2
                         )}`}
@@ -213,7 +213,7 @@ const PoolPosition = () => {
                     {selectedStrategy.currentSeries && (
                       <InfoBite
                         label="Returns in current Pool"
-                        value={`${cleanValue(selectedStrategy?.accountStrategyPercent, 4)}% `}
+                        value={`${cleanValue(selectedStrategy?.accountStrategyPercent, 2)}% `}
                         icon={<FiTrendingUp />}
                         loading={seriesLoading}
                       />