Receiver wallet history

src/apiQueries/useStellarAccountPayments.ts

@@ -0,0 +1,81 @@
+import { useQuery } from "@tanstack/react-query";
+import { getStellarTransaction } from "api/getStellarTransaction";
+import { HORIZON_URL } from "constants/settings";
+import { fetchStellarApi } from "helpers/fetchStellarApi";
+import { shortenAccountKey } from "helpers/shortenAccountKey";
+import {
+  ApiStellarOperationRecord,
+  ApiStellarPaymentType,
+  AppError,
+  ReceiverWalletPayment,
+} from "types";
+
+const ACCEPTED_TYPE: ApiStellarPaymentType[] = [
+  "payment",
+  "path_payment_strict_send",
+  "path_payment_strict_receive",
+];
+
+export const useStellarAccountPayments = (
+  stellarAddress: string | undefined,
+) => {
+  const query = useQuery<ReceiverWalletPayment[], AppError>({
+    queryKey: ["stellar", "accounts", "payments", stellarAddress],
+    queryFn: async () => {
+      if (!stellarAddress) {
+        return [];
+      }
+
+      // TODO: make params dynamic
+      const response = await fetchStellarApi(
+        `${HORIZON_URL}/accounts/${stellarAddress}/operations?limit=20&order=desc`,
+        undefined,
+        {
+          notFoundMessage: `${shortenAccountKey(
+            stellarAddress,
+          )} address was not found.`,
+        },
+      );
+
+      const { records } = response._embedded;
+
+      const paymentRecords = records.filter((r: ApiStellarOperationRecord) =>
+        ACCEPTED_TYPE.includes(r.type),
+      );
+
+      const payments = [];
+
+      for await (const record of paymentRecords) {
+        const payment = await formatWalletPayment(record, stellarAddress);
+        payments.push(payment);
+      }
+
+      return payments;
+    },
+    enabled: Boolean(stellarAddress),
+  });
+
+  return query;
+};
+
+const formatWalletPayment = async (
+  payment: ApiStellarOperationRecord,
+  walletAddress: string,
+): Promise<ReceiverWalletPayment> => {
+  const isSend = payment.from === walletAddress;
+
+  // Getting transaction details to get the memo
+  const transaction = await getStellarTransaction(payment.transaction_hash);
+
+  return {
+    id: payment.id.toString(),
+    amount: payment.amount,
+    paymentAddress: isSend ? payment.to : payment.from,
+    createdAt: payment.created_at,
+    assetCode: payment.asset_code,
+    assetIssuer: payment.asset_issuer,
+    operationKind: isSend ? "send" : "receive",
+    transactionHash: payment.transaction_hash,
+    memo: transaction.memo || "",
+  };
+};

src/components/ReceiverWalletBalance.tsx

@@ -16,7 +16,7 @@ export const ReceiverWalletBalance = ({
   const balances =
     data?.balances.filter((b) => b.asset_issuer && b.asset_code) || [];
 
-  if (isLoading || isFetching) {
+  if (stellarAddress && (isLoading || isFetching)) {
     return <Loader />;
   }
 

src/components/ReceiverWalletHistory.tsx

@@ -1,77 +1,29 @@
 import { Card, Link, Profile, Notification } from "@stellar/design-system";
-import { useQuery } from "@tanstack/react-query";
-
-import { getStellarAccountPayments } from "api/getStellarAccountPayments";
-import { getStellarTransaction } from "api/getStellarTransaction";
 import { STELLAR_EXPERT_URL } from "constants/settings";
+import { useStellarAccountPayments } from "apiQueries/useStellarAccountPayments";
 import { formatDateTime } from "helpers/formatIntlDateTime";
 
 import { Table } from "components/Table";
 import { AssetAmount } from "components/AssetAmount";
 
-import { ApiStellarOperationRecord, ReceiverWalletPayment } from "types";
-
 interface ReceiverWalletHistoryProps {
   stellarAddress: string | undefined;
 }
 
-const formatWalletPayment = async (
-  payment: ApiStellarOperationRecord,
-  walletAddress: string,
-): Promise<ReceiverWalletPayment> => {
-  const isSend = payment.from === walletAddress;
-
-  // Getting transaction details to get the memo
-  const transaction = await getStellarTransaction(payment.transaction_hash);
-
-  return {
-    id: payment.id.toString(),
-    amount: payment.amount,
-    paymentAddress: isSend ? payment.to : payment.from,
-    createdAt: payment.created_at,
-    assetCode: payment.asset_code,
-    assetIssuer: payment.asset_issuer,
-    operationKind: isSend ? "send" : "receive",
-    transactionHash: payment.transaction_hash,
-    memo: transaction.memo || "",
-  };
-};
-
 export const ReceiverWalletHistory = ({
   stellarAddress,
 }: ReceiverWalletHistoryProps) => {
-  const getPayments = async () => {
-    if (!stellarAddress) {
-      return [];
-    }
-
-    // We don't want to show XLM (native) payments
-    const response = (await getStellarAccountPayments(stellarAddress)).filter(
-      (r) => r.asset_issuer && r.asset_code,
-    );
-    const payments = [];
-
-    for await (const record of response) {
-      const payment = await formatWalletPayment(record, stellarAddress);
-      payments.push(payment);
-    }
-
-    return payments;
-  };
-
-  const { isLoading, isError, data, error } = useQuery({
-    queryKey: ["stellar", "accounts", stellarAddress],
-    queryFn: getPayments,
-  });
+  const { isLoading, isFetching, data, error } =
+    useStellarAccountPayments(stellarAddress);
 
-  if (isLoading) {
+  if (stellarAddress && (isLoading || isFetching)) {
     return <div className="Note">Loading…</div>;
   }
 
-  if (isError) {
+  if (error) {
     return (
       <Notification variant="error" title="Error">
-        {error as string}
+        {error.message}
       </Notification>
     );
   }