Merge pull request #725 from yieldprotocol/dev

v2.0.42

.env

@@ -3,7 +3,8 @@ REACT_APP_VERSION=$npm_package_version
 REACT_APP_INFURA_KEY_V1=646dc0f33d2449878b28e0afa25267f6
 REACT_APP_RPC_URL_42='https://kovan.infura.io/v3/2af222f674024a0f84b5f0aad0da72a2'
 REACT_APP_RPC_URL_1='https://mainnet.infura.io/v3/2af222f674024a0f84b5f0aad0da72a2'
-REACT_APP_RPC_URL_10='https://optimism-mainnet.infura.io/v3/82c9d66897df4cf7a9e74ab44826affe'
-REACT_APP_RPC_URL_69='https://optimism-kovan.infura.io/v3/277b589655694280bcb3cd7ebf79032c'
-REACT_APP_RPC_URL_42161='https://arbitrum-mainnet.infura.io/v3/cbbe5034491045709e466f05dcd5ad5a'
-REACT_APP_RPC_URL_421611='https://arbitrum-rinkeby.infura.io/v3/9adffa99cbf64552a492081225822885'
+REACT_APP_RPC_URL_4='https://rinkeby.infura.io/v3/2af222f674024a0f84b5f0aad0da72a2'
+REACT_APP_RPC_URL_10='https://optimism-mainnet.infura.io/v3/2af222f674024a0f84b5f0aad0da72a2'
+REACT_APP_RPC_URL_69='https://optimism-kovan.infura.io/v3/2af222f674024a0f84b5f0aad0da72a2'
+REACT_APP_RPC_URL_42161='https://arbitrum-mainnet.infura.io/v3/2af222f674024a0f84b5f0aad0da72a2'
+REACT_APP_RPC_URL_421611='https://arbitrum-rinkeby.infura.io/v3/2af222f674024a0f84b5f0aad0da72a2'

README.md

@@ -1,30 +1,15 @@
-# Yield app v2
+# Basic Sample Hardhat Project
 
-## A. Setup Blockchain Environment
+This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, a sample script that deploys that contract, and an example of a task implementation, which simply lists the available accounts.
 
-### Option 1: Run development environment locally **(Recommended for now)**
+Try running some of the following tasks:
 
-In a new console:
-
-1. **clone** the environments-v2 repo: `git clone https://github.com/yieldprotocol/environments-v2.git`
-2. **checkout tagged release** `git checkout RC4`
-3. **install** the environment `yarn`
-4. **Start a local hardhat chain instance**: `npx hardhat node`
-5. optional: **Add your testing account** to the list of accounts to be auto-funded with test tokens:
-
-   (edit `externalTestAccounts` array line 32 in file `./environments/development.ts` )
-
-In a new console
-
-1. **Run the dev environment deploy/setup** `npx hardhat run ./environments/development.ts --network localhost`
-
-### Option 2: Use Rinkeby Testnet
-
-No setup required, simply point metamask to the correct network
-
-## B. Run User Interface (this Repo):
-
-Fire up the UI locally:
-
-1. **install and run** `yarn && yarn start`
-2. In the browser, connect metamask to the localhost network, and reset the metamask account (for just in case).
+```shell
+npx hardhat accounts
+npx hardhat compile
+npx hardhat clean
+npx hardhat test
+npx hardhat node
+node scripts/sample-script.js
+npx hardhat help
+```

hardhat.config.js

@@ -0,0 +1,54 @@
+require("@nomiclabs/hardhat-waffle");
+
+// This is a sample Hardhat task. To learn how to create your own go to
+// https://hardhat.org/guides/create-task.html
+task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
+  const accounts = await hre.ethers.getSigners();
+  for (const account of accounts) {
+    console.log(account.address);
+  }
+});
+
+
+
+/* npx hardhat harvest --whale 0xa29332b560103d52f758b978e0661420a9d40cb5  --token 0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984 */ 
+task("harvest", "Fund accounts by impersonating whales", async (taskArgs, hre) => {
+
+  const topupList = [ '0x1Bd3Abb6ef058408734EA01cA81D325039cd7bcA' ];
+
+  const whaleAddr = taskArgs.whale;
+  const tokenAddr = taskArgs.token;
+
+  await hre.network.provider.request({
+    method: "hardhat_impersonateAccount",
+    params: [taskArgs.whale],
+  });
+
+  const signer = await ethers.getSigner(taskArgs.whale) // UNI whale 0xa29332b560103d52f758b978e0661420a9d40cb5
+  const uniAddr = taskArgs.token; // '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984'; 
+  // The ERC-20 most simple Contract ABI
+  const erc20Abi = ["function transfer(address to, uint amount)","function balanceOf(address) view returns (uint)",];
+  const uni = new ethers.Contract(uniAddr, erc20Abi, signer);
+  const amount = ethers.utils.parseUnits("1000.0", 18);
+  await Promise.all( topupList.map(async (addr) => { 
+    await uni.transfer( addr, amount);
+    console.log( (await uni.balanceOf(addr)).toString() )
+  }))
+})
+.addParam("whale", "The account's address")
+.addParam("token", "The account's address");
+
+/**
+ * @type import('hardhat/config').HardhatUserConfig
+ */
+module.exports = {
+  solidity: "0.8.4",
+  networks: {
+    hardhat: {
+      chainId: 1,
+      forking: {
+        url: "https://mainnet.infura.io/v3/2af222f674024a0f84b5f0aad0da72a2",
+      }
+    }
+  }
+};

package.json

@@ -59,6 +59,8 @@
     ]
   },
   "devDependencies": {
+    "@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",
@@ -85,6 +87,8 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "ethereum-waffle": "^3.2.0\n",
+    "hardhat": "^2.7.0",
     "prettier": "^2.4.1",
     "react-test-renderer": "^17.0.2",
     "source-map-explorer": "^2.5.2",

public/index.html

@@ -10,12 +10,12 @@
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-QGLQ100R01"></script>
-    <script>
+    <!-- <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
       gtag('config', 'G-QGLQ100R01');
-    </script>
+    </script> -->
 
     <!--
       manifest.json provides metadata used when your web app is installed on a

scripts/hardhat-script.js

@@ -0,0 +1,32 @@
+// We require the Hardhat Runtime Environment explicitly here. This is optional
+// but useful for running the script in a standalone fashion through `node <script>`.
+//
+// When running the script with `npx hardhat run <script>` you'll find the Hardhat
+// Runtime Environment's members available in the global scope.
+const hre = require("hardhat");
+
+async function main() {
+  // Hardhat always runs the compile task when running scripts with its command
+  // line interface.
+  //
+  // If this script is run directly using `node` you may want to call compile
+  // manually to make sure everything is compiled
+  // await hre.run('compile');
+
+  // We get the contract to deploy
+  const Greeter = await hre.ethers.getContractFactory("Greeter");
+  const greeter = await Greeter.deploy("Hello, Hardhat!");
+
+  await greeter.deployed();
+
+  console.log("Greeter deployed to:", greeter.address);
+}
+
+// We recommend this pattern to be able to use async/await everywhere
+// and properly handle errors.
+main()
+  .then(() => process.exit(0))
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });

src/components/DashboardBalanceSummary.tsx

@@ -5,6 +5,7 @@ import { FiPlus, FiMinus } from 'react-icons/fi';
 import Skeleton from './wraps/SkeletonWrap';
 import { formatValue } from '../utils/appUtils';
 import { UserContext } from '../contexts/UserContext';
+import { IUserContext } from '../types';
 
 interface IDashboardBalance {
   debt: string;
@@ -19,8 +20,8 @@ const DashboardBalanceSummary = ({ debt, collateral, lendBalance, poolBalance, d
   const theme = useContext(ThemeContext);
   const { green, red } = theme.global.colors;
   const {
-    userState: { vaultsLoading, seriesLoading, pricesLoading, strategiesLoading },
-  } = useContext(UserContext);
+    userState: { vaultsLoading, seriesLoading, assetPairLoading, strategiesLoading },
+  } = useContext(UserContext) as IUserContext;
 
   const [totalBalance, setTotalBalance] = useState<number>();
 
@@ -60,7 +61,7 @@ const DashboardBalanceSummary = ({ debt, collateral, lendBalance, poolBalance, d
         <Box gap="xsmall">
           <Box direction="row" justify="between">
             <Text size="xsmall">Total Collateral:</Text>
-            {vaultsLoading || pricesLoading ? (
+            {vaultsLoading || assetPairLoading ? (
               <Skeleton width={50} />
             ) : (
               <Text size="small">
@@ -74,7 +75,7 @@ const DashboardBalanceSummary = ({ debt, collateral, lendBalance, poolBalance, d
         <Box gap="xsmall">
           <Box direction="row" justify="between">
             <Text size="xsmall">Total Debt:</Text>
-            {vaultsLoading || pricesLoading ? (
+            {vaultsLoading || assetPairLoading ? (
               <Skeleton width={50} />
             ) : (
               <Text size="small">
@@ -87,7 +88,7 @@ const DashboardBalanceSummary = ({ debt, collateral, lendBalance, poolBalance, d
       </Box>
       <Box direction="row" justify="between">
         <Text size="small">Total:</Text>
-        {vaultsLoading || seriesLoading || strategiesLoading || (pricesLoading && !totalBalance) ? (
+        {vaultsLoading || seriesLoading || strategiesLoading || (assetPairLoading && !totalBalance) ? (
           <Skeleton width={50} />
         ) : (
           <Text size="medium">

src/components/DashboardPositionList.tsx

@@ -47,6 +47,11 @@ const DashboardPositionList = ({
   </DashboardPositionSummary>
 );
 
-DashboardPositionList.defaultProps = { debt: null, collateral: null, lendBalance: null, strategyBalance: null };
+DashboardPositionList.defaultProps = {
+  debt: null,
+  collateral: null,
+  lendBalance: null,
+  strategyBalance: null,
+};
 
 export default DashboardPositionList;

src/components/DashboardPositionSummary.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Box, Text } from 'grommet';
 import DashboardSettings from './DashboardSettings';
 import { ActionType } from '../types';
+import SkeletonWrap from './wraps/SkeletonWrap';
 
 interface IDashSummary {
   debt: string | null;
@@ -12,10 +13,10 @@ interface IDashSummary {
   children: any;
 }
 
-const Summary = ({ label, value }: { label: string; value: string }) => (
+const Summary = ({ label, value }: { label: string; value: string | null }) => (
   <Box gap="small" direction="row" align="center">
     <Text size="small">{label}:</Text>
-    <Text color={label === 'Debt' ? '#EF4444' : 'brand'}>{value}</Text>
+    <Text color={label === 'Debt' ? '#EF4444' : 'brand'}>{value || <SkeletonWrap />}</Text>
   </Box>
 );
 
@@ -30,10 +31,10 @@ const DashboardPositionSummary = ({
   <Box>
     <Box direction="row" justify="between" background="gradient-transparent" round="xsmall" pad="small">
       <Box direction="row-responsive" gap="small">
-        {debt && <Summary label="Debt" value={debt} />}
-        {collateral && <Summary label="Collateral" value={collateral} />}
-        {lendBalance && <Summary label="Balance" value={lendBalance} />}
-        {strategyBalance && <Summary label="Balance" value={strategyBalance} />}
+        {actionType === ActionType.BORROW && <Summary label="Debt" value={debt!} />}
+        {actionType === ActionType.BORROW && <Summary label="Collateral" value={collateral!} />}
+        {actionType === ActionType.LEND && <Summary label="Balance" value={lendBalance!} />}
+        {actionType === ActionType.POOL && <Summary label="Balance" value={strategyBalance!} />}
       </Box>
       {actionType === ActionType.BORROW && <DashboardSettings actionType={actionType} />}
     </Box>

src/components/InfoBite.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Box, Text } from 'grommet';
 import Skeleton from './wraps/SkeletonWrap';
 
@@ -9,14 +9,17 @@ interface IInfoBite {
   loading?: boolean;
 }
 
-const InfoBite = ({ label, value, icon, loading }: IInfoBite) => (
+const InfoBite: FC<IInfoBite> = ({ label, value, icon, loading, children }) => (
   <Box direction="row" align="center" pad={{ left: 'small', vertical: 'none' }} gap="medium">
     {icon && <Box>{icon}</Box>}
     <Box>
       <Text size="xsmall" color="text-weak">
         {label}
       </Text>
-      <Text size="medium"> {loading ? <Skeleton width={80} height={20} /> : value} </Text>
+      <Box direction="row" gap="xsmall">
+        <Text size="medium"> {loading ? <Skeleton width={80} height={20} /> : value} </Text>
+        {children}
+      </Box>
     </Box>
   </Box>
 );

src/components/YieldHeader.tsx

@@ -85,7 +85,6 @@ const YieldHeader = ({ actionList }: IYieldHeaderProps) => {
           <Box />
 
           <Box align="center" direction="row" gap="small">
-            <NetworkSelector />
             <YieldAccount />
           </Box>
         </Grid>

src/components/YieldInfo.tsx

@@ -7,6 +7,7 @@ import { FaDiscord as Discord } from 'react-icons/fa';
 import { ChainContext } from '../contexts/ChainContext';
 import BoxWrap from './wraps/BoxWrap';
 import { useBlockNum } from '../hooks/useBlockNum';
+import NetworkSelector from './selectors/NetworkSelector';
 
 const IconSize = '1.15rem';
 const IconGap = 'small';
@@ -31,6 +32,7 @@ const YieldInfo = () => {
 
   return (
     <Box gap="small">
+      <NetworkSelector />
       <Box>
         <Text size="xsmall" color="text-weak">
           App version: v{appVersion}

src/components/buttons/TransactButton.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 const StyledButton = styled(Button)`
   /* height: ${(props: any) => (props.mobile ? '3rem' : '3rem')}; */
-  border: ${(props) => (props.theme.dark ? '#141a1e' : '2px solid white')};
+  border: ${(props) => (props.theme.dark ? '2px solid #141a1e' : '2px solid white')};
 
   :hover {
     transform: scale(1.01);

src/components/positionItems/DummyVaultItem.tsx

@@ -1,10 +1,8 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { ethers } from 'ethers';
 
 import { Box, Text } from 'grommet';
-import { ActionType, ISeries, IUserContext, IVault } from '../../types';
-import { UserContext } from '../../contexts/UserContext';
+import { ActionType, ISeries } from '../../types';
 
 import PositionAvatar from '../PositionAvatar';
 import ItemWrap from '../wraps/ItemWrap';
@@ -23,28 +21,7 @@ function DummyVaultItem({
 }) {
   const history = useHistory();
 
-  const { userState, userActions } = useContext(UserContext) as IUserContext;
-  const { selectedSeries, selectedBase, selectedIlk } = userState;
-  const { setSelectedVault } = userActions;
-
   const handleSelect = (_vaultId: string) => {
-    const dummyVault: IVault = {
-      id: _vaultId,
-      seriesId: selectedSeries?.id!,
-      baseId: selectedBase?.id!,
-      ilkId: selectedIlk?.id!,
-      displayName: '',
-      decimals: selectedBase?.decimals!,
-      owner: '',
-      isWitchOwner: false,
-      isActive: true,
-      ink: ethers.BigNumber.from(0),
-      art: ethers.BigNumber.from(0),
-      ink_: '',
-      art_: '',
-      minDebt: ethers.BigNumber.from(0),
-      maxDebt: ethers.BigNumber.from(0),
-    };
     // setSelectedVault(dummyVault);
     history.push(`/vaultposition/${_vaultId}`);
   };

src/components/selectors/NetworkSelector.tsx

@@ -33,7 +33,7 @@ const NetworkSelector = () => {
 
   useEffect(() => {
     setOptions(
-      SUPPORTED_CHAIN_IDS.filter((chainId: number) => ![fallbackChainId, 42, 69, 421611].includes(chainId)) // filter out test networks and currently selected network
+      SUPPORTED_CHAIN_IDS.filter((chainId: number) => ![fallbackChainId, 4, 42, 69, 421611].includes(chainId)) // filter out test networks and currently selected network
         .map((chainId: number) => CHAIN_INFO.get(chainId)?.name!)
     );
   }, [fallbackChainId]);