From b5f3f163d46747a44b89f292c19b66a9d3d381da Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Thu, 23 May 2019 17:35:58 -0400
Subject: [PATCH 1/3] Allow to add amounts in USD when creating transactions

---
 .../double-button.component.html              |   4 +-
 .../double-button.component.scss              |  14 +++
 .../send-form-advanced.component.html         |  22 +++-
 .../send-form-advanced.component.scss         |   4 +
 .../send-form-advanced.component.ts           | 103 ++++++++++++++--
 .../send-form/send-form.component.html        |  22 +++-
 .../send-form/send-form.component.scss        |   4 +
 .../send-form/send-form.component.ts          | 113 ++++++++++++++++--
 src/assets/i18n/en.json                       |   2 +
 src/assets/i18n/es.json                       |   2 +
 src/styles.scss                               |  29 ++++-
 11 files changed, 292 insertions(+), 27 deletions(-)

diff --git a/src/app/components/layout/double-button/double-button.component.html b/src/app/components/layout/double-button/double-button.component.html
index b065f72e..678894e0 100644
--- a/src/app/components/layout/double-button/double-button.component.html
+++ b/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">
diff --git a/src/app/components/layout/double-button/double-button.component.scss b/src/app/components/layout/double-button/double-button.component.scss
index e627765d..d45b413c 100644
--- a/src/app/components/layout/double-button/double-button.component.scss
+++ b/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;
+  }
+}
diff --git a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.html b/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.html
index aa2a90e6..ae38d70b 100644
--- a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.html
+++ b/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">
diff --git a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.scss b/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.scss
index fd66008e..a8562205 100644
--- a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.scss
+++ b/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;
+}
diff --git a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.ts b/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.ts
index 177e0c95..fede9eee 100644
--- a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.ts
+++ b/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) {
diff --git a/src/app/components/pages/send-skycoin/send-form/send-form.component.html b/src/app/components/pages/send-skycoin/send-form/send-form.component.html
index 9e31d2ec..0bb61070 100644
--- a/src/app/components/pages/send-skycoin/send-form/send-form.component.html
+++ b/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">
diff --git a/src/app/components/pages/send-skycoin/send-form/send-form.component.scss b/src/app/components/pages/send-skycoin/send-form/send-form.component.scss
index 079dcb65..96573e41 100644
--- a/src/app/components/pages/send-skycoin/send-form/send-form.component.scss
+++ b/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;
+} 
diff --git a/src/app/components/pages/send-skycoin/send-form/send-form.component.ts b/src/app/components/pages/send-skycoin/send-form/send-form.component.ts
index 8514984d..92ba2da0 100644
--- a/src/app/components/pages/send-skycoin/send-form/send-form.component.ts
+++ b/src/app/components/pages/send-skycoin/send-form/send-form.component.ts
@@ -18,6 +18,8 @@ import { BlockchainService } from '../../../../services/blockchain.service';
 import { CustomMatDialogService } from '../../../../services/custom-mat-dialog.service';
 import { config } from '../../../../app.config';
 import { NavBarService } from '../../../../services/nav-bar.service';
+import { DoubleButtonActive } from '../../../layout/double-button/double-button.component';
+import { PriceService } from '../../../../services/price.service';
 
 @Component({
   selector: 'app-send-form',
@@ -25,6 +27,9 @@ import { NavBarService } from '../../../../services/nav-bar.service';
   styleUrls: ['./send-form.component.scss'],
 })
 export class SendFormComponent implements OnInit, OnDestroy {
+
+  public static readonly MaxUsdDecimal = 6;
+
   @ViewChild('button') button: ButtonComponent;
   @Input() formData: any;
   @Output() onFormSubmitted = new EventEmitter<any>();
@@ -33,21 +38,32 @@ export class SendFormComponent implements OnInit, OnDestroy {
   form: FormGroup;
   wallets: Wallet[];
   currentCoin: BaseCoin;
+  doubleButtonActive = DoubleButtonActive;
+  selectedCurrency = DoubleButtonActive.LeftButton;
+  value: number;
+  valueGreaterThanBalance = false;
+  price: number;
 
   private processSubscription: ISubscription;
   private subscription: Subscription;
   private slowInfoSubscription: ISubscription;
 
   constructor(
+    public blockchainService: BlockchainService,
     private formBuilder: FormBuilder,
     private walletService: WalletService,
     private spendingService: SpendingService,
     private snackbar: MatSnackBar,
     private dialog: CustomMatDialogService,
     private coinService: CoinService,
-    private blockchainService: BlockchainService,
-    private navbarService: NavBarService
-  ) {}
+    private navbarService: NavBarService,
+    priceService: PriceService,
+  ) {
+    this.subscription = priceService.price.subscribe(price => {
+      this.price = price;
+      this.updateValue();
+    });
+  }
 
   ngOnInit() {
     this.navbarService.showSwitch('send.simple', 'send.advanced');
@@ -67,7 +83,11 @@ export class SendFormComponent implements OnInit, OnDestroy {
 
     if (this.formData) {
       Object.keys(this.form.controls).forEach(control => {
-        this.form.get(control).setValue(this.formData.form[control]);
+        if (this.form.get(control)) {
+          this.form.get(control).setValue(this.formData.form[control]);
+        }
+
+        this.selectedCurrency = this.formData.form.currency;
       });
     }
   }
@@ -104,10 +124,46 @@ export class SendFormComponent implements OnInit, OnDestroy {
     }
   }
 
+  changeActiveCurrency(value) {
+    this.selectedCurrency = value;
+    this.updateValue();
+    this.form.get('amount').updateValueAndValidity();
+  }
+
+  private updateValue() {
+    if (!this.price) {
+      this.value = null;
+
+      return;
+    }
+    if (!this.form || this.validateAmount(this.form.get('amount') as FormControl) !== null || this.form.get('amount').value * 1 === 0) {
+      this.value = -1;
+
+      return;
+    }
+
+    const coinsInWallet = this.form.get('wallet').value && (this.form.get('wallet').value as Wallet).balance ?
+      (this.form.get('wallet').value as Wallet).balance.toNumber() : -1;
+
+    this.valueGreaterThanBalance = false;
+    if (this.selectedCurrency === DoubleButtonActive.LeftButton) {
+      this.value = new BigNumber(this.form.get('amount').value).multipliedBy(this.price).decimalPlaces(2).toNumber();
+      if (coinsInWallet > 0 && parseFloat(this.form.get('amount').value) > coinsInWallet) {
+        this.valueGreaterThanBalance = true;
+      }
+    } else {
+      this.value = new BigNumber(this.form.get('amount').value).dividedBy(this.price).decimalPlaces(this.blockchainService.currentMaxDecimals).toNumber();
+      if (coinsInWallet > 0 && this.value > coinsInWallet) {
+        this.valueGreaterThanBalance = true;
+      }
+    }
+  }
+
   private resetForm() {
     this.form.get('wallet').setValue('', { emitEvent: false });
     this.form.get('address').setValue('');
     this.form.get('amount').setValue('');
+    this.selectedCurrency = DoubleButtonActive.LeftButton;
   }
 
   private checkBeforeSending() {
@@ -142,14 +198,13 @@ export class SendFormComponent implements OnInit, OnDestroy {
       .subscribe(() => this.showSlowMobileInfo = true);
 
     this.removeProcessSubscription();
-
     this.processSubscription = this.spendingService.createTransaction(
       wallet,
       null,
       null,
       [{
         address: this.form.value.address.replace(/\s/g, ''),
-        coins: new BigNumber(this.form.value.amount),
+        coins: this.selectedCurrency === DoubleButtonActive.LeftButton ? new BigNumber(this.form.value.amount) : new BigNumber(this.value.toString()),
       }],
       {
         type: HoursSelectionTypes.Auto,
@@ -170,6 +225,7 @@ export class SendFormComponent implements OnInit, OnDestroy {
         wallet: this.form.value.wallet,
         address: this.form.value.address,
         amount: this.form.value.amount,
+        currency: this.selectedCurrency,
       },
       amount: new BigNumber(this.form.value.amount),
       to: [this.form.value.address],
@@ -193,18 +249,20 @@ export class SendFormComponent implements OnInit, OnDestroy {
       amount: ['', [Validators.required]]
     });
 
-    this.subscription = this.form.controls.wallet.valueChanges.subscribe(value => {
+    this.subscription.add(this.form.controls.wallet.valueChanges.subscribe(value => {
       const balance = value && value.balance ? value.balance : 0;
 
       this.form.controls.amount.setValidators([
         Validators.required,
-        Validators.min(0.000001),
-        Validators.max(balance),
-        this.validateAmount.bind(this),
+        this.validateAmountWithValue.bind(this),
       ]);
 
       this.form.controls.amount.updateValueAndValidity();
-    });
+    }));
+
+    this.subscription.add(this.form.get('amount').valueChanges.subscribe(value => {
+      this.updateValue();
+    }));
   }
 
   private validateAmount(amountControl: FormControl) {
@@ -214,8 +272,37 @@ export class SendFormComponent implements OnInit, OnDestroy {
 
     const parts = amountControl.value.toString().split('.');
 
-    if (parts.length === 2 && parts[1].length > this.blockchainService.currentMaxDecimals) {
-      return { Invalid: true };
+    if (this.selectedCurrency === DoubleButtonActive.LeftButton) {
+      if (parts.length === 2 && parts[1].length > this.blockchainService.currentMaxDecimals) {
+        return { Invalid: true };
+      }
+    } else {
+      if (parts.length === 2 && parts[1].length > SendFormComponent.MaxUsdDecimal) {
+        return { Invalid: true };
+      }
+    }
+
+    return null;
+  }
+
+  private validateAmountWithValue(amountControl: FormControl) {
+    const firstValidation = this.validateAmount(amountControl);
+    if (firstValidation) {
+      return firstValidation;
+    }
+
+    const coinsInWallet = this.form.get('wallet').value && (this.form.get('wallet').value as Wallet).balance ?
+      (this.form.get('wallet').value as Wallet).balance.toNumber() : -1;
+
+    if (this.selectedCurrency === DoubleButtonActive.LeftButton) {
+      if (parseFloat(amountControl.value) > coinsInWallet) {
+        return { Invalid: true };
+      }
+    } else {
+      this.updateValue();
+      if (this.value > coinsInWallet) {
+        return { Invalid: true };
+      }
     }
 
     return null;
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 7ed80779..cf5e7122 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1,5 +1,6 @@
 {
   "common": {
+    "usd": "USD",
     "loading": "Loading...",
     "new": "New",
     "load": "Load",
@@ -213,6 +214,7 @@
     "notes-label": "Notes",
     "wallet-label": "Wallet",
     "addresses-label": "Addresses",
+    "invalid-amount": "Please enter a valid amount",
     "addresses-help": "Limit the addresses from where the coins and hours could be sent",
     "all-addresses": "All the addresses of the selected wallet",
     "outputs-label": "Unspent outputs",
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index 09b25756..03fc9a79 100644
--- a/src/assets/i18n/es.json
+++ b/src/assets/i18n/es.json
@@ -1,5 +1,6 @@
 {
   "common": {
+    "usd": "USD",
     "loading": "Cargando...",
     "new": "Nueva",
     "load": "Cargar",
@@ -213,6 +214,7 @@
     "notes-label": "Notas",
     "wallet-label": "Billetera",
     "addresses-label": "Direcciones",
+    "invalid-amount": "Por favor introduzca una cantidad válida",
     "addresses-help": "Limite las direcciones desde donde pueden enviarse las monedas y las horas",
     "all-addresses": "Todas las direcciones de la billetera seleccionada.",
     "outputs-label": "Salidas no gastadas",
diff --git a/src/styles.scss b/src/styles.scss
index 0fd6dbb9..d37a01f8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -477,4 +477,31 @@ Responsive design
       margin-bottom: $mobile-nav-bar-height !important;
     }
   }
-}
\ No newline at end of file
+}
+
+.coin-selector-container {
+  display: inline-block;
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
+
+.coins-value-label {
+  font-size: 10px;
+  margin-top: 1px;
+  padding: 3px 10px;
+  background-color: $grey-lightest;
+  border-radius: 4px;
+
+  span {
+    opacity: 0.5;
+  }
+}
+
+.red {
+  color: $red;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

From b5408bd847d5b3c9c89294ec183eadbceece2289 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Thu, 23 May 2019 20:54:45 -0400
Subject: [PATCH 2/3] Fix unit tests

---
 .../send-form-advanced/send-form-advanced.component.spec.ts   | 4 +++-
 .../pages/send-skycoin/send-form/send-form.component.spec.ts  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.spec.ts b/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.spec.ts
index 2ac2bf9b..f571f504 100644
--- a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.spec.ts
+++ b/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.spec.ts
@@ -4,13 +4,14 @@ 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 { MockTranslatePipe, MockWalletService, MockSpendingService, MockCoinService, MockBlockchainService, MockCustomMatDialogService, MockNavBarService, MockPriceService } 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';
 
 describe('SendFormAdvancedComponent', () => {
   let component: SendFormAdvancedComponent;
@@ -29,6 +30,7 @@ describe('SendFormAdvancedComponent', () => {
         { provide: BlockchainService, useClass: MockBlockchainService },
         { provide: CustomMatDialogService, useClass: MockCustomMatDialogService },
         { provide: NavBarService, useClass: MockNavBarService },
+        { provide: PriceService, useClass: MockPriceService },
       ]
     })
     .compileComponents();
diff --git a/src/app/components/pages/send-skycoin/send-form/send-form.component.spec.ts b/src/app/components/pages/send-skycoin/send-form/send-form.component.spec.ts
index 3531af1a..1c05e5d3 100644
--- a/src/app/components/pages/send-skycoin/send-form/send-form.component.spec.ts
+++ b/src/app/components/pages/send-skycoin/send-form/send-form.component.spec.ts
@@ -8,9 +8,10 @@ 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 { MockTranslatePipe, MockWalletService, MockSpendingService, MockCoinService, MockBlockchainService, MockCustomMatDialogService, MockNavBarService, MockPriceService } 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';
 
 describe('SendFormComponent', () => {
   let component: SendFormComponent;
@@ -29,6 +30,7 @@ describe('SendFormComponent', () => {
         { provide: BlockchainService, useClass: MockBlockchainService },
         { provide: CustomMatDialogService, useClass: MockCustomMatDialogService },
         { provide: NavBarService, useClass: MockNavBarService },
+        { provide: PriceService, useClass: MockPriceService },
       ]
     }).compileComponents();
   }));

From cb61f68362266a3075af16ac1fd0e6e8762471c4 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Fri, 7 Jun 2019 19:29:45 -0400
Subject: [PATCH 3/3] Fix lint errors

---
 .../send-form-advanced.component.spec.ts                 | 9 ++++++++-
 .../send-skycoin/send-form/send-form.component.spec.ts   | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.spec.ts b/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.spec.ts
index f571f504..8dcaec5a 100644
--- a/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.spec.ts
+++ b/src/app/components/pages/send-skycoin/send-form-advanced/send-form-advanced.component.spec.ts
@@ -4,7 +4,6 @@ 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, MockPriceService } from '../../../../utils/test-mocks';
 import { WalletService } from '../../../../services/wallet/wallet.service';
 import { SpendingService } from '../../../../services/wallet/spending.service';
 import { CoinService } from '../../../../services/coin.service';
@@ -12,6 +11,14 @@ 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;
diff --git a/src/app/components/pages/send-skycoin/send-form/send-form.component.spec.ts b/src/app/components/pages/send-skycoin/send-form/send-form.component.spec.ts
index 1c05e5d3..fd16777d 100644
--- a/src/app/components/pages/send-skycoin/send-form/send-form.component.spec.ts
+++ b/src/app/components/pages/send-skycoin/send-form/send-form.component.spec.ts
@@ -8,10 +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, MockPriceService } 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;