added full name fetching to transactions list items

GoodDollar · Jan 19, 2024 · 53b762e · 53b762e
1 parent 65dd675
commit 53b762e
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 21 deletions.
diff --git a/packages/app/src/components/TransactionList/ClaimTransactionListItem.tsx b/packages/app/src/components/TransactionList/ClaimTransactionListItem.tsx
@@ -2,6 +2,7 @@ import { ClaimTx } from '../../models/models';
 import { formatAddress } from '../../lib/formatAddress';
 import { useEnsName } from 'wagmi';
 import TransactionListItem from './TransactionListItem';
+import { useFetchFullName } from '../../hooks/useFetchFullName';
 
 interface ClaimTransactionListItemProps {
   transaction: ClaimTx;
@@ -20,8 +21,9 @@ export function ClaimTransactionListItem({ transaction }: ClaimTransactionListIt
   }
 
   const { data: ensName } = useEnsName({ address: userAddress, chainId: 1 });
-  // TODO: how to get first name and last name of users?
-  const userIdentifier = multipleStewardsText ?? ensName ?? (userAddress ? formatAddress(userAddress) : 'Unknown');
+  const userFullName = useFetchFullName(userAddress);
+  const userIdentifier =
+    multipleStewardsText ?? userFullName ?? ensName ?? (userAddress ? formatAddress(userAddress) : 'Unknown');
 
   return (
     <TransactionListItem

diff --git a/packages/app/src/components/TransactionList/SupportTransactionListItem.tsx b/packages/app/src/components/TransactionList/SupportTransactionListItem.tsx
@@ -4,6 +4,7 @@ import { useEnsName } from 'wagmi';
 import Decimal from 'decimal.js';
 import TransactionListItem from './TransactionListItem';
 import { useFlowingBalance } from '../../hooks/useFlowingBalance';
+import { useFetchFullName } from '../../hooks/useFetchFullName';
 
 interface SupportTransactionListItemProps {
   transaction: SupportTx;
@@ -12,10 +13,9 @@ interface SupportTransactionListItemProps {
 export function SupportTransactionListItem({ transaction }: SupportTransactionListItemProps) {
   const { hash, networkFee, timestamp, donor } = transaction;
 
-  // TODO: how to get first name and last name of users?
-  const userFullName: string | undefined = undefined;
   const userAddress = donor as `0x${string}`;
   const { data: ensName } = useEnsName({ address: userAddress, chainId: 1 });
+  const userFullName = useFetchFullName(userAddress);
   const userIdentifier = userFullName ?? ensName ?? formatAddress(userAddress);
 
   const { formatted: formattedAmount } = useFlowingBalance(

diff --git a/packages/app/src/components/TransactionList/TransactionList.tsx b/packages/app/src/components/TransactionList/TransactionList.tsx
@@ -9,8 +9,6 @@ import { useRecentTransactions } from '../../hooks/useRecentTransactions';
 import { isSupportTx } from '../../models/typeUtil';
 import { ClaimTransactionListItem } from './ClaimTransactionListItem';
 import { SupportTransactionListItem } from './SupportTransactionListItem';
-import { useFetchFullNames } from '../../hooks/useFetchFullName';
-import { useMemo } from 'react';
 
 interface TransactionListProps {
   collective: `0x${string}`;
@@ -24,15 +22,6 @@ function TransactionList({ collective }: TransactionListProps) {
 
   const transactions: Transaction[] = useRecentTransactions(collective, 6, 1000);
 
-  const userAddresses = useMemo(() => {
-    return transactions.map((t) => {
-      const donation = t.to === collective;
-      return (donation ? t.from : t.to) as `0x${string}`;
-    });
-  }, [collective, transactions]);
-
-  const userFullNames = useFetchFullNames(userAddresses);
-
   const onClickShowMore = () => navigate('/profile/abc123/activity');
 
   return (

diff --git a/packages/app/src/components/TransactionList/TransactionListItem.tsx b/packages/app/src/components/TransactionList/TransactionListItem.tsx
@@ -26,10 +26,6 @@ function TransactionListItem({
   const formattedFee: string = new Decimal(ethers.utils.formatEther(rawNetworkFee ?? 0)).toString();
   const formattedHash = txHash.slice(0, 40) + '...';
 
-  const userAddress: `0x${string}` = (donation ? from : to) as `0x${string}`;
-  const { data: ensName } = useEnsName({ address: userAddress, chainId: 1 });
-  const userIdentifier = userFullName ?? ensName ?? formatAddress(userAddress);
-
   return (
     <View style={styles.row}>
       {isDonation ? (

diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx
@@ -39,8 +39,6 @@ interface ViewCollectiveProps {
   collective: Collective;
 }
 
-// TODO: "See all Stewards" button doesn't work for me and I can't figure out why
-
 function ViewCollective({ collective }: ViewCollectiveProps) {
   const { navigate } = useCrossNavigate();
   const [isDesktopResolution] = useMediaQuery({