frontend: change transaction info for send-to-self

Until now a send-to-self transaction looked more like an outgoing
transaction with the amount sent.

Changed to only show the fee paid as outgoing and the amount of
coin as conversion amount.

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Unreleased
+- Improve send-to-self transactions in account overview
 
 # 4.46.0
 - Android: enable export logs feature

backend/coins/btc/handlers/handlers.go

@@ -219,10 +219,10 @@ func (handlers *Handlers) getTxInfoJSON(txInfo *accounts.TransactionData, detail
 		Time:         formattedTime,
 		Addresses:    addresses,
 		Note:         handlers.account.TxNote(txInfo.InternalID),
+		Fee:          feeString,
 	}
 
 	if detail {
-		txInfoJSON.Fee = feeString
 		switch handlers.account.Coin().(type) {
 		case *btc.Coin:
 			txInfoJSON.VSize = txInfo.VSize

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

@@ -18,7 +18,7 @@ import type { TTransactionStatus, TTransactionType } from '@/api/account';
 import { ArrowFloorDownGreen, ArrowUTurn, ArrowFloorUpRed, Warning } from '@/components/icon/icon';
 
 type TProps = {
-  status: TTransactionStatus;
+  status?: TTransactionStatus;
   type: TTransactionType;
 };
 

frontends/web/src/components/transactions/transaction.module.css

@@ -105,6 +105,15 @@
   font-size: 12px;
 }
 
+.txSmallInlineIcon img {
+  max-height: 15px;
+  max-width: 15px;
+  vertical-align: text-bottom;
+}
+.txConversionAmount .txSmallInlineIcon {
+  padding-right: var(--space-eight);
+}
+
 .txNote {
   display: block;
   padding: 3px 0;

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

@@ -28,12 +28,13 @@ import { getTxSign } from './utils';
 import styles from './transaction.module.css';
 
 type TTransactionProps = ITransaction & {
-  onShowDetail: (internalID: ITransaction['internalID']) => void
+  onShowDetail: (internalID: ITransaction['internalID']) => void;
 }
 
 export const Transaction = ({
   addresses,
   amountAtTime,
+  fee,
   onShowDetail,
   internalID,
   note,
@@ -65,7 +66,11 @@ export const Transaction = ({
           time={time}
           type={type}
         />
-        <Amounts amount={amountAtTime} type={type} />
+        <Amounts
+          amount={amountAtTime}
+          fee={fee}
+          type={type}
+        />
         <button
           className={styles.txShowDetailBtn}
           onClick={() => !isMobile && onShowDetail(internalID)}
@@ -146,48 +151,58 @@ const Status = ({
 
 type TAmountsProps = {
   amount: IAmount;
+  fee: IAmount;
   type: TTransactionType;
 }
 
 const Amounts = ({
   amount,
+  fee,
   type,
 }: TAmountsProps) => {
   const { defaultCurrency } = useContext(RatesContext);
   const conversion = amount?.conversions && amount?.conversions[defaultCurrency];
   const sign = getTxSign(type);
   const txTypeClass = `txAmount-${type}`;
   const conversionPrefix = amount.estimated ? '\u2248' : null; // ≈
+  const sendToSelf = type === 'send_to_self';
+  const conversionUnit = sendToSelf ? amount.unit : defaultCurrency;
+
   return (
     <span className={`${styles.txAmountsColumn} ${styles[txTypeClass]}`}>
       {/* <data value={amount.amount}> */}
       <span className={styles.txAmount}>
         {sign}
         <Amount
-          amount={amount.amount}
+          amount={sendToSelf ? fee.amount : amount.amount}
           unit={amount.unit}
         />
         <span className={styles.txUnit}>
           {' '}
-          {amount.unit}
+          {sendToSelf ? fee.unit : amount.unit}
         </span>
       </span>
       {/* </data> */}
       <span className={styles.txConversionAmount}>
+        {sendToSelf && (
+          <span className={styles.txSmallInlineIcon}>
+            <Arrow type="send_to_self" />
+          </span>
+        )}
         {conversionPrefix && (
           <span className={styles.txPrefix}>
             {conversionPrefix}
             {' '}
           </span>
         )}
-        {conversion && sign}
+        {conversion && !sendToSelf ? sign : null}
         <Amount
-          amount={conversion || ''}
-          unit={defaultCurrency}
+          amount={sendToSelf ? amount.amount : conversion || ''}
+          unit={conversionUnit}
         />
         <span className={styles.txUnit}>
           {' '}
-          {defaultCurrency}
+          {conversionUnit}
         </span>
       </span>
     </span>

frontends/web/src/components/transactions/utils.ts

@@ -16,6 +16,7 @@
 
 export const getTxSign = (type: string) => {
   switch (type) {
+  case 'send_to_self':
   case 'send':
     return '−';
   case 'receive':