From b227767fee1d6b91c7bcc3b64e0540732bcdb1d1 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sat, 22 Jun 2024 17:30:58 +0900
Subject: [PATCH 1/2] Address page ux updates

---
 .../components/address/address.component.html | 19 ++++++++++++-------
 .../components/address/address.component.scss |  6 ++++++
 .../components/address/address.component.ts   |  4 ++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 22b50b2d9..2b979d4d0 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -3,13 +3,13 @@
     <h1 i18n="shared.address">Address</h1>
     <div class="tx-link">
       <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
-        <app-clipboard [text]="addressString" [size]="isMobile ? 'large' : 'normal'"></app-clipboard>
-        <span style="position: relative; cursor: pointer" (mouseover)="showQR = true" (mouseout)="showQR = false" (pointerdown)="showQR = true">
+        <span class="qrSpan" (mouseover)="showQR = true" (mouseout)="showQR = false" (pointerdown)="showQR = true">
           <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true" [style.font-size]="isMobile ? '18px' : '12px'"></fa-icon>
           <div class="qr-wrapper" [hidden]="!showQR">
             <app-qrcode [size]="200" [data]="addressString"></app-qrcode>
           </div>
         </span>
+        <app-clipboard [text]="addressString" [size]="isMobile ? 'large' : 'normal'"></app-clipboard>
       </app-truncate>
     </div>
   </div>
@@ -244,7 +244,7 @@
 
 <ng-template #pendingBalanceRow>
   <tr>
-    <td i18n="address.unconfirmed-balance" class="font-italic">unconfirmed balance</td>
+    <td i18n="address.unconfirmed-balance" class="font-italic">Unconfirmed balance</td>
     <td *ngIf="mempoolStats.funded_txo_sum !== undefined; else confidentialTd" class="font-italic"><app-amount [satoshis]="mempoolStats.balance" [noFiat]="true" [addPlus]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolStats.balance"></app-fiat></span></td>
   </tr>
 </ng-template>
@@ -258,22 +258,27 @@
 
 <ng-template #pendingUtxoRow>
   <tr>
-    <td i18n="address.unconfirmed-utxos" class="font-italic">unconfirmed UTXOs</td>
+    <td i18n="address.unconfirmed-utxos" class="font-italic">Unconfirmed UTXOs</td>
     <td class="font-italic">{{ mempoolStats.utxos > 0 ? '+' : ''}}{{ mempoolStats.utxos }}</td>
   </tr>
 </ng-template>
 
 <ng-template #volumeRow>
   <tr>
-    <td i18n="address.volume">Volume</td>
-    <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.volume + mempoolStats.volume"></app-amount></td>
+    <td i18n="address.total-received">Total received</td>
+    <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.totalReceived"></app-amount></td>
   </tr>
 </ng-template>
 
 <ng-template #typeRow>
   <tr>
     <td i18n="address.type">Type</td>
-    <td class="wrap-cell"><app-address-type [address]="addressTypeInfo"></app-address-type><app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels></td>
+    <td class="wrap-cell">
+      <span placement="bottom" class="badge badge-primary">
+        <app-address-type [address]="addressTypeInfo"></app-address-type>
+      </span>
+      <app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels>
+    </td>
   </tr>
 </ng-template>
 
diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss
index 8e04ffe8b..be562337a 100644
--- a/frontend/src/app/components/address/address.component.scss
+++ b/frontend/src/app/components/address/address.component.scss
@@ -11,6 +11,12 @@
   z-index: 99;
 }
 
+.qrSpan {
+  position: relative;
+  cursor: pointer;
+  padding-left: 0.4rem;
+}
+
 .fiat {
   display: block;
   @media (min-width: 992px){
diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts
index 477954805..105863a4e 100644
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -80,8 +80,8 @@ class AddressStats implements ChainStats {
     return this.funded_txo_sum - this.spent_txo_sum;
   }
 
-  get volume(): number {
-    return this.funded_txo_sum + this.spent_txo_sum;
+  get totalReceived(): number {
+    return this.funded_txo_sum;
   }
 
   get utxos(): number {

From 8e521a237666ded50deea910f1c1fb7d6696814a Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sat, 22 Jun 2024 17:52:31 +0900
Subject: [PATCH 2/2] Add "confirmed"

---
 frontend/src/app/components/address/address.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 2b979d4d0..cc4858355 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -237,7 +237,7 @@
 
 <ng-template #balanceRow>
   <tr>
-    <td i18n="address.balance">Balance</td>
+    <td i18n="address.confirmed-balance">Confirmed balance</td>
     <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.balance" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="chainStats.balance"></app-fiat></span></td>
   </tr>
 </ng-template>
@@ -251,7 +251,7 @@
 
 <ng-template #utxoRow>
   <tr>
-    <td i18n="address.utxos" i18n-ngbTooltip="unspent-transaction-outputs" ngbTooltip="unspent transaction outputs">UTXOs</td>
+    <td i18n="address.confirmed-utxos" i18n-ngbTooltip="unspent-transaction-outputs" ngbTooltip="unspent transaction outputs">Confirmed UTXOs</td>
     <td>{{ chainStats.utxos }}</td>
   </tr>
 </ng-template>