Feat/vr

.env.local

@@ -4,17 +4,11 @@ REACT_APP_VERSION=$npm_package_version
 REACT_APP_RPC_URL_1='https://eth-mainnet.g.alchemy.com/v2/ZXDCq5iy0KrKR0XjsqC6E4QG7Z_FuXDv'
 REACT_APP_RPC_URL_42161='https://arb-mainnet.g.alchemy.com/v2/vtMM4_eLnOvkjkdckprVw3cIa64EVkDZ'
 
-REACT_APP_DEFAULT_FORK_RPC_URL='https://rpc.tenderly.co/fork/5d734736-afd1-485d-b18c-d51453425706'
+REACT_APP_DEFAULT_FORK_RPC_URL='https://rpc.tenderly.co/fork/337e15d5-5b2d-42c4-ae12-cca9dfb938b1'
 REACT_APP_LOCALHOST_RPC_URL='http://127.0.0.1:8545'
 
 REACT_APP_RPC_URL_421611='https://arb-rinkeby.g.alchemy.com/v2/AY_Q_Uy-Kcfwmf5In5qwG636vaOIoA8L'
 
-TENDERLY_JSON_RPC_URL='https://rpc.tenderly.co/fork/722b9352-a7cb-4f95-8f53-b5186595af8f'
-LOCALHOST_RPC_URL='http://127.0.0.1:8545'
-
-TENDERLY_SIMULATION_1=' '
-TENDERLY_SIMULATION_42161=' '
-
 TENDERLY_USER='Yield'
 TENDERLY_PROJECT='v2'
 TENDERLY_ACCESS_KEY='B4N3hpAhTmY09c3pyeC9zC8rMfto7ukj'

package.json

@@ -1,36 +1,37 @@
 {
   "name": "app-v2",
-  "version": "2.5.15",
+  "version": "2.5.18",
   "private": true,
   "dependencies": {
     "@ethersproject/providers": "^5.6.8",
-    "@gnosis.pm/safe-apps-wagmi": "^1.0.3",
     "@multiavatar/multiavatar": "^1.0.6",
-    "@rainbow-me/rainbowkit": "^0.8.0",
+    "@rainbow-me/rainbowkit": "^0.12.1",
     "@yield-protocol/ui-math": "^1.0.3",
+    "@yield-protocol/ui-multicall": "^1.0.9",
     "axios": "^1.3.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.0.1",
     "date-fns": "^2.24.0",
     "decimal.js": "^10.3.1",
     "eth-permit": "^0.2.3",
-    "ethers": "^5.7.1",
+    "ethers": "5.7.2",
+    "graphql": "^16.6.0",
+    "graphql-request": "^5.2.0",
     "grommet": "^2.18.0",
-    "next": "^12.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "next": "^13.2.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.2.0",
     "react-loading-skeleton": "^3.1.0",
-    "react-spinners": "^0.10.6",
     "react-spring": "^9.2.4",
-    "react-switch": "^6.0.0",
-    "react-toastify": "^7.0.3",
+    "react-switch": "^7.0.0",
+    "react-toastify": "^9.1.1",
     "react-use-gesture": "^9.1.3",
     "styled-components": "^5.3.1",
     "swr": "^2.0.0",
     "unique-names-generator": "^4.6.0",
-    "wagmi": "^0.10.10",
-    "web-vitals": "^1.0.1"
+    "wagmi": "^0.12.1",
+    "web-vitals": "^3.3.0"
   },
   "scripts": {
     "dev": "next dev",
@@ -58,34 +59,32 @@
     "@nomiclabs/hardhat-ethers": "^2.0.0",
     "@nomiclabs/hardhat-waffle": "^2.0.1",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@typechain/ethers-v5": "^7.1.2",
     "@types/d3-scale": "^4.0.1",
     "@types/d3-shape": "^3.0.2",
     "@types/identicon.js": "^2.3.1",
-    "@types/jest": "^26.0.24",
-    "@types/mocha": "^9.0.0",
-    "@types/node": "^15.14.9",
+    "@types/jest": "^29.4.4",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "^18.15.3",
     "@types/react": "^18.0.15",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^18.0.11",
     "@types/react-router-dom": "^5.3.0",
     "@types/styled-components": "^5.1.14",
-    "@types/uuid": "^8.3.1",
-    "audit-ci": "^4.1.0",
+    "@types/uuid": "^9.0.1",
+    "audit-ci": "^6.6.1",
     "chai": "^4.3.6",
     "eslint": "^8.21.0",
-    "eslint-config-next": "^12.1.3",
-    "graphql": "^16.6.0",
-    "graphql-request": "^4.3.0",
+    "eslint-config-next": "^13.2.4",
     "hardhat": "^2.7.0",
-    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.0",
-    "mocha": "^9.1.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "mocha": "^10.2.0",
     "prettier": "^2.4.1",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "source-map-explorer": "^2.5.2",
-    "ts-node": "^9.1.1",
+    "ts-node": "^10.9.1",
     "typechain": "^5.1.2",
     "typescript": "^4.7.4"
   },

src/components/DashboardPositionList.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { ActionType, ISeries, IStrategy, IVault } from '../types';
 import DashboardPositionListItem from './DashboardPositionListItem';
 import DashboardPositionSummary from './DashboardPositionSummary';
+import { ILendPosition, IStrategyPosition } from '../hooks/viewHelperHooks/useDashboardHelpers';
 
 const StyledBox = styled(Box)`
   max-height: 1000px;
@@ -15,7 +16,7 @@ interface IDashPosition {
   lendBalance?: string | null;
   strategyBalance?: string | null;
   actionType: ActionType;
-  positions: (ISeries | IVault | IStrategy)[];
+  positions: (IVault | ILendPosition | IStrategyPosition)[];
   showList: boolean;
 }
 
@@ -42,8 +43,8 @@ const DashboardPositionList = ({
           No suggested positions
         </Text>
       )}
-      {positions.map((position: ISeries | IVault | IStrategy, i: number) => (
-        <DashboardPositionListItem item={position} index={i} actionType={actionType} key={position.id} />
+      {positions.map((position, i) => (
+        <DashboardPositionListItem item={position} index={i} key={position.id} />
       ))}
     </StyledBox>
   </DashboardPositionSummary>

src/components/DashboardPositionListItem.tsx

@@ -1,21 +1,35 @@
 import { useContext } from 'react';
 import { Box } from 'grommet';
-import { ActionType } from '../types';
+import { IVault } from '../types';
 import { UserContext } from '../contexts/UserContext';
 import VaultItem from './positionItems/VaultItem';
 import LendItem from './positionItems/LendItem';
 import StrategyItem from './positionItems/StrategyItem';
+import useVYTokens from '../hooks/entities/useVYTokens';
+import { ILendPosition, IStrategyPosition } from '../hooks/viewHelperHooks/useDashboardHelpers';
 
-function DashboardPositionListItem({ item, index, actionType }: { item: any; index: number; actionType: ActionType }) {
+function DashboardPositionListItem({
+  item,
+  index,
+}: {
+  item: IVault | ILendPosition | IStrategyPosition;
+  index: number;
+}) {
   const {
-    userState: { vaultMap, seriesMap, strategyMap },
+    userState: { vaultMap, strategyMap, seriesMap },
   } = useContext(UserContext);
 
+  const { data: vyTokens } = useVYTokens();
+
+  const vault = vaultMap.get(item.id);
+  const lendPosition = vyTokens?.has(item.id) ? vyTokens.get(item.id) : seriesMap.get(item.id);
+  const strategy = strategyMap.get(item.id);
+
   return (
     <Box>
-      {vaultMap?.has(item.id!) && <VaultItem vault={item!} index={index} condensed />}
-      {seriesMap?.has(item.id) && <LendItem series={item!} index={index} actionType={actionType} condensed />}
-      {strategyMap?.has(item.id) && <StrategyItem strategy={item!} index={index} condensed />}
+      {vault && <VaultItem vault={vault} index={index} condensed />}
+      {lendPosition && <LendItem item={lendPosition} index={index} condensed />}
+      {strategy && <StrategyItem strategy={strategy} index={index} condensed />}
     </Box>
   );
 }

src/components/Navigation.tsx

@@ -32,16 +32,6 @@ const StyledLink = styled.div`
   }
 `;
 
-const StyledText = styled(Text)`
-  font-family: 'Raleway';
-  /* background: -webkit-linear-gradient(#7255bd, #d95948);
-  background: ${(props) => props.color};
-  background: -webkit-linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
-  -webkit-background-clip: text; 
-  -webkit-text-fill-color: transparent;
-  filter: drop-shadow(2px 2px 2px #ddd);  */
-`;
-
 interface IYieldNavigationProps {
   sideNavigation?: boolean;
   callbackFn?: any;
@@ -83,7 +73,7 @@ const Navigation = ({ sideNavigation }: IYieldNavigationProps) => {
   };
 
   const NavLink = ({ link }: { link: any }) => (
-    <Link href={link.to} passHref>
+    <Link href={link.to} passHref style={{textDecoration:'none'}}>
       <StyledLink
         onClick={() => handleViewChange(link.to)}
         style={router.pathname.includes(link.to) ? activelinkStyle : { color: 'gray' }}

src/components/PositionAvatar.tsx

@@ -6,6 +6,8 @@ import styled from 'styled-components';
 import { UserContext } from '../contexts/UserContext';
 import { IVault, ISeries, IAsset, IStrategy, ActionType } from '../types';
 import Logo from './logos/Logo';
+import useVYTokens, { IVYToken } from '../hooks/entities/useVYTokens';
+import useVaultsVR from '../hooks/entities/useVaultsVR';
 
 const Outer = styled(Box)`
   position: relative;
@@ -31,29 +33,42 @@ function PositionAvatar({
   condensed,
   actionType,
 }: {
-  position: IVault | ISeries | IStrategy;
+  position: IVault | ISeries | IStrategy | IVYToken | undefined;
   actionType: ActionType;
   condensed?: boolean;
 }) {
-  const isVault = position?.id.length > 15;
+  const isVault = position?.id.length! > 15;
+  const { data: vyTokens } = useVYTokens();
 
   /* STATE FROM CONTEXT */
   const { userState } = useContext(UserContext);
-  const { assetMap, seriesMap } = userState;
+  const { assetMap, seriesMap, vaultMap } = userState;
+  const { data: vaultsVR } = useVaultsVR();
 
-  const base: IAsset | undefined = assetMap?.get(position?.baseId!); // same for both series and vaults
-  const vault: IVault | undefined = isVault ? (position as IVault) : undefined;
-  const series: ISeries | undefined = vault ? seriesMap?.get(vault.seriesId!) : (position as ISeries);
+  const base = assetMap.get(position?.baseId!); // same for both series, vaults, and vyTokens
+  const vault = isVault ? vaultMap.get(position?.id!) || vaultsVR?.get(position?.id!) : undefined;
+  const series = vault ? seriesMap.get(vault.seriesId!) : seriesMap.get(position?.id!);
+  const vyToken = vyTokens?.get(position?.id!);
 
-  const ilk: IAsset | undefined = vault && assetMap?.get(vault.ilkId); // doesn't exist on series
+  const ilk = vault && assetMap.get(vault.ilkId); // doesn't exist on series or vyTokens
   const baseImageSize = condensed ? '20px' : '24px';
   const ilkImageSize = condensed ? '16px' : '20px';
-
   const ilkBorderSize = condensed ? '18px' : '22px';
 
   return (
     <Outer width={condensed ? '36px' : 'auto'}>
-      <Avatar background={series?.seriesIsMature ? 'lightGrey' : series?.color} size={condensed ? '36px' : undefined}>
+      <Avatar
+        background={
+          vyToken
+            ? 'gradient-transparent'
+            : series?.seriesIsMature
+            ? 'lightGrey'
+            : series
+            ? series.color
+            : 'gradient-transparent'
+        }
+        size={condensed ? '36px' : undefined}
+      >
         <Box round="large" background="white" pad="xxsmall">
           <Logo image={base?.image} height={baseImageSize} width={baseImageSize} />
         </Box>

src/components/TransactionItem.tsx

@@ -10,6 +10,9 @@ import { ChainContext } from '../contexts/ChainContext';
 import { TxContext } from '../contexts/TxContext';
 import { useColorScheme } from '../hooks/useColorScheme';
 import useContracts from '../hooks/useContracts';
+import { ContractNames } from '../config/contracts';
+import { Cauldron, VRCauldron } from '../contracts';
+import { UserContext } from '../contexts/UserContext';
 
 interface ITransactionItem {
   tx: any;
@@ -32,6 +35,9 @@ const TransactionItem = ({ tx, wide }: ITransactionItem) => {
   const {
     txActions: { updateTxStage },
   } = useContext(TxContext);
+  const {
+    userState: { selectedVR },
+  } = useContext(UserContext);
   const colorScheme = useColorScheme();
   const contracts = useContracts();
   const theme = useContext<any>(ThemeContext);
@@ -44,9 +50,12 @@ const TransactionItem = ({ tx, wide }: ITransactionItem) => {
 
   /* get position link for viewing position */
   useEffect(() => {
-    const path = getPositionPath(txCode, receipt, contracts, seriesRootMap);
+    const cauldron = selectedVR
+      ? (contracts?.get(ContractNames.VR_CAULDRON) as VRCauldron)
+      : (contracts?.get(ContractNames.CAULDRON) as Cauldron);
+    const path = getPositionPath(txCode, receipt, cauldron, seriesRootMap);
     path && setLink(path);
-  }, [receipt, contracts, seriesRootMap, txCode]);
+  }, [receipt, contracts, seriesRootMap, txCode, selectedVR]);
 
   return (
     <Box