From 2b2934102e0822aa4599500d6ebd27ebc61b988a Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 7 Nov 2024 08:47:04 +0100
Subject: [PATCH] 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                                  |  3 +-
 backend/coins/btc/handlers/handlers.go        |  2 +-
 .../transactions/components/arrows.tsx        |  2 +-
 .../transactions/transaction.module.css       |  9 ++++++
 .../components/transactions/transaction.tsx   | 31 ++++++++++++++-----
 .../web/src/components/transactions/utils.ts  |  1 +
 6 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed517820bd..b02a1e5ec4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,8 @@
 # Changelog
 
 ## Unreleased
-- Fix long transaction notes to show fully on multiple lines when necessary 
+- Fix long transaction notes to show fully on multiple lines when necessary
+- Improve send-to-self transactions in account overview
 
 # 4.46.2
 - Fix Linux blank screen issue related to the local mimetype database
diff --git a/backend/coins/btc/handlers/handlers.go b/backend/coins/btc/handlers/handlers.go
index 14052c311a..2ce8e87ad8 100644
--- a/backend/coins/btc/handlers/handlers.go
+++ b/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
diff --git a/frontends/web/src/components/transactions/components/arrows.tsx b/frontends/web/src/components/transactions/components/arrows.tsx
index 65d847bea8..5f7ed8fff7 100644
--- a/frontends/web/src/components/transactions/components/arrows.tsx
+++ b/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;
 };
 
diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
index 9c6bf60e6f..65dac9256b 100644
--- a/frontends/web/src/components/transactions/transaction.module.css
+++ b/frontends/web/src/components/transactions/transaction.module.css
@@ -106,6 +106,15 @@
   font-size: 12px;
 }
 
+.txSmallInlineIcon img {
+  max-height: 15px;
+  max-width: 15px;
+  vertical-align: text-bottom;
+}
+.txConversionAmount .txSmallInlineIcon {
+  padding-right: var(--space-eight);
+}
+
 .txNote {
   color: var(--color-secondary);
   display: block;
diff --git a/frontends/web/src/components/transactions/transaction.tsx b/frontends/web/src/components/transactions/transaction.tsx
index 75c74a5782..b33805cef9 100644
--- a/frontends/web/src/components/transactions/transaction.tsx
+++ b/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,11 +151,13 @@ const Status = ({
 
 type TAmountsProps = {
   amount: IAmount;
+  fee: IAmount;
   type: TTransactionType;
 }
 
 const Amounts = ({
   amount,
+  fee,
   type,
 }: TAmountsProps) => {
   const { defaultCurrency } = useContext(RatesContext);
@@ -158,36 +165,44 @@ const Amounts = ({
   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>
diff --git a/frontends/web/src/components/transactions/utils.ts b/frontends/web/src/components/transactions/utils.ts
index 746247f447..3e10ef3d53 100644
--- a/frontends/web/src/components/transactions/utils.ts
+++ b/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':