Skip to content

WAL-395, WAL-396: add loader, default self payment to sent #595

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
acharb merged 2 commits into from
Aug 4, 2022
Merged

WAL-395, WAL-396: add loader, default self payment to sent #595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea34c6a
add loader, default self payment to sent
acharb Aug 4, 2022
6a6bc68
Merge ea34c6a3c88f120355816e8192af636da216f6b4 into e69fc9d34c798ee4c…
acharb Aug 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion extension/src/popup/components/accountHistory/HistoryItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export const HistoryItem = ({
created_at: createdAt,
id,
to,
from,
type,
transaction_attr: { operation_count: operationCount },
isPayment = false,
Expand Down Expand Up @@ -111,7 +112,8 @@ export const HistoryItem = ({
operationText: `+${new BigNumber(amount)} ${destAssetCode}`,
};
} else if (isPayment) {
isRecipient = to === publicKey;
// default to Sent if a payment to self
isRecipient = to === publicKey && from !== publicKey;
paymentDifference = isRecipient ? "+" : "-";
PaymentComponent = (
<>
Expand Down
12 changes: 10 additions & 2 deletions extension/src/popup/views/AccountHistory/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
import { Loader } from "@stellar/design-system";

import { getAccountHistory } from "@shared/api/internal";
import { HorizonOperation } from "@shared/api/types";
Expand Down Expand Up @@ -61,13 +62,15 @@ export const AccountHistory = () => {
const [detailViewProps, setDetailViewProps] = useState(
defaultDetailViewProps,
);
const [isLoading, setIsLoading] = useState(false);

const stellarExpertUrl = getStellarExpertUrl(networkDetails.isTestnet);

// differentiate between if data is still loading and if no account history results came back from Horizon
const isAccountHistoryLoading = historySegments === null;

useEffect(() => {
setIsLoading(true);
const createSegments = (operations: HorizonOperation[]) => {
const segments = {
[SELECTOR_OPTIONS.ALL]: [] as HistoryItemOperation[],
Expand All @@ -81,8 +84,7 @@ export const AccountHistory = () => {
if (isPayment && !isSwap) {
if (operation.source_account === publicKey) {
segments[SELECTOR_OPTIONS.SENT].push(historyOperation);
}
if (operation.to === publicKey) {
} else if (operation.to === publicKey) {

@acharb acharb Aug 4, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@piyalbasu is there any reason we wouldn't want if-else here? I can't think of one, but just wanted to double check

@piyalbasu piyalbasu Aug 4, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think my original thinking was just that self payments should be under both SENT and RECEIVED. But since we now have isSwap and are defaulting to SENT, this makes more sense.

segments[SELECTOR_OPTIONS.RECEIVED].push(historyOperation);
}
}
Expand All @@ -100,6 +102,7 @@ export const AccountHistory = () => {
} catch (e) {
console.error(e);
}
setIsLoading(false);
};
fetchAccountHistory();
}, [publicKey, networkDetails]);
Expand All @@ -108,6 +111,11 @@ export const AccountHistory = () => {
<TransactionDetail {...detailViewProps} />
) : (
<div className="AccountHistory">
{isLoading && (
<div className="AccountHistory__loader">
<Loader size="2rem" />
</div>
)}
<div className="AccountHistory__wrapper">
<header className="AccountHistory__header">{t("Transactions")}</header>
<div className="AccountHistory__selector">
Expand Down
13 changes: 13 additions & 0 deletions extension/src/popup/views/AccountHistory/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,19 @@
padding: var(--popup-vertical-padding) var(--popup--side-padding);
}

&__loader {
height: var(--popup--height);
width: var(--popup--width);
z-index: calc(var(--back--button-z-index) + 1);
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}

&__header {
font-size: 1.25rem;
margin-bottom: 1.5rem;
Expand Down