patch: minor issues and web-lib

components/vault/ChartCard.tsx

@@ -97,7 +97,7 @@ function	ChartCard({address, price, chainID}: {address: string, price: number, c
 					pricePerShare
 				}
 			}
-		}` : null, (query: string): any => request(networks[chainID || 1].graphURI, query)
+		}` : null, (query: string): any => request(networks[chainID === 1337 ? 1 : chainID  || 1].graphURI, query)
 	);
 
 	/* 🔵 - Yearn Finance **************************************************

components/vault/DepositCard.tsx

@@ -3,7 +3,7 @@ import	Image								from	'next/image';
 import	{ethers}							from	'ethers';
 import	{Input, Button}						from	'@yearn-finance/web-lib/components';
 import	* as utils							from	'@yearn-finance/web-lib/utils';
-import	{useWeb3}							from	'@yearn-finance/web-lib/contexts';
+import	{useSettings, useWeb3}				from	'@yearn-finance/web-lib/contexts';
 import	Line								from	'components/icons/Line';
 import	{approveERC20}						from	'utils/actions/approveToken';
 import	{depositToken}						from	'utils/actions/depositToken';
@@ -21,6 +21,7 @@ import type {TVault}						from	'contexts/useYearn.d';
 function DepositCard({currentVault}: {currentVault: TVault}): ReactElement{
 	const	{chainID, isActive, address, provider} = useWeb3();
 	const	{balances, prices, allowances, updateVaultData, useWalletNonce} = useWallet();
+	const	{networks} = useSettings();
 	const	[actionType, set_actionType] = React.useState('deposit');
 	const	[amount, set_amount] = React.useState('');
 	const	[shareOfVault, set_shareOfVault] = React.useState(ethers.constants.Zero);
@@ -44,16 +45,25 @@ function DepositCard({currentVault}: {currentVault: TVault}): ReactElement{
 	** Please note the use of useWalletNonce to refresh data. See react deep
 	** effect for more info.
 	**************************************************************************/
-	React.useEffect((): (() => void) => {
+	React.useEffect((): void => {
 		if (currentVault) {
 			utils.performBatchedUpdates((): void => {
 				set_shareOfVault(utils.format.BN(balances[utils.toAddress(currentVault.address)]?.raw));
 				set_balanceOfToken(utils.format.BN(balances[utils.toAddress(currentVault.token.address)]?.raw));
 				set_allowanceForToken(utils.format.BN(allowances[utils.toAddress(currentVault.token.address)]?.raw));
-				if (actionType === 'deposit')
-					set_amount((balances[utils.toAddress(currentVault.token.address)]?.normalized || '').toString());
-				else
-					set_amount((balances[utils.toAddress(currentVault.address)]?.normalized || '').toString());
+				if (actionType === 'deposit') {
+					set_amount((previousAmount): string => (
+						previousAmount === ''
+							? (balances[utils.toAddress(currentVault.token.address)]?.normalized || '').toString()
+							: previousAmount
+					));
+				} else {
+					set_amount((previousAmount): string => (
+						previousAmount === ''
+							? (balances[utils.toAddress(currentVault.address)]?.normalized || '').toString()
+							: previousAmount
+					));
+				}
 				set_priceOfToken(utils.format.BN(prices[utils.toAddress(currentVault.token.address)]?.raw));
 				set_priceOfVault(utils.format.BN(prices[utils.toAddress(currentVault.address)]?.raw));
 			});
@@ -67,19 +77,8 @@ function DepositCard({currentVault}: {currentVault: TVault}): ReactElement{
 				set_amount('');
 			});
 		}
-		return (): void => {
-			utils.performBatchedUpdates((): void => {
-				set_shareOfVault(ethers.constants.Zero);
-				set_balanceOfToken(ethers.constants.Zero);
-				set_allowanceForToken(ethers.constants.Zero);
-				set_priceOfToken(ethers.constants.Zero);
-				set_priceOfVault(ethers.constants.One);
-				set_amount('');
-			});
-		};
 	}, [currentVault, balances, address, isActive, prices, allowances, actionType, useWalletNonce]);
 
-
 	/* 🔵 - Yearn Finance ******************************************************
 	** Trigger an approve web3 action, simply trying to approve `amount` tokens
 	** to be used by the Partner contract, in charge of depositing the tokens.
@@ -96,7 +95,7 @@ function DepositCard({currentVault}: {currentVault: TVault}): ReactElement{
 		const	transaction = (
 			new utils.Transaction(provider, approveERC20, set_txStatusApprove).populate(
 				currentVault.token.address,
-				(process.env.YEARN_PARTNER_CONTRACT_ADDRESS as ({[key: number]: string}))[chainID || 1],
+				networks[chainID === 1337 ? 1 : chainID  || 1].partnerContractAddress,
 				utils.format.toSafeAmount(amount, balances[utils.toAddress(currentVault.token.address)].raw)
 			).onSuccess(async (): Promise<void> => {
 				await updateVaultData(currentVault);
@@ -122,7 +121,7 @@ function DepositCard({currentVault}: {currentVault: TVault}): ReactElement{
 			return;
 		const	transaction = (
 			new utils.Transaction(provider, depositToken, set_txStatusDeposit).populate(
-				chainID,
+				networks[chainID === 1337 ? 1 : chainID  || 1].partnerContractAddress,
 				currentVault.address,
 				utils.format.toSafeAmount(amount, balances[utils.toAddress(currentVault.token.address)].raw)
 			).onSuccess(async (): Promise<void> => {

contexts/useWallet.tsx

@@ -58,21 +58,21 @@ export const WalletContextApp = ({children, vaults}: {children: ReactElement, va
 		const	currentProvider = provider || providers.getProvider(chainID);
 		const	ethcallProvider = await providers.newEthCallProvider(currentProvider);
 		const	userAddress = address || '0x0000000000000000010000000000000000000000'; //using this address as dummy
-		const	_vaults = vaults;
+		const	_vaults = vaults.filter((v): boolean => v.chainID === chainID || (v.chainID === 1 && chainID === 1337));
 		const	calls = [];
 
-		for (const vault of vaults) {
+		for (const vault of _vaults) {
 			const	vaultContract = new Contract(vault.address, VAULT_V2_ABI);
 			const	underlyingTokenContract = new Contract(vault.token.address, ERC20_ABI);
-			const	lensPriceContract = new Contract(networks[chainID || 1].lensAddress, LENS_ABI);
+			const	lensPriceContract = new Contract(networks[chainID === 1337 ? 1 : chainID || 1].lensAddress, LENS_ABI);
 
 			calls.push(...[
 				vaultContract.balanceOf(userAddress),
 				vaultContract.pricePerShare(),
 				underlyingTokenContract.balanceOf(userAddress),
 				underlyingTokenContract.allowance(
 					userAddress,
-					(process.env.YEARN_PARTNER_CONTRACT_ADDRESS as ({[key: number]: string}))[chainID || 1]
+					networks[chainID === 1337 ? 1 : chainID || 1].partnerContractAddress
 				),
 				lensPriceContract.getPriceUsdcRecommended(vault.token.address)
 			]);
@@ -134,15 +134,15 @@ export const WalletContextApp = ({children, vaults}: {children: ReactElement, va
 		const	calls = [];
 		const	vaultContract = new Contract(vault.address, VAULT_V2_ABI);
 		const	underlyingTokenContract = new Contract(vault.token.address, ERC20_ABI);
-		const	lensPriceContract = new Contract(networks[chainID || 1].lensAddress, LENS_ABI);
+		const	lensPriceContract = new Contract(networks[chainID === 1337 ? 1 : chainID || 1].lensAddress, LENS_ABI);
 
 		calls.push(...[
 			vaultContract.balanceOf(userAddress),
 			vaultContract.pricePerShare(),
 			underlyingTokenContract.balanceOf(userAddress),
 			underlyingTokenContract.allowance(
 				userAddress,
-				(process.env.YEARN_PARTNER_CONTRACT_ADDRESS as ({[key: number]: string}))[chainID || 1]
+				networks[chainID === 1337 ? 1 : chainID || 1].partnerContractAddress
 			),
 			lensPriceContract.getPriceUsdcRecommended(vault.token.address)
 		]);

contexts/useYearn.d.tsx

@@ -68,6 +68,7 @@ export type TVaultAPI = {
 };
 
 export type TVault = TVaultAPI & {
+	chainID: number,
 	description: string,
 	categories: string[],
 	strategies: (TStrategies & {

contexts/useYearn.tsx

@@ -19,7 +19,7 @@ export const YearnContextApp = ({children}: {children: ReactElement}): ReactElem
 
 	const getYearnVaults = React.useCallback(async (): Promise<void> => {
 		NProgress.start();
-		const	networkData = networks[chainID || 1];
+		const	networkData = networks[chainID === 1337 ? 1 : chainID || 1];
 		const	[api, meta, tok, vs] = await Promise.allSettled([
 			axios.get(`${networkData.apiURI}/vaults/all`),
 			axios.get(`${networkData.metaURI}/strategies/all`),
@@ -91,7 +91,7 @@ export const YearnContextApp = ({children}: {children: ReactElement}): ReactElem
 			** to endorse. If the vault's address match one of them, include it
 			** in the final list.
 			******************************************************************/
-			if (endorsedVaults[chainID || 1].includes(toAddress(vault.address))) {
+			if (endorsedVaults[chainID === 1337 ? 1 : chainID || 1].includes(toAddress(vault.address))) {
 				return true;
 			}
 			return false;
@@ -160,7 +160,8 @@ export const YearnContextApp = ({children}: {children: ReactElement}): ReactElem
 				vault.token.symbol = 'cUSDT';
 
 			vault.categories = ['simple_saver'];
-			if (chainID === 1) {
+			vault.chainID = chainID;
+			if (chainID === 1 || chainID === 1337) {
 				if (toAddress(vault.address) === toAddress('0xdA816459F1AB5631232FE5e97a05BBBb94970c95')) //DAI
 					vault.categories = ['simple_saver', 'usd_stable'];
 				if (toAddress(vault.address) === toAddress('0xa354F35829Ae975e850e23e9615b11Da1B3dC4DE')) //usdc
@@ -201,7 +202,7 @@ export const YearnContextApp = ({children}: {children: ReactElement}): ReactElem
 
 	React.useEffect((): void => {
 		getYearnVaults();
-	}, [getYearnVaults, chainID]);
+	}, [getYearnVaults]);
 
 	return (
 		<YearnContext.Provider value={{vaults, nonce}}>

next.config.js

@@ -13,10 +13,6 @@ module.exports = {
 	},
 	env: {
 		PARTNER_ID_ADDRESS: '0x7eE89ddd96603669eB0CC92D81f221b756813872',
-		YEARN_PARTNER_CONTRACT_ADDRESS: {
-			1: '0x8ee392a4787397126C163Cb9844d7c447da419D8',
-			250: '0x086865B2983320b36C42E48086DaDc786c9Ac73B'
-		},
 		WEBSITE_URI: 'https://macarena.finance/',
 		WEBSITE_NAME: 'Macarena Finance',
 		WEBSITE_DESCRIPTION: 'Macarena finance, a UI for Yearn Finance that you actually want to fork',

package.json

@@ -14,7 +14,7 @@
     "clean": "rm -rf .next && rm -rf node_modules"
   },
   "dependencies": {
-    "@yearn-finance/web-lib": "^0.8.7",
+    "@yearn-finance/web-lib": "^0.8.17",
     "autoprefixer": "^10.4.7",
     "axios": "^0.27.2",
     "chart.js": "^3.8.0",
@@ -30,25 +30,25 @@
     "next-seo": "^5.4.0",
     "nprogress": "^0.2.0",
     "postcss-nesting": "^10.1.8",
-    "react": "18.1.0",
+    "react": "18.2.0",
     "react-chartjs-2": "^4.2.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "sharp": "^0.30.6",
     "swr": "^1.3.0",
-    "tailwindcss": "^3.1.2"
+    "tailwindcss": "^3.1.3"
   },
   "devDependencies": {
     "@types/next": "^9.0.0",
-    "@types/node": "^17.0.42",
-    "@types/react": "^18.0.12",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "^5.28.0",
     "eslint": "^8.17.0",
     "eslint-config-next": "^12.1.6",
     "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-tailwindcss": "^3.5.2",
     "next-transpile-modules": "^9.0.0",
     "postcss": "^8.4.14",

pages/_app.tsx

@@ -2,6 +2,7 @@ import	React, {ReactElement}										from	'react';
 import	Head														from	'next/head';
 import	{AppProps}													from	'next/app';
 import	Image														from	'next/image';
+import	Link														from	'next/link';
 import	{useRouter}													from	'next/router';
 import	{DefaultSeo}												from	'next-seo';
 import	{AnimatePresence, motion}									from	'framer-motion';
@@ -12,10 +13,10 @@ import	{truncateHex}												from	'@yearn-finance/web-lib/utils';
 import	{NetworkEthereum, NetworkFantom, SocialDiscord, SocialGithub, SocialTwitter}				from	'@yearn-finance/web-lib/icons';
 import	useYearn, {YearnContextApp}									from	'contexts/useYearn';
 import	KBar														from	'components/Kbar';
+import	KBarButton													from	'components/KBarButton';
 import	LogoMacarena												from	'components/icons/LogoMacarena';
 
 import	'../style.css';
-import KBarButton from 'components/KBarButton';
 
 const transition = {duration: 0.3, ease: [0.17, 0.67, 0.83, 0.67]};
 const thumbnailVariants = {
@@ -65,7 +66,9 @@ function	Header(): ReactElement {
 							<KBarButton />
 						</div>
 						<div aria-label={'logo'} className={'flex col-span-3 justify-center items-center md:col-span-1'}>
-							<LogoMacarena />
+							<Link href={'/'}>
+								<LogoMacarena className={'cursor-pointer'} />
+							</Link>
 						</div>
 						<div aria-label={'wallet and network'} className={'hidden flex-row justify-end items-center space-x-4 md:flex'}>
 							<div className={'hidden flex-row items-center space-x-4 md:flex'}>

utils/actions/depositToken.tsx

@@ -3,15 +3,15 @@ import	PARTNER_VAULT_ABI			from	'utils/abi/partner.vault.abi';
 
 export async function	depositToken(
 	provider: ethers.providers.Web3Provider,
-	chainID: number,
+	partnerContractAddress: string,
 	vaultAddress: string,
 	amount: ethers.BigNumber
 ): Promise<boolean> {
 	const	signer = provider.getSigner();
 
 	try {
 		const	contract = new ethers.Contract(
-			(process.env.YEARN_PARTNER_CONTRACT_ADDRESS as ({[key: number]: string}))[chainID || 1],
+			partnerContractAddress,
 			PARTNER_VAULT_ABI as ContractInterface,
 			signer
 		);