From cb8e31e9611df96d65c0dcc4f457a2ad734790ce Mon Sep 17 00:00:00 2001
From: sultanmyrza <sultanmyrza@gmail.com>
Date: Wed, 6 Jul 2022 10:15:20 +0600
Subject: [PATCH] move wallet address QR code to deposit page

---
 .../wallets/transfer/transfer.module.ts       |   3 +-
 .../wallets/transfer/transfer.page.html       | 277 ++++++++++--------
 .../wallets/transfer/transfer.page.scss       |  18 ++
 .../wallets/transfer/transfer.page.ts         |  15 +-
 src/app/features/wallets/wallets.page.html    |  16 -
 5 files changed, 196 insertions(+), 133 deletions(-)

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>