Merge pull request #1797 from numbersprotocol/develop

Develop
numbersprotocol · Jul 6, 2022 · 804461e · 804461e
2 parents 6eb9d2d + f71bc4b
commit 804461e
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 138 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -1,12 +1,13 @@
 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';
 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
@@ -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
@@ -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;
+}