feat(vara-eth-idea/frontend): display injected transactions

idea/vara-eth/frontend/src/features/messages/components/message-data/message-data.tsx

@@ -5,7 +5,7 @@ import { formatEther } from 'viem';
 import { Balance, ChainEntity, HashLink, Skeleton } from '@/components';
 import { routes } from '@/shared/config';
 
-import type { MessageRequest, MessageSent, ReplyRequest, ReplySent, SailsMessageRoute } from '../../lib';
+import type { InjectedTransaction, MessageRequest, MessageSent, ReplyRequest, ReplySent, SailsMessageRoute } from '../../lib';
 
 type RouteProp = {
   route?: SailsMessageRoute | null;
@@ -134,14 +134,17 @@ const ReplyRequestData = ({
 };
 
 const ReplySentData = (props: ReplySent & RouteProp) => {
-  const { repliedToId, replyCode, sourceProgramId, destination, value, isCall, stateTransition, createdAt, route } =
+  const { repliedToId, replyCode, sourceProgramId, destination, value, isCall, stateTransition, createdAt, route, id } =
     props;
 
   return (
     <ChainEntity.Data>
       {route && <SailsRouteData route={route} />}
+      <ChainEntity.Key>Reply ID</ChainEntity.Key>
+      <HashLink hash={id} href={generatePath(routes.message, { messageId: id })} truncateSize="xxl" />
+
       <ChainEntity.Key>Replied To ID</ChainEntity.Key>
-      <HashLink hash={repliedToId} truncateSize="xxl" />
+      <HashLink hash={repliedToId} truncateSize="xxl" href={generatePath(routes.message, { messageId: repliedToId })} />
 
       <ChainEntity.Key>Reply Code</ChainEntity.Key>
       <div>{replyCode}</div>
@@ -176,6 +179,43 @@ const ReplySentData = (props: ReplySent & RouteProp) => {
   );
 };
 
+const InjectedTransactionData = ({
+  destination,
+  senderAddress,
+  value,
+  referenceBlock,
+  salt,
+  signature,
+  createdAt,
+  route,
+}: InjectedTransaction & RouteProp) => {
+  return (
+    <ChainEntity.Data>
+      {route && <SailsRouteData route={route} />}
+      <ChainEntity.Key>Sender Address</ChainEntity.Key>
+      <HashLink hash={senderAddress} explorerLinkPath="address" />
+
+      <ChainEntity.Key>Destination</ChainEntity.Key>
+      <HashLink hash={destination} href={generatePath(routes.program, { programId: destination })} explorerLinkPath="address" />
+
+      <ChainEntity.Key>Value</ChainEntity.Key>
+      <Balance value={formatEther(BigInt(value))} units="ETH" />
+
+      <ChainEntity.Key>Reference Block</ChainEntity.Key>
+      <HashLink hash={referenceBlock} truncateSize="xxl" maxLength={36} />
+
+      <ChainEntity.Key>Salt</ChainEntity.Key>
+      <HashLink hash={salt} truncateSize="xxl" maxLength={36} />
+
+      <ChainEntity.Key>Signature</ChainEntity.Key>
+      <HashLink hash={signature} truncateSize="xxl" maxLength={36} />
+
+      <ChainEntity.Key>Created At</ChainEntity.Key>
+      <ChainEntity.Date value={createdAt} />
+    </ChainEntity.Data>
+  );
+};
+
 const SkeletonData = () => {
   const render = () =>
     Array.from({ length: 6 }, (_, index) => (
@@ -196,6 +236,7 @@ const MessageData = {
   Sent: MessageSentData,
   ReplyRequest: ReplyRequestData,
   ReplySent: ReplySentData,
+  Injected: InjectedTransactionData,
   Skeleton: SkeletonData,
 };
 

idea/vara-eth/frontend/src/features/messages/index.ts

@@ -6,10 +6,13 @@ import {
   useGetAllMessageSentsQuery,
   useGetAllReplyRequestsQuery,
   useGetAllReplySentsQuery,
+  useGetInjectedTransactionByIdQuery,
+  useGetInjectedTransactionsQuery,
   useGetMessageRequestByIdQuery,
   useGetMessageSentByIdQuery,
   useGetReplyRequestByIdQuery,
   useGetReplySentByIdQuery,
+  useGetReplySentsByRepliedToIdQuery,
 } from './lib';
 import { ProgramMessagesTable } from './ui';
 
@@ -22,8 +25,11 @@ export {
   useGetAllMessageSentsQuery,
   useGetAllReplyRequestsQuery,
   useGetAllReplySentsQuery,
+  useGetInjectedTransactionByIdQuery,
+  useGetInjectedTransactionsQuery,
   useGetMessageRequestByIdQuery,
   useGetMessageSentByIdQuery,
   useGetReplyRequestByIdQuery,
   useGetReplySentByIdQuery,
+  useGetReplySentsByRepliedToIdQuery,
 };

idea/vara-eth/frontend/src/features/messages/lib/index.ts

@@ -5,14 +5,17 @@ import {
   useGetAllMessageSentsQuery,
   useGetAllReplyRequestsQuery,
   useGetAllReplySentsQuery,
+  useGetInjectedTransactionByIdQuery,
+  useGetInjectedTransactionsQuery,
   useGetMessageRequestByIdQuery,
   useGetMessageSentByIdQuery,
   useGetReplyRequestByIdQuery,
   useGetReplySentByIdQuery,
+  useGetReplySentsByRepliedToIdQuery,
 } from './queries';
-import type { MessageRequest, MessageSent, ReplyRequest, ReplySent } from './requests';
+import type { InjectedTransaction, MessageRequest, MessageSent, ReplyRequest, ReplySent } from './requests';
 
-export type { MessageRequest, MessageSent, ReplyRequest, ReplySent, SailsMessageRoute };
+export type { InjectedTransaction, MessageRequest, MessageSent, ReplyRequest, ReplySent, SailsMessageRoute };
 export {
   getDecodedPayload,
   getMessageName,
@@ -21,8 +24,11 @@ export {
   useGetAllMessageSentsQuery,
   useGetAllReplyRequestsQuery,
   useGetAllReplySentsQuery,
+  useGetInjectedTransactionByIdQuery,
+  useGetInjectedTransactionsQuery,
   useGetMessageRequestByIdQuery,
   useGetMessageSentByIdQuery,
   useGetReplyRequestByIdQuery,
   useGetReplySentByIdQuery,
+  useGetReplySentsByRepliedToIdQuery,
 };

idea/vara-eth/frontend/src/features/messages/lib/queries.ts

@@ -5,6 +5,8 @@ import type { Hex } from 'viem';
 import { nodeAtom } from '@/app/store';
 
 import {
+  getInjectedTransaction,
+  getInjectedTransactions,
   getMessageRequest,
   getMessageRequests,
   getMessageSent,
@@ -92,12 +94,59 @@ export const useGetAllReplyRequestsQuery = (page: number, pageSize: number) => {
   });
 };
 
-export const useGetAllReplySentsQuery = (page: number, pageSize: number) => {
+export const useGetAllReplySentsQuery = (
+  page: number,
+  pageSize: number,
+  query?: { programId?: Hex; repliedToId?: Hex },
+  options?: { enabled?: boolean },
+) => {
+  const { explorerUrl } = useAtomValue(nodeAtom);
+
+  return useQuery({
+    queryKey: ['allSentReplies', page, pageSize, query, explorerUrl],
+    queryFn: () => getReplySents(explorerUrl, page, pageSize, query),
+    placeholderData: (previousData) => previousData,
+    ...options,
+  });
+};
+
+export const useGetInjectedTransactionByIdQuery = (id: Hex) => {
+  const { explorerUrl } = useAtomValue(nodeAtom);
+
+  return useQuery({
+    queryKey: ['injectedTransaction', id, explorerUrl],
+    queryFn: async () => {
+      try {
+        return await getInjectedTransaction(explorerUrl, id);
+      } catch {
+        return null;
+      }
+    },
+  });
+};
+
+export const useGetInjectedTransactionsQuery = (
+  page: number,
+  pageSize: number,
+  destination?: Hex,
+  options?: { enabled?: boolean },
+) => {
   const { explorerUrl } = useAtomValue(nodeAtom);
 
   return useQuery({
-    queryKey: ['allSentReplies', page, pageSize, explorerUrl],
-    queryFn: () => getReplySents(explorerUrl, page, pageSize),
+    queryKey: ['allInjectedTransactions', page, pageSize, destination, explorerUrl],
+    queryFn: () => getInjectedTransactions(explorerUrl, page, pageSize, { destination }),
     placeholderData: (previousData) => previousData,
+    ...options,
+  });
+};
+
+export const useGetReplySentsByRepliedToIdQuery = (repliedToId: Hex, options?: { enabled?: boolean }) => {
+  const { explorerUrl } = useAtomValue(nodeAtom);
+
+  return useQuery({
+    queryKey: ['replySentsByRepliedToId', repliedToId, explorerUrl],
+    queryFn: () => getReplySents(explorerUrl, 1, 100, { repliedToId }),
+    ...options,
   });
 };

idea/vara-eth/frontend/src/features/messages/lib/requests.ts

@@ -68,19 +68,47 @@ export type ReplySent = {
   stateTransition?: StateTransition;
 };
 
-// TODO: merge with fetchWithGuard
-const getIndexerUrl = (explorerUrl: string, url: string, page?: number, pageSize?: number, programId?: Hex) => {
-  const indexerUrl = new URL(`${explorerUrl}/${url}`);
+export type InjectedTransaction = {
+  id: Hex;
+  destination: Hex;
+  senderAddress: Hex;
+  referenceBlock: Hex;
+  salt: Hex;
+  signature: Hex;
+  value: string;
+  payload: Hex;
+  createdAt: string;
+};
 
-  if (!isUndefined(page) && !isUndefined(pageSize)) {
-    const limit = pageSize;
-    const offset = (page - 1) * pageSize;
+type ListQueryParams = {
+  programId?: Hex;
+  destination?: Hex;
+  repliedToId?: Hex;
+};
+
+// TODO: merge with fetchWithGuard
+const getIndexerUrl = (
+  explorerUrl: string,
+  path: string,
+  pagination?: { page: number; pageSize: number },
+  query?: ListQueryParams,
+) => {
+  const indexerUrl = new URL(`${explorerUrl}/${path}`);
+
+  if (pagination) {
+    const { page, pageSize } = pagination;
+    indexerUrl.searchParams.set('limit', String(pageSize));
+    indexerUrl.searchParams.set('offset', String((page - 1) * pageSize));
+  }
 
-    indexerUrl.searchParams.set('limit', String(limit));
-    indexerUrl.searchParams.set('offset', String(offset));
+  if (!isUndefined(query?.programId)) {
+    indexerUrl.searchParams.set('programId', query.programId);
   }
-  if (!isUndefined(programId)) {
-    indexerUrl.searchParams.set('programId', programId);
+  if (!isUndefined(query?.destination)) {
+    indexerUrl.searchParams.set('destination', query.destination);
+  }
+  if (!isUndefined(query?.repliedToId)) {
+    indexerUrl.searchParams.set('repliedToId', query.repliedToId);
   }
 
   return indexerUrl;
@@ -100,20 +128,38 @@ export const getReplySent = (explorerUrl: string, id: Hex) =>
 
 export const getMessageRequests = (explorerUrl: string, page: number, pageSize: number, programId?: Hex) =>
   fetchWithGuard<PaginatedResponse<MessageRequest>>({
-    url: getIndexerUrl(explorerUrl, 'messages/requests', page, pageSize, programId),
+    url: getIndexerUrl(explorerUrl, 'messages/requests', { page, pageSize }, { programId }),
   });
 
 export const getMessageSents = (explorerUrl: string, page: number, pageSize: number, programId?: Hex) =>
   fetchWithGuard<PaginatedResponse<MessageSent>>({
-    url: getIndexerUrl(explorerUrl, 'messages/sent', page, pageSize, programId),
+    url: getIndexerUrl(explorerUrl, 'messages/sent', { page, pageSize }, { programId }),
   });
 
 export const getReplyRequests = (explorerUrl: string, page: number, pageSize: number) =>
   fetchWithGuard<PaginatedResponse<ReplyRequest>>({
-    url: getIndexerUrl(explorerUrl, 'replies/requests', page, pageSize),
+    url: getIndexerUrl(explorerUrl, 'replies/requests', { page, pageSize }),
   });
 
-export const getReplySents = (explorerUrl: string, page: number, pageSize: number) =>
+export const getReplySents = (
+  explorerUrl: string,
+  page: number,
+  pageSize: number,
+  query?: Pick<ListQueryParams, 'programId' | 'repliedToId'>,
+) =>
   fetchWithGuard<PaginatedResponse<ReplySent>>({
-    url: getIndexerUrl(explorerUrl, 'replies/sent', page, pageSize),
+    url: getIndexerUrl(explorerUrl, 'replies/sent', { page, pageSize }, query),
+  });
+
+export const getInjectedTransaction = (explorerUrl: string, id: Hex) =>
+  fetchWithGuard<InjectedTransaction>({ url: getIndexerUrl(explorerUrl, `injected-transactions/${id}`) });
+
+export const getInjectedTransactions = (
+  explorerUrl: string,
+  page: number,
+  pageSize: number,
+  query?: Pick<ListQueryParams, 'destination'>,
+) =>
+  fetchWithGuard<PaginatedResponse<InjectedTransaction>>({
+    url: getIndexerUrl(explorerUrl, 'injected-transactions', { page, pageSize }, query),
   });