Skip to content
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

refactor: total amount label styles in multi-address tx table #938

Merged
merged 12 commits into from
Feb 5, 2025
Merged

refactor: total amount label styles in multi-address tx table #938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
43fd8d2
refactor: transaction total label
patricio0312rev Jan 30, 2025
0e4ab6a
refactor: hide styles for total amount in transaction row - desktop
patricio0312rev Jan 30, 2025
995ef79
refactor: hide styles for total amount in transaction row - mobile
patricio0312rev Jan 30, 2025
4045204
style: resolve style guide violations
patricio0312rev Jan 30, 2025
7c0397e
Merge branch 'feat/evm' into refactor/transaction-total-label-in-mult…
patricio0312rev Feb 3, 2025
758acf0
Merge branch 'feat/evm' into refactor/transaction-total-label-in-mult…
patricio0312rev Feb 4, 2025
00cb2ea
Merge branch 'feat/evm' into refactor/transaction-total-label-in-mult…
patricio0312rev Feb 4, 2025
e95640d
Merge branch 'feat/evm' into refactor/transaction-total-label-in-mult…
patricio0312rev Feb 4, 2025
f4aff0a
Merge branch 'feat/evm' into refactor/transaction-total-label-in-mult…
patricio0312rev Feb 4, 2025
6a020f6
fix: restore transaction table titles
patricio0312rev Feb 4, 2025
80a4d90
fix: hide ticker on hide styles variant for label
patricio0312rev Feb 4, 2025
8cd6403
Merge branch 'feat/evm' into refactor/transaction-total-label-in-mult…
patricio0312rev Feb 4, 2025
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
21 changes: 20 additions & 1 deletion ...mains/transaction/components/TransactionTable/TransactionRow/TransactionAmount.blocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,31 @@ export const TransactionAmountLabel = ({ transaction }: { transaction: ExtendedT
);
};

export const TransactionTotalLabel = ({ transaction }: { transaction: ExtendedTransactionData }): JSX.Element => {
export const TransactionTotalLabel = ({
transaction,
hideStyles = false,
}: {
transaction: ExtendedTransactionData;
hideStyles?: boolean;
}): JSX.Element => {
const { t } = useTranslation();

const currency = transaction.wallet().currency();
const returnedAmount = calculateReturnedAmount(transaction);

if (hideStyles) {
return (
<Amount
showSign={false}
showTicker={false}
ticker={currency}
value={transaction.total()}
isNegative={transaction.isSent()}
className="text-sm font-semibold"
/>
);
}

return (
<AmountLabel
value={transaction.total()}
Expand Down
4 changes: 2 additions & 2 deletions src/domains/transaction/components/TransactionTable/TransactionRow/TransactionRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export const TransactionRow = memo(
})}
>
<div className="flex flex-col items-end gap-1">
<TransactionTotalLabel transaction={transaction} />
<TransactionTotalLabel transaction={transaction} hideStyles={!hideSender} />
<span
className="text-xs font-semibold text-theme-secondary-700 lg:hidden"
data-testid="TransactionRow__exchange-currency"
Expand All @@ -189,7 +189,7 @@ export const TransactionRow = memo(
<Amount value={transaction.convertedTotal()} ticker={exchangeCurrency || ""} />
) : (
<div className="flex w-40 flex-col items-end gap-1">
<TransactionTotalLabel transaction={transaction} />
<TransactionTotalLabel transaction={transaction} hideStyles={!hideSender} />
<span
className="text-xs font-semibold text-theme-secondary-700 lg:hidden"
data-testid="TransactionRow__exchange-currency"
Expand Down
4 changes: 2 additions & 2 deletions ...ains/transaction/components/TransactionTable/TransactionRow/TransactionRowMobile.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,14 +174,14 @@ describe.each(["xs", "sm"])("TransactionRowMobile", (breakpoint) => {
</table>,
);

expect(screen.getByText("Amount")).toBeInTheDocument();
expect(screen.getByText("Amount (DARK)")).toBeInTheDocument();
});

it("should render skeleton with hideSender", () => {
render(
<table>
<tbody>
<TransactionRowMobile transaction={fixture as any} profile={profile} hideSender={true} isLoading />
<TransactionRowMobile transaction={fixture as any} profile={profile} hideSender={false} isLoading />
</tbody>
</table>,
);
Expand Down
4 changes: 2 additions & 2 deletions src/domains/transaction/components/TransactionTable/TransactionRow/TransactionRowMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,11 @@ export const TransactionRowMobile = memo(
title={
hideSender
? `${t("COMMON.VALUE")} (${transaction.wallet().currency()})`
: t("COMMON.AMOUNT")
: `${t("COMMON.AMOUNT")} (${transaction.wallet().currency()})`
}
className="w-full"
>
<TransactionTotalLabel transaction={transaction} />
<TransactionTotalLabel transaction={transaction} hideStyles={!hideSender} />
</MobileSection>

<MobileSection title={t("COMMON.FIAT_VALUE")} className="w-full">
Expand Down
16 changes: 8 additions & 8 deletions ...mponents/TransactionTable/TransactionRow/__snapshots__/TransactionRowMobile.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ exports[`TransactionRowMobile > should render 1`] = `
From
</div>
<div
class="w-40 sm:w-40 md:w-32 lg:w-50"
class="w-40 sm:w-40 md:w-32"
data-testid="TransactionRowAddressing__address-container"
>
<div
Expand Down Expand Up @@ -135,7 +135,7 @@ exports[`TransactionRowMobile > should render 1`] = `
To
</div>
<div
class="w-40 sm:w-40 md:w-32 lg:w-50"
class="w-40 sm:w-40 md:w-32"
data-testid="TransactionRowAddressing__address-container"
>
<div
Expand Down Expand Up @@ -177,7 +177,7 @@ exports[`TransactionRowMobile > should render 1`] = `
<span
class="text-sm font-semibold text-theme-secondary-700 dark:text-theme-secondary-500"
>
Amount
Amount (DARK)
</span>
<div
class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
Expand Down Expand Up @@ -309,7 +309,7 @@ exports[`TransactionRowMobile > should render 2`] = `
From
</div>
<div
class="w-40 sm:w-40 md:w-32 lg:w-50"
class="w-40 sm:w-40 md:w-32"
data-testid="TransactionRowAddressing__address-container"
>
<div
Expand Down Expand Up @@ -353,7 +353,7 @@ exports[`TransactionRowMobile > should render 2`] = `
To
</div>
<div
class="w-40 sm:w-40 md:w-32 lg:w-50"
class="w-40 sm:w-40 md:w-32"
data-testid="TransactionRowAddressing__address-container"
>
<div
Expand Down Expand Up @@ -395,7 +395,7 @@ exports[`TransactionRowMobile > should render 2`] = `
<span
class="text-sm font-semibold text-theme-secondary-700 dark:text-theme-secondary-500"
>
Amount
Amount (DARK)
</span>
<div
class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
Expand Down Expand Up @@ -917,7 +917,7 @@ exports[`TransactionRowMobile > should render with currency 1`] = `
<span
class="text-sm font-semibold text-theme-secondary-700 dark:text-theme-secondary-500"
>
Amount
Amount (BTC)
</span>
<div
class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
Expand Down Expand Up @@ -1113,7 +1113,7 @@ exports[`TransactionRowMobile > should render with currency 2`] = `
<span
class="text-sm font-semibold text-theme-secondary-700 dark:text-theme-secondary-500"
>
Amount
Amount (BTC)
</span>
<div
class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
Expand Down
2 changes: 1 addition & 1 deletion src/domains/transaction/components/TransactionTable/TransactionTable.helpers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const useTransactionTableColumns = ({ coin, hideSender }: { coin?: string
},
]),
{
Header: `${hideSender ? `${t("COMMON.VALUE")} (${coinLabel})` : t("COMMON.AMOUNT")}`,
Header: `${t(hideSender ? "COMMON.VALUE" : "COMMON.AMOUNT")} ${coinLabel}`,
accessor: (transaction) => transaction.total?.(),
className: "justify-end",
headerClassName: "no-border",
Expand Down
Loading