diff --git a/bun.lockb b/bun.lockb
index 32d25b9..2f5b9fd 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 737a793..9fe459e 100644
--- a/package.json
+++ b/package.json
@@ -1,81 +1,81 @@
 {
-  "name": "yearnx",
-  "private": true,
-  "workspaces": [
-    "packages/*"
-  ],
-  "scripts": {
-    "prettier-format": "prettier --config .prettierrc ./packages/**/**/*.{json,js,ts,tsx,css} --write",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
-  },
-  "dependencies": {
-    "@builtbymom/web3": "0.0.215",
-    "@closeio/use-abortable-effect": "^1.0.0",
-    "@generationsoftware/hyperstructure-client-js": "^1.12.6",
-    "@generationsoftware/hyperstructure-react-hooks": "^1.16.8",
-    "@headlessui/react": "^2.0.3",
-    "@rainbow-me/rainbowkit": "^2.1.3",
-    "@react-hookz/web": "^24.0.4",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
-    "@tanstack/react-query": "^5.51.21",
-    "@wagmi/core": "^2.13.1",
-    "axios": "^1.6.8",
-    "framer-motion": "^11.1.9",
-    "next": "14.0.4",
-    "next-plausible": "^3.12.1",
-    "next-pwa": "^5.6.0",
-    "rc-input-number": "^9.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hot-toast": "^2.4.1",
-    "react-paginate": "^8.2.0",
-    "swr": "^2.2.5",
-    "tailwindcss": "^3.4.3",
-    "tailwindcss-animate": "^1.0.7",
-    "usehooks-ts": "^3.1.0",
-    "vaul": "^0.9.1",
-    "viem": "^2.18.8",
-    "wagmi": "^2.12.2",
-    "web3-eth-abi": "1.10.0",
-    "xxhashjs": "^0.2.2",
-    "zod": "^3.23.8"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@total-typescript/ts-reset": "^0.5.1",
-    "@types/node": "^20.12.11",
-    "@types/nprogress": "^0.2.3",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "autoprefixer": "^10.4.19",
-    "babel-loader": "^9.1.3",
-    "bun-types": "^1.1.8",
-    "eslint": "8.57.0",
-    "eslint-config-next": "^14.2.3",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-brackets": "^0.1.3",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-simple-import-sort": "^12.1.0",
-    "eslint-plugin-tailwindcss": "^3.15.1",
-    "eslint-plugin-unused-imports": "^3.2.0",
-    "lint-staged": "^15.2.2",
-    "next-transpile-modules": "^10.0.1",
-    "postcss": "^8.4.38",
-    "postcss-import": "^16.1.0",
-    "postcss-nesting": "^12.1.3",
-    "prettier": "^3.2.5",
-    "sass": "^1.77.1",
-    "sharp": "^0.33.3",
-    "stylelint": "^16.5.0",
-    "stylelint-config-standard": "^36.0.0",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.4.5"
-  }
+	"name": "yearnx",
+	"private": true,
+	"workspaces": [
+		"packages/*"
+	],
+	"scripts": {
+		"prettier-format": "prettier --config .prettierrc ./packages/**/**/*.{json,js,ts,tsx,css} --write",
+		"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+	},
+	"dependencies": {
+		"@builtbymom/web3": "0.0.218",
+		"@closeio/use-abortable-effect": "^1.0.0",
+		"@generationsoftware/hyperstructure-client-js": "^1.12.6",
+		"@generationsoftware/hyperstructure-react-hooks": "^1.16.8",
+		"@headlessui/react": "^2.0.3",
+		"@rainbow-me/rainbowkit": "^2.1.3",
+		"@react-hookz/web": "^24.0.4",
+		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/typography": "^0.5.13",
+		"@tanstack/react-query": "^5.51.21",
+		"@wagmi/core": "^2.13.1",
+		"axios": "^1.6.8",
+		"framer-motion": "^11.1.9",
+		"next": "14.0.4",
+		"next-plausible": "^3.12.1",
+		"next-pwa": "^5.6.0",
+		"rc-input-number": "^9.0.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-hot-toast": "^2.4.1",
+		"react-paginate": "^8.2.0",
+		"swr": "^2.2.5",
+		"tailwindcss": "^3.4.3",
+		"tailwindcss-animate": "^1.0.7",
+		"usehooks-ts": "^3.1.0",
+		"vaul": "^0.9.1",
+		"viem": "^2.18.8",
+		"wagmi": "^2.12.2",
+		"web3-eth-abi": "1.10.0",
+		"xxhashjs": "^0.2.2",
+		"zod": "^3.23.8"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^19.3.0",
+		"@commitlint/config-conventional": "^19.2.2",
+		"@total-typescript/ts-reset": "^0.5.1",
+		"@types/node": "^20.12.11",
+		"@types/nprogress": "^0.2.3",
+		"@types/react": "^18.3.2",
+		"@types/react-dom": "^18.3.0",
+		"@typescript-eslint/eslint-plugin": "^7.8.0",
+		"@typescript-eslint/parser": "^7.8.0",
+		"autoprefixer": "^10.4.19",
+		"babel-loader": "^9.1.3",
+		"bun-types": "^1.1.8",
+		"eslint": "8.57.0",
+		"eslint-config-next": "^14.2.3",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-import-resolver-typescript": "^3.6.1",
+		"eslint-plugin-brackets": "^0.1.3",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-react": "^7.34.1",
+		"eslint-plugin-react-hooks": "^4.6.2",
+		"eslint-plugin-simple-import-sort": "^12.1.0",
+		"eslint-plugin-tailwindcss": "^3.15.1",
+		"eslint-plugin-unused-imports": "^3.2.0",
+		"lint-staged": "^15.2.2",
+		"next-transpile-modules": "^10.0.1",
+		"postcss": "^8.4.38",
+		"postcss-import": "^16.1.0",
+		"postcss-nesting": "^12.1.3",
+		"prettier": "^3.2.5",
+		"sass": "^1.77.1",
+		"sharp": "^0.33.3",
+		"stylelint": "^16.5.0",
+		"stylelint-config-standard": "^36.0.0",
+		"ts-loader": "^9.5.1",
+		"typescript": "^5.4.5"
+	}
 }
diff --git a/packages/lib/components/common/DepositModal.tsx b/packages/lib/components/common/DepositModal.tsx
index 22ebe8c..0590446 100644
--- a/packages/lib/components/common/DepositModal.tsx
+++ b/packages/lib/components/common/DepositModal.tsx
@@ -76,7 +76,7 @@ export function DepositModalContent(props: TDepositModalProps): ReactElement {
 			openAccountModal?.();
 		}
 		if (canDeposit) {
-			const isSuccess = await onDeposit();
+			const isSuccess = await onDeposit(receipt => console.info('receipt: ', receipt));
 			if (isSuccess) {
 				plausible(PLAUSIBLE_EVENTS.DEPOSIT, {
 					props: {
@@ -92,10 +92,10 @@ export function DepositModalContent(props: TDepositModalProps): ReactElement {
 				props.openSuccessModal({
 					isOpen: true,
 					description: (
-						<div className={'flex flex-col items-center'}>
-							<p className={'text-regularText/50 whitespace-nowrap'}>{'Successfully deposited'}</p>
-
-							<div className={'flex'}>
+						<span>
+							<span className={'text-regularText/50 whitespace-nowrap'}>{'Successfully deposited'}</span>
+							&nbsp;
+							<span>
 								{!isZapNeededForDeposit
 									? configuration?.tokenToSpend.amount?.display.slice(0, 7)
 									: formatBigIntForDisplay(
@@ -103,13 +103,14 @@ export function DepositModalContent(props: TDepositModalProps): ReactElement {
 											configuration?.tokenToSpend.token?.decimals ?? 18,
 											{maximumFractionDigits: 6}
 										)}
-								<p className={'ml-1'}>{configuration?.tokenToSpend?.token?.symbol}</p>
+								&nbsp;
+								<span>{configuration?.tokenToSpend?.token?.symbol}</span>
 								<span className={'text-regularText/50'}>
 									<span className={'mx-1'}>{'to'}</span>
 									{configuration?.vault?.name}
 								</span>
-							</div>
-						</div>
+							</span>
+						</span>
 					)
 				});
 			}
diff --git a/packages/lib/components/common/WithdrawModal.tsx b/packages/lib/components/common/WithdrawModal.tsx
index e5c77ba..147c9b1 100644
--- a/packages/lib/components/common/WithdrawModal.tsx
+++ b/packages/lib/components/common/WithdrawModal.tsx
@@ -334,7 +334,9 @@ function ButtonComponent(props: {
 			onApprove?.();
 			return;
 		}
-		const isSuccess = await onWithdraw();
+
+		const isSuccess = await onWithdraw(receipt => console.info('receipt: ', receipt));
+
 		if (isSuccess) {
 			plausible(PLAUSIBLE_EVENTS.WITHDRAW, {
 				props: {
@@ -350,11 +352,11 @@ function ButtonComponent(props: {
 			props.openSuccessModal({
 				isOpen: true,
 				description: (
-					<div className={'flex flex-col items-center'}>
-						<p className={'text-regularText/50 whitespace-nowrap'}>{'Successfully withdrawn'}</p>
-
-						<div className={'flex flex-col items-center'}>
-							<div className={'flex'}>
+					<span>
+						<span className={'text-regularText/50 whitespace-nowrap'}>{'Successfully withdrawn'}</span>
+						&nbsp;
+						<span>
+							<span>
 								{!isZapNeededForWithdraw
 									? configuration?.tokenToSpend.amount?.display.slice(0, 7)
 									: formatBigIntForDisplay(
@@ -362,13 +364,13 @@ function ButtonComponent(props: {
 											quote?.outputTokenDecimals ?? 18,
 											{maximumFractionDigits: 6}
 										)}
-								<p className={'ml-1'}>{configuration?.tokenToReceive?.token?.symbol}</p>
-							</div>
+								<span className={'ml-1'}>{configuration?.tokenToReceive?.token?.symbol}</span>
+							</span>
 							<span className={'text-regularText/50'}>
 								<span className={'mx-1'}>{'to your wallet'}</span>
 							</span>
-						</div>
-					</div>
+						</span>
+					</span>
 				)
 			});
 		}
@@ -413,7 +415,7 @@ function ButtonComponent(props: {
 		return 'Withdraw';
 	}, [address, canZap, isFetchingQuote, isWalletSafe, isApproved, isZapNeededForWithdraw]);
 
-	const isWithdrawDisable =
+	const isWithdrawDisabled =
 		!props.isReady ||
 		!configuration?.tokenToSpend.amount ||
 		configuration?.tokenToSpend.amount.raw === 0n ||
@@ -423,7 +425,7 @@ function ButtonComponent(props: {
 		<Button
 			onClick={onAction}
 			isBusy={isFetchingQuote || isWithdrawing || isApproving}
-			isDisabled={isWithdrawDisable}
+			isDisabled={isWithdrawDisabled}
 			spinnerClassName={'text-background size-4 animate-spin'}
 			className={cl(
 				'text-black flex w-full justify-center regularTextspace-nowrap rounded-lg bg-regularText md:px-[34.5px] py-5 font-bold',
diff --git a/packages/lib/contexts/useSolver.tsx b/packages/lib/contexts/useSolver.tsx
index 5b418b8..50cd4a8 100644
--- a/packages/lib/contexts/useSolver.tsx
+++ b/packages/lib/contexts/useSolver.tsx
@@ -7,6 +7,7 @@ import {useVanilaSolver} from '@lib/solvers/useVanilaSolver';
 import {useManageVaults} from './useManageVaults';
 
 import type {ReactElement} from 'react';
+import type {TransactionReceipt} from 'viem';
 import type {TPermitSignature} from '@builtbymom/web3/hooks/usePermit.types';
 import type {TPortalsEstimate} from '@lib/utils/api.portals';
 
@@ -27,8 +28,14 @@ export type TSolverContextBase = {
 	permitSignature?: TPermitSignature;
 	quote: TPortalsEstimate | null;
 	onApprove: (onSuccess?: () => void, onFailure?: () => void) => Promise<boolean>;
-	onDeposit: (onSuccess?: () => void, onFailure?: () => void) => Promise<boolean>;
-	onWithdraw: (onSuccess?: () => void, onFailure?: () => void) => Promise<boolean>;
+	onDeposit: (
+		onSuccess: (receipt?: TransactionReceipt) => void,
+		onFailure?: (message?: string) => void
+	) => Promise<boolean>;
+	onWithdraw: (
+		onSuccess: (receipt?: TransactionReceipt) => void,
+		onFailure?: (message?: string) => void
+	) => Promise<boolean>;
 };
 
 /**
diff --git a/packages/lib/solvers/usePortalsSolver.ts b/packages/lib/solvers/usePortalsSolver.ts
index adb8a4d..ac295d3 100644
--- a/packages/lib/solvers/usePortalsSolver.ts
+++ b/packages/lib/solvers/usePortalsSolver.ts
@@ -1,42 +1,40 @@
 import {useCallback, useMemo, useState} from 'react';
-import toast from 'react-hot-toast';
-import {BaseError, isHex, zeroAddress} from 'viem';
+import {zeroAddress} from 'viem';
 import {useReadContract} from 'wagmi';
 import useWallet from '@builtbymom/web3/contexts/useWallet';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {useApprove} from '@builtbymom/web3/hooks/useApprove';
 import {useAsyncTrigger} from '@builtbymom/web3/hooks/useAsyncTrigger';
-import {assert, ETH_TOKEN_ADDRESS, isEthAddress, isZeroAddress, toAddress, toBigInt} from '@builtbymom/web3/utils';
-import {defaultTxStatus, retrieveConfig, toWagmiProvider} from '@builtbymom/web3/utils/wagmi';
-import {useSafeAppsSDK} from '@gnosis.pm/safe-apps-react-sdk';
+import {usePortals} from '@builtbymom/web3/hooks/usePortals';
+import {
+	ETH_TOKEN_ADDRESS,
+	fromNormalized,
+	isEthAddress,
+	isZeroAddress,
+	toAddress,
+	toBigInt,
+	toNormalizedBN,
+	zeroNormalizedBN
+} from '@builtbymom/web3/utils';
 import {useManageVaults} from '@lib/contexts/useManageVaults';
-import {getPortalsApproval, getPortalsTx, getQuote, PORTALS_NETWORK} from '@lib/utils/api.portals';
-import {isValidPortalsErrorObject} from '@lib/utils/isValidPortalsErrorObject';
-import {getApproveTransaction} from '@lib/utils/tools.gnosis';
+import {getPortalsApproval, PORTALS_NETWORK} from '@lib/utils/api.portals';
 import {VAULT_ABI} from '@lib/utils/vault.abi';
-import {sendTransaction, switchChain, waitForTransactionReceipt} from '@wagmi/core';
 
-import type {TTxResponse} from '@builtbymom/web3/utils/wagmi';
-import type {BaseTransaction} from '@gnosis.pm/safe-apps-sdk';
+import type {TransactionReceipt} from 'viem';
+import type {TToken, TTokenAmountInputElement} from '@builtbymom/web3/types';
+import type {TAssertedVaultsConfiguration} from '@lib/contexts/useManageVaults';
 import type {TSolverContextBase} from '@lib/contexts/useSolver';
-import type {TPortalsApproval, TPortalsEstimate} from '@lib/utils/api.portals';
-import type {TInitSolverArgs} from '@lib/utils/solvers';
+import type {TPortalsApproval} from '@lib/utils/api.portals';
 
 export const usePortalsSolver = (
 	isZapNeededForDeposit: boolean,
 	isZapNeededForWithdraw: boolean
 ): TSolverContextBase => {
 	const {configuration} = useManageVaults();
+	const {address, provider} = useWeb3();
 	const {onRefresh} = useWallet();
-	const {address, provider, isWalletSafe} = useWeb3();
-	const {sdk} = useSafeAppsSDK();
-	const [depositStatus, set_depositStatus] = useState(defaultTxStatus);
-	const [withdrawStatus, set_withdrawStatus] = useState(defaultTxStatus);
-	const [latestQuote, set_latestQuote] = useState<TPortalsEstimate>();
-	const [isFetchingQuote, set_isFetchingQuote] = useState(false);
-	const [canZap, set_canZap] = useState(true);
 	const [approveCtx, set_approveCtx] = useState<TPortalsApproval>();
-	const slippage = 0.25;
+	const slippage = configuration.action === 'DEPOSIT' ? 0.25 : 1;
 	const isSolverEnabled =
 		(isZapNeededForDeposit && configuration.action === 'DEPOSIT') ||
 		(isZapNeededForWithdraw && configuration.action === 'WITHDRAW');
@@ -97,21 +95,23 @@ export const usePortalsSolver = (
 				isSolverEnabled
 		}
 	});
-	const {data: amountToWithdraw} = useReadContract({
-		address: configuration.vault?.address,
-		abi: VAULT_ABI,
-		functionName: 'convertToShares',
-		args: [toBigInt(configuration?.tokenToSpend.amount?.raw)],
-		chainId: configuration.vault?.chainID,
-		query: {
-			enabled:
-				Boolean(configuration.vault) &&
-				Boolean(configuration.tokenToSpend.token) &&
-				isV3Vault &&
-				configuration.action === 'WITHDRAW' &&
-				isSolverEnabled
-		}
-	});
+
+	// const {data: amountToWithdraw} = useReadContract({
+	// 	address: configuration.vault?.address,
+	// 	abi: VAULT_ABI,
+	// 	functionName: 'convertToShares',
+	// 	args: [toBigInt(configuration?.tokenToSpend.amount?.raw)],
+	// 	chainId: configuration.vault?.chainID,
+	// 	query: {
+	// 		enabled:
+	// 			Boolean(configuration.vault) &&
+	// 			Boolean(configuration.tokenToSpend.token) &&
+	// 			isV3Vault &&
+	// 			configuration.action === 'WITHDRAW' &&
+	// 			isSolverEnabled
+	// 	}
+	// });
+
 	const {data: pricePerShare} = useReadContract({
 		address: configuration.vault?.address,
 		abi: VAULT_ABI,
@@ -140,6 +140,56 @@ export const usePortalsSolver = (
 		return isAskingToZapAll;
 	}, [configuration.tokenToSpend.amount?.raw, shareOf]);
 
+	const pps = toNormalizedBN(toBigInt(pricePerShare || 0n), configuration.vault?.token.decimals || 18);
+
+	/**********************************************************************************************
+	 ** This way we calculate the amount of yvToken based on the selected token by dividing amount
+	 ** by price per share
+	 *********************************************************************************************/
+	const vaultTokenAmount = useMemo(
+		() => (pricePerShare ? +(configuration.tokenToSpend.amount?.display || 0) / +pps.display : 0),
+		[configuration.tokenToSpend.amount?.display, pps.display, pricePerShare]
+	);
+
+	/**********************************************************************************************
+	 ** Transform vaultTokenAmount to normalized
+	 *********************************************************************************************/
+	const normalizedVaultTokenAmount = useMemo(
+		() =>
+			toNormalizedBN(
+				fromNormalized(vaultTokenAmount, configuration.vault?.token.decimals || 18),
+				configuration.vault?.token.decimals || 18
+			),
+		[configuration.vault?.token.decimals, vaultTokenAmount]
+	);
+
+	/**********************************************************************************************
+	 ** There are cases when normalizedVaultTokenAmount is slightly bigger than user's balance
+	 ** despite correct calculations (or they are not correct). To handle this, take into futher
+	 ** consideration the minimum of user balance and the calculated value.
+	 *********************************************************************************************/
+	const minNormalizedAmount = useMemo(() => {
+		// If depositing, return the input amount
+		if (configuration.action === 'DEPOSIT') {
+			return configuration.tokenToSpend.amount || zeroNormalizedBN;
+		}
+
+		// If user seems to be withdrawing full amount, return balance
+		if (toBigInt(shareOf) < normalizedVaultTokenAmount.raw || isZapingBalance) {
+			return toNormalizedBN(toBigInt(shareOf), configuration.vault?.decimals || 18);
+		}
+
+		// Return converted shares
+		return normalizedVaultTokenAmount;
+	}, [
+		configuration.action,
+		configuration.tokenToSpend.amount,
+		configuration.vault?.decimals,
+		isZapingBalance,
+		normalizedVaultTokenAmount,
+		shareOf
+	]);
+
 	/**********************************************************************************************
 	 ** The useApprove hook is used to approve the token to spend for the vault. This is used to
 	 ** allow the vault to spend the token on behalf of the user. This is required for the deposit
@@ -158,15 +208,41 @@ export const usePortalsSolver = (
 		tokenToApprove: toAddress(configuration?.tokenToSpend.token?.address),
 		spender: toAddress(approveCtx?.context.spender || zeroAddress),
 		owner: toAddress(address),
-		amountToApprove: toBigInt(configuration?.tokenToSpend.amount?.raw || 0n),
+		amountToApprove: minNormalizedAmount.raw,
 		shouldUsePermit: (approveCtx?.context.canPermit || false) && !isLegacyVault,
 		deadline: 60,
 		disabled: !isSolverEnabled
 	});
 
+	const inputAsset: TTokenAmountInputElement = useMemo(
+		() => ({
+			token: {
+				...(configuration?.tokenToSpend.token as TToken),
+				balance: zeroNormalizedBN
+			},
+			amount: minNormalizedAmount.display,
+			normalizedBigAmount: minNormalizedAmount,
+			status: 'none',
+			isValid: 'undetermined',
+			UUID: '1'
+		}),
+		[configuration?.tokenToSpend.token, minNormalizedAmount]
+	);
+
+	const {onExecuteDeposit, onRetrieveQuote, latestQuote, isFetchingQuote, isDepositing} = usePortals({
+		inputAsset,
+		outputTokenAddress:
+			configuration.action === 'DEPOSIT'
+				? configuration.vault?.address
+				: configuration.tokenToReceive.token?.address,
+		slippage: slippage.toString(),
+		permitSignature,
+		onClearPermit,
+		disabled: !isSolverEnabled
+	});
+
 	/**********************************************************************************************
 	 * Find the approve context to find the approve spender
-	 * TODO: improve comment
 	 *********************************************************************************************/
 	useAsyncTrigger(async (): Promise<void> => {
 		if (!isSolverEnabled) {
@@ -191,7 +267,7 @@ export const usePortalsSolver = (
 			params: {
 				sender: toAddress(address),
 				inputToken: `${network}:${toAddress(configuration?.tokenToSpend.token.address)}`,
-				inputAmount: toBigInt(configuration?.tokenToSpend.amount.raw).toString(),
+				inputAmount: minNormalizedAmount.raw.toString(),
 				permitDeadline: BigInt(Math.floor(Date.now() / 1000) + 60 * 60).toString()
 			}
 		});
@@ -202,78 +278,15 @@ export const usePortalsSolver = (
 		}
 		set_approveCtx(approval);
 	}, [
-		address,
 		isSolverEnabled,
-		approveCtx?.context.target,
-		configuration?.tokenToSpend?.amount?.raw,
 		configuration?.tokenToSpend.token,
-		configuration?.vault?.address
+		configuration?.tokenToSpend?.amount?.raw,
+		configuration?.vault?.address,
+		approveCtx?.context.target,
+		address,
+		minNormalizedAmount
 	]);
 
-	/**********************************************************************************************
-	 * TODO: Add comment to explain how it works
-	 *********************************************************************************************/
-	const onRetrieveQuote = useCallback(async () => {
-		const {action} = configuration;
-		if (
-			!configuration?.vault ||
-			(action === 'DEPOSIT' && !configuration.tokenToSpend.token) ||
-			(action === 'DEPOSIT' && toBigInt(configuration.tokenToSpend.amount?.raw) === 0n) ||
-			(action === 'WITHDRAW' && !configuration.tokenToReceive.token) ||
-			(action === 'WITHDRAW' && toBigInt(configuration.tokenToSpend.amount?.raw) === 0n)
-		) {
-			set_latestQuote(undefined);
-			return null;
-		}
-
-		let request: TInitSolverArgs = {} as TInitSolverArgs;
-		if (action === 'DEPOSIT') {
-			request = {
-				chainID: Number(configuration?.tokenToSpend.token?.chainID),
-				version: configuration?.vault.version,
-				from: toAddress(address),
-				inputToken: toAddress(configuration?.tokenToSpend.token?.address),
-				outputToken: toAddress(configuration.vault.address),
-				inputAmount: toBigInt(configuration?.tokenToSpend.amount?.raw),
-				isDepositing: true,
-				stakingPoolAddress: undefined
-			};
-		} else {
-			const initialAmount = toBigInt(configuration?.tokenToSpend.amount?.raw);
-			const decimals = configuration?.tokenToSpend.token?.decimals || 18;
-			const amountToUse = isV3Vault
-				? toBigInt(isZapingBalance ? shareOf : amountToWithdraw)
-				: toBigInt((initialAmount / toBigInt(pricePerShare)) * 10n ** toBigInt(decimals));
-			request = {
-				chainID: Number(configuration?.tokenToSpend.token?.chainID),
-				version: configuration?.vault.version,
-				from: toAddress(address),
-				inputToken: toAddress(configuration?.tokenToSpend.token?.address),
-				outputToken: toAddress(configuration.tokenToReceive.token?.address),
-				inputAmount: amountToUse,
-				isDepositing: true,
-				stakingPoolAddress: undefined
-			};
-		}
-
-		set_isFetchingQuote(true);
-		const {result, error} = await getQuote(request, slippage);
-		if (!result) {
-			if (error) {
-				console.error(error);
-			}
-			set_canZap(false);
-			set_latestQuote(undefined);
-			set_isFetchingQuote(false);
-			return undefined;
-		}
-		set_canZap(true);
-		set_latestQuote(result);
-		set_isFetchingQuote(false);
-
-		return result;
-	}, [configuration, address, isV3Vault, isZapingBalance, shareOf, amountToWithdraw, pricePerShare]);
-
 	/**********************************************************************************************
 	 ** SWR hook to get the expected out for a given in/out pair with a specific amount. This hook
 	 ** is called when amount/in or out changes. Calls the allowanceFetcher callback.
@@ -296,323 +309,66 @@ export const usePortalsSolver = (
 		if (configuration.action === 'DEPOSIT') {
 			onRetrieveQuote();
 		}
-		set_depositStatus(defaultTxStatus);
-		set_withdrawStatus(defaultTxStatus);
 	}, [configuration.action, isZapNeededForDeposit, isZapNeededForWithdraw, onRetrieveQuote, isSolverEnabled]);
 
 	/**********************************************************************************************
-	 * TODO: Add comment to explain how it works
+	 ** The onRefreshBalances function is used to refresh the balances of the user after an action
+	 ** has been executed. This is used to update the UI with the new balances.
 	 *********************************************************************************************/
-	const onExecuteForGnosis = useCallback(async (): Promise<boolean> => {
-		assert(provider, 'Provider is not set');
-		assert(latestQuote, 'Quote is not set');
-		assert(configuration?.tokenToSpend.token, 'Token to Spend is not set');
-		assert(configuration?.tokenToReceive.token, 'Token to Receiver is not set');
-		assert(configuration?.vault, 'Output token is not set');
-
-		const tokenToSpend = configuration?.tokenToSpend.token;
-		const tokenToReceive = configuration?.tokenToReceive.token;
-		let amountToSpend = configuration?.tokenToSpend.amount?.raw;
-
-		if (configuration.action !== 'DEPOSIT') {
-			const initialAmount = toBigInt(configuration?.tokenToSpend.amount?.raw);
-			const decimals = configuration?.tokenToSpend.token?.decimals || 18;
-			amountToSpend = isV3Vault
-				? toBigInt(isZapingBalance ? shareOf : amountToWithdraw)
-				: toBigInt((initialAmount / toBigInt(pricePerShare)) * 10n ** toBigInt(decimals));
-		}
-
-		let inputToken = tokenToSpend.address;
-		const outputToken = configuration?.action === 'DEPOSIT' ? configuration?.vault.address : tokenToReceive.address;
-		if (isEthAddress(inputToken)) {
-			inputToken = zeroAddress;
-		}
-
-		const network = PORTALS_NETWORK.get(tokenToSpend.chainID);
-		const transaction = await getPortalsTx({
-			params: {
-				sender: toAddress(address),
-				inputToken: `${network}:${toAddress(inputToken)}`,
-				outputToken: `${network}:${toAddress(outputToken)}`,
-				inputAmount: toBigInt(amountToSpend).toString(),
-				slippageTolerancePercentage: slippage.toString(),
-				validate: isWalletSafe ? 'false' : 'true'
-			}
-		});
-
-		if (!transaction.result) {
-			console.error(new Error('Transaction data was not fetched from Portals!'));
-			return false;
-		}
-
-		const {
-			tx: {value, to, data}
-		} = transaction.result;
-
-		const batch = [];
-
-		if (!isZeroAddress(inputToken)) {
-			const approveTransactionForBatch = getApproveTransaction(
-				toBigInt(configuration?.tokenToSpend.amount?.raw).toString(),
-				toAddress(configuration?.tokenToSpend.token.address),
-				toAddress(to)
-			);
-
-			batch.push(approveTransactionForBatch);
-		}
-
-		const portalsTransactionForBatch: BaseTransaction = {
-			to: toAddress(to),
-			value: toBigInt(value ?? 0n).toString(),
-			data
-		};
-
-		batch.push(portalsTransactionForBatch);
-
-		let result;
-		try {
-			const res = sdk.txs.send({txs: batch});
-			do {
-				result = await sdk.txs.getBySafeTxHash((await res).safeTxHash);
-				await new Promise(resolve => setTimeout(resolve, 30_000));
-			} while (result.txStatus !== 'SUCCESS' && result.txStatus !== 'FAILED' && result.txStatus !== 'CANCELLED');
+	const onRefreshBalances = useCallback(
+		async (config: TAssertedVaultsConfiguration): Promise<void> => {
 			await onRefresh(
 				[
-					{chainID: configuration?.vault.chainID, address: configuration?.vault.address},
-					{chainID: configuration?.vault.chainID, address: configuration?.vault.token.address},
-					{chainID: tokenToSpend.chainID, address: tokenToSpend.address},
-					{chainID: tokenToReceive.chainID, address: tokenToReceive.address},
-					{chainID: tokenToSpend.chainID, address: ETH_TOKEN_ADDRESS}
+					{chainID: config.vault.chainID, address: config.vault.address},
+					{chainID: config.vault.chainID, address: config.vault.token.address},
+					{chainID: config.vault.chainID, address: config.tokenToSpend.token.address},
+					{chainID: config.vault.chainID, address: config.tokenToReceive.token.address},
+					{chainID: config.vault.chainID, address: ETH_TOKEN_ADDRESS}
 				],
 				false,
 				true
 			);
-		} catch (err) {
-			console.error(err);
-		}
-		return result?.txStatus === 'SUCCESS';
-	}, [
-		provider,
-		latestQuote,
-		configuration?.tokenToSpend.token,
-		configuration?.tokenToSpend.amount?.raw,
-		configuration?.tokenToReceive.token,
-		configuration?.vault,
-		configuration.action,
-		address,
-		isWalletSafe,
-		isV3Vault,
-		isZapingBalance,
-		shareOf,
-		amountToWithdraw,
-		pricePerShare,
-		sdk.txs,
-		onRefresh
-	]);
+		},
+		[onRefresh]
+	);
 
 	/**********************************************************************************************
-	 * execute will send the post request to execute the order and wait for it to be executed, no
-	 * matter the result. It returns a boolean value indicating whether the order was successful or
-	 * not.
+	 ** Trigger a deposit web3 action, simply trying to deposit `amount` tokens to
+	 ** the selected vault.
 	 *********************************************************************************************/
-	const execute = useCallback(async (): Promise<TTxResponse> => {
-		assert(provider, 'Provider is not set');
-		assert(latestQuote, 'Quote is not set');
-		assert(configuration?.tokenToSpend.token, 'Token to Spend is not set');
-		assert(configuration?.tokenToReceive.token, 'Token to Receiver is not set');
-		assert(configuration?.vault, 'Output token is not set');
-		const tokenToSpend = configuration?.tokenToSpend.token;
-		const tokenToReceive = configuration?.tokenToReceive.token;
-		const vault = configuration?.vault;
-		let amountToSpend = configuration?.tokenToSpend.amount?.raw;
-
-		if (configuration?.action !== 'DEPOSIT') {
-			const initialAmount = toBigInt(configuration?.tokenToSpend.amount?.raw);
-			const decimals = configuration?.tokenToSpend.token?.decimals || 18;
-			amountToSpend = isV3Vault
-				? toBigInt(isZapingBalance ? shareOf : amountToWithdraw)
-				: toBigInt((initialAmount / toBigInt(pricePerShare)) * 10n ** toBigInt(decimals));
-		}
-
-		try {
-			const wProvider = await toWagmiProvider(provider);
-
-			/**********************************************************************************
-			 ** Based on the flow of the transaction, we need to set the input token to the
-			 ** token to spend, and the output token to the vault or the token to receive.
-			 *********************************************************************************/
-			let inputToken = tokenToSpend.address;
-			const outputToken = configuration?.action === 'DEPOSIT' ? vault.address : tokenToReceive.address;
-			if (isEthAddress(inputToken)) {
-				inputToken = zeroAddress;
-			}
-
-			/**********************************************************************************
-			 ** We can ask the Portals solver to prepare the transaction for us. We need to
-			 ** provide the sender, input token, output token, input amount, and slippage
-			 ** tolerance.
-			 *********************************************************************************/
-			const network = PORTALS_NETWORK.get(tokenToSpend.chainID);
-			const transaction = await getPortalsTx({
-				params: {
-					sender: toAddress(address),
-					inputToken: `${network}:${toAddress(inputToken)}`,
-					outputToken: `${network}:${toAddress(outputToken)}`,
-					inputAmount: toBigInt(amountToSpend).toString(),
-					slippageTolerancePercentage: slippage.toString(),
-					validate: isWalletSafe ? 'false' : 'true',
-					permitSignature: permitSignature?.signature || undefined,
-					permitDeadline: permitSignature?.deadline ? permitSignature.deadline.toString() : undefined
-				}
-			});
-
-			if (!transaction.result) {
-				throw new Error('Transaction data was not fetched from Portals!');
-			}
-			const {tx} = transaction.result;
-			const {value, to, data, ...rest} = tx;
-
-			/**********************************************************************************
-			 ** If the user tries to deposit or withdraw from a different chain than the one
-			 ** the token is on, we need to switch the chain before performing the transaction.
-			 *********************************************************************************/
-			if (
-				(configuration?.action === 'DEPOSIT' && wProvider.chainId !== tokenToSpend.chainID) ||
-				(configuration?.action === 'WITHDRAW' && wProvider.chainId !== tokenToReceive.chainID)
-			) {
-				try {
-					await switchChain(retrieveConfig(), {
-						chainId:
-							configuration?.action === 'DEPOSIT' ? tokenToSpend.chainID : Number(tokenToReceive.chainID)
-					});
-				} catch (error) {
-					if (!(error instanceof BaseError)) {
-						return {isSuccessful: false, error};
-					}
-					console.error(error.shortMessage);
-
-					return {isSuccessful: false, error};
-				}
-			}
-
-			/**********************************************************************************
-			 ** We assert that the data is in hex format and that the wallet client is set
-			 ** before sending the transaction prepared by the Portals solver.
-			 ** Once it's done and we have the receipt, we need to update the balances of all
-			 ** the tokens involved in the transaction
-			 *********************************************************************************/
-			assert(isHex(data), 'Data is not hex');
-			assert(wProvider.walletClient, 'Wallet client is not set');
-			const hash = await sendTransaction(retrieveConfig(), {
-				value: toBigInt(value ?? 0),
-				to: toAddress(to),
-				data,
-				chainId: tokenToSpend.chainID,
-				// gas: 20000000n,
-				...rest
-			});
-			const receipt = await waitForTransactionReceipt(retrieveConfig(), {
-				chainId: wProvider.chainId,
-				hash
-			});
-			if (receipt.status === 'success') {
-				await onRefresh(
-					[
-						{chainID: vault.chainID, address: vault.address},
-						{chainID: vault.chainID, address: vault.token.address},
-						{chainID: tokenToSpend.chainID, address: tokenToSpend.address},
-						{chainID: tokenToReceive.chainID, address: tokenToReceive.address},
-						{chainID: tokenToSpend.chainID, address: ETH_TOKEN_ADDRESS}
-					],
-					false,
-					true
-				);
-				return {isSuccessful: true, receipt: receipt};
-			}
-
-			console.error('Fail to perform transaction');
-			return {isSuccessful: false};
-		} catch (error) {
-			if (isValidPortalsErrorObject(error)) {
-				const errorMessage = error.response.data.message;
-				toast.error(errorMessage);
-				console.error(errorMessage);
-			} else {
-				toast.error((error as BaseError).shortMessage || 'An error occured while creating your transaction!');
-				console.error(error);
-			}
-
-			return {isSuccessful: false};
-		} finally {
+	const onDeposit = useCallback(
+		async (onSuccess: (receipt: TransactionReceipt) => void): Promise<boolean> => {
+			const isSuccess = await onExecuteDeposit(onSuccess);
 			onClearPermit();
-		}
-	}, [
-		address,
-		amountToWithdraw,
-		configuration?.action,
-		configuration?.tokenToReceive.token,
-		configuration?.tokenToSpend.amount?.raw,
-		configuration?.tokenToSpend.token,
-		configuration?.vault,
-		isV3Vault,
-		isWalletSafe,
-		isZapingBalance,
-		latestQuote,
-		onClearPermit,
-		onRefresh,
-		permitSignature?.deadline,
-		permitSignature?.signature,
-		pricePerShare,
-		provider,
-		shareOf
-	]);
-
-	/**********************************************************************************************
-	 ** This execute function is not an actual deposit/withdraw, but a swap using the Portals
-	 ** solver. The deposit will be executed by the Portals solver by simply swapping the input
-	 ** token for the output token.
-	 *********************************************************************************************/
-	const onExecuteDeposit = useCallback(async (): Promise<boolean> => {
-		assert(provider, 'Provider is not set');
-
-		if (isWalletSafe) {
-			return await onExecuteForGnosis();
-		}
-
-		set_depositStatus({...defaultTxStatus, pending: true});
-		const status = await execute();
-		set_depositStatus({...defaultTxStatus, success: status.isSuccessful});
-		return status.isSuccessful;
-	}, [execute, isWalletSafe, onExecuteForGnosis, provider]);
-
-	const onExecuteWithdraw = useCallback(async (): Promise<boolean> => {
-		assert(provider, 'Provider is not set');
-
-		if (isWalletSafe) {
-			return await onExecuteForGnosis();
-		}
-
-		set_withdrawStatus({...defaultTxStatus, pending: true});
-		const status = await execute();
-		set_withdrawStatus({...defaultTxStatus, success: status.isSuccessful});
-		return status.isSuccessful;
-	}, [execute, isWalletSafe, onExecuteForGnosis, provider]);
+			if (isSuccess) {
+				onRefreshBalances(configuration as TAssertedVaultsConfiguration);
+			}
+			return isSuccess;
+		},
+		[configuration, onClearPermit, onExecuteDeposit, onRefreshBalances]
+	);
 
 	return {
 		isApproved,
 		isApproving,
-		canDeposit: isApproved && !isApproving && !isFetchingQuote && canZap,
-		isDepositing: depositStatus.pending,
+		canDeposit: isApproved && !isApproving && !isFetchingQuote && !!latestQuote,
+		isDepositing: configuration.action === 'DEPOSIT' && isDepositing,
 		allowance: amountApproved,
 		permitSignature,
 		onApprove,
-		onDeposit: onExecuteDeposit,
-		onWithdraw: onExecuteWithdraw,
-		isWithdrawing: withdrawStatus.pending,
-		canZap,
+		onDeposit,
+		onWithdraw: onDeposit,
+		isWithdrawing: configuration.action === 'WITHDRAW' && isDepositing,
+		canZap: !!latestQuote && !isFetchingQuote,
 		isFetchingQuote,
 		quote: latestQuote || null,
 		maxWithdraw: 0n,
-		vaultBalanceOf: toBigInt(balanceOf)
+		vaultBalanceOf: balanceOf
+			? toBigInt(balanceOf)
+			: toNormalizedBN(
+					(toBigInt(shareOf) * toBigInt(pricePerShare)) /
+						toBigInt(10 ** (configuration?.tokenToSpend?.token?.decimals || 18)),
+					configuration.vault?.decimals || 18
+				).raw
 	};
 };