useBridge

package.json

@@ -1,84 +1,84 @@
 {
-  "name": "monogimme",
-  "private": true,
-  "workspaces": [
-    "packages/*"
-  ],
-  "scripts": {
-    "prettier-format": "prettier --config .prettierrc ./packages/**/**/*.{json,js,ts,tsx,css,md} --write",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
-  },
-  "dependencies": {
-    "@builtbymom/web3": "0.0.193",
-    "@gnosis.pm/safe-apps-sdk": "^7.8.0",
-    "@headlessui/react": "^2.0.4",
-    "@lifi/sdk": "3.2.3",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@rainbow-me/rainbowkit": "2.1.3",
-    "@react-hookz/web": "^24.0.4",
-    "@rive-app/canvas": "^2.9.2",
-    "@rive-app/react-canvas": "^4.6.2",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
-    "@tanstack/react-query": "^5.45.0",
-    "@wagmi/core": "^2.12.2",
-    "axios": "^1.7.2",
-    "cmdk": "^1.0.0",
-    "dompurify": "^3.1.5",
-    "framer-motion": "^11.2.6",
-    "next": "14.0.4",
-    "next-plausible": "^3.12.0",
-    "next-pwa": "^5.6.0",
-    "rc-input-number": "^9.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hot-toast": "^2.4.1",
-    "tailwindcss": "^3.4.3",
-    "tailwindcss-animate": "^1.0.7",
-    "use-indexeddb": "^2.0.2",
-    "usehooks-ts": "^3.1.0",
-    "vaul": "^1.0.0",
-    "viem": "2.17.3",
-    "wagmi": "2.10.10",
-    "web3-eth-abi": "1.10.0",
-    "xxhashjs": "^0.2.2"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.5",
-    "prettier": "^3.2.5",
-    "stylelint": "^16.6.0",
-    "stylelint-config-standard": "^36.0.0",
-    "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",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "typescript": "^5.4.5",
-    "ts-loader": "^9.5.1",
-    "@total-typescript/ts-reset": "^0.5.1",
-    "@types/node": "^20.12.12",
-    "@types/nprogress": "^0.2.3",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/bun": "latest",
-    "bun-types": "^1.1.10",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "postcss-import": "^16.1.0",
-    "postcss-nesting": "^12.1.5",
-    "sass": "^1.77.2",
-    "sharp": "^0.33.4"
-  }
+	"name": "monogimme",
+	"private": true,
+	"workspaces": [
+		"packages/*"
+	],
+	"scripts": {
+		"prettier-format": "prettier --config .prettierrc ./packages/**/**/*.{json,js,ts,tsx,css,md} --write",
+		"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+	},
+	"dependencies": {
+		"@builtbymom/web3": "0.0.218",
+		"@gnosis.pm/safe-apps-sdk": "^7.8.0",
+		"@headlessui/react": "^2.0.4",
+		"@lifi/sdk": "^3.4.0",
+		"@radix-ui/react-popover": "^1.0.7",
+		"@radix-ui/react-switch": "^1.1.0",
+		"@rainbow-me/rainbowkit": "2.1.3",
+		"@react-hookz/web": "^24.0.4",
+		"@rive-app/canvas": "^2.9.2",
+		"@rive-app/react-canvas": "^4.6.2",
+		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/typography": "^0.5.13",
+		"@tanstack/react-query": "^5.45.0",
+		"@wagmi/core": "^2.12.2",
+		"axios": "^1.7.2",
+		"cmdk": "^1.0.0",
+		"dompurify": "^3.1.5",
+		"framer-motion": "^11.2.6",
+		"next": "14.0.4",
+		"next-plausible": "^3.12.0",
+		"next-pwa": "^5.6.0",
+		"rc-input-number": "^9.1.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-hot-toast": "^2.4.1",
+		"tailwindcss": "^3.4.3",
+		"tailwindcss-animate": "^1.0.7",
+		"use-indexeddb": "^2.0.2",
+		"usehooks-ts": "^3.1.0",
+		"vaul": "^1.0.0",
+		"viem": "2.21.16",
+		"wagmi": "2.10.10",
+		"web3-eth-abi": "1.10.0",
+		"xxhashjs": "^0.2.2"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^19.3.0",
+		"@commitlint/config-conventional": "^19.2.2",
+		"husky": "^9.0.11",
+		"lint-staged": "^15.2.5",
+		"prettier": "^3.2.5",
+		"stylelint": "^16.6.0",
+		"stylelint-config-standard": "^36.0.0",
+		"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",
+		"@typescript-eslint/eslint-plugin": "^7.8.0",
+		"@typescript-eslint/parser": "^7.8.0",
+		"typescript": "^5.4.5",
+		"ts-loader": "^9.5.1",
+		"@total-typescript/ts-reset": "^0.5.1",
+		"@types/node": "^20.12.12",
+		"@types/nprogress": "^0.2.3",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@types/bun": "latest",
+		"bun-types": "^1.1.10",
+		"autoprefixer": "^10.4.19",
+		"postcss": "^8.4.38",
+		"postcss-import": "^16.1.0",
+		"postcss-nesting": "^12.1.5",
+		"sass": "^1.77.2",
+		"sharp": "^0.33.4"
+	}
 }

packages/gimme/components/Earn/EarnWizard.tsx

@@ -12,6 +12,7 @@ import {useCurrentChain} from '@lib/hooks/useCurrentChain';
 import {Button} from '@lib/primitives/Button';
 
 import type {ReactElement} from 'react';
+import type {TransactionReceipt} from 'viem';
 
 export function EarnWizard(): ReactElement {
 	const {onRefresh, getBalance} = useWallet();
@@ -112,11 +113,12 @@ export function EarnWizard(): ReactElement {
 		onApprove,
 		isApproved,
 		isFetchingAllowance,
-		approvalStatus,
 		onExecuteDeposit,
-		depositStatus,
-		onExecuteForGnosis,
 		isFetchingQuote,
+		isDepositing,
+		isApproving,
+		onDepositSuccessForSolver,
+		onDepositFailureForSolver,
 		quote
 	} = useDepositSolver();
 
@@ -136,19 +138,23 @@ export function EarnWizard(): ReactElement {
 		onResetDeposit();
 	}, [onResetDeposit]);
 
-	const onDepositSuccess = useCallback(() => {
-		onRefreshTokens('DEPOSIT');
-	}, [onRefreshTokens]);
+	const onDepositSuccess = useCallback(
+		(receipt?: TransactionReceipt) => {
+			onRefreshTokens('DEPOSIT');
+			console.log(receipt);
+			if (receipt) {
+				onDepositSuccessForSolver?.(receipt);
+			}
+		},
+		[onDepositSuccessForSolver, onRefreshTokens]
+	);
 
 	const onAction = useCallback(async () => {
-		if (isWalletSafe) {
-			return onExecuteForGnosis(onDepositSuccess);
-		}
 		if (isApproved) {
-			return onExecuteDeposit(onDepositSuccess);
+			return onExecuteDeposit(onDepositSuccess, onDepositFailureForSolver);
 		}
 		return onApprove(() => onRefreshTokens('APPROVE'));
-	}, [isApproved, isWalletSafe, onApprove, onDepositSuccess, onExecuteDeposit, onExecuteForGnosis, onRefreshTokens]);
+	}, [isApproved, onApprove, onDepositFailureForSolver, onDepositSuccess, onExecuteDeposit, onRefreshTokens]);
 
 	const isValid = useMemo((): boolean => {
 		if (isAboveBalance) {
@@ -195,7 +201,7 @@ export function EarnWizard(): ReactElement {
 		return 'Approve';
 	};
 
-	const isBusy = depositStatus.pending || approvalStatus.pending || isFetchingAllowance || isFetchingQuote;
+	const isBusy = isDepositing || isApproving || isFetchingAllowance || isFetchingQuote;
 
 	return (
 		<div className={'col-span-12'}>

packages/gimme/components/Portfolio/Withdraw/ToToken.tsx

@@ -1,4 +1,4 @@
-import {type ReactElement, useCallback} from 'react';
+import {type ReactElement, type ReactNode, useCallback} from 'react';
 import {usePlausible} from 'next-plausible';
 import {formatCounterValue, formatTAmount, toBigInt, toNormalizedValue} from '@builtbymom/web3/utils';
 import {ImageWithFallback} from '@lib/common/ImageWithFallback';
@@ -30,14 +30,20 @@ function ReceivingAmount(props: {
 		);
 	}
 
-	if (props.isFetchingQuote || !props.quote) {
+	if (props.isFetchingQuote) {
 		return (
 			<div className={'flex h-8 w-28 flex-col justify-center'}>
 				<div className={'skeleton-lg h-4 w-full'} />
 			</div>
 		);
 	}
 
+	if (!props.quote) {
+		return (
+			<p className={'text-grey-700 text-sm font-medium'}>{'Sorry! No possible routes found for this config'}</p>
+		);
+	}
+
 	return (
 		<p className={'text-grey-800 text-lg'}>
 			{formatTAmount({
@@ -54,7 +60,7 @@ function FiatReceivingValue(props: {
 	isZapNeeded: boolean;
 	isFetchingQuote: boolean;
 	quote: TPortalsEstimate | null;
-}): ReactElement {
+}): ReactNode {
 	const {configuration} = useWithdrawSolver();
 
 	if (!props.isZapNeeded) {
@@ -65,14 +71,18 @@ function FiatReceivingValue(props: {
 		);
 	}
 
-	if (props.isFetchingQuote || !props.quote) {
+	if (props.isFetchingQuote) {
 		return (
 			<div className={'flex h-4 w-10 flex-col justify-center'}>
 				<div className={'skeleton-lg h-3 w-full'} />
 			</div>
 		);
 	}
 
+	if (!props.quote) {
+		return null;
+	}
+
 	return (
 		<p className={'text-grey-700 text-xs'}>
 			{formatCounterValue(
@@ -111,9 +121,15 @@ export function ToToken(): ReactElement {
 		onOpenCurtain(token => onSetAssetToReceive(token), {
 			forceDisplayChainID: configuration.asset.token?.chainID,
 			shouldBypassBalanceCheck: true,
-			highlightedTokens: [configuration.asset.token as TToken]
+			highlightedTokens: [configuration.tokenToReceive as TToken]
 		});
-	}, [configuration.asset.token, onOpenCurtain, onSetAssetToReceive, plausible]);
+	}, [
+		configuration.asset.token?.chainID,
+		configuration.tokenToReceive,
+		onOpenCurtain,
+		onSetAssetToReceive,
+		plausible
+	]);
 
 	return (
 		<div className={'outline-grey-200 flex w-full items-center justify-between rounded-2xl p-4 outline sm:px-6'}>

packages/gimme/components/Portfolio/Withdraw/WithdrawButton.tsx

@@ -19,14 +19,13 @@ export function WithdrawButton(props: {onClose: () => void}): ReactElement {
 	const {
 		onExecuteWithdraw,
 		onExecuteDeposit: onExecutePortalsWithdraw,
-		onExecuteForGnosis: onExecuteWithdrawForGnosis,
 		isApproved,
+		isWithdrawing,
+		isApproving,
+		isDepositing: isWithdrawingPortals,
 		isFetchingAllowance,
 		onApprove,
-		approvalStatus,
-		depositStatus: portalsWithdrawStatus,
-		quote,
-		withdrawStatus
+		quote
 	} = useWithdrawSolver();
 	const chain = useCurrentChain();
 
@@ -154,12 +153,6 @@ export function WithdrawButton(props: {onClose: () => void}): ReactElement {
 	 ** 3. Zap is needed - approve token first and use portals deposit
 	 *****************************************************************************************/
 	const onAction = useCallback(async () => {
-		if (isWalletSafe && isZapNeeded) {
-			return onExecuteWithdrawForGnosis(() => {
-				triggerPlausibleEvent();
-				onRefreshTokens('WITHDRAW');
-			});
-		}
 		if (!isZapNeeded) {
 			return onExecuteWithdraw(() => {
 				triggerPlausibleEvent();
@@ -174,11 +167,9 @@ export function WithdrawButton(props: {onClose: () => void}): ReactElement {
 			onRefreshTokens('WITHDRAW');
 		});
 	}, [
-		isWalletSafe,
 		isZapNeeded,
 		isApproved,
 		onExecutePortalsWithdraw,
-		onExecuteWithdrawForGnosis,
 		triggerPlausibleEvent,
 		onRefreshTokens,
 		onExecuteWithdraw,
@@ -189,8 +180,8 @@ export function WithdrawButton(props: {onClose: () => void}): ReactElement {
 	 ** Display loader if anything is being fetched or in the process
 	 *****************************************************************************************/
 	const isBusy = useMemo(() => {
-		return withdrawStatus.pending || isFetchingAllowance || portalsWithdrawStatus.pending || approvalStatus.pending;
-	}, [approvalStatus.pending, isFetchingAllowance, portalsWithdrawStatus.pending, withdrawStatus.pending]);
+		return isWithdrawing || isFetchingAllowance || isWithdrawingPortals || isApproving;
+	}, [isApproving, isFetchingAllowance, isWithdrawing, isWithdrawingPortals]);
 
 	/******************************************************************************************
 	 ** Disable button if: