frontend: align send-to-self tx display with other txs

Keep the first row in BTC/sats and switch the second row to fiat for
consistency. Since the sent amount is no longer shown on the right
for send-to-self transactions, the left-side label now includes
amount to keep it visible.

Author: strmci

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Portfolio: reduce waiting time to display the chart
 - iOS: Add haptic feedback on toggle component
 - Apply rounded corners in several places and components of the app
+- Update send-to-self transactions in the transaction list
 
 ## v4.50.1
 - Fix a bug that would delay showing watch-only accounts.

frontends/web/src/components/amount/conversion-amount.tsx

@@ -3,7 +3,6 @@
 import { useContext } from 'react';
 import type { TAmountWithConversions, TTransactionType } from '@/api/account';
 import { RatesContext } from '@/contexts/RatesContext';
-import { Arrow } from '@/components/transactions/components/arrows';
 import { Amount } from '@/components/amount/amount';
 import { getTxSign } from '@/utils/transaction';
 import styles from './conversion-amount.module.css';
@@ -25,33 +24,27 @@ export const ConversionAmount = ({
   type,
 }: TConversionAmountProps) => {
   const { defaultCurrency } = useContext(RatesContext);
-  const conversion = amount?.conversions && amount?.conversions[defaultCurrency];
 
   const sign = getTxSign(type);
   const estimatedPrefix = '\u2248'; // ≈
-  const sendToSelf = type === 'send_to_self';
   const recv = type === 'receive';
-  const amountToShow = recv || sendToSelf ? amount : deductedAmount;
-  const conversionUnit = sendToSelf ? amountToShow.unit : defaultCurrency;
+  const amountToShow = recv ? amount : deductedAmount;
+  const conversionUnit = defaultCurrency;
+  const conversion = amountToShow?.conversions && amountToShow?.conversions[defaultCurrency];
 
-  // we skip the estimated conversion prefix when the Tx is send to self, or both coin and conversion are in BTC units.
-  const skipEstimatedPrefix = sendToSelf || (btcUnits.includes(conversionUnit) && btcUnits.includes(amountToShow.unit));
+  // we skip the estimated conversion prefix when both coin and conversion are in BTC units.
+  const skipEstimatedPrefix = btcUnits.includes(conversionUnit) && btcUnits.includes(amountToShow.unit);
 
   return (
     <span className={styles.txConversionAmount}>
-      {(conversion || sendToSelf) && amountToShow ? (
+      {conversion && amountToShow ? (
         <>
-          {sendToSelf && (
-            <span className={styles.txSmallInlineIcon}>
-              <Arrow type="send_to_self" />
-            </span>
-          )}
           {amountToShow.estimated && !skipEstimatedPrefix && (
             <span className={styles.txPrefix}>{estimatedPrefix}{' '}</span>
           )}
-          {conversion && conversion !== '0' && !sendToSelf ? sign : null}
+          {conversion !== '0' ? sign : null}
           <Amount
-            amount={sendToSelf ? amountToShow.amount : conversion || ''}
+            amount={conversion || ''}
             unit={conversionUnit}
           />
           <span className={styles.txUnit}>

frontends/web/src/components/transactions/transaction.tsx

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import type { TAmountWithConversions, TTransactionStatus, TTransactionType, TTransaction } from '@/api/account';
 import { useMediaQuery } from '@/hooks/mediaquery';
 import { Loupe } from '@/components/icon/icon';
@@ -44,6 +44,7 @@ export const Transaction = ({
         </span>
         <Status
           addresses={addresses}
+          amount={amountAtTime}
           note={note}
           numConfirmations={numConfirmations}
           numConfirmationsComplete={numConfirmationsComplete}
@@ -70,6 +71,7 @@ export const Transaction = ({
 
 type TStatus = {
   addresses: string[];
+  amount: TAmountWithConversions;
   note?: TTransaction['note'];
   numConfirmations: number;
   numConfirmationsComplete: number;
@@ -80,6 +82,7 @@ type TStatus = {
 
 const Status = ({
   addresses,
+  amount,
   note,
   numConfirmations,
   numConfirmationsComplete,
@@ -102,6 +105,7 @@ const Status = ({
         ) : (
           <Addresses
             addresses={addresses}
+            amount={amount}
             status={status}
             type={type}
           />
@@ -151,10 +155,13 @@ const Amounts = ({
   const displayAmount = recv ? amount : deductedAmount;
 
   return (
-    <span className={`
+    <span
+      className={`
       ${styles.txAmountsColumn || ''}
       ${styles[txTypeClass] || ''}
-    `}>
+    `}
+      data-testid="tx-amounts"
+    >
       <span className={styles.txAmount}>
         {displayAmount.amount !== '0' && getTxSign(type)}
         <AmountWithUnit
@@ -171,6 +178,22 @@ type TDateProps = {
   time: string | null;
 };
 
+type TAddressListProps = {
+  values: string[];
+};
+
+const AddressList = ({ values }: TAddressListProps) => (
+  <span className={styles.addresses}>
+    {values[0]}
+    {values.length > 1 && (
+      <span>
+        {' '}
+        (+{values.length - 1})
+      </span>
+    )}
+  </span>
+);
+
 const Date = ({
   time,
 }: TDateProps) => {
@@ -192,39 +215,55 @@ const Date = ({
 
 type TAddresses = {
   addresses: TTransaction['addresses'];
+  amount: TAmountWithConversions;
   status: TTransactionStatus;
   type: TTransactionType;
 };
 
 const Addresses = ({
   addresses,
+  amount,
   status,
   type,
 }: TAddresses) => {
   const { t } = useTranslation();
   const isMobile = useMediaQuery('(max-width: 768px)');
+
+  if (type === 'send_to_self') {
+    const labelKey = `transaction.tx.send_to_self_${status}`;
+    return (
+      <span className={styles.txNoteWithAddress}>
+        <span className={styles.txType}>
+          <Trans
+            i18nKey={labelKey}
+            components={[
+              <AmountWithUnit
+                amount={amount}
+                unitClassName={styles.txUnit}
+              />
+            ]}
+          />
+        </span>
+        {' '}
+        <AddressList values={addresses} />
+      </span>
+    );
+  }
+
   const label = isMobile
     ? (type === 'receive' ? t('generic.received') : t('generic.sent'))
     : (type === 'receive'
       ? t('transaction.tx.receive', { context: status })
       : t('transaction.tx.send', { context: status })
-    // send_to_self will currently show the send message
     );
 
   return (
     <span className={styles.txNoteWithAddress}>
       <span className={styles.txType}>
         {label}
       </span>
-      <span className={styles.addresses}>
-        {addresses[0]}
-        {addresses.length > 1 && (
-          <span>
-            {' '}
-            (+{addresses.length - 1})
-          </span>
-        )}
-      </span>
+      {' '}
+      <AddressList values={addresses} />
     </span>
   );
 };

frontends/web/src/locales/en/app.json

@@ -1961,7 +1961,10 @@
       "receive_pending": "Received to",
       "send_complete": "Sent to",
       "send_failed": "Failed sending to",
-      "send_pending": "Sent to"
+      "send_pending": "Sent to",
+      "send_to_self_complete": "Sent <0></0> to self",
+      "send_to_self_failed": "Failed sending <0></0> to self",
+      "send_to_self_pending": "Sent <0></0> to self"
     },
     "vsize": "Virtual size",
     "weight": "Weight"

frontends/web/tests/send.test.ts

@@ -193,11 +193,14 @@ test('Send BTC', async ({ page, host, frontendPort, servewalletPort }, testInfo)
     await page.getByTestId('close-button').click();
 
     // Verify that the values displayed are correctly
-    const shownDetractedAmount = await newTx.getByTestId('amountBlocks').nth(0).textContent();
-    const shownSentToSelfAmount = await newTx.getByTestId('amountBlocks').nth(1).textContent();
+    const labelAmount = await newTx
+      .getByTestId('amountBlocks').first()
+      .textContent();
+    const amountsColumn = newTx.getByTestId('tx-amounts');
+    const shownDetractedAmount = await amountsColumn.getByTestId('amountBlocks').nth(0).textContent();
 
+    expect(labelAmount).toBe(amount);
     expect(shownDetractedAmount).toBe(fee);
-    expect(shownSentToSelfAmount).toBe(amount);
 
   });