fix: map fullnames to addresses correctly

packages/app/package.json

@@ -10,7 +10,7 @@
     "format:check": "prettier -c ./src",
     "start": "react-native start",
     "test": "jest",
-    "web": "vite -c web/vite.config.ts",
+    "web": "vite --port 3000 -c web/vite.config.ts",
     "build": "yarn build:web",
     "build:web": "tsc && vite build -c web/vite.config.ts",
     "preview:web": "vite preview -c web/vite.config.ts"

packages/app/src/components/DonorsList/DonorsList.tsx

@@ -24,12 +24,13 @@ function DonorsList({ donors, listStyle }: DonorsListProps) {
   const userAddresses = useMemo(() => {
     return sortedDonors.map((donor) => donor.donor as `0x${string}`);
   }, [sortedDonors]);
+
   const userFullNames = useFetchFullNames(userAddresses);
 
   return (
     <View style={[styles.list, { ...(listStyle ?? {}) }]}>
       {sortedDonors.map((donor, index) => (
-        <DonorsListItem key={donor.donor} donor={donor} rank={index + 1} userFullName={userFullNames[index]} />
+        <DonorsListItem key={donor.donor} donor={donor} rank={index + 1} userFullName={userFullNames[donor.donor]} />
       ))}
     </View>
   );

packages/app/src/components/DonorsList/DonorsListItem.tsx

@@ -14,8 +14,7 @@ interface DonorsListItemProps {
   userFullName?: string;
 }
 
-export const DonorsListItem = (props: DonorsListItemProps) => {
-  const { donor, rank, userFullName } = props;
+export const DonorsListItem = ({ donor, rank, userFullName }: DonorsListItemProps) => {
   const { navigate } = useCrossNavigate();
 
   const formattedDonations: string = new Decimal(ethers.utils.formatEther(donor.contribution) ?? 0).toFixed(

packages/app/src/components/RowItem.tsx

@@ -25,15 +25,15 @@ function RowItem({ rowInfo, rowData, balance, currency, imageUrl }: RowItemProps
         <Image source={{ uri: imageUrl }} style={styles.rowIcon} />
         <Text style={styles.rowInfo}>{rowInfo}</Text>
       </View>
-      <Text style={styles.rowData}>
-        <View style={{ gap: 2 }}>
+      <View style={{ gap: 2 }}>
+        <Text style={styles.rowData}>
           <Text>
             <Text>{currency}</Text> <Text style={{ ...InterRegular }}>{rowData}</Text>
             {isDesktopResolution && currency && <Text style={styles.rowBalance}> = {usdBalance} USD</Text>}
           </Text>
           {!isDesktopResolution && currency && <Text style={styles.rowBalance}>= {usdBalance} USD</Text>}
-        </View>
-      </Text>
+        </Text>
+      </View>
     </View>
   );
 }

packages/app/src/components/StewardsList/StewardsList.tsx

@@ -41,7 +41,7 @@ function StewardList({ listType, stewards, titleStyle, listStyle }: StewardListP
             showActions={listType === 'viewStewards'}
             key={steward.steward}
             profileImage={profileImages[index % profileImages.length]}
-            userFullName={userFullNames[index]}
+            userFullName={userFullNames[steward.steward]}
           />
         ))}
       </View>

packages/app/src/hooks/useFetchFullName.ts

@@ -5,18 +5,30 @@ import { useMongoDbQuery } from './apollo/useMongoDbQuery';
 
 interface UserProfile {
   fullName?: { display?: string };
+  index: {
+    walletAddress: {
+      hash: string;
+      display?: string;
+    };
+  };
 }
 
 interface UserProfilesResponse {
   user_profiles: (UserProfile | undefined)[];
 }
 
+//todo: needs privacy settings to be configurable in the wallet
 const findProfiles = gql`
   query FindProfiles($query: User_profileQueryInput!) {
     user_profiles(query: $query) {
       fullName {
         display
       }
+      index {
+        walletAddress {
+          hash
+        }
+      }
     }
   }
 `;
@@ -27,22 +39,34 @@ export function useFetchFullName(address?: string): string | undefined {
   return names[0];
 }
 
-export function useFetchFullNames(addresses: string[]): (string | undefined)[] {
-  const hashedAddresses = useMemo(() => {
-    return addresses.map((address: string) => ethers.utils.keccak256(address));
-  }, [addresses]);
+export function useFetchFullNames(addresses: string[]): any {
+  const addressToHashMapping = addresses.reduce((acc: any, address) => {
+    const hash = ethers.utils.keccak256(address);
+    acc[hash] = address;
+    return acc;
+  }, {});
+
+  const hashedAddresses = Object.keys(addressToHashMapping);
 
   const { data, error } = useMongoDbQuery<UserProfilesResponse>(findProfiles, {
-    variables: { query: { index: { walletAddress: { hash_in: hashedAddresses } } } },
+    variables: {
+      query: {
+        index: { walletAddress: { hash_in: hashedAddresses } },
+      },
+    },
   });
 
   return useMemo(() => {
-    if (error) {
-      console.error(error);
-    }
     if (!data || data.user_profiles.length === 0) {
-      return [];
+      return {};
     }
-    return data.user_profiles.map((profile) => profile?.fullName?.display);
-  }, [data, error]);
+    return data.user_profiles.reduce((acc: Record<string, string>, profile) => {
+      if (!profile) return {};
+      const { hash } = profile.index.walletAddress;
+      const { display } = profile.fullName ?? {};
+      const address = addressToHashMapping[hash];
+      acc[address] = display ?? '';
+      return acc;
+    }, {});
+  }, [data, addressToHashMapping]);
 }