Merge pull request #3964 from mempool/simon/calculator-validation-improvements
Calculator validation improvements
This commit is contained in:
		
						commit
						928abcabf1
					
				@ -12,7 +12,7 @@
 | 
			
		||||
          <div class="input-group-prepend">
 | 
			
		||||
            <span class="input-group-text">{{ currency$ | async }}</span>
 | 
			
		||||
          </div>
 | 
			
		||||
          <input type="text" class="form-control" formControlName="fiat" (input)="transformInput('fiat')">
 | 
			
		||||
          <input type="text" class="form-control" formControlName="fiat" (input)="transformInput('fiat')" (click)="selectAll($event)">
 | 
			
		||||
          <app-clipboard [button]="true" [text]="form.get('fiat').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
@ -20,7 +20,7 @@
 | 
			
		||||
          <div class="input-group-prepend">
 | 
			
		||||
            <span class="input-group-text">BTC</span>
 | 
			
		||||
          </div>
 | 
			
		||||
          <input type="text" class="form-control" formControlName="bitcoin" (input)="transformInput('bitcoin')">
 | 
			
		||||
          <input type="text" class="form-control" formControlName="bitcoin" (input)="transformInput('bitcoin')" (click)="selectAll($event)">
 | 
			
		||||
          <app-clipboard [button]="true" [text]="form.get('bitcoin').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
@ -28,7 +28,7 @@
 | 
			
		||||
          <div class="input-group-prepend">
 | 
			
		||||
            <span class="input-group-text">sats</span>
 | 
			
		||||
          </div>
 | 
			
		||||
          <input type="text" class="form-control" formControlName="satoshis" (input)="transformInput('satoshis')">
 | 
			
		||||
          <input type="text" class="form-control" formControlName="satoshis" (input)="transformInput('satoshis')" (click)="selectAll($event)">
 | 
			
		||||
          <app-clipboard [button]="true" [text]="form.get('satoshis').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
 | 
			
		||||
        </div>
 | 
			
		||||
      </form>
 | 
			
		||||
 | 
			
		||||
@ -54,6 +54,9 @@ export class CalculatorComponent implements OnInit {
 | 
			
		||||
    ]).subscribe(([price, value]) => {
 | 
			
		||||
      const rate = (value / price).toFixed(8);
 | 
			
		||||
      const satsRate = Math.round(value / price * 100_000_000);
 | 
			
		||||
      if (isNaN(value)) {
 | 
			
		||||
        return;
 | 
			
		||||
      }
 | 
			
		||||
      this.form.get('bitcoin').setValue(rate, { emitEvent: false });
 | 
			
		||||
      this.form.get('satoshis').setValue(satsRate, { emitEvent: false } );
 | 
			
		||||
    });
 | 
			
		||||
@ -63,6 +66,9 @@ export class CalculatorComponent implements OnInit {
 | 
			
		||||
      this.form.get('bitcoin').valueChanges
 | 
			
		||||
    ]).subscribe(([price, value]) => {
 | 
			
		||||
      const rate = parseFloat((value * price).toFixed(8));
 | 
			
		||||
      if (isNaN(value)) {
 | 
			
		||||
        return;
 | 
			
		||||
      }
 | 
			
		||||
      this.form.get('fiat').setValue(rate, { emitEvent: false } );
 | 
			
		||||
      this.form.get('satoshis').setValue(Math.round(value * 100_000_000), { emitEvent: false } );
 | 
			
		||||
    });
 | 
			
		||||
@ -73,6 +79,9 @@ export class CalculatorComponent implements OnInit {
 | 
			
		||||
    ]).subscribe(([price, value]) => {
 | 
			
		||||
      const rate = parseFloat((value / 100_000_000 * price).toFixed(8));
 | 
			
		||||
      const bitcoinRate = (value / 100_000_000).toFixed(8);
 | 
			
		||||
      if (isNaN(value)) {
 | 
			
		||||
        return;
 | 
			
		||||
      }
 | 
			
		||||
      this.form.get('fiat').setValue(rate, { emitEvent: false } );
 | 
			
		||||
      this.form.get('bitcoin').setValue(bitcoinRate, { emitEvent: false });
 | 
			
		||||
    });
 | 
			
		||||
@ -88,7 +97,16 @@ export class CalculatorComponent implements OnInit {
 | 
			
		||||
    if (value === '.') {
 | 
			
		||||
      value = '0';
 | 
			
		||||
    }
 | 
			
		||||
    const sanitizedValue = this.removeExtraDots(value);
 | 
			
		||||
    let sanitizedValue = this.removeExtraDots(value);
 | 
			
		||||
    if (name === 'bitcoin' && this.countDecimals(sanitizedValue) > 8) {
 | 
			
		||||
      sanitizedValue = this.toFixedWithoutRounding(sanitizedValue, 8);
 | 
			
		||||
    }
 | 
			
		||||
    if (sanitizedValue === '') {
 | 
			
		||||
      sanitizedValue = '0';
 | 
			
		||||
    }
 | 
			
		||||
    if (name === 'satoshis') {
 | 
			
		||||
      sanitizedValue = parseFloat(sanitizedValue).toFixed(0);
 | 
			
		||||
    }
 | 
			
		||||
    formControl.setValue(sanitizedValue, {emitEvent: true});
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -100,4 +118,20 @@ export class CalculatorComponent implements OnInit {
 | 
			
		||||
    const afterDotReplaced = afterDot.replace(/\./g, '');
 | 
			
		||||
    return `${beforeDot}.${afterDotReplaced}`;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  countDecimals(numberString: string): number {
 | 
			
		||||
    const decimalPos = numberString.indexOf('.');
 | 
			
		||||
    if (decimalPos === -1) return 0;
 | 
			
		||||
    return numberString.length - decimalPos - 1;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  toFixedWithoutRounding(numStr: string, fixed: number): string {
 | 
			
		||||
    const re = new RegExp(`^-?\\d+(?:.\\d{0,${(fixed || -1)}})?`);
 | 
			
		||||
    const result = numStr.match(re);
 | 
			
		||||
    return result ? result[0] : numStr;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  selectAll(event): void {
 | 
			
		||||
    event.target.select();
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user