From d1c5f3530bd6e4cd29e6d64ffc81194ad90d1c63 Mon Sep 17 00:00:00 2001 From: Stephen Gordon Date: Tue, 26 Mar 2024 12:41:29 +0000 Subject: [PATCH] moved hook into tx page to fix bug --- .../Features/balance/balanceSlice.tsx | 41 +++++++++++++---- src/app/components/Success/Success.tsx | 6 ++- src/app/hooks/useFindPayeeName.tsx | 8 ++-- src/app/hooks/useGetBalance.tsx | 27 ++++++++++- src/app/hooks/useGetTokenBalance.tsx | 4 +- src/app/tx/page.tsx | 46 +++++++++++++++---- 6 files changed, 103 insertions(+), 29 deletions(-) diff --git a/src/GlobalRedux/Features/balance/balanceSlice.tsx b/src/GlobalRedux/Features/balance/balanceSlice.tsx index 0e3aaee..b56a090 100644 --- a/src/GlobalRedux/Features/balance/balanceSlice.tsx +++ b/src/GlobalRedux/Features/balance/balanceSlice.tsx @@ -1,24 +1,47 @@ -'use client'; - -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; - +import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; +import useGetBalance from '@/app/hooks/useGetBalance'; interface BalanceState { value: string | undefined; + status: 'idle' | 'loading' | 'succeeded' | 'failed'; + error: string | null; } const initialState: BalanceState = { value: '', + status: 'idle', + error: null, }; +export const fetchBalance = createAsyncThunk( + 'balance/fetchBalance', + async (address: string) => { + try { + const balance = await useGetBalance(address); + return balance; + } catch (error) { + throw new Error('Failed to fetch balance'); + } + } +); + const balanceSlice = createSlice({ name: 'balance', initialState, - reducers: { - setBalance: (state, action: PayloadAction) => { - state.value = action.payload; - }, + reducers: {}, + extraReducers: (builder) => { + builder + .addCase(fetchBalance.pending, (state) => { + state.status = 'loading'; + }) + .addCase(fetchBalance.fulfilled, (state, action) => { + state.status = 'succeeded'; + state.value = action.payload; + }) + .addCase(fetchBalance.rejected, (state, action) => { + state.status = 'failed'; + state.error = action.error.message ?? 'Failed to fetch balance'; + }); }, }); -export const { setBalance } = balanceSlice.actions; export default balanceSlice.reducer; diff --git a/src/app/components/Success/Success.tsx b/src/app/components/Success/Success.tsx index 8d2feac..911c592 100644 --- a/src/app/components/Success/Success.tsx +++ b/src/app/components/Success/Success.tsx @@ -44,6 +44,7 @@ export default function Success({ useEffect(() => { if (transactionStatus) { + console.log('tx successful, getting data', transactionStatus); const getData = async () => { try { const recentTransactions = await useGetRecentTransactions(address); @@ -54,10 +55,11 @@ export default function Success({ }; getData(); + console.log("got data") setTimeout(() => { - const updateUserBalance = useGetBalance(address as string); - router.push(`/transaction?hash=${transactionHash}`); + + router.push(`/tx?hash=${transactionHash}`); }, 300); } }, [transactionStatus]); diff --git a/src/app/hooks/useFindPayeeName.tsx b/src/app/hooks/useFindPayeeName.tsx index 83e5f6b..e0623e7 100644 --- a/src/app/hooks/useFindPayeeName.tsx +++ b/src/app/hooks/useFindPayeeName.tsx @@ -4,19 +4,17 @@ import { Contact } from '@/app/types/types'; import truncateEthAddress from 'truncate-eth-address'; const useFindPayeeName = (payeeAddress: string) => { - const contactsState = useSelector((state: RootState) => state.contacts.value); const findPayeeName = (payeeAddress: string): string | null => { - if ( contactsState.length == 0) { + if (!contactsState || contactsState.length === 0) { return truncateEthAddress(payeeAddress); } - // make sure theyre lowercase to match them + // Ensure to lower case both sides to match const contact = contactsState.find( - (element: Contact) => element.address?.toLocaleLowerCase() == payeeAddress.toLocaleLowerCase() + (element: Contact) => element.address?.toLocaleLowerCase() === payeeAddress.toLocaleLowerCase() ); - console.log("contact ", contact) return contact ? contact.name : truncateEthAddress(payeeAddress); }; diff --git a/src/app/hooks/useGetBalance.tsx b/src/app/hooks/useGetBalance.tsx index 89e2eed..43b59a4 100644 --- a/src/app/hooks/useGetBalance.tsx +++ b/src/app/hooks/useGetBalance.tsx @@ -1,4 +1,4 @@ -// wagmi +/* // wagmi 'use client'; import { useBalance } from 'wagmi'; @@ -15,6 +15,31 @@ const useGetBalance = (address: string) => { token: '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8', }); + const dispatch = useDispatch(); + dispatch(setBalance(result?.data?.formatted)); + + return result?.data?.formatted; +}; + +export default useGetBalance; + */ +// wagmi +'use client'; +import { useBalance } from 'wagmi'; + +// Redux + +import { RootState } from '@/GlobalRedux/store'; +import { useDispatch, useSelector } from 'react-redux'; + +const useGetBalance = (address: string) => { + const result = useBalance({ + // @ts-ignore + address: address, + token: '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8', + }); + + return result?.data?.formatted; }; diff --git a/src/app/hooks/useGetTokenBalance.tsx b/src/app/hooks/useGetTokenBalance.tsx index eaf8312..e47ac11 100644 --- a/src/app/hooks/useGetTokenBalance.tsx +++ b/src/app/hooks/useGetTokenBalance.tsx @@ -18,8 +18,8 @@ const useGetTokenBalance = async (ownerAddress: string) => { tokenContractAddresses ); - console.log('Token balance for Address'); - console.log(data); + /* console.log('Token balance for Address'); + console.log(data); */ return data; } catch (error) { diff --git a/src/app/tx/page.tsx b/src/app/tx/page.tsx index 4426800..7dc3370 100644 --- a/src/app/tx/page.tsx +++ b/src/app/tx/page.tsx @@ -17,10 +17,15 @@ import { Send, QrCode } from 'lucide-react'; import { Avatar } from '@/app/components/ui/avatar'; import { RootState } from '@/GlobalRedux/store'; import AuthPage from '../components/AuthPage/AuthPage'; + +// hooks import useFindPayeeName from '../hooks/useFindPayeeName'; + +// types +import { Contact } from '@/app/types/types'; + export default function Page() { - console.log('Tx Modal Page'); - const dispatch = useDispatch(); + const [transaction, setTransaction] = useState({}); @@ -33,13 +38,34 @@ export default function Page() { const address = useSelector((state: any) => state.address.value); - const payeeName = useFindPayeeName(transaction.from); + const [payeeName, setPayeeName] = useState(''); + + + const contactsState = useSelector((state: RootState) => state.contacts.value); + const findPayeeName = (payeeAddress: string): string | null => { + if (!contactsState || contactsState.length === 0) { + return truncateEthAddress(payeeAddress); + } + + // Ensure to lower case both sides to match + const contact = contactsState.find( + (element: Contact) => + element.address?.toLocaleLowerCase() === + payeeAddress.toLocaleLowerCase() + ); + + return contact ? contact.name : truncateEthAddress(payeeAddress); + }; + useEffect(() => { - console.log('txState', txState); + + const filteredTransaction = txState.filter((tx: any) => tx.hash == hash); setTransaction(filteredTransaction[0]); + + setPayeeName(filteredTransaction[0].to); console.log('filteredTransaction', filteredTransaction); setIsLoading(false); }, [txState]); @@ -62,15 +88,15 @@ export default function Page() { >
-
- - {transaction.from == address ? '+$' : '-$'} +
+
+ {transaction.from == address ? '+$' : '-$'} - {transaction.value} + {transaction.value} +
- {transaction.from == address ? 'From' : 'To'}{' '} - {payeeName} + {payeeName && findPayeeName(payeeName)}