SDP-1758 Added Wallet History for Stellar Distribution Accounts.

Author: marwen-abid

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## Unreleased
+
+### Added
+- Added Wallet History for Stellar Distribution Accounts. [#385](https://github.com/stellar/stellar-disbursement-platform-frontend/pull/385)
+
+
 ## [5.0.0](https://github.com/stellar/stellar-disbursement-platform-frontend/releases/tag/5.0.0) ([diff](https://github.com/stellar/stellar-disbursement-platform-frontend/compare/4.1.0...5.0.0))
 
 ### Added

src/components/DistributionAccountStellar.tsx

@@ -13,6 +13,7 @@ import { InfoTooltip } from "@/components/InfoTooltip";
 import { LoadingContent } from "@/components/LoadingContent";
 import { SectionHeader } from "@/components/SectionHeader";
 import { Title } from "@/components/Title";
+import { WalletHistory } from "@/components/WalletHistory";
 import { WalletTrustlines } from "@/components/WalletTrustlines";
 import { useOrgAccountInfo } from "@/hooks/useOrgAccountInfo";
 import { useRedux } from "@/hooks/useRedux";
@@ -151,6 +152,17 @@ export const DistributionAccountStellar = () => {
           }}
         />
 
+        <Card>
+          <div className="CardStack__card">
+            <div className="CardStack__title">
+              <Heading as="h4" size="xs">
+                Wallet history
+              </Heading>
+            </div>
+            <WalletHistory stellarAddress={distributionAccountPublicKey} />
+          </div>
+        </Card>
+
         <ShowForRoles acceptedRoles={["owner", "financial_controller"]}>
           <BridgeIntegrationSection
             onOptIn={handleBridgeOptIn}

src/components/ReceiverWalletHistory.tsx renamed to src/components/WalletHistory.tsx

@@ -1,17 +1,17 @@
 import { Card, Link, Profile, Notification } from "@stellar/design-system";
-import { STELLAR_EXPERT_URL } from "@/constants/envVariables";
-import { useStellarAccountPayments } from "@/apiQueries/useStellarAccountPayments";
-import { formatDateTime } from "@/helpers/formatIntlDateTime";
 
-import { Table } from "@/components/Table";
+import { useStellarAccountPayments } from "@/apiQueries/useStellarAccountPayments";
 import { AssetAmount } from "@/components/AssetAmount";
 import { ErrorWithExtras } from "@/components/ErrorWithExtras";
+import { Table } from "@/components/Table";
+import { STELLAR_EXPERT_URL } from "@/constants/envVariables";
+import { formatDateTime } from "@/helpers/formatIntlDateTime";
 
-interface ReceiverWalletHistoryProps {
+interface WalletHistoryProps {
   stellarAddress: string | undefined;
 }
 
-export const ReceiverWalletHistory = ({ stellarAddress }: ReceiverWalletHistoryProps) => {
+export const WalletHistory = ({ stellarAddress }: WalletHistoryProps) => {
   const { isLoading, isFetching, data, error } = useStellarAccountPayments(stellarAddress);
 
   if (stellarAddress && (isLoading || isFetching)) {
@@ -65,7 +65,7 @@ export const ReceiverWalletHistory = ({ stellarAddress }: ReceiverWalletHistoryP
             ))
           ) : (
             <Table.BodyRow>
-              <td colSpan={5} className="ReceiverDetails__wallets__noRecentPayments">
+              <td colSpan={5} className="WalletHistory__noRecentPayments">
                 No recent payments
               </td>
             </Table.BodyRow>

src/pages/ReceiverDetails.tsx

@@ -23,8 +23,8 @@ import { LoadingContent } from "@/components/LoadingContent";
 import { NotificationWithButtons } from "@/components/NotificationWithButtons";
 import { ReceiverPayments } from "@/components/ReceiverPayments";
 import { ReceiverWalletBalance } from "@/components/ReceiverWalletBalance";
-import { ReceiverWalletHistory } from "@/components/ReceiverWalletHistory";
 import { SectionHeader } from "@/components/SectionHeader";
+import { WalletHistory } from "@/components/WalletHistory";
 import { GENERIC_ERROR_MESSAGE, Routes } from "@/constants/settings";
 import { formatDateTime } from "@/helpers/formatIntlDateTime";
 import { percent } from "@/helpers/formatIntlNumber";
@@ -487,7 +487,7 @@ export const ReceiverDetails = () => {
                   </SectionHeader.Row>
                 </SectionHeader>
 
-                <ReceiverWalletHistory stellarAddress={selectedWallet.stellarAddress} />
+                <WalletHistory stellarAddress={selectedWallet.stellarAddress} />
               </div>
             ) : null}
           </>