fix: toast hook

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<string | number>();
+ const toastLoading2Ref = useRef<string | number>();
+ 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;
+};

apps/web/src/components/BorrowedAssets.tsx

@@ -38,7 +38,7 @@ export const BorrowedAssets = ({ address }: Props) => {
  <CardHeader>
  <HStack w="full" justify="space-between">
  <Heading fontSize={'2xl'}>Borrowed Assets</Heading>
- <Box>
+ <Box textAlign={'right'}>
  <Heading size="xs" color="orange">
  Total borrowed
  </Heading>

apps/web/src/components/SuppliedAssets.tsx

@@ -40,7 +40,7 @@ export const SuppliedAssets = ({ address }: Props) => {
  <CardHeader>
  <HStack w="full" justify="space-between">
  <Heading fontSize={'2xl'}>Supplied Assets</Heading>
- <Box>
+ <Box textAlign={'right'}>
  <Heading size="xs" color="green">
  Total collateral
  </Heading>

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 {

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 (