fix: forknet balances

apps/common/components/BalanceReminderPopover.tsx

@@ -12,6 +12,7 @@ import {ImageWithFallback} from '@common/components/ImageWithFallback';
 import {useWallet} from '@common/contexts/useWallet';
 import {useYearn} from '@common/contexts/useYearn';
 import {useBalance} from '@common/hooks/useBalance';
+import {IconQuestion} from '@common/icons/IconQuestion';
 
 import type {ReactElement} from 'react';
 import type {TAddress} from '@yearn-finance/web-lib/types';
@@ -88,7 +89,7 @@ function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement
 }
 
 export function BalanceReminderPopover(): ReactElement {
-	const {balances: tokens, isLoading} = useWallet();
+	const {balances: tokens, isLoading, triggerForknetBalances} = useWallet();
 	const {address, ens, isActive, onDesactivate} = useWeb3();
 	const {vaults} = useYearn();
 
@@ -154,6 +155,16 @@ export function BalanceReminderPopover(): ReactElement {
 						<Popover.Panel className={'yearn--shadow absolute right-0 top-6 z-[1000] mt-3 w-screen max-w-xs md:-right-4 md:top-4'}>
 							<div className={'overflow-hidden'}>
 								<div className={'relative bg-neutral-0 p-0'}>
+									<div className={'absolute left-4 top-4 opacity-0 transition-colors hover:opacity-100'}>
+										<button
+											onClick={(): void => {
+												// Special command to enable dev forknet balances
+												triggerForknetBalances();
+											}}
+											className={'flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200/50'}>
+											<IconQuestion className={'h-4 w-4 text-neutral-600'} />
+										</button>
+									</div>
 									<div className={'flex items-center justify-center border-b border-neutral-300 py-4 text-center'}>
 										<b>{isActive && address && ens ? ens : isActive && address ? truncateHex(address, 5) : 'Connect wallet'}</b>
 									</div>

apps/common/contexts/useWallet.tsx

@@ -1,4 +1,4 @@
-import {createContext, memo, useCallback, useContext, useEffect, useMemo} from 'react';
+import {createContext, memo, useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import {
 	OPT_YVAGEUR_USDC_STAKING_CONTRACT,
 	OPT_YVALETH_FRXETH_STAKING_CONTRACT,
@@ -73,6 +73,7 @@ export type TWalletContext = {
 	balancesNonce: number;
 	isLoading: boolean;
 	refresh: (tokenList?: TUseBalancesTokens[]) => Promise<TChainTokens>;
+	triggerForknetBalances: () => void;
 };
 
 const defaultToken: TToken = {
@@ -96,7 +97,8 @@ const defaultProps = {
 	cumulatedValueInVaults: 0,
 	balancesNonce: 0,
 	isLoading: true,
-	refresh: async (): Promise<TChainTokens> => ({})
+	refresh: async (): Promise<TChainTokens> => ({}),
+	triggerForknetBalances: (): void => {}
 };
 
 /* 🔵 - Yearn Finance **********************************************************
@@ -107,6 +109,7 @@ const WalletContext = createContext<TWalletContext>(defaultProps);
 export const WalletContextApp = memo(function WalletContextApp({children}: {children: ReactElement}): ReactElement {
 	const {vaults, vaultsMigrations, vaultsRetired, isLoadingVaultList, prices} = useYearn();
 	const {onLoadStart, onLoadDone} = useUI();
+	const [shouldUseForknetBalances, set_shouldUseForknetBalances] = useState<boolean>(false);
 
 	//List all tokens related to yearn vaults
 	const availableTokens = useMemo((): TUseBalancesTokens[] => {
@@ -192,6 +195,7 @@ export const WalletContextApp = memo(function WalletContextApp({children}: {chil
 				tokensExists[vault.token.address] = true;
 			}
 		});
+
 		return tokens;
 	}, [isLoadingVaultList, vaults]);
 
@@ -218,6 +222,19 @@ export const WalletContextApp = memo(function WalletContextApp({children}: {chil
 		return tokens;
 	}, [vaultsRetired]);
 
+	const allTokens = useMemo((): TUseBalancesTokens[] => {
+		const tokens = [...availableTokens, ...migratableTokens, ...retiredTokens];
+		if (!shouldUseForknetBalances) {
+			return tokens;
+		}
+		for (const token of tokens) {
+			if (token.chainID === 1) {
+				tokens.push({...token, chainID: 1337});
+			}
+		}
+		return tokens;
+	}, [availableTokens, migratableTokens, retiredTokens, shouldUseForknetBalances]);
+
 	// Fetch the balances
 	const {
 		data: tokensRaw,
@@ -226,7 +243,7 @@ export const WalletContextApp = memo(function WalletContextApp({children}: {chil
 		nonce,
 		isLoading
 	} = useBalances({
-		tokens: [...availableTokens, ...migratableTokens, ...retiredTokens],
+		tokens: [...allTokens],
 		prices
 	});
 
@@ -300,6 +317,8 @@ export const WalletContextApp = memo(function WalletContextApp({children}: {chil
 		[tokens]
 	);
 
+	console.log(tokens);
+
 	/* 🔵 - Yearn Finance ******************************************************
 	 **	Setup and render the Context provider to use in the app.
 	 ***************************************************************************/
@@ -312,7 +331,8 @@ export const WalletContextApp = memo(function WalletContextApp({children}: {chil
 			balancesNonce: nonce,
 			cumulatedValueInVaults,
 			isLoading: isLoading || false,
-			refresh: onRefresh
+			refresh: onRefresh,
+			triggerForknetBalances: (): void => set_shouldUseForknetBalances((s): boolean => !s)
 		}),
 		[tokens, cumulatedValueInVaults, isLoading, onRefresh, nonce]
 	);

apps/common/icons/IconQuestion.tsx

@@ -23,8 +23,8 @@ export function IconQuestion(props: React.SVGProps<SVGSVGElement>): ReactElement
 					fill={'currentColor'}
 				/>
 				<path
-					fill-rule={'evenodd'}
-					clip-rule={'evenodd'}
+					fillRule={'evenodd'}
+					clipRule={'evenodd'}
 					d={
 						'M2.8144 2.81457C5.67827 -0.0492951 10.3214 -0.0492951 13.1853 2.81457C16.0491 5.67844 16.0491 10.3216 13.1853 13.1854C10.3214 16.0493 5.67827 16.0493 2.8144 13.1854C-0.049463 10.3216 -0.049463 5.67844 2.8144 2.81457ZM12.321 3.67881C9.93447 1.29225 6.06521 1.29225 3.67865 3.67881C1.29209 6.06537 1.29209 9.93464 3.67865 12.3212C6.06521 14.7078 9.93447 14.7078 12.321 12.3212C14.7076 9.93464 14.7076 6.06537 12.321 3.67881Z'
 					}