frontend: Add received date to coin control UTXO list

Add the received date (block header timestamp) to the UTXO detail in the
coin control view. This makes it easier for users to view the date, which can
be helpful for various reasons, without having to open each UTXO
individually in the block explorer.

Author: strmci

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 - Reduced support for BitBox01
 - Fix a bug that would prevent the app to perform firmware upgrade when offline.
+- Add received date to coin control transaction details
 
 # v4.47.2
 - Linux: fix compatiblity with some versions of Mesa that are incompatible with the bundled wayland libraries

backend/coins/btc/account.go

@@ -23,6 +23,7 @@ import (
 	"path"
 	"sort"
 	"sync/atomic"
+	"time"
 
 	"github.com/BitBoxSwiss/bitbox-wallet-app/backend/accounts"
 	accountsTypes "github.com/BitBoxSwiss/bitbox-wallet-app/backend/accounts/types"
@@ -840,9 +841,10 @@ func sortByAddresses(result []*SpendableOutput) []*SpendableOutput {
 // SpendableOutput is an unspent coin.
 type SpendableOutput struct {
 	*transactions.SpendableOutput
-	OutPoint wire.OutPoint
-	Address  *addresses.AccountAddress
-	IsChange bool
+	OutPoint        wire.OutPoint
+	Address         *addresses.AccountAddress
+	IsChange        bool
+	HeaderTimestamp *time.Time
 }
 
 // SpendableOutputs returns the utxo set, sorted by the value descending.
@@ -856,13 +858,18 @@ func (account *Account) SpendableOutputs() []*SpendableOutput {
 	}
 	for outPoint, txOut := range utxos {
 		scriptHashHex := blockchain.NewScriptHashHex(txOut.TxOut.PkScript)
+		headerTimestamp, err := account.transactions.GetHeaderTimestamp(outPoint.Hash)
+		if err != nil {
+			headerTimestamp = nil
+		}
 		result = append(
 			result,
 			&SpendableOutput{
 				OutPoint:        outPoint,
 				SpendableOutput: txOut,
 				Address:         account.getAddress(scriptHashHex),
 				IsChange:        account.IsChange(scriptHashHex),
+				HeaderTimestamp: headerTimestamp,
 			})
 	}
 	return sortByAddresses(result)

backend/coins/btc/handlers/handlers.go

@@ -357,15 +357,16 @@ func (handlers *Handlers) getUTXOs(*http.Request) (interface{}, error) {
 
 		result = append(result,
 			map[string]interface{}{
-				"outPoint":      output.OutPoint.String(),
-				"txId":          output.OutPoint.Hash.String(),
-				"txOutput":      output.OutPoint.Index,
-				"amount":        handlers.formatBTCAmountAsJSON(btcutil.Amount(output.TxOut.Value), false),
-				"address":       address,
-				"scriptType":    output.Address.Configuration.ScriptType(),
-				"note":          handlers.account.TxNote(output.OutPoint.Hash.String()),
-				"addressReused": addressReused,
-				"isChange":      output.IsChange,
+				"outPoint":        output.OutPoint.String(),
+				"txId":            output.OutPoint.Hash.String(),
+				"txOutput":        output.OutPoint.Index,
+				"amount":          handlers.formatBTCAmountAsJSON(btcutil.Amount(output.TxOut.Value), false),
+				"address":         address,
+				"scriptType":      output.Address.Configuration.ScriptType(),
+				"note":            handlers.account.TxNote(output.OutPoint.Hash.String()),
+				"addressReused":   addressReused,
+				"isChange":        output.IsChange,
+				"headerTimestamp": output.HeaderTimestamp,
 			})
 	}
 

backend/coins/btc/transactions/transactions.go

@@ -15,6 +15,8 @@
 package transactions
 
 import (
+	"time"
+
 	"github.com/BitBoxSwiss/bitbox-wallet-app/backend/accounts"
 	"github.com/BitBoxSwiss/bitbox-wallet-app/backend/coins/btc/blockchain"
 	"github.com/BitBoxSwiss/bitbox-wallet-app/backend/coins/btc/headers"
@@ -221,6 +223,18 @@ func (transactions *Transactions) SpendableOutputs() (map[wire.OutPoint]*Spendab
 	})
 }
 
+// GetHeaderTimestamp retrieves the header timestamp for a given transaction hash.
+func (transactions *Transactions) GetHeaderTimestamp(txHash chainhash.Hash) (*time.Time, error) {
+	transactions.synchronizer.WaitSynchronized()
+	return DBView(transactions.db, func(dbTx DBTxInterface) (*time.Time, error) {
+		txInfo, err := dbTx.TxInfo(txHash)
+		if err != nil {
+			return nil, err
+		}
+		return txInfo.HeaderTimestamp, nil
+	})
+}
+
 func (transactions *Transactions) isInputSpent(dbTx DBTxInterface, outPoint wire.OutPoint) bool {
 	input, err := dbTx.Input(outPoint)
 	if err != nil {

frontends/web/src/api/account.ts

@@ -408,6 +408,7 @@ export type TUTXO = {
   scriptType: ScriptType;
   addressReused: boolean;
   isChange: boolean;
+  headerTimestamp: string;
 };
 
 export const getUTXOs = (code: AccountCode): Promise<TUTXO[]> => {

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

@@ -190,7 +190,7 @@ type TDateProps = {
   time: string | null;
 }
 
-const Date = ({
+export const Date = ({
   time,
 }: TDateProps) => {
   const { i18n } = useTranslation();

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

@@ -1659,6 +1659,7 @@
       "addressReused": "Address re-used",
       "change": "Change",
       "outpoint": "Outpoint",
+      "receivedDate": "Received date",
       "title": "Send from output"
     },
     "confirm": {

frontends/web/src/routes/account/send/utxos.module.css

@@ -69,6 +69,7 @@
 }
 
 .address,
+.date,
 .transaction {
     display: flex;
     font-size: var(--size-default);

frontends/web/src/routes/account/send/utxos.tsx

@@ -34,6 +34,7 @@ import { FiatConversion } from '@/components/rates/rates';
 import { getScriptName } from '@/routes/account/utils';
 import { Message } from '@/components/message/message';
 import { Badge } from '@/components/badge/badge';
+import { Date } from '@/components/transactions/transaction';
 import style from './utxos.module.css';
 
 export type TSelectedUTXOs = {
@@ -127,6 +128,14 @@ export const UTXOs = ({
                       </span>
                       <FiatConversion alwaysShowAmounts amount={utxo.amount} unstyled noAction/>
                     </div>
+                    <div className={style.date}>
+                      <span className={style.label}>
+                        {t('send.coincontrol.receivedDate')}:
+                      </span>
+                      <span className={style.shrink}>
+                        <Date time={utxo.headerTimestamp} />
+                      </span>
+                    </div>
                     <div className={style.address}>
                       <span className={style.label}>
                         {t('send.coincontrol.address')}: