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.
BitBoxSwiss · Nov 26, 2024 · cf1c17f · cf1c17f
1 parent 1b77204
commit cf1c17f
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 11 deletions.
diff --git 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.1
 - Fix Android app crash on old Android versions

diff --git 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
@@ -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
@@ -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
@@ -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>

diff --git 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':