Merge pull request #1782 from numbersprotocol/feature-qr-code-for-dep…

…osit

Feature qr code for deposit

package.json

@@ -61,6 +61,7 @@
     "@ngx-formly/schematics": "^5.10.22",
     "@numbersprotocol/preview-camera": "github:numbersprotocol/preview-camera#release-0.0.2-auto-rotate-fix",
     "@numbersprotocol/preview-video": "github:numbersprotocol/preview-video",
+    "@techiediaries/ngx-qrcode": "^9.1.0",
     "appsflyer-capacitor-plugin": "^6.5.2",
     "async-mutex": "^0.3.2",
     "buffer": "^5.7.1",

src/app/features/wallets/wallets.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
+import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
 import { SharedModule } from '../../shared/shared.module';
 import { WalletsPageRoutingModule } from './wallets-routing.module';
 import { WalletsPage } from './wallets.page';
 
 @NgModule({
-  imports: [SharedModule, WalletsPageRoutingModule],
+  imports: [SharedModule, WalletsPageRoutingModule, NgxQRCodeModule],
   declarations: [WalletsPage],
 })
 export class WalletsPageModule {}

src/app/features/wallets/wallets.page.html

@@ -76,6 +76,22 @@ <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>

src/app/features/wallets/wallets.page.scss

@@ -119,3 +119,22 @@ mat-list {
   margin-left: 3px;
   font-size: 1.1em;
 }
+
+.asset-wallet-qr-code-container {
+  // background-color: green;
+  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;
+}

src/app/features/wallets/wallets.page.ts

@@ -8,6 +8,7 @@ import { Browser } from '@capacitor/browser';
 import { Clipboard } from '@capacitor/clipboard';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { NgxQrcodeElementTypes } from '@techiediaries/ngx-qrcode';
 import { BehaviorSubject, combineLatest, forkJoin } from 'rxjs';
 import {
   catchError,
@@ -49,6 +50,8 @@ export class WalletsPage {
   readonly isLoadingBalance$ = new BehaviorSubject<boolean>(false);
   readonly networkConnected$ = this.diaBackendWalletService.networkConnected$;
 
+  elementType = NgxQrcodeElementTypes.URL;
+
   constructor(
     private readonly diaBackendWalletService: DiaBackendWalletService,
     private readonly diaBackendAuthService: DiaBackendAuthService,

src/assets/i18n/en-us.json

@@ -275,6 +275,8 @@
     "assetWalletHistory": "Asset Wallet History",
     "myAssetWallet": "My Asset Wallet",
     "myAssetWalletTooltip": "Main asset vault for Capture NFT and NUM",
+    "myAssetWalletQRCode": "My Asset Wallet QR-Code",
+    "myAssetWalletQRCodeInfo": "Please make sure to use BEP20 (BNB Chain)",
     "integrityKey": "Integrity Key",
     "integrityWallet": "Integrity Wallet",
     "integrityWalletTooltip": "Wallet used for creating Signatures",

src/assets/i18n/zh-tw.json

@@ -275,6 +275,8 @@
     "assetWalletHistory": "資產交易紀錄",
     "myAssetWallet": "我的資產錢包",
     "myAssetWalletTooltip": "Capture NFT 和 NUM 的主要資產庫",
+    "myAssetWalletQRCode": "我的資產錢包二維碼",
+    "myAssetWalletQRCodeInfo": "請務必使用 BEP20（BNB 鏈）",
     "integrityKey": "完整性金鑰",
     "integrityWallet": "完整性錢包",
     "integrityWalletTooltip": "用於創建簽名的錢包",