Change the code for displaying and comparing wallet addresses

src/gui/static/angular.json

@@ -81,7 +81,8 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
             "browserTarget": "desktopwallet:build",
-            "proxyConfig": "proxy.config.js"
+            "proxyConfig": "proxy.config.js",
+            "aot": true
           },
           "configurations": {
             "production": {

src/gui/static/src/app/components/layout/hardware-wallet/hw-confirm-address-dialog/hw-confirm-address-dialog.component.html

@@ -2,7 +2,7 @@
   <!-- Initial instructions. -->
   <app-hw-message *ngIf="currentState === states.Initial"
     [text]="'hardware-wallet.confirm-address.instructions' | translate"
-    [lowerBigText]="data.wallet.addresses[data.addressIndex].address"
+    [lowerBigText]="data.wallet.addresses[data.addressIndex].printableAddress"
     [icon]="msgIcons.Confirm"
   ></app-hw-message>
 

src/gui/static/src/app/components/layout/hardware-wallet/hw-options-dialog/hw-options-dialog.component.ts

@@ -345,7 +345,7 @@ export class HwOptionsDialogComponent extends HwDialogBaseComponent<HwOptionsDia
         this.operationSubscription = this.walletsAndAddressesService.currentWallets.pipe(first()).subscribe(wallets => {
           // Check if there is already a saved hw wallet with the obtained first address.
           const alreadySaved = wallets.some(wallet => {
-            const found = wallet.addresses[0].address === response.rawResponse[0] && wallet.isHardware;
+            const found = wallet.addresses[0].compareAddress(response.rawResponse[0]) && wallet.isHardware;
             if (found) {
               this.wallet = wallet;
             }

src/gui/static/src/app/components/layout/header/header.component.ts

@@ -8,13 +8,14 @@ import { BlockchainService } from '../../../services/blockchain.service';
 import { NetworkService } from '../../../services/network.service';
 import { AppConfig } from '../../../app.config';
 import { BalanceAndOutputsService } from '../../../services/wallet-operations/balance-and-outputs.service';
-import { AddressWithBalance } from '../../../services/wallet-operations/wallet-objects';
+import { AddressWithBalance, AddressMap } from '../../../services/wallet-operations/wallet-objects';
 import { Coin } from '../../../coins/coin';
 import { CoinService } from '../../../services/coin.service';
 import { AppUpdateService } from '../../../services/app-update.service';
 import { NodeService } from '../../../services/node.service';
 import { TransactionListComponent } from '../../pages/transaction-list/transaction-list.component';
 import { MsgBarService } from '../../../services/msg-bar.service';
+import { WalletsAndAddressesService } from '../../../services/wallet-operations/wallets-and-addresses.service';
 
 /**
  * Header shown at the top of most pages.
@@ -74,6 +75,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
     private balanceAndOutputsService: BalanceAndOutputsService,
     private coinService: CoinService,
     private msgBarService: MsgBarService,
+    private walletsAndAddressesService: WalletsAndAddressesService,
   ) {
     this.coinHasHours = coinService.currentCoinInmediate.coinTypeFeatures.coinHours;
     this.showBlockchainSyncProgress = coinService.currentCoinInmediate.coinTypeFeatures.blockchainSyncProgress;
@@ -104,27 +106,27 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
     // Get the current balance.
     this.subscriptionsGroup.push(this.balanceAndOutputsService.walletsWithBalance.subscribe(wallets => {
-      const addresses = new Map<string, AddressWithBalance>();
+      const addressMap = new AddressMap<AddressWithBalance>(this.walletsAndAddressesService.formatAddress);
       wallets.forEach(wallet => {
         wallet.addresses.forEach(address => {
-          if (!addresses.has(address.address)) {
-            addresses.set(address.address, address);
+          if (!addressMap.has(address.printableAddress)) {
+            addressMap.set(address.printableAddress, address);
           } else {
             // This prevents a minor glich due to an edge case in which, just for a few seconds,
             // some addresses of a newly added hw wallet which has also been added as a software
             // wallet can report 0 coins while the node is reporting some coins on the same
             // addresses on the previously created software wallet.
-            const previouslySavedAddress = addresses.get(address.address);
+            const previouslySavedAddress = addressMap.get(address.printableAddress);
             if (previouslySavedAddress.coins.isLessThan(address.coins)) {
-              addresses.set(address.address, address);
+              addressMap.set(address.printableAddress, address);
             }
           }
         });
       });
 
       let coins = new BigNumber(0);
       let hours = new BigNumber(0);
-      addresses.forEach(addr => {
+      addressMap.forEach(addr => {
         coins = coins.plus(addr.coins);
         if (addr.hours) {
           hours = hours.plus(addr.hours);

src/gui/static/src/app/components/layout/select-address/select-address.component.html

@@ -28,8 +28,8 @@
     <!-- Address list. -->
     <ng-container *ngIf="element.originalWallet.walletType === walletTypes.Deterministic && element.addresses.length > 0">
       <ng-container *ngFor="let address of element.addresses">
-        <button mat-button color="primary" (click)="select(address.address)">
-          <div class="address">{{ address.address }}</div>
+        <button mat-button color="primary" (click)="select(address.printableAddress)">
+          <div class="address">{{ address.printableAddress }}</div>
           <!-- Coins balance. -->
           <div class="balance">
             {{ address.coins | amount:true:'first' }}

src/gui/static/src/app/components/pages/address-history/address-history.component.html

@@ -36,8 +36,8 @@
           <div class="-row" *ngFor="let address of addresses[i]">
             <div class="number-cell text-truncate grey-text">{{ address.indexInWallet + 1 }}</div>
             <div class="-flex-fill break-all">
-              <app-qr-code-button [address]="address.address.address"></app-qr-code-button>
-              {{ address.address.address }}
+              <app-qr-code-button [address]="address.address.printableAddress"></app-qr-code-button>
+              {{ address.address.printableAddress }}
             </div>
             <div class="-width-150 text-right" [ngClass]="{'yellow-text': address.address.hasPendingCoins}">
               {{ address.address.coins | amount:true:'first' }}
@@ -62,10 +62,10 @@
             <div class="options-cell">
               <mat-icon appThemeColorText [showOnlyIfMouseOver]="true" [matMenuTriggerFor]="optionsMenu" [inline]="true">more_vert</mat-icon>
               <mat-menu #optionsMenu="matMenu" [overlapTrigger]="false">
-                <button mat-menu-item routerLink="/transactions" [queryParams]="{ addr: address.address.address }">
+                <button mat-menu-item routerLink="/transactions" [queryParams]="{ addr: address.address.printableAddress }">
                   {{ 'address-history.history' | translate }}
                 </button>
-                <button *ngIf="showOutputsOption" mat-menu-item routerLink="/settings/outputs" [queryParams]="{ addr: address.address.address }">
+                <button *ngIf="showOutputsOption" mat-menu-item routerLink="/settings/outputs" [queryParams]="{ addr: address.address.printableAddress }">
                   {{ 'wallet.address.outputs' | translate }}
                 </button>
               </mat-menu>

src/gui/static/src/app/components/pages/buy/add-deposit-address/add-deposit-address.component.html

@@ -4,8 +4,8 @@
 <p>{{ 'buy.deposit-address' | translate }}</p>
 <div [formGroup]="form">
   <mat-select formControlName="address" [placeholder]="'buy.select-address' | translate" class="input-field">
-    <mat-option *ngFor="let address of addresses" [value]="address.address">
-      {{ address.address }}
+    <mat-option *ngFor="let address of addresses" [value]="address.printableAddress">
+      {{ address.printableAddress }}
     </mat-option>
   </mat-select>
 </div>

src/gui/static/src/app/components/pages/send-coins/form-parts/form-source-selection/form-source-selection.component.html

@@ -45,13 +45,13 @@
         [attr.disabled]="(busy || (addresses && addresses.length === 0)) ? 'true' : null"
         [ngClass]="{'element-disabled' : (busy || (addresses && addresses.length === 0))}">
         <mat-option appMainColorFormElement *ngFor="let addr of addresses" [value]="addr">
-          {{ addr.address }} - {{ (addr.availableCoins ? addr.availableCoins : 0) | amount }}
+          {{ addr.printableAddress }} - {{ (addr.availableCoins ? addr.availableCoins : 0) | amount }}
           {{ !coinHasHours ? '' : ' - ' + (addr.availableHours | amount:false) }}
           <ng-container *ngIf="addr.hasPendingCoins">({{ 'send.available-balance-indication' | translate }})</ng-container>
         </mat-option>
         <mat-select-trigger>
           <div *ngFor="let address of form.get('addresses').value">
-            {{ address.address }} - {{ (address.availableCoins ? address.availableCoins : 0) | amount }}
+            {{ address.printableAddress }} - {{ (address.availableCoins ? address.availableCoins : 0) | amount }}
             {{ !coinHasHours ? '' : ' - ' + (address.availableHours | amount:false) }}
             <ng-container *ngIf="address.hasPendingCoins">({{ 'send.available-balance-indication' | translate }})</ng-container>
           </div>

src/gui/static/src/app/components/pages/send-coins/form-parts/form-source-selection/form-source-selection.component.ts

@@ -6,7 +6,7 @@ import { BigNumber } from 'bignumber.js';
 import { HttpErrorResponse } from '@angular/common/http';
 
 import { BalanceAndOutputsService } from '../../../../../services/wallet-operations/balance-and-outputs.service';
-import { WalletWithBalance, AddressWithBalance, WalletTypes } from '../../../../../services/wallet-operations/wallet-objects';
+import { WalletWithBalance, AddressWithBalance, WalletTypes, AddressMap } from '../../../../../services/wallet-operations/wallet-objects';
 import { Output as UnspentOutput } from '../../../../../services/wallet-operations/transaction-objects';
 import { processServiceError } from '../../../../../utils/errors';
 import { OperationError } from '../../../../../utils/operation-error';
@@ -15,6 +15,7 @@ import { NodeService } from '../../../../../services/node.service';
 import { CoinService } from '../../../../../services/coin.service';
 import { CoinTypes } from '../../../../../coins/settings/coin-types';
 import { MsgBarService } from '../../../../../services/msg-bar.service';
+import { WalletsAndAddressesService } from '../../../../../services/wallet-operations/wallets-and-addresses.service';
 
 /**
  * Info about the balance which is available with the selections the user has
@@ -153,6 +154,7 @@ export class FormSourceSelectionComponent implements OnInit, OnDestroy {
     private balanceAndOutputsService: BalanceAndOutputsService,
     private coinService: CoinService,
     private msgBarService: MsgBarService,
+    private walletsAndAddressesService: WalletsAndAddressesService,
   ) {
     this.coinHasHours = coinService.currentCoinInmediate.coinTypeFeatures.coinHours;
     this.coinHasOutputs = coinService.currentCoinInmediate.coinTypeFeatures.outputs;
@@ -540,8 +542,8 @@ export class FormSourceSelectionComponent implements OnInit, OnDestroy {
     } else if (!this.form.get('addresses').value || (this.form.get('addresses').value as AddressWithBalance[]).length === 0) {
       return this.allUnspentOutputs;
     } else {
-      const addressMap = new Map<string, boolean>();
-      (this.form.get('addresses').value as AddressWithBalance[]).forEach(address => addressMap.set(address.address, true));
+      const addressMap = new AddressMap<boolean>(this.walletsAndAddressesService.formatAddress);
+      (this.form.get('addresses').value as AddressWithBalance[]).forEach(address => addressMap.set(address.printableAddress, true));
 
       return this.allUnspentOutputs.filter(out => addressMap.has(out.address));
     }

src/gui/static/src/app/components/pages/send-coins/send-coins-form/send-coins-form.component.ts

@@ -845,7 +845,7 @@ export class SendCoinsFormComponent implements OnInit, OnDestroy {
     let selectedAddresses: string[];
     if (!this.showForManualUnsigned) {
       selectedAddresses = this.selectedSources.addresses && this.selectedSources.addresses.length > 0 ?
-        this.selectedSources.addresses.map(addr => addr.address) : null;
+        this.selectedSources.addresses.map(addr => addr.printableAddress) : null;
     } else {
       selectedAddresses = this.selectedSources.manualAddresses;
     }
@@ -868,7 +868,7 @@ export class SendCoinsFormComponent implements OnInit, OnDestroy {
     // user wants to send the transaction immediately, without preview.
     this.processingSubscription = this.spendingService.createTransaction(
       this.selectedSources.wallet,
-      selectedAddresses ? selectedAddresses : this.selectedSources.wallet.addresses.map(address => address.address),
+      selectedAddresses ? selectedAddresses : this.selectedSources.wallet.addresses.map(address => address.printableAddress),
       selectedOutputs,
       destinations,
       this.hoursSelection,
@@ -959,7 +959,7 @@ export class SendCoinsFormComponent implements OnInit, OnDestroy {
             gasLimit: this.form.get('gasLimit').value,
           },
           amount: amount,
-          to: destinations.map(d => d.address),
+          to: destinations.map(d => this.walletsAndAddressesService.formatAddress(d.address)),
           transaction,
           showForManualUnsigned: this.showForManualUnsigned,
         });

src/gui/static/src/app/components/pages/send-coins/send-preview/transaction-info/transaction-info.component.ts

@@ -9,7 +9,7 @@ import { GeneratedTransaction, OldTransaction, OldTransactionTypes } from '../..
 import { PriceService } from '../../../../../services/price.service';
 import { WalletsAndAddressesService } from '../../../../../services/wallet-operations/wallets-and-addresses.service';
 import { getTransactionIconName } from '../../../../../utils/history-utils';
-import { WalletBase } from '../../../../../services/wallet-operations/wallet-objects';
+import { WalletBase, AddressMap } from '../../../../../services/wallet-operations/wallet-objects';
 import { CoinService } from '../../../../../services/coin.service';
 import { CoinTypes } from '../../../../../coins/settings/coin-types';
 
@@ -34,7 +34,7 @@ export class TransactionInfoComponent implements OnDestroy {
   // If the user has more than one wallet.
   userHasMultipleWallets = false;
   // List with all the addresses the user has and their corresponding wallets.
-  internalAddressesMap = new Map<string, WalletBase>();
+  internalAddressesMap = new AddressMap<WalletBase>(this.walletsAndAddressesService.formatAddress);
   // If true, the currently selected coin includes coin hours.
   coinHasHours = false;
   // How many confirmations a transaction must have to be considered fully confirmed.
@@ -49,7 +49,7 @@ export class TransactionInfoComponent implements OnDestroy {
   constructor(
     private priceService: PriceService,
     private dialog: MatDialog,
-    walletsAndAddressesService: WalletsAndAddressesService,
+    private walletsAndAddressesService: WalletsAndAddressesService,
     coinService: CoinService,
   ) {
     this.subscription = this.priceService.price.subscribe(price => this.price = price);
@@ -63,7 +63,7 @@ export class TransactionInfoComponent implements OnDestroy {
       this.userHasMultipleWallets = wallets.length > 1;
       wallets.forEach(wallet => {
         wallet.addresses.forEach(address => {
-          this.internalAddressesMap.set(address.address, wallet);
+          this.internalAddressesMap.set(address.printableAddress, wallet);
         });
       });
     });

src/gui/static/src/app/components/pages/settings/outputs/outputs.component.html

@@ -19,8 +19,8 @@
         <ng-container *ngFor="let address of wallet.addresses">
           <div class="-row">
             <div class="-flex-fill grey-text text-truncate">
-              <app-qr-code-button [address]="address.address"></app-qr-code-button>
-              <span class="address">{{ address.address }}</span>
+              <app-qr-code-button [address]="address.printableAddress"></app-qr-code-button>
+              <span class="address">{{ address.printableAddress }}</span>
             </div>
           </div>
           <div class="-row" *ngFor="let output of address.outputs">

src/gui/static/src/app/components/pages/settings/outputs/outputs.component.ts

@@ -69,7 +69,7 @@ export class OutputsComponent implements OnDestroy {
           // Include only addresses with outputs or the requested address.
           wallet.addresses = wallet.addresses.filter(address => {
             if (address.outputs.length > 0) {
-              return addr ? address.address === addr : true;
+              return addr ? address.compareAddress(addr) : true;
             }
           });
 

src/gui/static/src/app/components/pages/transaction-list/transaction-list.component.html

@@ -27,7 +27,7 @@
           {{ 'history.all-addresses' | translate }}
         </mat-option>
         <mat-option appMainColorFormElement *ngFor="let address of wallet.addresses" [value]="address" [disabled]="wallet.allAddressesSelected">
-          {{ address.address }} - {{ address.coins | amount }}
+          {{ address.printableAddress }} - {{ address.coins | amount }}
           {{ !coinHasHours ? '' : ' (' + (address.hours | amount:false) + ')' }}
         </mat-option>
       </mat-optgroup>
@@ -46,7 +46,7 @@
       <!-- Filter group for all the addresses shown independently. -->
       <mat-optgroup *ngIf="addresses.length > 0" [label]="'history.addresses' | translate">
         <mat-option appMainColorFormElement *ngFor="let address of addresses" [value]="address" [disabled]="address.showingWholeWallet">
-          {{ address.walletName }} - {{ address.address }} - {{ address.coins | amount }}
+          {{ address.walletName }} - {{ address.printableAddress }} - {{ address.coins | amount }}
           {{ !coinHasHours ? '' : ' (' + (address.hours | amount:false) + ')' }}
         </mat-option>
       </mat-optgroup>
@@ -58,7 +58,7 @@
           <div class="filter text-truncate" *ngIf="filter.label || !filter.showingWholeWallet">
             <span *ngIf="filter.label">{{ filter.label }}</span>
             <span *ngIf="filter.walletName">{{ filter.walletName }} - </span>
-            <span *ngIf="filter.address">{{ filter.address }}</span>
+            <span *ngIf="filter.printableAddress">{{ filter.printableAddress }}</span>
             - {{ filter.coins | amount }}
             {{ !coinHasHours ? '' : ' (' + (filter.hours | amount:false) + ')' }}
           </div>