Use contacts to show to/from in txn list (#283)

Author: cgjohn

renderer/components/NoteRow/NoteRow.tsx

@@ -8,6 +8,7 @@ import type {
 import { ReactNode, useMemo } from "react";
 import { MessageDescriptor, useIntl } from "react-intl";
 
+import { TRPCRouterOutputs } from "@/providers/TRPCProvider";
 import { MaybeLink } from "@/ui/ChakraLink/ChakraLink";
 import { COLORS } from "@/ui/colors";
 import { ShadowCard } from "@/ui/ShadowCard/ShadowCard";
@@ -77,10 +78,12 @@ function NoteTo({
   to,
   from,
   type,
+  contact,
 }: {
   to: string | string[];
   from: string;
   type: TransactionType;
+  contact?: TRPCRouterOutputs["getContacts"][number] | undefined;
 }) {
   const { formatMessage } = useIntl();
 
@@ -93,6 +96,7 @@ function NoteTo({
       color={COLORS.BLACK}
       _dark={{ color: COLORS.WHITE }}
       address={type === "send" ? to : from}
+      addressLabel={contact?.name}
     />
   );
 }
@@ -111,6 +115,7 @@ export function NoteRow({
   transactionHash,
   asTransaction = false,
   isBridge = false,
+  contact,
 }: {
   accountName: string;
   asset?: RpcAsset;
@@ -123,6 +128,7 @@ export function NoteRow({
   status: TransactionStatus;
   memo: string | string[];
   transactionHash: string;
+  contact?: TRPCRouterOutputs["getContacts"][number] | undefined;
   /**
    * Render the row as if it were a transaction (link it to the transaction details page,
    * show the status as the transaction's status)
@@ -160,7 +166,7 @@ export function NoteRow({
         {`${majorString} ${symbol}`}
       </Text>,
       <Text as="span" key={key++}>
-        <NoteTo to={to} from={from} type={type} />
+        <NoteTo to={to} from={from} type={type} contact={contact} />
       </Text>,
       <Text as="span" key={key++}>
         {formatDate(timestamp)}

renderer/components/NotesList/NotesList.tsx

@@ -5,6 +5,7 @@ import { Virtuoso } from "react-virtuoso";
 import { NoteHeadings } from "@/components/NoteRow/NoteHeadings";
 import { NoteRow } from "@/components/NoteRow/NoteRow";
 import { useScrollElementContext } from "@/layouts/MainLayout";
+import { trpcReact } from "@/providers/TRPCProvider";
 
 import { TransactionNote } from "../../../shared/types";
 import { EmptyStateMessage } from "../EmptyStateMessage/EmptyStateMessage";
@@ -45,6 +46,8 @@ export function NotesList({
   onEndReached,
 }: Props) {
   const { formatMessage } = useIntl();
+  const { data: contacts, isLoading: isContactsLoading } =
+    trpcReact.getContacts.useQuery();
   const customScrollElement = useScrollElementContext();
 
   if (isError) {
@@ -67,14 +70,16 @@ export function NotesList({
     );
   }
 
+  const isNotesListLoading = isLoading || isContactsLoading;
+
   return (
     <Box>
       <Heading as="h2" fontSize="2xl" mb={8}>
         {heading}
       </Heading>
       <NoteHeadings asTransactions={asTransactions} />
-      {isLoading && <Skeleton height="600px" />}
-      {!isLoading && customScrollElement && (
+      {isNotesListLoading && <Skeleton height="600px" />}
+      {!isNotesListLoading && customScrollElement && (
         <Virtuoso
           customScrollParent={customScrollElement}
           data={notes}
@@ -87,6 +92,11 @@ export function NotesList({
                 assetId={note.assetId}
                 value={note.value}
                 timestamp={note.timestamp}
+                contact={contacts?.find((contact) => {
+                  return note.type === "send"
+                    ? contact.address === note.to
+                    : contact.address === note.from;
+                })}
                 from={note.from}
                 to={note.to}
                 transactionHash={note.transactionHash}