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>

apps/common/components/BalanceReminderPopover.tsx

@@ -7,7 +7,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,7 +40,7 @@ function TokenItem({element}: {element: TBalanceReminderElement}): ReactElement
 			await walletClient.watchAsset({
 				type: 'ERC20',
 				options: {
-					address: toWagmiAddress(address),
+					address: toAddress(address),
 					decimals: decimals,
 					symbol: symbol,
 					image: image
@@ -151,7 +151,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'}>
@@ -163,7 +163,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

@@ -6,7 +6,7 @@ import type {ImageProps} from 'next/image';
 import type {CSSProperties, ReactElement} from 'react';
 
 function ImageWithFallback(props: ImageProps & {onCatchError?: VoidFunction}): ReactElement {
-	const {alt, src, ...rest} = props;
+	const {alt, src, onCatchError, ...rest} = props;
 	const [imageSrc, set_imageSrc] = useState(src);
 	const [imageStyle, set_imageStyle] = useState<CSSProperties>({});
 
@@ -19,7 +19,7 @@ function ImageWithFallback(props: ImageProps & {onCatchError?: VoidFunction}): R
 				performBatchedUpdates((): void => {
 					set_imageSrc('/placeholder.png');
 					set_imageStyle({filter: 'opacity(0.2)'});
-					props.onCatchError?.();
+					onCatchError?.();
 				});
 			}}
 			{...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/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/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'});

apps/common/hooks/useWhyDidYouUpdate.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {useEffect, useRef} from 'react';
+
+function useWhyDidYouUpdate(name: string, props: any): void {
+	// Get a mutable ref object where we can store props ...
+	// ... for comparison next time this hook runs.
+	const previousProps = useRef<any>();
+
+	useEffect((): void => {
+		if (previousProps.current) {
+			// Get all keys from previous and current props
+			const allKeys = Object.keys({...previousProps.current, ...props});
+			// Use this object to keep track of changed props
+			const changesObj: any = {};
+			// Iterate through keys
+			allKeys.forEach((key): void => {
+				// If previous is different from current
+				if (previousProps.current[key] !== props[key]) {
+					// Add to changesObj
+					changesObj[key] = {
+						from: previousProps.current[key],
+						to: props[key]
+					};
+				}
+			});
+
+			// If changesObj not empty then output to console
+			if (Object.keys(changesObj).length) {
+				console.log('[why-did-you-update]', name, changesObj);
+			}
+		}
+
+		// Finally update previousProps with current props for next hook call
+		previousProps.current = props;
+	});
+}
+
+export default useWhyDidYouUpdate;

apps/common/schemas/curveSchemas.ts

@@ -1,4 +1,6 @@
 import {z} from 'zod';
+import {toAddress} from '@yearn-finance/web-lib/utils/address';
+
 
 export const curveWeeklyFeesSchema = z.object({
 	success: z.boolean().optional(),
@@ -25,11 +27,11 @@ const curveGaugeSchema = z.object({
 		deposit: z.string().array().optional().nullable(),
 		withdraw: z.string().array().optional().nullable()
 	}).optional(),
-	swap: z.string().optional(),
-	swap_token: z.string().optional(),
+	swap: z.string().optional().transform(toAddress),
+	swap_token: z.string().optional().transform(toAddress),
 	name: z.string(),
 	shortName: z.string().optional(),
-	gauge: z.string().optional(),
+	gauge: z.string().optional().transform(toAddress),
 	swap_data: z
 		.object({virtual_price: z.string().or(z.number().optional())})
 		.optional(),
@@ -62,14 +64,14 @@ export const curveAllGaugesSchema = z.object({
 
 export const curveGaugeFromYearnSchema = z.object({
 	gauge_name: z.string(),
-	gauge_address: z.string(),
-	pool_address: z.string(),
+	gauge_address: z.string().transform(toAddress),
+	pool_address: z.string().transform(toAddress),
 	pool_coins: z.object({
 		name: z.string().optional(),
-		address: z.string(),
+		address: z.string().transform(toAddress),
 		error: z.string().optional()
 	}).array().optional(),
-	lp_token: z.string(),
+	lp_token: z.string().transform(toAddress),
 	weight: z.string(),
 	inflation_rate: z.string(),
 	working_supply: z.string(),
@@ -108,11 +110,7 @@ export const curveGaugeFromYearnSchema = z.object({
 export const curveGaugesFromYearnSchema = curveGaugeFromYearnSchema.array();
 
 export type TCurveWeeklyFees = z.infer<typeof curveWeeklyFeesSchema>;
-
 export type TCurveGauge = z.infer<typeof curveGaugeSchema>;
-
 export type TCurveAllGauges = z.infer<typeof curveAllGaugesSchema>;
-
 export type TCurveGaugeFromYearn = z.infer<typeof curveGaugeFromYearnSchema>;
-
 export type TCurveGaugesFromYearn = z.infer<typeof curveGaugesFromYearnSchema>;

apps/common/types/curves.tsx

@@ -1,5 +1,3 @@
 import type {TDict} from '@yearn-finance/web-lib/types';
 
-export type TCurveGaugeVersionRewards = {
-	v3: TDict<TDict<bigint>>,
-}
+export type TCurveGaugeVersionRewards = TDict<TDict<bigint>>;

apps/common/types/types.tsx

@@ -20,7 +20,7 @@ export type TDropdownOption = {
 	label: string;
 	symbol: string;
 	decimals: number;
-	value: string;
+	value: TAddress;
 	icon?: ReactElement;
 	zapVia?: TAddress;
 	solveVia?: Solver[];