Allow to add amounts in USD when creating transactions

src/app/components/layout/double-button/double-button.component.html

@@ -1,11 +1,11 @@
 <div class="-buttons-container {{ className }}">
-  <app-button class="-toggle dark-button"
+  <app-button class="-toggle dark-button -small-button"
     [disabled]="activeButton !== doubleButtonActive.LeftButton"
     (action)="onClick(doubleButtonActive.LeftButton)"
     [forceEmitEvents]="true">
     {{ leftButtonText }}
   </app-button>
-  <app-button class="-toggle dark-button"
+  <app-button class="-toggle dark-button -small-button"
     [disabled]="activeButton !== doubleButtonActive.RightButton"
     (action)="onClick(doubleButtonActive.RightButton)"
     [forceEmitEvents]="true">

src/app/components/layout/double-button/double-button.component.scss

@@ -62,3 +62,17 @@
     }
   }
 }
+
+.small {
+  &.-buttons-container {
+    padding: 2px;
+    line-height: 0px;
+  }
+
+  .-small-button ::ng-deep button {
+    padding: 0 10px 0 10px;
+    min-width: 70px;
+    font-size: 9px;
+    min-height: 16px;
+  }
+}

src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.html

@@ -91,10 +91,19 @@
   </ng-container>
 
   <div class="form-field">
-    <label for="destination0">
+    <label for="destination0" class="destinations-label">
       {{ 'send.destinations-label' | translate }}
       <mat-icon [matTooltip]="('send.destinations-help' + (this.autoHours ? '1' : '2')) | translate">help</mat-icon>
     </label>
+    <div class="coin-selector-container" *ngIf="price" [ngClass]="{ disabled: busy }">
+      <app-double-button
+        [leftButtonText]="currentCoin.coinSymbol"
+        [rightButtonText]="'common.usd' | translate"
+        className="light small"
+        [activeButton]="selectedCurrency"
+        (onStateChange)="changeActiveCurrency($event)"
+      ></app-double-button>
+    </div>
 
     <div formArrayName="destinations" *ngFor="let dest of destControls; let i = index;" class="-destination">
       <div [formGroupName]="i" class="row -inner-container">
@@ -113,7 +122,16 @@
           </label>
           <div class="-input-addon">
             <input formControlName="coins" [id]="'amount' + i">
-            <span>{{ currentCoin.coinSymbol }}</span>
+            <span>{{ selectedCurrency === doubleButtonActive.LeftButton ? currentCoin.coinSymbol : ('common.usd' | translate) }}</span>
+          </div>
+          <div class="coins-value-label" *ngIf="price">
+            <span *ngIf="values[i] < 0">{{ 'send.invalid-amount' | translate }}</span>
+            <span *ngIf="values[i] >= 0 && selectedCurrency === doubleButtonActive.LeftButton">
+              &#x007e; {{ values[i] | number:'1.0-2' }} {{ 'common.usd' | translate }}
+            </span>
+            <span *ngIf="values[i] >= 0 && selectedCurrency === doubleButtonActive.RightButton">
+              &#x007e; {{ values[i] | number:('1.0-' + blockchainService.currentMaxDecimals) }} {{ currentCoin.coinSymbol }}
+            </span>
           </div>
         </div>
         <div class="col-lg-3 col-md-4">

src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.scss

@@ -275,3 +275,7 @@ label mat-icon {
     font-size: 13px;
   }
 }
+
+.destinations-label {
+  display: inline-block;
+}

src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.spec.ts

@@ -4,13 +4,21 @@ import { MatSnackBarModule } from '@angular/material';
 import { FormBuilder } from '@angular/forms';
 
 import { SendFormAdvancedComponent } from './send-form-advanced.component';
-import { MockTranslatePipe, MockWalletService, MockSpendingService, MockCoinService, MockBlockchainService, MockCustomMatDialogService, MockNavBarService } from '../../../../utils/test-mocks';
 import { WalletService } from '../../../../services/wallet/wallet.service';
 import { SpendingService } from '../../../../services/wallet/spending.service';
 import { CoinService } from '../../../../services/coin.service';
 import { BlockchainService } from '../../../../services/blockchain.service';
 import { CustomMatDialogService } from '../../../../services/custom-mat-dialog.service';
 import { NavBarService } from '../../../../services/nav-bar.service';
+import { PriceService } from '../../../../services/price.service';
+import { MockTranslatePipe,
+  MockWalletService,
+  MockSpendingService,
+  MockCoinService,
+  MockBlockchainService,
+  MockCustomMatDialogService,
+  MockNavBarService,
+  MockPriceService } from '../../../../utils/test-mocks';
 
 describe('SendFormAdvancedComponent', () => {
   let component: SendFormAdvancedComponent;
@@ -29,6 +37,7 @@ describe('SendFormAdvancedComponent', () => {
         { provide: BlockchainService, useClass: MockBlockchainService },
         { provide: CustomMatDialogService, useClass: MockCustomMatDialogService },
         { provide: NavBarService, useClass: MockNavBarService },
+        { provide: PriceService, useClass: MockPriceService },
       ]
     })
     .compileComponents();

src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.ts

@@ -19,6 +19,9 @@ import { CustomMatDialogService } from '../../../../services/custom-mat-dialog.s
 import { WalletService } from '../../../../services/wallet/wallet.service';
 import { BaseCoin } from '../../../../coins/basecoin';
 import { CoinService } from '../../../../services/coin.service';
+import { DoubleButtonActive } from '../../../layout/double-button/double-button.component';
+import { PriceService } from '../../../../services/price.service';
+import { SendFormComponent } from '../send-form/send-form.component';
 
 @Component({
   selector: 'app-send-form-advanced',
@@ -44,10 +47,15 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
   autoShareValue = '0.5';
   previewTx: boolean;
   currentCoin: BaseCoin;
+  doubleButtonActive = DoubleButtonActive;
+  selectedCurrency = DoubleButtonActive.LeftButton;
+  values: number[];
+  price: number;
 
   private subscriptions: Subscription;
   private getOutputsSubscriptions: ISubscription;
   private unlockSubscription: ISubscription;
+  private destinationSubscriptions: ISubscription[] = [];
 
   constructor(
     public walletService: WalletService,
@@ -58,6 +66,7 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
     private navbarService: NavBarService,
     private blockchainService: BlockchainService,
     private coinService: CoinService,
+    private priceService: PriceService,
   ) { }
 
   ngOnInit() {
@@ -121,6 +130,11 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
       })
     );
 
+    this.subscriptions.add(this.priceService.price.subscribe(price => {
+      this.price = price;
+      this.updateValues();
+    }));
+
     if (this.formData) {
       this.fillForm();
     }
@@ -131,6 +145,7 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
     this.subscriptions.unsubscribe();
     this.navbarService.hideSwitch();
     this.snackbar.dismiss();
+    this.destinationSubscriptions.forEach(s => s.unsubscribe());
   }
 
   preview() {
@@ -143,6 +158,53 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
     this.unlockAndSend();
   }
 
+  changeActiveCurrency(value) {
+    this.selectedCurrency = value;
+    this.updateValues();
+    (this.form.get('destinations') as FormArray).updateValueAndValidity();
+  }
+
+  private updateValues() {
+    if (!this.price) {
+      this.values = null;
+
+      return;
+    }
+
+    this.values = [];
+
+    this.destControls.forEach((dest, i) => {
+      const value = dest.get('coins').value !== undefined ? dest.get('coins').value.replace(' ', '=') : '';
+
+      if (isNaN(value) || value.trim() === '' || parseFloat(value) <= 0 || value * 1 === 0) {
+        this.values[i] = -1;
+
+        return;
+      }
+
+      const parts = value.split('.');
+      if (this.selectedCurrency === DoubleButtonActive.LeftButton) {
+        if (parts.length === 2 && parts[1].length > this.blockchainService.currentMaxDecimals) {
+          this.values[i] = -1;
+
+          return;
+        }
+      } else {
+        if (parts.length === 2 && parts[1].length > SendFormComponent.MaxUsdDecimal) {
+          this.values[i] = -1;
+
+          return;
+        }
+      }
+
+      if (this.selectedCurrency === DoubleButtonActive.LeftButton) {
+        this.values[i] = new BigNumber(value).multipliedBy(this.price).decimalPlaces(2).toNumber();
+      } else {
+        this.values[i] = new BigNumber(value).dividedBy(this.price).decimalPlaces(this.blockchainService.currentMaxDecimals).toNumber();
+      }
+    });
+  }
+
   unlockAndSend() {
     if (!this.form.valid || this.button.isLoading()) {
       return;
@@ -191,11 +253,16 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
   addDestination() {
     const destinations = this.form.get('destinations') as FormArray;
     destinations.push(this.createDestinationFormGroup());
+    this.updateValues();
   }
 
   removeDestination(index) {
     const destinations = this.form.get('destinations') as FormArray;
     destinations.removeAt(index);
+
+    this.destinationSubscriptions[index].unsubscribe();
+    this.destinationSubscriptions.splice(index, 1);
+    this.updateValues();
   }
 
   setShareValue(event) {
@@ -241,9 +308,10 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
     }
 
     this.destControls.forEach((destControl, i) => {
-      ['address', 'coins', 'hours'].forEach(name => {
+      ['address', 'hours'].forEach(name => {
         destControl.get(name).setValue(this.formData.form.destinations[i][name]);
       });
+      destControl.get('coins').setValue(this.formData.form.destinations[i].originalAmount);
     });
 
     if (this.formData.form.hoursSelection.type === HoursSelectionTypes.Auto) {
@@ -263,6 +331,8 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
 
       this.form.get('outputs').setValue(this.formData.form.outputs);
     }
+
+    this.selectedCurrency = this.formData.form.currency;
   }
 
   addressCompare(a, b) {
@@ -305,8 +375,14 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
         if (name === 'coins') {
           const parts = value.split('.');
 
-          if (parts.length === 2 && parts[1].length > this.blockchainService.currentMaxDecimals) {
-            return true;
+          if (this.selectedCurrency === DoubleButtonActive.LeftButton) {
+            if (parts.length === 2 && parts[1].length > this.blockchainService.currentMaxDecimals) {
+              return true;
+            }
+          } else {
+            if (parts.length === 2 && parts[1].length > SendFormComponent.MaxUsdDecimal) {
+              return true;
+            }
           }
         } else if (name === 'hours') {
           if (Number(value) < 1 || parseInt(value, 10) !== parseFloat(value)) {
@@ -325,7 +401,12 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
     this.updateAvailableBalance();
 
     let destinationsCoins = new BigNumber(0);
-    this.destControls.map(control => destinationsCoins = destinationsCoins.plus(control.value.coins));
+    if (this.selectedCurrency === DoubleButtonActive.LeftButton) {
+      this.destControls.map(control => destinationsCoins = destinationsCoins.plus(control.value.coins));
+    } else {
+      this.updateValues();
+      this.values.map(value => destinationsCoins = destinationsCoins.plus(value));
+    }
     let destinationsHours = new BigNumber(0);
     if (!this.autoHours) {
       this.destControls.map(control => destinationsHours = destinationsHours.plus(control.value.hours));
@@ -339,11 +420,17 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
   }
 
   private createDestinationFormGroup() {
-    return this.formBuilder.group({
+    const group = this.formBuilder.group({
       address: '',
       coins: '',
       hours: '',
     });
+
+    this.destinationSubscriptions.push(group.get('coins').valueChanges.subscribe(value => {
+      this.updateValues();
+    }));
+
+    return group;
   }
 
   private createTransaction() {
@@ -386,6 +473,7 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
             autoOptions: this.autoOptions,
             allUnspentOutputs: this.loadingUnspentOutputs ? null : this.allUnspentOutputs,
             outputs: this.form.get('outputs').value,
+            currency: this.selectedCurrency,
           },
           amount: amount,
           to: this.destinations.map(d => d.address),
@@ -427,10 +515,11 @@ export class SendFormAdvancedComponent implements OnInit, OnDestroy {
   }
 
   private get destinations(): Destination[] {
-    return this.destControls.map(destControl => {
+    return this.destControls.map((destControl, i) => {
       const destination = {
         address: destControl.get('address').value,
-        coins: new BigNumber(destControl.get('coins').value),
+        coins: this.selectedCurrency === DoubleButtonActive.LeftButton ? new BigNumber(destControl.get('coins').value) : new BigNumber(this.values[i].toString()),
+        originalAmount: destControl.get('coins').value,
       };
 
       if (!this.autoHours) {

src/app/components/pages/send-skycoin/send-form/send-form.component.html

@@ -22,8 +22,26 @@
     <input formControlName="address" id="address" [placeholder]="'send.recipient-address' | translate" >
   </div>
   <div class="form-field">
-    <label for="amount">{{ 'send.amount-label' | translate }}</label>
-    <input formControlName="amount" id="amount" [placeholder]="currentCoin.coinSymbol" (keydown.enter)="onVerify($event)">
+    <label for="amount" class="amount-label">{{ 'send.amount-label' | translate }}</label>
+    <div class="coin-selector-container" *ngIf="price" [ngClass]="{ disabled: busy }">
+      <app-double-button
+        [leftButtonText]="currentCoin.coinSymbol"
+        [rightButtonText]="'common.usd' | translate"
+        className="light small"
+        [activeButton]="selectedCurrency"
+        (onStateChange)="changeActiveCurrency($event)"
+      ></app-double-button>
+    </div>
+    <input formControlName="amount" id="amount" [placeholder]="selectedCurrency === doubleButtonActive.LeftButton ? currentCoin.coinSymbol : ('common.usd' | translate)" (keydown.enter)="onVerify($event)">
+    <div class="coins-value-label" [ngClass]="{ red: value >= 0 && valueGreaterThanBalance }" *ngIf="price">
+      <span *ngIf="value < 0">{{ 'send.invalid-amount' | translate }}</span>
+      <span *ngIf="value >= 0 && selectedCurrency === doubleButtonActive.LeftButton">
+        &#x007e; {{ value | number:'1.0-2' }} {{ 'common.usd' | translate }}
+      </span>
+      <span *ngIf="value >= 0 && selectedCurrency === doubleButtonActive.RightButton">
+        &#x007e; {{ value | number:('1.0-' + blockchainService.currentMaxDecimals) }} {{ currentCoin.coinSymbol }}
+      </span>
+    </div>
   </div>
 
   <div class="form-field -on-small-and-below-only" *ngIf="showSlowMobileInfo">

src/app/components/pages/send-skycoin/send-form/send-form.component.scss

@@ -1,3 +1,7 @@
 .-buttons {
   text-align: center;
 }
+
+.amount-label {
+  display: inline-block;
+} 

src/app/components/pages/send-skycoin/send-form/send-form.component.spec.ts

@@ -8,9 +8,17 @@ import { WalletService } from '../../../../services/wallet/wallet.service';
 import { SpendingService } from '../../../../services/wallet/spending.service';
 import { CoinService } from '../../../../services/coin.service';
 import { BlockchainService } from '../../../../services/blockchain.service';
-import { MockTranslatePipe, MockWalletService, MockSpendingService, MockCoinService, MockBlockchainService, MockCustomMatDialogService, MockNavBarService } from '../../../../utils/test-mocks';
 import { CustomMatDialogService } from '../../../../services/custom-mat-dialog.service';
 import { NavBarService } from '../../../../services/nav-bar.service';
+import { PriceService } from '../../../../services/price.service';
+import { MockTranslatePipe,
+  MockWalletService,
+  MockSpendingService,
+  MockCoinService,
+  MockBlockchainService,
+  MockCustomMatDialogService,
+  MockNavBarService,
+  MockPriceService } from '../../../../utils/test-mocks';
 
 describe('SendFormComponent', () => {
   let component: SendFormComponent;
@@ -29,6 +37,7 @@ describe('SendFormComponent', () => {
         { provide: BlockchainService, useClass: MockBlockchainService },
         { provide: CustomMatDialogService, useClass: MockCustomMatDialogService },
         { provide: NavBarService, useClass: MockNavBarService },
+        { provide: PriceService, useClass: MockPriceService },
       ]
     }).compileComponents();
   }));