diff --git a/CHANGELOG.md b/CHANGELOG.md index 2759ddf78..019b090f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## 0.60.1 - 2022-07-06 + +### Fixed + +- Move wallet address QR code to deposit page + ## 0.60.0 - 2022-07-05 ### Added diff --git a/android/app/build.gradle b/android/app/build.gradle index 5a8d231eb..3629d74e1 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -6,8 +6,8 @@ android { applicationId "io.numbersprotocol.capturelite" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion - versionCode 420 - versionName "0.60.0" + versionCode 421 + versionName "0.60.1" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildFeatures { diff --git a/package-lock.json b/package-lock.json index 611b9008d..74c26f40a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "capture-lite", - "version": "0.60.0", + "version": "0.60.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "capture-lite", - "version": "0.60.0", + "version": "0.60.1", "dependencies": { "@angular/animations": "^12.2.4", "@angular/cdk": "^12.2.4", diff --git a/package.json b/package.json index db1a49639..aa5d46640 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "capture-lite", - "version": "0.60.0", + "version": "0.60.1", "author": "numbersprotocol", "homepage": "https://numbersprotocol.io/", "scripts": { diff --git a/src/app/features/wallets/transfer/transfer.module.ts b/src/app/features/wallets/transfer/transfer.module.ts index 04f64b327..fba808bf1 100644 --- a/src/app/features/wallets/transfer/transfer.module.ts +++ b/src/app/features/wallets/transfer/transfer.module.ts @@ -1,4 +1,5 @@ import { NgModule } from '@angular/core'; +import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode'; import { SharedModule } from '../../../shared/shared.module'; import { TransferLoadingComponent } from './transfer-loading/transfer-loading.component'; import { TransferRequestSentComponent } from './transfer-request-sent/transfer-request-sent.component'; @@ -6,7 +7,7 @@ import { TransferPageRoutingModule } from './transfer-routing.module'; import { TransferPage } from './transfer.page'; @NgModule({ - imports: [SharedModule, TransferPageRoutingModule], + imports: [SharedModule, TransferPageRoutingModule, NgxQRCodeModule], declarations: [ TransferPage, TransferLoadingComponent, diff --git a/src/app/features/wallets/transfer/transfer.page.html b/src/app/features/wallets/transfer/transfer.page.html index ddaf9a7d5..3d4c80fc8 100644 --- a/src/app/features/wallets/transfer/transfer.page.html +++ b/src/app/features/wallets/transfer/transfer.page.html @@ -6,119 +6,166 @@ </mat-toolbar> <ion-content *transloco="let t"> - <ion-card id="main-card"> - <ion-grid> - <ion-row id="in-app-transfer-row"> - <ion-col size="2"> - <ion-icon id="in-app-transfer-wallet-icon" name="wallet"></ion-icon> - </ion-col> - <ion-col size="8"> - <h6>{{ t('wallets.inAppTransfer') }}</h6> - <p>{{ t('wallets.moveNumBetweenAssetWallet') }}</p> - <p>{{ t('wallets.andIntegrityWallet') }}</p> - </ion-col> - <ion-col> - <ion-img - id="num-icon-svg" - src="../../../assets/images/num-icon.svg" - ></ion-img> - </ion-col> - </ion-row> - <ion-row class="wallet-info-row"> - <ion-col size="7"> - <h1> - {{ - mode === 'withdraw' - ? t('wallets.assetWallet') - : t('wallets.integrityWallet') - }} - </h1> - </ion-col> - <ion-col offset="0.5"> - <h6>BEP20</h6> - <h5> - {{ - (mode === 'withdraw' - ? assetWalletBscNumBalance$ - : integrityWalletBscNumBalance$ - ) - | ngrxPush - | currency - }} - </h5> - </ion-col> - </ion-row> - <ion-row id="divider-row"> - <ion-icon id="direction-icon" name="arrow-down-circle"></ion-icon> - <div id="horizontal-divider"></div> - </ion-row> - <ion-row class="wallet-info-row"> - <ion-col size="7"> - <h1> - {{ - mode === 'withdraw' - ? t('wallets.integrityWallet') - : t('wallets.assetWallet') - }} - </h1> - </ion-col> - <ion-col offset="0.5"> - <h6>BEP20</h6> - <h5> - {{ - (mode === 'withdraw' - ? integrityWalletBscNumBalance$ - : assetWalletBscNumBalance$ - ) - | ngrxPush - | currency - }} - </h5> - </ion-col> - </ion-row> - <ion-row> - <ion-input - id="transfer-amount-input" - [placeholder]="t('wallets.enterAmount')" - [(ngModel)]="transferAmount" - type="number" - (input)="onInputTransferAmount()" - ></ion-input> - </ion-row> - </ion-grid> - </ion-card> - <ion-card id="bottom-card" *ngIf="keyboardIsHidden$ | ngrxPush"> - <ion-grid> - <ion-row> - <ion-col size="2"> - <ion-icon name="wallet"></ion-icon> - </ion-col> - <ion-col size="5" *ngrxLet="gasFee$ as gasFee"> - <h6 class="gas-fee-text"> - {{ t('wallets.gasFee') }}: - {{ gasFee > 0 ? (gasFee | number: '1.2-2') : t('wallets.pending') }} - </h6> - <h4 class="wallet-total-text"> - {{ t('wallets.total') }} {{ totalCost$ | ngrxPush | currency }} - </h4> - </ion-col> - <ion-col id="deposit-withdraw-btn-col"> - <ion-button - *ngIf="!readyToSend" - fill="outline" - expand="block" - (click)="calculateGasFee()" - >{{ t('wallets.calculateGasFee') }}</ion-button - > - <ion-button - *ngIf="readyToSend" - fill="outline" - expand="block" - (click)="transfer()" - >{{ t('wallets.' + mode) }}</ion-button - > - </ion-col> - </ion-row> - </ion-grid> - </ion-card> + <div *ngIf="mode === 'deposit'"> + <div class="vertical-pacing-12"></div> + <div class="asset-wallet-qr-code-container"> + {{ t('wallets.myAssetWalletQRCode') }} + <div class="qr-code-info"> + {{ t('wallets.myAssetWalletQRCodeInfo') }} + </div> + <div class="vertical-pacing-12"></div> + <ngx-qrcode + [elementType]="elementType" + [value]="assetWalletAddr$ | ngrxPush" + cssClass="qr-code" + [margin]="0" + [width]="150" + > + </ngx-qrcode> + </div> + + <mat-list> + <mat-list-item> + <mat-icon svgIcon="wallet" mat-list-icon></mat-icon> + <div mat-line> + {{ t('wallets.myAssetWallet') }} + <ion-icon + class="info-icon" + name="information-circle" + #assetWalletTooltip="matTooltip" + (click)="assetWalletTooltip.toggle()" + [matTooltip]="t('wallets.myAssetWalletTooltip')" + ></ion-icon> + </div> + <div mat-line>{{ assetWalletAddr$ | ngrxPush }}</div> + <button + mat-icon-button + *ngIf="assetWalletAddr$ | ngrxPush as assetWalletAddr" + (click)="copyToClipboard(assetWalletAddr)" + > + <mat-icon>content_copy</mat-icon> + </button> + </mat-list-item> + </mat-list> + </div> + + <div *ngIf="mode === 'withdraw'"> + <ion-card id="main-card"> + <ion-grid> + <ion-row id="in-app-transfer-row"> + <ion-col size="2"> + <ion-icon id="in-app-transfer-wallet-icon" name="wallet"></ion-icon> + </ion-col> + <ion-col size="8"> + <h6>{{ t('wallets.inAppTransfer') }}</h6> + <p>{{ t('wallets.moveNumBetweenAssetWallet') }}</p> + <p>{{ t('wallets.andIntegrityWallet') }}</p> + </ion-col> + <ion-col> + <ion-img + id="num-icon-svg" + src="../../../assets/images/num-icon.svg" + ></ion-img> + </ion-col> + </ion-row> + <ion-row class="wallet-info-row"> + <ion-col size="7"> + <h1> + {{ + mode === 'withdraw' + ? t('wallets.assetWallet') + : t('wallets.integrityWallet') + }} + </h1> + </ion-col> + <ion-col offset="0.5"> + <h6>BEP20</h6> + <h5> + {{ + (mode === 'withdraw' + ? assetWalletBscNumBalance$ + : integrityWalletBscNumBalance$ + ) + | ngrxPush + | currency + }} + </h5> + </ion-col> + </ion-row> + <ion-row id="divider-row"> + <ion-icon id="direction-icon" name="arrow-down-circle"></ion-icon> + <div id="horizontal-divider"></div> + </ion-row> + <ion-row class="wallet-info-row"> + <ion-col size="7"> + <h1> + {{ + mode === 'withdraw' + ? t('wallets.integrityWallet') + : t('wallets.assetWallet') + }} + </h1> + </ion-col> + <ion-col offset="0.5"> + <h6>BEP20</h6> + <h5> + {{ + (mode === 'withdraw' + ? integrityWalletBscNumBalance$ + : assetWalletBscNumBalance$ + ) + | ngrxPush + | currency + }} + </h5> + </ion-col> + </ion-row> + <ion-row> + <ion-input + id="transfer-amount-input" + [placeholder]="t('wallets.enterAmount')" + [(ngModel)]="transferAmount" + type="number" + (input)="onInputTransferAmount()" + ></ion-input> + </ion-row> + </ion-grid> + </ion-card> + <ion-card id="bottom-card" *ngIf="keyboardIsHidden$ | ngrxPush"> + <ion-grid> + <ion-row> + <ion-col size="2"> + <ion-icon name="wallet"></ion-icon> + </ion-col> + <ion-col size="5" *ngrxLet="gasFee$ as gasFee"> + <h6 class="gas-fee-text"> + {{ t('wallets.gasFee') }}: + {{ + gasFee > 0 ? (gasFee | number: '1.2-2') : t('wallets.pending') + }} + </h6> + <h4 class="wallet-total-text"> + {{ t('wallets.total') }} {{ totalCost$ | ngrxPush | currency }} + </h4> + </ion-col> + <ion-col id="deposit-withdraw-btn-col"> + <ion-button + *ngIf="!readyToSend" + fill="outline" + expand="block" + (click)="calculateGasFee()" + >{{ t('wallets.calculateGasFee') }}</ion-button + > + <ion-button + *ngIf="readyToSend" + fill="outline" + expand="block" + (click)="transfer()" + >{{ t('wallets.' + mode) }}</ion-button + > + </ion-col> + </ion-row> + </ion-grid> + </ion-card> + </div> </ion-content> diff --git a/src/app/features/wallets/transfer/transfer.page.scss b/src/app/features/wallets/transfer/transfer.page.scss index 79fa13796..bec8d93aa 100644 --- a/src/app/features/wallets/transfer/transfer.page.scss +++ b/src/app/features/wallets/transfer/transfer.page.scss @@ -175,3 +175,21 @@ ion-card { border-radius: 5px; } } + +.asset-wallet-qr-code-container { + max-width: 300px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; +} + +.qr-code-info { + text-align: center; + opacity: 0.6; + font-size: 12px; +} + +.vertical-pacing-12 { + height: 12px; +} diff --git a/src/app/features/wallets/transfer/transfer.page.ts b/src/app/features/wallets/transfer/transfer.page.ts index b0bf57079..b556d3f00 100644 --- a/src/app/features/wallets/transfer/transfer.page.ts +++ b/src/app/features/wallets/transfer/transfer.page.ts @@ -1,10 +1,13 @@ import { HttpErrorResponse } from '@angular/common/http'; import { Component } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { ActivatedRoute } from '@angular/router'; +import { Clipboard } from '@capacitor/clipboard'; import { NavController, Platform } from '@ionic/angular'; import { TranslocoService } from '@ngneat/transloco'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; +import { NgxQrcodeElementTypes } from '@techiediaries/ngx-qrcode'; import { BehaviorSubject, merge, ObservableInput } from 'rxjs'; import { catchError, finalize, mapTo, startWith, tap } from 'rxjs/operators'; import { BlockingActionService } from '../../../shared/blocking-action/blocking-action.service'; @@ -22,7 +25,9 @@ import { TransferRequestSentComponent } from './transfer-request-sent/transfer-r }) export class TransferPage { mode = ''; + elementType = NgxQrcodeElementTypes.URL; + readonly assetWalletAddr$ = this.diaBackendWalletService.assetWalletAddr$; readonly assetWalletBscNumBalance$ = this.diaBackendWalletService.assetWalletBscNumBalance$; readonly integrityWalletBscNumBalance$ = @@ -53,7 +58,8 @@ export class TransferPage { private readonly navCtrl: NavController, private readonly errorService: ErrorService, private readonly translocoService: TranslocoService, - private readonly platform: Platform + private readonly platform: Platform, + private readonly snackBar: MatSnackBar ) { this.activeRoute.paramMap.subscribe(paramMap => { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion @@ -188,4 +194,11 @@ export class TransferPage { .toPromise() .then(() => this.navCtrl.navigateBack('/wallets')); } + + async copyToClipboard(value: string) { + await Clipboard.write({ string: value }); + this.snackBar.open( + this.translocoService.translate('message.copiedToClipboard') + ); + } } diff --git a/src/app/features/wallets/wallets.page.html b/src/app/features/wallets/wallets.page.html index 78d3ee073..822d520dd 100644 --- a/src/app/features/wallets/wallets.page.html +++ b/src/app/features/wallets/wallets.page.html @@ -76,22 +76,6 @@ <h3 class="num-text">NUM</h3> </ion-grid> </ion-card> - <div class="asset-wallet-qr-code-container"> - {{ t('wallets.myAssetWalletQRCode') }} - <div class="qr-code-info"> - {{ t('wallets.myAssetWalletQRCodeInfo') }} - </div> - <div class="vertical-pacing-12"></div> - <ngx-qrcode - [elementType]="elementType" - [value]="assetWalletAddr$ | ngrxPush" - cssClass="qr-code" - [margin]="0" - [width]="150" - > - </ngx-qrcode> - </div> - <mat-list> <mat-list-item> <mat-icon svgIcon="wallet" mat-list-icon></mat-icon>