Merge branch 'develop' into preview

src/api/getStatistics.ts → src/api/getAssetsByWallet.ts

@@ -1,9 +1,12 @@
 import { handleApiResponse } from "api/handleApiResponse";
 import { API_URL } from "constants/settings";
-import { ApiStatistics } from "types";
+import { ApiAsset } from "types";
 
-export const getStatistics = async (token: string): Promise<ApiStatistics> => {
-  const response = await fetch(`${API_URL}/statistics`, {
+export const getAssetsByWallet = async (
+  token: string,
+  walletId: string,
+): Promise<ApiAsset[]> => {
+  const response = await fetch(`${API_URL}/assets?wallet=${walletId}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",

src/apiQueries/usePayments.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import { handleSearchParams } from "api/handleSearchParams";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { ApiPayments, AppError, PaymentsSearchParams } from "types";
+
+export const usePayments = (searchParams?: PaymentsSearchParams) => {
+  // ALL status is for UI only
+  if (searchParams?.status === "ALL") {
+    delete searchParams.status;
+  }
+
+  const params = handleSearchParams(searchParams);
+
+  const query = useQuery<ApiPayments, AppError>({
+    queryKey: ["payments", { ...searchParams }],
+    queryFn: async () => {
+      return await fetchApi(`${API_URL}/payments/${params}`);
+    },
+    keepPreviousData: true,
+  });
+
+  return query;
+};

src/apiQueries/useReceivers.ts

@@ -0,0 +1,33 @@
+import { useQuery } from "@tanstack/react-query";
+import { handleSearchParams } from "api/handleSearchParams";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { formatReceivers } from "helpers/formatReceivers";
+import { ApiReceivers, AppError, ReceiversSearchParams } from "types";
+
+export const useReceivers = (searchParams?: ReceiversSearchParams) => {
+  // ALL status is for UI only
+  if (searchParams?.status === "ALL") {
+    delete searchParams.status;
+  }
+
+  const params = handleSearchParams(searchParams);
+
+  const query = useQuery<ApiReceivers, AppError>({
+    queryKey: ["receivers", { ...searchParams }],
+    queryFn: async () => {
+      return await fetchApi(`${API_URL}/receivers/${params}`);
+    },
+    keepPreviousData: true,
+  });
+
+  return {
+    ...query,
+    data: query.data
+      ? {
+          ...query.data,
+          data: formatReceivers(query.data.data),
+        }
+      : undefined,
+  };
+};

src/apiQueries/useReceiversReceiverId.ts

@@ -1,16 +1,35 @@
 import { useQuery } from "@tanstack/react-query";
 import { API_URL } from "constants/settings";
 import { fetchApi } from "helpers/fetchApi";
+import { formatPaymentReceiver } from "helpers/formatPaymentReceiver";
+import { formatReceiver } from "helpers/formatReceiver";
 import { ApiReceiver, AppError } from "types";
 
-export const useReceiversReceiverId = (receiverId: string | undefined) => {
+export const useReceiversReceiverId = <T>({
+  receiverId,
+  dataFormat,
+  receiverWalletId,
+}: {
+  receiverId: string | undefined;
+  dataFormat: "receiver" | "paymentReceiver";
+  receiverWalletId?: string;
+}) => {
   const query = useQuery<ApiReceiver, AppError>({
-    queryKey: ["receivers", receiverId],
+    queryKey: ["receivers", dataFormat, receiverId, { receiverWalletId }],
     queryFn: async () => {
       return await fetchApi(`${API_URL}/receivers/${receiverId}`);
     },
     enabled: !!receiverId,
   });
 
-  return query;
+  const formatData = (data: ApiReceiver) => {
+    return dataFormat === "receiver"
+      ? formatReceiver(data)
+      : formatPaymentReceiver(data, receiverWalletId);
+  };
+
+  return {
+    ...query,
+    data: query.data ? (formatData(query.data) as T) : undefined,
+  };
 };

src/apiQueries/useStatistics.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { formatStatistics } from "helpers/formatStatistics";
+import { ApiStatistics, AppError } from "types";
+
+export const useStatistics = (isAuthenticated: boolean) => {
+  const query = useQuery<ApiStatistics, AppError>({
+    queryKey: ["statistics"],
+    queryFn: async () => {
+      return await fetchApi(`${API_URL}/statistics`);
+    },
+    enabled: Boolean(isAuthenticated),
+  });
+
+  return {
+    ...query,
+    data: query.data ? formatStatistics(query.data) : undefined,
+  };
+};

src/apiQueries/useUpdateReceiverDetails.ts

@@ -0,0 +1,41 @@
+import { useMutation } from "@tanstack/react-query";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { sanitizeObject } from "helpers/sanitizeObject";
+import { AppError } from "types";
+
+export const useUpdateReceiverDetails = (receiverId: string | undefined) => {
+  const mutation = useMutation({
+    mutationFn: (fields: { email: string; externalId: string }) => {
+      const fieldsToSubmit = sanitizeObject({
+        email: fields.email,
+        external_id: fields.externalId,
+      });
+
+      if (Object.keys(fieldsToSubmit).length === 0) {
+        return new Promise((_, reject) =>
+          reject({
+            message:
+              "Update receiver info requires at least one field to submit",
+          }),
+        );
+      }
+
+      return fetchApi(
+        `${API_URL}/receivers/${receiverId}`,
+        {
+          method: "PATCH",
+          body: JSON.stringify(fieldsToSubmit),
+        },
+        { omitContentType: true },
+      );
+    },
+    cacheTime: 0,
+  });
+
+  return {
+    ...mutation,
+    error: mutation.error as AppError,
+    data: mutation.data as { message: string },
+  };
+};

src/components/DashboardAnalytics.tsx

@@ -1,24 +1,21 @@
-import { useEffect } from "react";
-import { useDispatch } from "react-redux";
 import { Card, Notification } from "@stellar/design-system";
 import { InfoTooltip } from "components/InfoTooltip";
 import { AssetAmount } from "components/AssetAmount";
 
+import { useStatistics } from "apiQueries/useStatistics";
 import { percent } from "helpers/formatIntlNumber";
 import { renderNumberOrDash } from "helpers/renderNumberOrDash";
 import { useRedux } from "hooks/useRedux";
-import {
-  clearStatisticsAction,
-  getStatisticsAction,
-} from "store/ducks/statistics";
-import { AppDispatch } from "store";
 
 export const DashboardAnalytics = () => {
-  const { statistics, userAccount } = useRedux("statistics", "userAccount");
-  const { stats } = statistics;
-  const dispatch: AppDispatch = useDispatch();
+  const { userAccount } = useRedux("userAccount");
 
-  const apiErrorStats = statistics.status === "ERROR" && statistics.errorString;
+  const {
+    data: stats,
+    error,
+    isLoading,
+    isFetching,
+  } = useStatistics(userAccount.isAuthenticated);
 
   const calculateRate = () => {
     if (stats?.paymentsSuccessfulCounts && stats?.paymentsTotalCount) {
@@ -28,24 +25,22 @@ export const DashboardAnalytics = () => {
     return 0;
   };
 
-  useEffect(() => {
-    if (userAccount.isAuthenticated) {
-      dispatch(getStatisticsAction());
-    }
-
-    return () => {
-      dispatch(clearStatisticsAction());
-    };
-  }, [dispatch, userAccount.isAuthenticated]);
-
-  if (apiErrorStats) {
+  if (error) {
     return (
       <Notification variant="error" title="Error">
-        {apiErrorStats}
+        {error.message}
       </Notification>
     );
   }
 
+  if (isLoading || isFetching) {
+    return (
+      <div className="StatCards StatCards--home">
+        <div className="Note">Loading…</div>
+      </div>
+    );
+  }
+
   return (
     <div className="StatCards StatCards--home">
       {/* TODO: add disbursement volume chart */}
@@ -122,7 +117,10 @@ export const DashboardAnalytics = () => {
               {stats?.assets.map((a) => (
                 <div className="StatCards__card--flexCols" key={a.assetCode}>
                   <div>
-                    <AssetAmount amount={a.success || "0"} assetCode={a.assetCode} />
+                    <AssetAmount
+                      amount={a.success || "0"}
+                      assetCode={a.assetCode}
+                    />
                   </div>
                   <div>
                     <AssetAmount amount={a.average} assetCode={a.assetCode} />