feat: init lifi

package.json

@@ -12,6 +12,7 @@
     "@builtbymom/web3": "0.0.193",
     "@gnosis.pm/safe-apps-sdk": "^7.8.0",
     "@headlessui/react": "^2.0.4",
+    "@lifi/sdk": "^3.1.5",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-switch": "^1.1.0",
     "@rainbow-me/rainbowkit": "2.1.3",

packages/gimme/components/Earn/EarnWizard.tsx

@@ -154,7 +154,7 @@
 			}
 		});
 		onRefreshTokens('DEPOSIT');
 	}, [
 		configuration.asset.amount,
 		configuration.asset.token?.address,
 		configuration.asset.token?.name,
@@ -186,10 +186,9 @@
 		if (!configuration.opportunity) {
 			return false;
 		}
-		{
-			if (!configuration.asset.amount || !configuration.asset.token) {
-				return false;
-			}
+
+		if (!configuration.asset.amount || !configuration.asset.token) {
+			return false;
 		}
 
 		if (configuration.asset.token.address === configuration.opportunity?.address) {

packages/gimme/components/Earn/SelectVault.tsx

@@ -2,6 +2,7 @@ import {Fragment, type ReactElement, useCallback, useMemo, useState} from 'react
 import {cl, formatPercent, numberSort, zeroNormalizedBN} from '@builtbymom/web3/utils';
 import {Dialog, DialogPanel, Transition, TransitionChild} from '@headlessui/react';
 import * as Popover from '@radix-ui/react-popover';
+import {NetworkSelector} from '@lib/common/NetworkSelector';
 import {useDepositSolver} from '@lib/contexts/useDepositSolver';
 import {usePrices} from '@lib/contexts/usePrices';
 import IconChevronPlain from '@lib/icons/IconChevronPlain';
@@ -175,6 +176,7 @@ export function SelectVault({
 	const [vaultInfo, set_vaultInfo] = useState<TVaultInfoModal>(undefined);
 	const [filter, set_filter] = useState<'all' | 'token'>('all');
 	const [sortDirection, set_sortDirection] = useState<TSortDirection>('');
+	const [selectedChainId, set_selectedChainId] = useState(-1);
 
 	const assetPrice = configuration.asset.token
 		? getPrice({
@@ -207,6 +209,14 @@ export function SelectVault({
 		);
 	}, [filteredVaults, sortDirection]);
 
+	const filteredByChain = sortedVaults.filter(vault => {
+		if (selectedChainId === -1) {
+			return sortedVaults;
+		}
+		return vault.chainID === selectedChainId;
+	});
+	const isEmpty = filteredByChain.length === 0;
+
 	const onChangeSort = useCallback(() => {
 		if (sortDirection === '') {
 			set_sortDirection('desc');
@@ -263,14 +273,24 @@ export function SelectVault({
 													'relative overflow-hidden md:rounded-3xl !bg-white transition-all',
 													'w-full p-2 h-[100vh] md:h-auto flex flex-col items-center justify-center'
 												)}>
-												<div
-													className={
-														'flex w-full items-start justify-between px-4 pb-2 pt-4'
-													}>
-													<div className={'mb-6 flex gap-2'}>
+												<div className={'flex w-full items-start justify-between p-4'}>
+													<p className={'text-grey-900 font-bold'}>{'Select Token'}</p>
+
+													<button
+														className={'group'}
+														onClick={onClose}>
+														<IconCross
+															className={
+																'size-4 text-neutral-900 transition-colors group-hover:text-neutral-600'
+															}
+														/>
+													</button>
+												</div>
+												<div className={'mb-6 mt-2 flex w-full justify-between gap-2 px-4'}>
+													<div className={'flex gap-2'}>
 														<button
 															className={cl(
-																'text-grey-800 border-grey-200 hover:bg-grey-200 rounded-2xl border px-6 py-1 font-medium',
+																'text-grey-800 border-grey-200 hover:bg-grey-200 rounded-2xl border px-6 py-2 font-medium',
 																filter === 'all' ? 'border-grey-800' : ''
 															)}
 															onClick={() => set_filter('all')}>
@@ -280,24 +300,18 @@ export function SelectVault({
 															underlyingTokenFilteredVaults.length > 0 && (
 																<button
 																	className={cl(
-																		'text-grey-800 border-grey-200 hover:bg-grey-200 rounded-2xl border px-6 py-1 font-medium',
+																		'text-grey-800 border-grey-200 hover:bg-grey-200 rounded-2xl border px-6 py-2 font-medium',
 																		filter === 'token' ? 'border-grey-800' : ''
 																	)}
 																	onClick={() => set_filter('token')}>
 																	{configuration.asset.token.symbol}
 																</button>
 															)}
 													</div>
-
-													<button
-														className={'group'}
-														onClick={onClose}>
-														<IconCross
-															className={
-																'size-4 text-neutral-900 transition-colors group-hover:text-neutral-600'
-															}
-														/>
-													</button>
+													<NetworkSelector
+														selectedChainId={selectedChainId}
+														onNetworkChange={set_selectedChainId}
+													/>
 												</div>
 												<div
 													className={
@@ -323,16 +337,22 @@ export function SelectVault({
 													</div>
 												</div>
 												<div className={'scrollable flex size-full flex-col gap-2 md:h-96'}>
-													{sortedVaults.map(vault => (
-														<Vault
-															key={`${vault.address}-${vault.chainID}`}
-															vault={vault}
-															assetPrice={assetPrice}
-															onSelect={onSelect}
-															onClose={onClose}
-															onChangeVaultInfo={set_vaultInfo}
-														/>
-													))}
+													{isEmpty ? (
+														<p className={'text-grey-700 mt-20'}>
+															{'Sorry! No opportunities found'}
+														</p>
+													) : (
+														filteredByChain.map(vault => (
+															<Vault
+																key={`${vault.address}-${vault.chainID}`}
+																vault={vault}
+																assetPrice={assetPrice}
+																onSelect={onSelect}
+																onClose={onClose}
+																onChangeVaultInfo={set_vaultInfo}
+															/>
+														))
+													)}
 												</div>
 											</DialogPanel>
 

packages/gimme/components/Earn/SelectVaultButton.tsx

@@ -1,4 +1,5 @@
 import React, {useMemo, useState} from 'react';
+import Image from 'next/image';
 import {cl, formatTAmount, formatUSD, percentOf, zeroNormalizedBN} from '@builtbymom/web3/utils';
 import {ImageWithFallback} from '@lib/common/ImageWithFallback';
 import {TextTruncate} from '@lib/common/TextTruncate';
@@ -60,21 +61,35 @@ export function SelectOpportunityButton(props: {onSetOpportunity: (value: TYDaem
 									</div>
 								</div>
 								<div className={'flex gap-2'}>
-									<ImageWithFallback
-										alt={configuration.opportunity.token?.symbol || 'token'}
-										unoptimized
-										src={`${process.env.SMOL_ASSETS_URL}/token/${configuration.opportunity?.chainID}/${configuration.opportunity.token.address}/logo-128.png`}
-										altSrc={`${process.env.SMOL_ASSETS_URL}/token/${configuration.opportunity?.chainID}/${configuration.opportunity.token.address}/logo-128.png`}
-										quality={90}
-										width={32}
-										height={32}
-										className={'mt-px'}
-									/>
-									<div className={'flex flex-col gap-1'}>
-										<TextTruncate
-											value={`${configuration.opportunity.name} Vault`}
-											className={'!text-grey-800 w-full text-left !text-lg font-medium'}
+									<div className={'relative mt-px'}>
+										<ImageWithFallback
+											alt={configuration.opportunity.token?.symbol || 'token'}
+											unoptimized
+											src={`${process.env.SMOL_ASSETS_URL}/token/${configuration.opportunity?.chainID}/${configuration.opportunity.token.address}/logo-128.png`}
+											altSrc={`${process.env.SMOL_ASSETS_URL}/token/${configuration.opportunity?.chainID}/${configuration.opportunity.token.address}/logo-128.png`}
+											quality={90}
+											width={32}
+											height={32}
 										/>
+										<div
+											className={
+												'absolute bottom-3.5 left-5 flex size-4 items-center justify-center rounded-full bg-white'
+											}>
+											<Image
+												width={14}
+												height={14}
+												alt={configuration.opportunity.chainID.toString()}
+												src={`${process.env.SMOL_ASSETS_URL}/chain/${configuration.opportunity.chainID}/logo.svg`}
+											/>
+										</div>
+									</div>
+									<div className={'flex flex-col gap-1'}>
+										<span
+											className={
+												'!text-grey-800 line-clamp-1 w-full text-left !text-lg font-medium'
+											}>
+											{configuration.opportunity.name} {'Vault'}
+										</span>
 
 										<p className={'text-grey-600 text-xs'}>
 											{`+${formatUSD(earnings).replace('$ ', '$')} over 1y`}

packages/gimme/components/Earn/Vault.tsx

@@ -1,10 +1,9 @@
 import {useCallback} from 'react';
-import {useAccount, useSwitchChain} from 'wagmi';
+import Image from 'next/image';
 import {cl, formatTAmount, formatUSD, percentOf, toAddress} from '@builtbymom/web3/utils';
 import * as Popover from '@radix-ui/react-popover';
 import {ImageWithFallback} from '@lib/common/ImageWithFallback';
 import {useDepositSolver} from '@lib/contexts/useDepositSolver';
-import {useCurrentChain} from '@lib/hooks/useCurrentChain';
 import {IconArrow} from '@lib/icons/IconArrow';
 import {IconQuestionMark} from '@lib/icons/IconQuestionMark';
 
@@ -28,30 +27,15 @@ export function Vault({
 }): ReactElement {
 	const {configuration} = useDepositSolver();
 	const {token, name, apr} = vault;
-	const {switchChainAsync} = useSwitchChain();
-
-	const {connector} = useAccount();
-	const chain = useCurrentChain();
 
 	const assetAmountUSD = assetPrice.normalized * configuration.asset.normalizedBigAmount.normalized;
 
 	const earnings = percentOf(assetAmountUSD, vault.apr.netAPR * 100);
 
-	/**********************************************************************************************
-	 * Async funciton that allows us to set selected vault with some good side effects:
-	 * 1. Chain is asynchronously switched if it doesn't coinside with chain vault is on.
-	 * 2. Form is populated with token linked to the vault and user's balance of selected token.
-	 * Exception - user has already selected native token which needs to be linked to wrapped token
-	 * vault manually.
-	 *********************************************************************************************/
 	const onSelectVault = useCallback(async () => {
-		if (vault.chainID !== chain.id) {
-			await switchChainAsync({connector, chainId: vault.chainID});
-		}
-
 		onSelect(vault);
 		onClose();
-	}, [chain.id, connector, onClose, onSelect, switchChainAsync, vault]);
+	}, [onClose, onSelect, vault]);
 
 	return (
 		<div
@@ -66,16 +50,29 @@ export function Vault({
 				'cursor-pointer'
 			)}
 			onClick={onSelectVault}>
-			<div className={'relative flex items-center gap-4'}>
-				<ImageWithFallback
-					alt={token.symbol}
-					unoptimized
-					src={`${process.env.SMOL_ASSETS_URL}/token/${vault.chainID}/${token.address}/logo-128.png`}
-					altSrc={`${process.env.SMOL_ASSETS_URL}/token/${vault.chainID}/${token.address}/logo-128.png`}
-					quality={90}
-					width={32}
-					height={32}
-				/>
+			<div className={'flex items-center gap-4'}>
+				<div className={'relative'}>
+					<ImageWithFallback
+						alt={token.symbol}
+						unoptimized
+						src={`${process.env.SMOL_ASSETS_URL}/token/${vault.chainID}/${token.address}/logo-128.png`}
+						altSrc={`${process.env.SMOL_ASSETS_URL}/token/${vault.chainID}/${token.address}/logo-128.png`}
+						quality={90}
+						width={32}
+						height={32}
+					/>
+					<div
+						className={
+							'absolute -bottom-1 left-5 flex size-4 items-center justify-center rounded-full bg-white'
+						}>
+						<Image
+							width={14}
+							height={14}
+							alt={vault.chainID.toString()}
+							src={`${process.env.SMOL_ASSETS_URL}/chain/${vault.chainID}/logo.svg`}
+						/>
+					</div>
+				</div>
 				<div className={'flex flex-col items-start gap-0.5 text-left'}>
 					<p className={'text-grey-900'}>
 						{name}