feat: vr borrow updates

src/components/PositionAvatar.tsx

@@ -58,7 +58,15 @@ function PositionAvatar({
   return (
     <Outer width={condensed ? '36px' : 'auto'}>
       <Avatar
-        background={vyToken ? 'gradient-transparent' : series?.seriesIsMature ? 'lightGrey' : series?.color}
+        background={
+          vyToken
+            ? 'gradient-transparent'
+            : series?.seriesIsMature
+            ? 'lightGrey'
+            : series
+            ? series.color
+            : 'gradient-transparent'
+        }
         size={condensed ? '36px' : undefined}
       >
         <Box round="large" background="white" pad="xxsmall">

src/components/positionItems/DummyVaultItem.tsx

@@ -1,8 +1,6 @@
 import { useRouter } from 'next/router';
-
 import { Box, Text } from 'grommet';
 import { ActionType, ISeries } from '../../types';
-
 import PositionAvatar from '../PositionAvatar';
 import ItemWrap from '../wraps/ItemWrap';
 import { abbreviateHash } from '../../utils/appUtils';
@@ -13,7 +11,7 @@ function DummyVaultItem({
   index = 0,
   condensed,
 }: {
-  series: ISeries;
+  series: ISeries | undefined;
   vaultId: string;
   index?: number;
   condensed?: boolean;
@@ -28,7 +26,7 @@ function DummyVaultItem({
   return (
     <ItemWrap action={() => handleSelect(vaultId)} index={index}>
       <Box direction="row" gap="small" align="center" pad="small" height={condensed ? '3rem' : undefined}>
-        <PositionAvatar position={series} condensed={condensed} actionType={ActionType.LEND} />
+        <PositionAvatar position={series!} condensed={condensed} actionType={ActionType.LEND} />
         <Box
           fill={condensed ? 'horizontal' : undefined}
           justify={condensed ? 'between' : undefined}
@@ -40,7 +38,7 @@ function DummyVaultItem({
           </Text>
           <Box direction="column">
             <Text weight={450} size="xsmall">
-              {series.displayName}
+              {series?.displayName}
             </Text>
           </Box>
         </Box>

src/components/positionItems/VaultItem.tsx

@@ -34,10 +34,10 @@ function VaultItem({ vault, index, condensed }: { vault: IVault; index: number;
     } as GA_Properties.position_opened);
   };
 
+  const { isLoading: vaultsLoadingVR } = useVaultsVR();
   const vaultBase = assetMap?.get(vault.baseId);
   const vaultIlk = assetMap?.get(vault.ilkId);
-  const vaultIsVR = !vault?.seriesId;
-  const { isLoading: vaultsLoadingVR } = useVaultsVR();
+  const vaultIsVR = !vault.seriesId;
 
   const { data: assetPair } = useAssetPair(vaultBase?.id, vaultIlk?.id);
 
@@ -84,7 +84,7 @@ function VaultItem({ vault, index, condensed }: { vault: IVault; index: number;
                 )}
                 {vaultIsVR && (
                   <Text weight={450} size="xsmall">
-                    {!debtInBase_ ? <SkeletonWrap width={30} /> : cleanValue(debtInBase_, 2)}
+                    {!debtInBase_ || vaultsLoadingVR ? <SkeletonWrap width={30} /> : cleanValue(debtInBase_, 2)}
                   </Text>
                 )}
               </Box>

src/components/selectors/SeriesSelector.tsx

@@ -164,11 +164,6 @@ function SeriesSelector({ selectSeriesLocally, inputValue, actionType, cardLayou
 
   /* Keeping options/selection fresh and valid: */
   useEffect(() => {
-    console.log('seriesSelector useEffect', selectedSeries, options);
-    // if (selectedVR && selectedSeries === null) {
-    //   setOptions(options);
-    //   return;
-    // }
     const opts = Array.from(seriesMap?.values()!);
 
     /* filter out options based on base Id ( or proxyId ) and if mature */
@@ -189,14 +184,12 @@ function SeriesSelector({ selectSeriesLocally, inputValue, actionType, cardLayou
 
     setOptions(filteredOpts.sort((a, b) => a.maturity - b.maturity));
   }, [
-    seriesMap,
-    selectedBase,
     selectSeriesLocally,
-    _selectedSeries,
-    userActions,
-    selectedSeries,
-    actionType,
-    selectedVault,
+    selectedBase?.proxyId,
+    selectedSeries?.baseId,
+    selectedSeries?.id,
+    selectedSeries?.maturity,
+    seriesMap,
   ]);
 
   const handleSelect = (_series: ISeries) => {

src/components/selectors/VariableRate.tsx

@@ -75,7 +75,7 @@ const VariableRate = () => {
 
   const {
     userState: { selectedVR },
-    userActions: { setSelectedVR },
+    userActions: { setSelectedVR, setSelectedSeries },
   } = useContext(UserContext);
 
   return (
@@ -84,7 +84,10 @@ const VariableRate = () => {
       round="large"
       background={selectedVR ? 'purple' : '#00000007'}
       elevation="xsmall"
-      onClick={() => setSelectedVR(true)}
+      onClick={() => {
+        setSelectedVR(true);
+        setSelectedSeries(null);
+      }}
       className="VR-container"
     >
       <Box pad="medium" width="small" height="medium" direction="row" gap="small" fill>

src/components/views/Borrow.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Box, CheckBox, Keyboard, ResponsiveContext, Text, TextInput } from 'grommet';
-
 import { FiClock, FiPocket, FiPercent, FiTrendingUp } from 'react-icons/fi';
 
 import SeriesSelector from '../selectors/SeriesSelector';
@@ -9,7 +8,6 @@ import AssetSelector from '../selectors/AssetSelector';
 import InputWrap from '../wraps/InputWrap';
 import ActionButtonWrap from '../wraps/ActionButtonWrap';
 import SectionWrap from '../wraps/SectionWrap';
-
 import MaxButton from '../buttons/MaxButton';
 
 import { UserContext } from '../../contexts/UserContext';
@@ -18,7 +16,6 @@ import PanelWrap from '../wraps/PanelWrap';
 import CenterPanelWrap from '../wraps/CenterPanelWrap';
 import VaultSelector from '../selectors/VaultPositionSelector';
 import ActiveTransaction from '../ActiveTransaction';
-
 import { cleanValue, getVaultIdFromReceipt, nFormatter } from '../../utils/appUtils';
 
 import YieldInfo from '../FooterInfo';
@@ -41,22 +38,22 @@ import { useBorrowHelpersVR } from '../../hooks/viewHelperHooks/useBorrowHelpers
 import InputInfoWrap from '../wraps/InputInfoWrap';
 import ColorText from '../texts/ColorText';
 import { useProcess } from '../../hooks/useProcess';
-
 import DummyVaultItem from '../positionItems/DummyVaultItem';
 import SeriesOrStrategySelectorModal from '../selectors/SeriesOrStrategySelectorModal';
 import Navigation from '../Navigation';
 import VaultItem from '../positionItems/VaultItem';
 import Line from '../elements/Line';
-import { useAccount, useNetwork } from 'wagmi';
 import { GA_Event, GA_Properties, GA_View } from '../../types/analytics';
 import useAnalytics from '../../hooks/useAnalytics';
 import { WETH } from '../../config/assets';
 import useContracts from '../../hooks/useContracts';
 import useAccountPlus from '../../hooks/useAccountPlus';
-
 import VariableRate from '../selectors/VariableRate';
 import useBasesVR from '../../hooks/views/useBasesVR';
 import useAssetPair from '../../hooks/viewHelperHooks/useAssetPair/useAssetPair';
+import useVaultsVR from '../../hooks/entities/useVaultsVR';
+import { ContractNames } from '../../config/contracts';
+import { Cauldron, VRCauldron } from '../../contracts';
 
 const Borrow = () => {
   const mobile: boolean = useContext<any>(ResponsiveContext) === 'small';
@@ -65,17 +62,8 @@ const Borrow = () => {
 
   /* STATE FROM CONTEXT */
   const { userState, userActions } = useContext(UserContext);
-  const {
-    assetMap,
-    vaultMap,
-    vaultsLoading,
-    seriesMap,
-    selectedSeries,
-    selectedIlk,
-    selectedBase,
-    selectedVault,
-    selectedVR,
-  } = userState;
+  const { assetMap, vaultMap, vaultsLoading, selectedSeries, selectedIlk, selectedBase, selectedVault, selectedVR } =
+    userState;
   const { setSelectedIlk } = userActions;
 
   const { address: activeAccount } = useAccountPlus();
@@ -103,6 +91,7 @@ const Borrow = () => {
   const { apr } = useApr(borrowInput, ActionType.BORROW, selectedSeries);
   const { data: assetPair } = useAssetPair(selectedBase?.id, selectedIlk?.id);
   const { data: basesVR } = useBasesVR();
+  const { data: vaultsVR } = useVaultsVR();
 
   const {
     collateralizationPercent,
@@ -121,13 +110,13 @@ const Borrow = () => {
     maxDebt_: maxDebtFR_,
     borrowPossible: borrowPossibleFR,
     borrowEstimate_,
-  } = useBorrowHelpersFR(borrowInput, collatInput, vaultToUse, assetPair, selectedSeries);
+  } = useBorrowHelpersFR(borrowInput, collatInput, selectedSeries ? vaultToUse : undefined, assetPair, selectedSeries);
 
   const {
     minDebt_: minDebtVR_,
     maxDebt_: maxDebtVR_,
     borrowPossible: borrowPossibleVR,
-  } = useBorrowHelpersVR(borrowInput, vaultToUse, assetPair);
+  } = useBorrowHelpersVR(borrowInput, selectedVR ? vaultToUse : undefined, assetPair);
 
   const minDebt_ = selectedVR ? minDebtVR_ : minDebtFR_;
   const maxDebt_ = selectedVR ? maxDebtVR_ : maxDebtFR_;
@@ -145,7 +134,10 @@ const Borrow = () => {
   ]);
 
   /* TX info (for disabling buttons) */
-  const { txProcess: borrowProcess, resetProcess } = useProcess(ActionCodes.BORROW, selectedSeries?.id!);
+  const { txProcess: borrowProcess, resetProcess } = useProcess(
+    ActionCodes.BORROW,
+    selectedVR ? 'VR' : selectedSeries?.id!
+  );
 
   /** LOCAL ACTION FNS */
   const handleBorrow = () => {
@@ -263,18 +255,18 @@ const Borrow = () => {
 
   /* CHECK the list of current vaults which match the current series/ilk selection */ // TODO look at moving this to helper hook?
   useEffect(() => {
-    if (selectedBase && selectedSeries && selectedIlk) {
-      const arr: IVault[] = Array.from(vaultMap?.values()!) as IVault[];
-      const _matchingVaults = arr.filter(
-        (v: IVault) =>
+    if (selectedBase && selectedIlk) {
+      const vaults = [...(selectedVR ? (vaultsVR || []).values() : (vaultMap || []).values())];
+      const matchingVaults = vaults.filter(
+        (v) =>
           v.ilkId === selectedIlk.proxyId &&
           v.baseId === selectedBase.proxyId &&
-          v.seriesId === selectedSeries.id &&
+          (selectedVR ? true : v.seriesId === selectedSeries?.id) &&
           v.isActive
       );
-      setMatchingVaults(_matchingVaults);
+      setMatchingVaults(matchingVaults);
     }
-  }, [vaultMap, selectedBase, selectedIlk, selectedSeries]);
+  }, [vaultMap, selectedBase, selectedIlk, selectedSeries, vaultsVR, selectedVR]);
 
   /* handle selected vault */
   useEffect(() => {
@@ -283,22 +275,33 @@ const Borrow = () => {
     }
 
     if (selectedVault) {
-      return setVaultToUse(selectedVault);
+      // if using an already selected vault with series
+      if (selectedSeries && selectedVault.seriesId === selectedSeries.id) {
+        return setVaultToUse(selectedVault);
+      }
+
+      // if using an already selected vr vault
+      if (selectedVR && selectedVault.baseId === selectedBase?.id) {
+        return setVaultToUse(selectedVault);
+      }
     }
 
     setVaultToUse(undefined);
-  }, [matchingVaults, selectedVault]);
+  }, [matchingVaults, selectedBase?.id, selectedSeries, selectedVR, selectedVault]);
 
   useEffect(() => {
     if (
       borrowProcess?.stage === ProcessStage.PROCESS_COMPLETE &&
       borrowProcess?.tx.status === TxState.SUCCESSFUL &&
       !vaultToUse
     ) {
-      setNewVaultId(getVaultIdFromReceipt(borrowProcess?.tx?.receipt, contracts)!);
+      const cauldron = contracts?.get(selectedVR ? ContractNames.VR_CAULDRON : ContractNames.CAULDRON) as
+        | VRCauldron
+        | Cauldron;
+      setNewVaultId(getVaultIdFromReceipt(borrowProcess?.tx?.receipt, cauldron!));
     }
     borrowProcess?.stage === ProcessStage.PROCESS_COMPLETE_TIMEOUT && resetInputs();
-  }, [borrowProcess, contracts, resetInputs, vaultToUse]);
+  }, [borrowProcess, contracts, resetInputs, selectedVR, vaultToUse]);
 
   return (
     <Keyboard onEsc={() => setCollatInput('')} onEnter={() => console.log('ENTER smashed')} target="document">
@@ -471,7 +474,8 @@ const Borrow = () => {
                             <MaxButton
                               action={() => maxCollateral && handleMaxAction(ActionCodes.ADD_COLLATERAL)}
                               disabled={
-                                !selectedSeries || collatInput === maxCollateral || selectedSeries.seriesIsMature
+                                ((!selectedSeries || selectedSeries.seriesIsMature) && !selectedVR) ||
+                                collatInput === maxCollateral
                               }
                               clearAction={() => setCollatInput('')}
                               showingMax={!!collatInput && collatInput === maxCollateral}
@@ -541,12 +545,12 @@ const Borrow = () => {
                         icon={<FiPocket />}
                         value={`${cleanValue(borrowInput, selectedBase?.digitFormat!)} ${selectedBase?.displaySymbol}`}
                       />
-                      {!selectedVR && (
+                      {selectedSeries && (
                         <div>
                           <InfoBite
                             label="Series Maturity"
                             icon={<FiClock />}
-                            value={`${selectedSeries?.displayName}`}
+                            value={`${selectedSeries.displayName}`}
                           />
 
                           <InfoBite
@@ -558,7 +562,11 @@ const Borrow = () => {
                           />
                         </div>
                       )}
-                      <InfoBite label="Effective APR" icon={<FiPercent />} value={`${apr}%`} />
+                      <InfoBite
+                        label={`${selectedVR ? 'Variable' : 'Effective'} APR`}
+                        icon={<FiPercent />}
+                        value={`${apr}%`}
+                      />
                       <InfoBite
                         label="Total Supporting Collateral"
                         icon={
@@ -592,12 +600,10 @@ const Borrow = () => {
               borrowProcess?.stage === ProcessStage.PROCESS_COMPLETE &&
               borrowProcess?.tx.status === TxState.SUCCESSFUL && (
                 <Box pad="large" gap="small">
-                  <Text size="small"> View Vault: </Text>
-                  {vaultToUse && !vaultsLoading && (
-                    <VaultItem vault={vaultMap?.get(vaultToUse.id)!} condensed index={1} />
-                  )}
+                  <Text size="small">View Vault:</Text>
+                  {vaultToUse && <VaultItem vault={vaultToUse} condensed index={1} />}
                   {!vaultToUse && newVaultId && (
-                    <DummyVaultItem series={selectedSeries!} vaultId={newVaultId!} condensed />
+                    <DummyVaultItem series={selectedSeries!} vaultId={newVaultId} condensed />
                   )}
                 </Box>
               )}