From fe30978c4a6b5081684775192445673dfac645e9 Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Sun, 21 Jan 2024 17:37:55 +0100 Subject: [PATCH] fix: toast hook --- apps/web/src/api/hooks.ts | 95 ++++++++++++++++++++++ apps/web/src/components/BorrowedAssets.tsx | 2 +- apps/web/src/components/SuppliedAssets.tsx | 2 +- apps/web/src/hooks/useWithdrawAsset.ts | 30 ++++++- apps/web/src/pages/Home.tsx | 4 +- 5 files changed, 127 insertions(+), 6 deletions(-) diff --git a/apps/web/src/api/hooks.ts b/apps/web/src/api/hooks.ts index debfc8b..0436178 100644 --- a/apps/web/src/api/hooks.ts +++ b/apps/web/src/api/hooks.ts @@ -6,6 +6,10 @@ import { useLfghoClients } from '@repo/lfgho-sdk'; import { Address } from 'viem'; +import { useToast } from '@chakra-ui/toast'; +import { useQueryClient } from '@tanstack/react-query'; +import { useRef } from 'react'; +import { usePublicClient } from 'wagmi'; /** * Get the balance of an address from a provider @@ -56,3 +60,94 @@ export const useERC20Balance = (tokenAddress?: Address) => { enabled: !!sender }); }; + +export const useActionWithToastAndRefresh = () => { + const toast = useToast(); + const queryClient = useQueryClient(); + const toastLoading1Ref = useRef(); + const toastLoading2Ref = useRef(); + const publicClient = usePublicClient(); + const actionWithToastAndRefresh = async ( + callback: () => Promise<`0x${string}` | undefined>, + toasts: { + success: { + title: string | ((s: string) => string); + description: string | ((s: string) => string); + }; + error: { + title: string; + description: string; + }; + loadingTransactionCreation: { + title: string; + description: string; + }; + loadingReciptConfirmation: { + title: string | ((s: string) => string); + description: string | ((s: string) => string); + }; + } + ) => { + try { + toastLoading1Ref.current = toast({ + position: 'bottom-left', + title: toasts.loadingTransactionCreation.title, + description: toasts.loadingTransactionCreation.description, + status: 'warning', + duration: null + }); + const transaction = await callback(); + toast.close(toastLoading1Ref.current); + toastLoading2Ref.current = toast({ + position: 'bottom-left', + title: + typeof toasts.loadingReciptConfirmation.title === 'function' + ? toasts.loadingReciptConfirmation.title(transaction!) + : toasts.loadingReciptConfirmation.title, + description: + typeof toasts.loadingReciptConfirmation.description === + 'function' + ? toasts.loadingReciptConfirmation.description( + transaction! + ) + : toasts.loadingReciptConfirmation.description, + status: 'warning', + duration: null + }); + if (transaction) { + await publicClient.waitForTransactionReceipt({ + hash: transaction + }); + } + toast.close(toastLoading2Ref.current); + toast({ + position: 'bottom-left', + title: + typeof toasts.success.title === 'function' + ? toasts.success.title(transaction!) + : toasts.success.title, + description: + typeof toasts.success.description === 'function' + ? toasts.success.description(transaction!) + : toasts.success.description, + status: 'success', + duration: 3000, + isClosable: true + }); + } catch (e) { + toastLoading1Ref.current && toast.close(toastLoading1Ref.current); + toastLoading2Ref.current && toast.close(toastLoading2Ref.current); + toast({ + position: 'bottom-left', + title: toasts.error.title, + description: toasts.error.description, + status: 'error', + duration: 3000, + isClosable: true + }); + } + + queryClient.refetchQueries(); + }; + return actionWithToastAndRefresh; +}; diff --git a/apps/web/src/components/BorrowedAssets.tsx b/apps/web/src/components/BorrowedAssets.tsx index 9f9b90f..524fe59 100644 --- a/apps/web/src/components/BorrowedAssets.tsx +++ b/apps/web/src/components/BorrowedAssets.tsx @@ -38,7 +38,7 @@ export const BorrowedAssets = ({ address }: Props) => { Borrowed Assets - + Total borrowed diff --git a/apps/web/src/components/SuppliedAssets.tsx b/apps/web/src/components/SuppliedAssets.tsx index 0441acc..44da18f 100644 --- a/apps/web/src/components/SuppliedAssets.tsx +++ b/apps/web/src/components/SuppliedAssets.tsx @@ -40,7 +40,7 @@ export const SuppliedAssets = ({ address }: Props) => { Supplied Assets - + Total collateral diff --git a/apps/web/src/hooks/useWithdrawAsset.ts b/apps/web/src/hooks/useWithdrawAsset.ts index 65227a9..dc394aa 100644 --- a/apps/web/src/hooks/useWithdrawAsset.ts +++ b/apps/web/src/hooks/useWithdrawAsset.ts @@ -1,5 +1,5 @@ import { useMutation } from 'wagmi'; -import { createWithdrawTx } from '@/api'; +import { createWithdrawTx, useActionWithToastAndRefresh } from '@/api'; import { LPWithdrawParamsType } from '@aave/aave-utilities/packages/contract-helpers/dist/esm/v3-pool-contract/lendingPoolTypes'; import { useAaveContracts } from '@/providers'; import { useAccountAdapter } from './useAccountAdapter'; @@ -19,6 +19,8 @@ type Props = { export const useWithdrawAsset = ({ amount, reserve }: Props) => { const { sendTransaction, account } = useAccountAdapter(); + const actionWithToastAndRefresh = useActionWithToastAndRefresh(); + const { poolContract } = useAaveContracts(); const withdrawAsset = async () => { @@ -38,7 +40,29 @@ export const useWithdrawAsset = ({ amount, reserve }: Props) => { console.log({ txs }); console.log('Submitting txs...'); - await sendTransaction({ txs }); + return await sendTransaction({ txs }); + }; + + const withdrawWithToast = async () => { + await actionWithToastAndRefresh(withdrawAsset, { + success: { + title: 'Withdraw Successful', + description: (tx) => + `Your assets have been withdrawn with transaction ${tx}` + }, + error: { + title: 'Error Withdrawing', + description: 'Retry later' + }, + loadingTransactionCreation: { + title: 'Withdraw in progress', + description: `Creating transaction...` + }, + loadingReciptConfirmation: { + title: 'Withdraw in progress', + description: (tx) => `waiting for transaction ${tx}` + } + }); }; const { @@ -47,7 +71,7 @@ export const useWithdrawAsset = ({ amount, reserve }: Props) => { error, mutate: withdraw } = useMutation({ - mutationFn: withdrawAsset + mutationFn: withdrawWithToast }); return { diff --git a/apps/web/src/pages/Home.tsx b/apps/web/src/pages/Home.tsx index e96701c..116d277 100644 --- a/apps/web/src/pages/Home.tsx +++ b/apps/web/src/pages/Home.tsx @@ -55,11 +55,13 @@ export const Home = ({ wallet }: Props) => { // ); const { - isOpen: isShowAdvanced, + isOpen, onOpen: showAdvanced, onClose: hideAdvanced } = useDisclosure(); + const isShowAdvanced = true; + const { data: balance } = useBalance({ address: wallet }); return (