refactor: handle sent to self with return transactions (#795)

ArdentHQ · Nov 6, 2024 · 06fdcda · 06fdcda
1 parent f8eb2cc
commit 06fdcda
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 135 deletions.
diff --git a/...mains/transaction/components/TransactionTable/TransactionRow/TransactionAmount.blocks.tsx b/...mains/transaction/components/TransactionTable/TransactionRow/TransactionAmount.blocks.tsx
@@ -13,8 +13,13 @@ const calculateReturnedAmount = function (transaction: ExtendedTransactionData):
 		return returnedAmount;
 	}
 
+	// should return 0 as we don't want to show a hint
+	if (transaction.isReturn()) {
+		return returnedAmount;
+	}
+
 	for (const recipient of transaction.recipients().values()) {
-		if (transaction.isReturn() && transaction.sender() === recipient.address) {
+		if (transaction.sender() === recipient.address) {
 			returnedAmount += recipient.amount;
 		}
 	}
@@ -40,7 +45,7 @@ export const TransactionAmountLabel = ({ transaction }: { transaction: ExtendedT
 			value={amount}
 			isNegative={isNegative}
 			ticker={transaction.wallet().currency()}
-			hideSign={transaction.isTransfer() && transaction.sender() === transaction.recipient()}
+			hideSign={transaction.isReturn()}
 			isCompact
 			hint={
 				returnedAmount

diff --git a/...domains/transaction/components/TransactionTable/TransactionRow/TransactionBlocks.test.tsx b/...domains/transaction/components/TransactionTable/TransactionRow/TransactionBlocks.test.tsx
@@ -12,7 +12,7 @@ describe("TransactionAmount.blocks", () => {
 		...TransactionFixture,
 		fee: () => 5,
 		isMultiPayment: () => true,
-		isReturn: () => true,
+		isReturn: () => false,
 		recipients: () => [
 			{ address: "address-1", amount: 10 },
 			{ address: "address-2", amount: 20 },
@@ -44,6 +44,12 @@ describe("TransactionAmount.blocks", () => {
 		expect(screen.getByText(/35 DARK/)).toBeInTheDocument();
 	});
 
+	it("should not show a hint for a return transaction", () => {
+		render(<TransactionAmountLabel transaction={{ ...fixture, isReturn: () => true } as any} />);
+
+		expect(screen.queryByTestId("AmountLabel__hint")).not.toBeInTheDocument();
+	});
+
 	it("should show fiat value for multiPayment transaction", () => {
 		const exchangeMock = vi.spyOn(env.exchangeRates(), "exchange").mockReturnValue(5);
 

diff --git a/.../transaction/components/TransactionTable/TransactionRow/TransactionRowAddressing.test.tsx b/.../transaction/components/TransactionTable/TransactionRow/TransactionRowAddressing.test.tsx
@@ -94,8 +94,8 @@ describe("TransactionRowAddressing", () => {
 	});
 
 	it("should render label with the 'Return' prefix if transaction is sent to address itself", () => {
-		const notSentFixture = { ...fixture, isSent: () => false };
-		render(<TransactionRowAddressing transaction={notSentFixture as any} profile={profile} />);
+		const returnFixture = { ...fixture, isReturn: () => true };
+		render(<TransactionRowAddressing transaction={returnFixture as any} profile={profile} />);
 
 		expect(screen.getByTestId("TransactionRowAddressing__label")).toHaveTextContent("Return");
 	});

diff --git a/...mains/transaction/components/TransactionTable/TransactionRow/TransactionRowAddressing.tsx b/...mains/transaction/components/TransactionTable/TransactionRow/TransactionRowAddressing.tsx
@@ -55,6 +55,10 @@ export const TransactionRowAddressing = ({
 
 	let direction: Direction = isNegative ? "sent" : "received";
 
+	if (transaction.isReturn()) {
+		direction = "return";
+	}
+
 	const { env } = useEnvironmentContext();
 	const { t } = useTranslation();
 	const { getWalletAlias } = useWalletAlias();
@@ -156,10 +160,6 @@ export const TransactionRowAddressing = ({
 		);
 	}
 
-	if (transaction.sender() === transaction.recipient()) {
-		direction = "return";
-	}
-
 	return (
 		<div className="flex flex-row gap-2" data-testid="TransactionRowAddressing__container">
 			<TransactionRowLabel direction={direction} />

diff --git a/...ion/components/TransactionTable/TransactionRow/__snapshots__/TransactionRow.test.tsx.snap b/...ion/components/TransactionTable/TransactionRow/__snapshots__/TransactionRow.test.tsx.snap
@@ -85,11 +85,11 @@ exports[`TransactionRow > should omit the currency for transactions from test ne
               data-testid="TransactionRowAddressing__container"
             >
               <div
-                class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1kocbuc"
-                color="secondary"
+                class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1qplu6d"
+                color="danger-bg"
                 data-testid="TransactionRowAddressing__label"
               >
-                Return
+                To
               </div>
               <div
                 class="w-50 sm:w-30"
@@ -124,8 +124,8 @@ exports[`TransactionRow > should omit the currency for transactions from test ne
               class="flex flex-col items-end gap-1"
             >
               <div
-                class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-1vn5kd9"
-                color="secondary"
+                class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-xqt0aw"
+                color="danger-bg"
                 data-testid="AmountLabel__wrapper"
               >
                 <div
@@ -135,7 +135,7 @@ exports[`TransactionRow > should omit the currency for transactions from test ne
                     class="whitespace-nowrap text-sm"
                     data-testid="Amount"
                   >
-                    121 BTC
+                    - 121 BTC
                   </span>
                 </div>
               </div>
@@ -258,11 +258,11 @@ exports[`TransactionRow > should render 1`] = `
               data-testid="TransactionRowAddressing__container"
             >
               <div
-                class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1kocbuc"
-                color="secondary"
+                class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1qplu6d"
+                color="danger-bg"
                 data-testid="TransactionRowAddressing__label"
               >
-                Return
+                To
               </div>
               <div
                 class="w-50 sm:w-40 lg:w-50"
@@ -308,8 +308,8 @@ exports[`TransactionRow > should render 1`] = `
               class="flex flex-col items-end gap-1"
             >
               <div
-                class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-1vn5kd9"
-                color="secondary"
+                class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-xqt0aw"
+                color="danger-bg"
                 data-testid="AmountLabel__wrapper"
               >
                 <div
@@ -319,7 +319,7 @@ exports[`TransactionRow > should render 1`] = `
                     class="whitespace-nowrap text-sm"
                     data-testid="Amount"
                   >
-                    121 DARK
+                    - 121 DARK
                   </span>
                 </div>
               </div>
@@ -427,11 +427,11 @@ exports[`TransactionRow > should render responsive 1`] = `
                     data-testid="TransactionRowAddressing__container"
                   >
                     <div
-                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1kocbuc"
-                      color="secondary"
+                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1qplu6d"
+                      color="danger-bg"
                       data-testid="TransactionRowAddressing__label"
                     >
-                      Return
+                      To
                     </div>
                     <div
                       class="w-50 sm:w-40 lg:w-50"
@@ -481,8 +481,8 @@ exports[`TransactionRow > should render responsive 1`] = `
                   class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
                 >
                   <div
-                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-1vn5kd9"
-                    color="secondary"
+                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-xqt0aw"
+                    color="danger-bg"
                     data-testid="AmountLabel__wrapper"
                   >
                     <div
@@ -492,7 +492,7 @@ exports[`TransactionRow > should render responsive 1`] = `
                         class="whitespace-nowrap text-sm"
                         data-testid="Amount"
                       >
-                        121 DARK
+                        - 121 DARK
                       </span>
                     </div>
                   </div>
@@ -596,11 +596,11 @@ exports[`TransactionRow > should render responsive 2`] = `
                     data-testid="TransactionRowAddressing__container"
                   >
                     <div
-                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1kocbuc"
-                      color="secondary"
+                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1qplu6d"
+                      color="danger-bg"
                       data-testid="TransactionRowAddressing__label"
                     >
-                      Return
+                      To
                     </div>
                     <div
                       class="w-50 sm:w-40 lg:w-50"
@@ -650,8 +650,8 @@ exports[`TransactionRow > should render responsive 2`] = `
                   class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
                 >
                   <div
-                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-1vn5kd9"
-                    color="secondary"
+                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-xqt0aw"
+                    color="danger-bg"
                     data-testid="AmountLabel__wrapper"
                   >
                     <div
@@ -661,7 +661,7 @@ exports[`TransactionRow > should render responsive 2`] = `
                         class="whitespace-nowrap text-sm"
                         data-testid="Amount"
                       >
-                        121 DARK
+                        - 121 DARK
                       </span>
                     </div>
                   </div>
@@ -1023,11 +1023,11 @@ exports[`TransactionRow > should render with currency 1`] = `
               data-testid="TransactionRowAddressing__container"
             >
               <div
-                class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1kocbuc"
-                color="secondary"
+                class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1qplu6d"
+                color="danger-bg"
                 data-testid="TransactionRowAddressing__label"
               >
-                Return
+                To
               </div>
               <div
                 class="w-50 sm:w-30"
@@ -1062,8 +1062,8 @@ exports[`TransactionRow > should render with currency 1`] = `
               class="flex flex-col items-end gap-1"
             >
               <div
-                class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-1vn5kd9"
-                color="secondary"
+                class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-xqt0aw"
+                color="danger-bg"
                 data-testid="AmountLabel__wrapper"
               >
                 <div
@@ -1073,7 +1073,7 @@ exports[`TransactionRow > should render with currency 1`] = `
                     class="whitespace-nowrap text-sm"
                     data-testid="Amount"
                   >
-                    121 BTC
+                    - 121 BTC
                   </span>
                 </div>
               </div>

diff --git a/...mponents/TransactionTable/TransactionRow/__snapshots__/TransactionRowMobile.test.tsx.snap b/...mponents/TransactionTable/TransactionRow/__snapshots__/TransactionRowMobile.test.tsx.snap
@@ -70,11 +70,11 @@ exports[`TransactionRowMobile > should render 1`] = `
                     data-testid="TransactionRowAddressing__container"
                   >
                     <div
-                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1kocbuc"
-                      color="secondary"
+                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1qplu6d"
+                      color="danger-bg"
                       data-testid="TransactionRowAddressing__label"
                     >
-                      Return
+                      To
                     </div>
                     <div
                       class="w-50 sm:w-40 lg:w-50"
@@ -124,8 +124,8 @@ exports[`TransactionRowMobile > should render 1`] = `
                   class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
                 >
                   <div
-                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-1vn5kd9"
-                    color="secondary"
+                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-xqt0aw"
+                    color="danger-bg"
                     data-testid="AmountLabel__wrapper"
                   >
                     <div
@@ -135,7 +135,7 @@ exports[`TransactionRowMobile > should render 1`] = `
                         class="whitespace-nowrap text-sm"
                         data-testid="Amount"
                       >
-                        121 DARK
+                        - 121 DARK
                       </span>
                     </div>
                   </div>
@@ -239,11 +239,11 @@ exports[`TransactionRowMobile > should render 2`] = `
                     data-testid="TransactionRowAddressing__container"
                   >
                     <div
-                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1kocbuc"
-                      color="secondary"
+                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1qplu6d"
+                      color="danger-bg"
                       data-testid="TransactionRowAddressing__label"
                     >
-                      Return
+                      To
                     </div>
                     <div
                       class="w-50 sm:w-40 lg:w-50"
@@ -293,8 +293,8 @@ exports[`TransactionRowMobile > should render 2`] = `
                   class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
                 >
                   <div
-                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-1vn5kd9"
-                    color="secondary"
+                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-xqt0aw"
+                    color="danger-bg"
                     data-testid="AmountLabel__wrapper"
                   >
                     <div
@@ -304,7 +304,7 @@ exports[`TransactionRowMobile > should render 2`] = `
                         class="whitespace-nowrap text-sm"
                         data-testid="Amount"
                       >
-                        121 DARK
+                        - 121 DARK
                       </span>
                     </div>
                   </div>
@@ -700,11 +700,11 @@ exports[`TransactionRowMobile > should render with currency 1`] = `
                     data-testid="TransactionRowAddressing__container"
                   >
                     <div
-                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1kocbuc"
-                      color="secondary"
+                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1qplu6d"
+                      color="danger-bg"
                       data-testid="TransactionRowAddressing__label"
                     >
-                      Return
+                      To
                     </div>
                     <div
                       class="w-50 sm:w-30"
@@ -743,8 +743,8 @@ exports[`TransactionRowMobile > should render with currency 1`] = `
                   class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
                 >
                   <div
-                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-1vn5kd9"
-                    color="secondary"
+                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-xqt0aw"
+                    color="danger-bg"
                     data-testid="AmountLabel__wrapper"
                   >
                     <div
@@ -754,7 +754,7 @@ exports[`TransactionRowMobile > should render with currency 1`] = `
                         class="whitespace-nowrap text-sm"
                         data-testid="Amount"
                       >
-                        121 BTC
+                        - 121 BTC
                       </span>
                     </div>
                   </div>
@@ -858,11 +858,11 @@ exports[`TransactionRowMobile > should render with currency 2`] = `
                     data-testid="TransactionRowAddressing__container"
                   >
                     <div
-                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1kocbuc"
-                      color="secondary"
+                      class="!flex h-[21px] w-12 items-center justify-center rounded px-1 py-[3px] dark:border css-1qplu6d"
+                      color="danger-bg"
                       data-testid="TransactionRowAddressing__label"
                     >
-                      Return
+                      To
                     </div>
                     <div
                       class="w-50 sm:w-30"
@@ -901,8 +901,8 @@ exports[`TransactionRowMobile > should render with currency 2`] = `
                   class="text-sm font-semibold text-theme-secondary-900 dark:text-theme-secondary-200"
                 >
                   <div
-                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-1vn5kd9"
-                    color="secondary"
+                    class="flex items-center justify-center px-1.5 h-[21px] rounded dark:border css-xqt0aw"
+                    color="danger-bg"
                     data-testid="AmountLabel__wrapper"
                   >
                     <div
@@ -912,7 +912,7 @@ exports[`TransactionRowMobile > should render with currency 2`] = `
                         class="whitespace-nowrap text-sm"
                         data-testid="Amount"
                       >
-                        121 BTC
+                        - 121 BTC
                       </span>
                     </div>
                   </div>