Feat/wagmi veyfi (#210)

* feat: migrate to wagmi

* Update pages/vaults/factory.tsx

* Feat/wagmi yBribe (#211)

* feat: migrate to wagmi

* Feat/wagmi ybal (#214)

* feat: init yBal

* fix: lint

* Update apps/common/components/AppHeader.tsx

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>

* fix: remove unused test prop

* feat: refactor useCurrentApp

* fix: reduce lines

* fix: extract HeadLabel

* fix: add more strict checks

* fix: reduce complexity

* fix: extract Row

* fix: invalid code

* fix: possible undef

* feat: update lib and var names

* feat: update options from/to

* wip: yBal no yCRV

* fix: remove veBal

* feat: cleaning imports and options

* feat: bal zap integration WIP

* fix: onCatchError

* test: yBal actions#zaap

* test: simulateZapForMinOut

* refactor: Expect zap to be called with BigNumber

* feat: update lib and var names

* feat: new contract version

* wip: ugly

* fix: Ethers mock

* feat: Mock providers

* fix: invalid BigNumber value

* feat: update tests

* feat: always test

* fix: switch env to node for tests

* fix: remove some logs

* feat: wip yBal

* feat: wip yBal

* feat: ylock ui

* feat: useFetch for fetching stybal vault (#202)

Co-authored-by: Major <90963895+Majorfi@users.noreply.github.com>

* fix: conflicts and yCRV clean

* feat: smol refactor

* feat: yBal pull

* feat: yBal migration

* fix: spacings

* fix: slippage

* fix: remove extra props for arrow down

* fix: add sentry to handleSettle

* fix: tabs

* Update apps/ycrv/utils/actions.ts

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>

* fix: set const

* fix: set const

* feat: update solvers (#217)

* feat: update solvers

* fix: dynamic imports

* fix: some lint issues

* fix: removing wdyu

* fix: remove log

* fix: enable

* fix: endpoint to path

* Feat/wagmi address (#219)

* feat: remove all wagmiAddress

* fix: linting

* fix: typing issues

* fix: remove useless assert and add namecheck

* fix: remove duplicate import

* Update apps/vaults/contexts/useStakingRewards.tsx

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>

* Feat/wagmi-bribesfix (#220)

* feat: remove v3 declaration

* fix: transform strings to addresses

* fix: bribe results

* fix: revert ui changes. Later

* fix: some bit of UI

* fix: responsiveness

* Update apps/common/schemas/curveSchemas.ts

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>

* fix: transform toAddress easy mode

* feat/Refactor tx handlers (#222)

* feat: wagmi handleTX init

* fix: remove some level of complexity

* feat: migrate the common actions

* feat: suggestion to make bigInt |undefined to be sure to check stuff

* fix: remove stupid suggestion

* feat: migrate actions

* fix: Types

* fix: Cannot set bigint to type undefined

* Update apps/common/utils/toWagmiProvider.tsx

* fix: remove useless toString() (#223)

---------

Co-authored-by: Karelian Pie <devkarelianpie@gmail.com>

---------

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>
Co-authored-by: Karelian Pie <devkarelianpie@gmail.com>

---------

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>
Co-authored-by: Karelian Pie <devkarelianpie@gmail.com>

---------

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>
Co-authored-by: Karelian Pie <devkarelianpie@gmail.com>

---------

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>
Co-authored-by: Karelian Pie <devkarelianpie@gmail.com>

---------

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>
Co-authored-by: Karelian Pie <devkarelianpie@gmail.com>

---------

Co-authored-by: Chef Karelian <78794805+karelianpie@users.noreply.github.com>
Co-authored-by: Karelian Pie <devkarelianpie@gmail.com>

.eslintignore

@@ -1,4 +1,5 @@
 # Auto Generated PWA files
 public/sw*
 public/workbox*
-ipfs/*
+ipfs/*
+public/worker*

.github/workflows/test.yml

@@ -2,8 +2,6 @@ name: Test
 
 on:
   push:
-    branches:
-      - main
   pull_request:
   workflow_dispatch:
 
@@ -25,4 +23,4 @@ jobs:
         run: yarn --prefer-offline
 
       - name: Test project
-        run: yarn node --experimental-vm-modules $(yarn bin jest)
+        run: yarn test

apps/common/components/AppHeader.tsx

@@ -12,6 +12,7 @@ import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
 import BalanceReminderPopover from '@common/components/BalanceReminderPopover';
 import {useMenu} from '@common/contexts/useMenu';
 import LogoYearn from '@common/icons/LogoYearn';
+import {YBalHeader} from '@yBal/components/header/YBalHeader';
 import {YBribeHeader} from '@yBribe/components/header/YBribeHeader';
 import {YCrvHeader} from '@yCRV/components/header/YCrvHeader';
 
@@ -27,6 +28,7 @@ function Logo(): ReactElement {
 	return (
 		<>
 			<YCrvHeader pathname={pathname} />
+			<YBalHeader pathname={pathname} />
 			<VaultsHeader pathname={pathname} />
 			<VeYfiHeader pathname={pathname} />
 			<YBribeHeader pathname={pathname} />
@@ -107,6 +109,10 @@ export function AppHeader(): ReactElement {
 			return [HOME_MENU, ...APPS[AppName.YCRV].menu];
 		}
 
+		if (pathname.startsWith('/ybal')) {
+			return [HOME_MENU, ...APPS[AppName.YBAL].menu];
+		}
+
 		if (pathname.startsWith('/vaults')) {
 			return [HOME_MENU, ...APPS[AppName.VAULTS].menu];
 		}
@@ -126,8 +132,10 @@ export function AppHeader(): ReactElement {
 		];
 	}, [pathname]);
 
+
 	const supportedNetworks = useMemo((): number[] => {
-		if (pathname.startsWith('/ycrv') || pathname.startsWith('/veyfi') || pathname.startsWith('/ybribe')) {
+		const ethereumOnlyPaths = ['/ycrv', '/ybal', '/veyfi', '/ybribe'];
+		if (ethereumOnlyPaths.some((path): boolean => pathname.startsWith(path))) {
 			return [1];
 		}
 

apps/common/components/Apps.tsx

@@ -1,12 +1,14 @@
 import Image from 'next/image';
 import vaultsManifest from 'public/apps/vaults-manifest.json';
 import veyfiManifest from 'public/apps/veyfi-manifest.json';
+import yBalManifest from 'public/apps/ybal-manifest.json';
 import ybribeManifest from 'public/apps/ybribe-manifest.json';
 import ycrvManifest from 'public/apps/ycrv-manifest.json';
 import {VAULTS_MENU} from '@vaults/constants/menu';
 import {VEYFI_MENU} from '@veYFI/constants/menu';
-import {YCRV_TOKEN_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
+import {YBAL_TOKEN_ADDRESS, YCRV_TOKEN_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
 import LogoYearn from '@common/icons/LogoYearn';
+import {YBAL_MENU} from '@yBal/constants/menu';
 import {YBRIBE_MENU} from '@yBribe/constants/menu';
 import {YCRV_MENU} from '@yCRV/constants/menu';
 
@@ -17,6 +19,7 @@ import type {TMetaFile} from './Meta';
 export enum AppName {
 	VAULTS = 'Vaults',
 	YCRV = 'yCRV',
+	YBAL = 'yBal',
 	VEYFI = 'veYFI',
 	YBRIBE = 'yBribe'
 }
@@ -55,6 +58,21 @@ export const APPS: { [key in AppName]: TApp } = {
 				priority />
 		)
 	},
+	yBal: {
+		name: AppName.YBAL,
+		href: '/ybal',
+		menu: YBAL_MENU,
+		manifest: yBalManifest,
+		icon: (
+			<Image
+				alt={'yBal'}
+				width={32}
+				height={32}
+				src={`${process.env.BASE_YEARN_ASSETS_URI}/1/${YBAL_TOKEN_ADDRESS}/logo-128.png`}
+				loading={'eager'}
+				priority />
+		)
+	},
 	veYFI: {
 		name: AppName.VEYFI,
 		menu: VEYFI_MENU,

apps/common/components/BalanceReminderPopover.tsx

@@ -8,7 +8,7 @@ import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import IconAddToMetamask from '@yearn-finance/web-lib/icons/IconAddToMetamask';
 import IconCross from '@yearn-finance/web-lib/icons/IconCross';
 import IconWallet from '@yearn-finance/web-lib/icons/IconWallet';
-import {toAddress, toWagmiAddress, truncateHex} from '@yearn-finance/web-lib/utils/address';
+import {toAddress, truncateHex} from '@yearn-finance/web-lib/utils/address';
 import {toBigInt} from '@yearn-finance/web-lib/utils/format.bigNumber';
 import {formatAmount} from '@yearn-finance/web-lib/utils/format.number';
 import {useWallet} from '@common/contexts/useWallet';
@@ -40,12 +40,7 @@ function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement
 			const walletClient = await provider.getWalletClient();
 			await walletClient.watchAsset({
 				type: 'ERC20',
-				options: {
-					address: toWagmiAddress(address),
-					decimals,
-					symbol,
-					image
-				}
+				options: {address: toAddress(address), decimals, symbol, image}
 			});
 		} catch (error) {
 			captureException(error);
@@ -153,7 +148,7 @@ export default function BalanceReminderPopover(): ReactElement {
 						leave={'transition ease-in duration-150'}
 						leaveFrom={'opacity-100 translate-y-0'}
 						leaveTo={'opacity-0 translate-y-1'}>
-						<Popover.Panel className={'yearn--shadow absolute right-0 top-6 z-[1000] mt-3 w-screen max-w-xs md:top-4 md:-right-4'}>
+						<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={'flex items-center justify-center border-b border-neutral-300 py-4 text-center'}>
@@ -165,7 +160,7 @@ export default function BalanceReminderPopover(): ReactElement {
 											) : 'Connect wallet'}
 										</b>
 									</div>
-									<div className={'absolute top-4 right-4'}>
+									<div className={'absolute right-4 top-4'}>
 										<button
 											onClick={onDesactivate}
 											className={'flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200/50'}>

apps/common/components/ImageWithFallback.tsx

@@ -1,27 +1,28 @@
 import React, {useState} from 'react';
 import Image from 'next/image';
+import performBatchedUpdates from '@yearn-finance/web-lib/utils/performBatchedUpdates';
 
 import type {ImageProps} from 'next/image';
-import type {ReactElement} from 'react';
+import type {CSSProperties, ReactElement} from 'react';
 
-export type TImageWithFallbackProps = ImageProps & {
-	onCatchError?: () => void;
-};
-function ImageWithFallback(props: TImageWithFallbackProps): ReactElement {
+function ImageWithFallback(props: ImageProps & {onCatchError?: VoidFunction}): ReactElement {
 	const {alt, src, onCatchError, ...rest} = props;
 	const [imageSrc, set_imageSrc] = useState(src);
+	const [imageStyle, set_imageStyle] = useState<CSSProperties>({});
 
 	return (
 		<Image
 			alt={alt}
 			src={imageSrc}
-			loading={'eager'}
+			style={imageStyle}
 			onError={(): void => {
-				set_imageSrc('/placeholder.png');
-				onCatchError?.();
+				performBatchedUpdates((): void => {
+					set_imageSrc('/placeholder.png');
+					set_imageStyle({filter: 'opacity(0.2)'});
+					onCatchError?.();
+				});
 			}}
-			{...rest}
-		/>
+			{...rest} />
 	);
 }
 

apps/common/components/ListHead.tsx

@@ -1,4 +1,5 @@
 import React, {useCallback} from 'react';
+import {cl} from '@yearn-finance/web-lib/utils/cl';
 import IconChevronPlain from '@common/icons/IconChevronPlain';
 
 import type {ReactElement} from 'react';
@@ -12,12 +13,14 @@ export type TListHead = {
 		className?: string
 	}[],
 	dataClassName?: string,
+	wrapperClassName?: string,
+	tokenClassName?: string,
 	sortBy: string,
 	sortDirection: TSortDirection,
 	onSort: (sortBy: string, sortDirection: TSortDirection) => void
 }
 
-function ListHead({items, dataClassName, sortBy, sortDirection, onSort}: TListHead): ReactElement {
+function ListHead({items, dataClassName, wrapperClassName, tokenClassName, sortBy, sortDirection, onSort}: TListHead): ReactElement {
 	const toggleSortDirection = (newSortBy: string): TSortDirection => {
 		return sortBy === newSortBy ? (
 			sortDirection === '' ? 'desc' : sortDirection === 'desc' ? 'asc' : 'desc'
@@ -37,8 +40,8 @@ function ListHead({items, dataClassName, sortBy, sortDirection, onSort}: TListHe
 	const [first, ...rest] = items;
 	return (
 		<div className={'mt-4 grid w-full grid-cols-1 md:mt-0'}>
-			<div className={'yearn--table-head-wrapper'}>
-				<div className={'yearn--table-head-token-section'}>
+			<div className={cl('yearn--table-head-wrapper', wrapperClassName)}>
+				<div className={cl('yearn--table-head-token-section', tokenClassName)}>
 					<button
 						onClick={(): void => onSort(first.value, toggleSortDirection(first.value))}
 						className={'yearn--table-head-label-wrapper group'}>
@@ -49,13 +52,13 @@ function ListHead({items, dataClassName, sortBy, sortDirection, onSort}: TListHe
 					</button>
 				</div>
 
-				<div className={`yearn--table-head-data-section ${dataClassName || ''}`}>
+				<div className={cl('yearn--table-head-data-section', dataClassName)}>
 					{rest.map((item, index): ReactElement => (
 						<button
 							key={`${index}_${item.value}`}
 							onClick={(): void => onSort(item.value, toggleSortDirection(item.value))}
 							disabled={!item.sortable}
-							className={`yearn--table-head-label-wrapper group ${item.className}`}
+							className={cl('yearn--table-head-label-wrapper group', item.className)}
 							datatype={'number'}>
 							<p className={'yearn--table-head-label'}>
 							&nbsp;{item.label}

apps/common/components/ListHero.tsx

@@ -104,7 +104,7 @@ function ListHero<T extends string>({
 	switchProps
 }: TListHero<T>): ReactElement {
 	return (
-		<div className={'flex flex-col items-start justify-between space-x-0 px-4 pt-4 pb-2 md:px-10 md:pt-10 md:pb-8'}>
+		<div className={'flex flex-col items-start justify-between space-x-0 px-4 pb-2 pt-4 md:px-10 md:pb-8 md:pt-10'}>
 			<div className={'mb-6'}>
 				<h2 className={'text-lg font-bold md:text-3xl'}>{headLabel}</h2>
 			</div>
@@ -148,9 +148,9 @@ function ListHero<T extends string>({
 					))}
 				</select>
 				<div className={'flex h-8 w-full items-center border border-neutral-0 bg-neutral-0 p-2 md:w-auto'}>
-					<div className={'flex h-8 w-full flex-row items-center justify-between py-2 px-0'}>
+					<div className={'flex h-8 w-full flex-row items-center justify-between px-0 py-2'}>
 						<input
-							className={'w-full overflow-x-scroll border-none bg-transparent py-2 px-0 text-xs outline-none scrollbar-none'}
+							className={'w-full overflow-x-scroll border-none bg-transparent px-0 py-2 text-xs outline-none scrollbar-none'}
 							type={'text'}
 							placeholder={'Search'}
 							value={searchValue}

apps/common/components/SearchBar.tsx

@@ -19,7 +19,7 @@ export function SearchBar({searchLabel, searchPlaceholder, searchValue, set_sear
 				<div className={'relative flex h-10 w-full flex-row items-center justify-between'}>
 					<input
 						id={'search'}
-						className={'h-10 w-full overflow-x-scroll border-none bg-transparent py-2 px-0 text-base outline-none scrollbar-none placeholder:text-neutral-400'}
+						className={'h-10 w-full overflow-x-scroll border-none bg-transparent px-0 py-2 text-base outline-none scrollbar-none placeholder:text-neutral-400'}
 						type={'text'}
 						placeholder={searchPlaceholder}
 						value={searchValue}

apps/common/components/TokenDropdown.tsx

@@ -20,7 +20,7 @@ function DropdownItem({option, balanceSource}: TDropdownItemProps): ReactElement
 			{({active}): ReactElement =>
 				<div data-active={active} className={'yearn--dropdown-menu-item w-full hover:bg-neutral-0/40'}>
 					<div className={'h-6 w-6 flex-none rounded-full'}>
-						{option?.icon ? cloneElement(option.icon) : null}
+						{option?.icon ? option.icon : null}
 					</div>
 					<div>
 						<p className={`${option.icon ? 'pl-2' : 'pl-0'} font-normal text-neutral-900`}>

apps/common/contexts/useCurve.tsx

@@ -1,5 +1,4 @@
 import React, {createContext, useContext, useMemo} from 'react';
-import {toAddress} from '@yearn-finance/web-lib/utils/address';
 import {useFetch} from '@common/hooks/useFetch';
 import {coinGeckoPricesSchema} from '@common/schemas/coinGeckoSchemas';
 import {curveAllGaugesSchema, curveGaugesFromYearnSchema, curveWeeklyFeesSchema} from '@common/schemas/curveSchemas';
@@ -44,7 +43,7 @@ export const CurveContextApp = ({children}: { children: React.ReactElement }): R
 		endpoint: `https://api.coingecko.com/api/v3/simple/price?${cgPricesQueryParams}`,
 		schema: coinGeckoPricesSchema
 	});
-		
+
 	/* 🔵 - Yearn Finance ******************************************************
 	**	Fetch all the CurveGauges to be able to create some new if required
 	***************************************************************************/
@@ -70,9 +69,6 @@ export const CurveContextApp = ({children}: { children: React.ReactElement }): R
 
 			const addressPart = /\([^()]*\)/;
 			gauge.name = gauge.name.replace(addressPart, '');
-			gauge.swap_token = toAddress(gauge.swap_token);
-			gauge.gauge = toAddress(gauge.gauge);
-			gauge.swap = toAddress(gauge.swap);
 			_gaugesForMainnet.push(gauge);
 		}
 		return _gaugesForMainnet;

apps/common/contexts/useWallet.tsx

@@ -3,7 +3,7 @@ import {useUI} from '@yearn-finance/web-lib/contexts/useUI';
 import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
 import {useClientEffect} from '@yearn-finance/web-lib/hooks/useClientEffect';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
-import {CRV_TOKEN_ADDRESS, CVXCRV_TOKEN_ADDRESS, ETH_TOKEN_ADDRESS, LPYCRV_TOKEN_ADDRESS, YCRV_TOKEN_ADDRESS, YVBOOST_TOKEN_ADDRESS, YVECRV_TOKEN_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
+import {BAL_TOKEN_ADDRESS, BALWETH_TOKEN_ADDRESS, CRV_TOKEN_ADDRESS, CVXCRV_TOKEN_ADDRESS, ETH_TOKEN_ADDRESS, LPYBAL_TOKEN_ADDRESS, LPYCRV_TOKEN_ADDRESS, STYBAL_TOKEN_ADDRESS, YBAL_TOKEN_ADDRESS, YCRV_TOKEN_ADDRESS, YVBOOST_TOKEN_ADDRESS, YVECRV_TOKEN_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
 import {useYearn} from '@common/contexts/useYearn';
 import {useBalances} from '@common/hooks/useBalances';
 
@@ -55,7 +55,12 @@ export const WalletContextApp = memo(function WalletContextApp({children}: {chil
 				CRV_TOKEN_ADDRESS,
 				YVBOOST_TOKEN_ADDRESS,
 				YVECRV_TOKEN_ADDRESS,
-				CVXCRV_TOKEN_ADDRESS
+				CVXCRV_TOKEN_ADDRESS,
+				BAL_TOKEN_ADDRESS,
+				YBAL_TOKEN_ADDRESS,
+				BALWETH_TOKEN_ADDRESS,
+				STYBAL_TOKEN_ADDRESS,
+				LPYBAL_TOKEN_ADDRESS
 			]);
 		}
 		for (const token of extraTokens) {

apps/common/hooks/useAllowances.tsx

@@ -4,7 +4,7 @@ import {useAsync} from '@react-hookz/web';
 import {multicall} from '@wagmi/core';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
 import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID';
-import {allowanceKey, toAddress, toWagmiAddress} from '@yearn-finance/web-lib/utils/address';
+import {allowanceKey, toAddress} from '@yearn-finance/web-lib/utils/address';
 import {decodeAsBigInt} from '@yearn-finance/web-lib/utils/decoder';
 
 import type {TAddress, TDict} from '@yearn-finance/web-lib/types';
@@ -25,11 +25,11 @@ export const useAllowances = (allowanceRequests: TAllowanceRequest[]): [TDict<bi
 		const calls = [];
 		for (const req of allowanceRequests) {
 			const baseContract = {
-				address: toWagmiAddress(req.token),
+				address: toAddress(req.token),
 				abi: erc20ABI,
 				chainId: chainID
 			} as const;
-			calls.push({...baseContract, functionName: 'allowance', args: [userAddress, toWagmiAddress(req.spender)]});
+			calls.push({...baseContract, functionName: 'allowance', args: [userAddress, toAddress(req.spender)]});
 		}
 		const results = await multicall({contracts: calls, chainId: chainID});
 		const allowancesMap: TDict<bigint> = {};

apps/common/hooks/useBalances.tsx

@@ -7,7 +7,7 @@ import {deserialize, multicall} from '@wagmi/core';
 import {useUI} from '@yearn-finance/web-lib/contexts/useUI';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
 import AGGREGATE3_ABI from '@yearn-finance/web-lib/utils/abi/aggregate.abi';
-import {isZeroAddress, toAddress, toWagmiAddress} from '@yearn-finance/web-lib/utils/address';
+import {isZeroAddress, toAddress} from '@yearn-finance/web-lib/utils/address';
 import {ETH_TOKEN_ADDRESS, MULTICALL3_ADDRESS} from '@yearn-finance/web-lib/utils/constants';
 import {decodeAsBigInt, decodeAsNumber, decodeAsString} from '@yearn-finance/web-lib/utils/decoder';
 import {toBigInt, toNormalizedValue} from '@yearn-finance/web-lib/utils/format';
@@ -115,13 +115,13 @@ async function getBalances(
 		const ownerAddress = address;
 		const isEth = toAddress(token) === toAddress(ETH_TOKEN_ADDRESS);
 		if (isEth) {
-			const multicall3Contract = {address: toWagmiAddress(MULTICALL3_ADDRESS), abi: AGGREGATE3_ABI};
-			const baseContract = {address: toWagmiAddress(nativeTokenWrapper), abi: erc20ABI};
+			const multicall3Contract = {address: MULTICALL3_ADDRESS, abi: AGGREGATE3_ABI};
+			const baseContract = {address: nativeTokenWrapper, abi: erc20ABI};
 			calls.push({...multicall3Contract, functionName: 'getEthBalance', args: [ownerAddress]});
 			calls.push({...baseContract, functionName: 'decimals'});
 			calls.push({...baseContract, functionName: 'symbol'});
 		} else {
-			const baseContract = {address: toWagmiAddress(token), abi: erc20ABI};
+			const baseContract = {address: toAddress(token), abi: erc20ABI};
 			calls.push({...baseContract, functionName: 'balanceOf', args: [ownerAddress]});
 			calls.push({...baseContract, functionName: 'decimals'});
 			calls.push({...baseContract, functionName: 'symbol'});