Merge branch 'develop' into 'master'

Develop

See merge request papers/airgap/airgap-vault!354

package.json

@@ -37,9 +37,9 @@
     "apply-diagnostic-modules": "node apply-diagnostic-modules.js"
   },
   "dependencies": {
-    "@airgap/angular-core": "0.0.30",
-    "@airgap/angular-ngrx": "0.0.30",
-    "@airgap/coinlib-core": "0.13.4",
+    "@airgap/angular-core": "0.0.31",
+    "@airgap/angular-ngrx": "0.0.31",
+    "@airgap/coinlib-core": "0.13.5",
     "@airgap/sapling-wasm": "0.0.7",
     "@angular/common": "13.2.5",
     "@angular/core": "13.2.5",
@@ -192,4 +192,4 @@
       "cordova-plugin-device-motion": {}
     }
   }
-}
+}

src/app/app.component.ts

@@ -34,6 +34,11 @@ import { StartupChecksService } from './services/startup-checks/startup-checks.s
 
 declare let window: Window & { airGapHasStarted: boolean }
 
+const defer = (fn: () => void) => {
+  // fn()
+  setTimeout(fn, 200)
+}
+
 @Component({
   selector: 'airgap-root',
   templateUrl: 'app.component.html'
@@ -113,23 +118,25 @@ export class AppComponent implements AfterViewInit {
           })
       } else {
         this.ngZone.run(async () => {
-          this.iacService.handleRequest(data.url, IACMessageTransport.DEEPLINK).catch(handleErrorLocal(ErrorCategory.SCHEME_ROUTING))
+          // We defer this call because on iOS the app would sometimes get stuck on a black screen when handling deeplinks.
+          defer(() =>
+            this.iacService.handleRequest(data.url, IACMessageTransport.DEEPLINK).catch(handleErrorLocal(ErrorCategory.SCHEME_ROUTING))
+          )
         })
       }
     })
   }
 
   private async initializeTranslations(): Promise<void> {
     return this.languageService.init({
-      supportedLanguages: ['en', 'de', 'zh-cn'],
+      supportedLanguages: ['en', 'de', 'zh'],
       defaultLanguage: 'en'
     })
   }
 
   private async initializeProtocols(): Promise<void> {
-    const externalMethodProvider:
-      | TezosSaplingExternalMethodProvider
-      | undefined = await this.saplingNativeService.createExternalMethodProvider()
+    const externalMethodProvider: TezosSaplingExternalMethodProvider | undefined =
+      await this.saplingNativeService.createExternalMethodProvider()
 
     const shieldedTezProtocol: TezosShieldedTezProtocol = new TezosShieldedTezProtocol(
       new TezosSaplingProtocolOptions(

src/app/components/mnemonic-keyboard/mnemonic-keyboard.component.ts

@@ -187,7 +187,8 @@ export class MnemonicKeyboardComponent implements OnInit, OnDestroy {
 
   async showWordlist() {
     const modal: HTMLIonModalElement = await this.modalController.create({
-      component: WordlistPage
+      component: WordlistPage,
+      componentProps: { isModal: true }
     })
 
     modal.present().catch(handleErrorLocal(ErrorCategory.IONIC_MODAL))

src/app/pages/account-address/account-address.page.html

@@ -36,12 +36,32 @@ <h2 class="ion-no-margin">{{ wallet.protocol.name }} {{ wallet.protocol.symbol }
     </ion-col>
   </ion-row>
 
-  <ion-row class="ion-justify-content-center ion-padding-bottom">
-    <airgap-qr [qrdata]="wallet.receivingPublicAddress" [level]="'L'" [size]="300"></airgap-qr>
+  <p class="ion-padding-horizontal ion-padding-bottom">You can sync this account with:</p>
+
+  <ion-row *ngFor="let option of syncOptions" class="ion-padding-bottom">
+    <ion-col size="12">
+      <ion-button expand="block" color="light" (click)="share(option)" shape="round">
+        <img src="assets/logos/{{option.icon}}" style="width: 24px; height: 24px" />
+        &nbsp; {{option.name}}
+      </ion-button>
+    </ion-col>
   </ion-row>
 
-  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-button color="light" (click)="share()" shape="round">{{ 'wallet-address.sync_label' | translate }}</ion-button>
-    <ion-button color="primary" (click)="done()" shape="round">{{ 'wallet-address.done_label' | translate }}</ion-button>
-  </ion-fab>
+  <ion-modal #modal trigger="open-modal" [presentingElement]="presentingElement">
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Address QR</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="modal.dismiss()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-row class="ion-justify-content-center ion-padding-bottom">
+          <airgap-qr [qrdata]="wallet.receivingPublicAddress" [level]="'L'" [size]="300"></airgap-qr>
+        </ion-row>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
 </ion-content>

src/app/pages/account-address/account-address.page.scss

@@ -11,3 +11,24 @@ ion-avatar {
   width: 64px;
   height: 64px;
 }
+
+ion-modal {
+  --ion-background-color: var(--ion-color-secondary);
+  ion-toolbar {
+    --background: var(--ion-color-secondary);
+  }
+  --ion-text-color: var(--ion-color-secondary-contrast);
+  ion-toggle {
+    --handle-background: var(--ion-color-secondary-contrast);
+  }
+  ion-radio,
+  ion-label,
+  ion-segment-button,
+  ion-toolbar {
+    --color: var(--ion-color-secondary-contrast);
+  }
+  ion-item,
+  ion-checkbox {
+    --border-color: var(--ion-color-secondary-contrast);
+  }
+}

src/app/pages/account-address/account-address.page.ts

@@ -1,7 +1,8 @@
-import { ClipboardService, DeeplinkService, UiEventService } from '@airgap/angular-core'
-import { AirGapWallet, IACMessageDefinitionObjectV3 } from '@airgap/coinlib-core'
-import { Component } from '@angular/core'
-import { PopoverController } from '@ionic/angular'
+import { ClipboardService, DeeplinkService, QRType, UiEventService } from '@airgap/angular-core'
+import { AirGapWallet, IACMessageDefinitionObjectV3, MainProtocolSymbols } from '@airgap/coinlib-core'
+import { Component, ViewChild } from '@angular/core'
+import { Router } from '@angular/router'
+import { IonModal, PopoverController } from '@ionic/angular'
 
 import { ErrorCategory, handleErrorLocal } from '../../services/error-handler/error-handler.service'
 import { InteractionOperationType, InteractionService } from '../../services/interaction/interaction.service'
@@ -12,18 +13,55 @@ import { isWalletMigrated } from '../../utils/migration'
 
 import { AccountEditPopoverComponent } from './account-edit-popover/account-edit-popover.component'
 
+// TODO: add wallet definition into a service
+export const airgapwallet = {
+  icon: 'airgap-wallet-app-logo.png',
+  name: 'AirGap Wallet',
+  qrType: QRType.V3
+}
+
+const bluewallet = {
+  icon: 'bluewallet.png',
+  name: 'BlueWallet',
+  qrType: QRType.BC_UR
+}
+
+const sparrowwallet = {
+  icon: 'sparrowwallet.png',
+  name: 'Sparrow Wallet',
+  qrType: QRType.BC_UR
+}
+
+const metamask = {
+  icon: 'metamask.webp',
+  name: 'MetaMask',
+  qrType: QRType.METAMASK
+}
+
+export interface CompanionApp {
+  icon: string
+  name: string
+  qrType: QRType
+}
+
 @Component({
   selector: 'airgap-account-address',
   templateUrl: './account-address.page.html',
   styleUrls: ['./account-address.page.scss']
 })
 export class AccountAddressPage {
+  @ViewChild(IonModal) modal: IonModal
+
   public wallet: AirGapWallet
 
+  public syncOptions: CompanionApp[]
+
   private shareObject?: IACMessageDefinitionObjectV3[]
   private shareObjectPromise?: Promise<void>
   private walletShareUrl?: string
 
+  presentingElement = null
+
   constructor(
     private readonly popoverCtrl: PopoverController,
     private readonly clipboardService: ClipboardService,
@@ -32,21 +70,43 @@ export class AccountAddressPage {
     private readonly navigationService: NavigationService,
     private readonly uiEventService: UiEventService,
     private readonly migrationService: MigrationService,
-    private readonly deepLinkService: DeeplinkService
+    private readonly deepLinkService: DeeplinkService,
+    private readonly router: Router
   ) {
     this.wallet = this.navigationService.getState().wallet
+
+    if (!this.wallet) {
+      this.router.navigate(['/'])
+      throw new Error('No wallet found!')
+    }
+
+    switch (this.wallet?.protocol.identifier) {
+      case MainProtocolSymbols.BTC_SEGWIT:
+        this.syncOptions = [airgapwallet, bluewallet, sparrowwallet]
+        break
+      case MainProtocolSymbols.ETH:
+        this.syncOptions = [airgapwallet, metamask]
+        break
+      default:
+        this.syncOptions = [airgapwallet]
+    }
+  }
+
+  ngOnInit() {
+    this.presentingElement = document.querySelector('.ion-page')
   }
 
   public done(): void {
     this.navigationService.routeToAccountsTab().catch(handleErrorLocal(ErrorCategory.IONIC_NAVIGATION))
   }
 
-  public async share(): Promise<void> {
+  public async share(companionApp: CompanionApp = airgapwallet): Promise<void> {
     await this.waitWalletShareUrl()
 
     this.interactionService.startInteraction({
       operationType: InteractionOperationType.WALLET_SYNC,
-      iacMessage: this.shareObject
+      iacMessage: this.shareObject,
+      companionApp: companionApp
     })
   }
 
@@ -55,6 +115,9 @@ export class AccountAddressPage {
       component: AccountEditPopoverComponent,
       componentProps: {
         wallet: this.wallet,
+        openAddressQR: () => {
+          this.modal.present().catch(handleErrorLocal(ErrorCategory.IONIC_MODAL))
+        },
         getWalletShareUrl: async () => {
           await this.waitWalletShareUrl()
           return this.walletShareUrl

src/app/pages/account-address/account-edit-popover/account-edit-popover.component.html

@@ -2,6 +2,7 @@
   <ion-list-header>
     <ion-label>{{ 'wallet-edit-delete-popover.settings_label' | translate }}</ion-label>
   </ion-list-header>
+
   <ion-item button detail="false" (click)="copyAddressToClipboard()">
     <ion-icon name="clipboard-outline" color="dark" slot="end"></ion-icon>
     {{ 'wallet-edit-delete-popover.copy_label' | translate }}
@@ -10,6 +11,10 @@
     <ion-icon name="clipboard-outline" color="dark" slot="end"></ion-icon>
     {{ 'wallet-edit-delete-popover.copy_sync_code' | translate }}
   </ion-item>
+  <ion-item button detail="false" (click)="showAddressQR()">
+    <ion-icon name="clipboard-outline" color="dark" slot="end"></ion-icon>
+    {{ 'wallet-edit-delete-popover.show_address_qr' | translate }}
+  </ion-item>
   <ion-item button detail="false" (click)="delete()">
     <ion-icon name="trash" color="dark" slot="end"></ion-icon>
     {{ 'wallet-edit-delete-popover.account-removal_alert.delete_label' | translate }}

src/app/pages/account-address/account-edit-popover/account-edit-popover.component.scss

@@ -0,0 +1,5 @@
+.dismiss {
+  text-align: center;
+  font-weight: bolder;
+  color: var(--ion-color-secondary);
+}

src/app/pages/account-address/account-edit-popover/account-edit-popover.component.ts

@@ -17,6 +17,7 @@ import { NavigationService } from 'src/app/services/navigation/navigation.servic
 export class AccountEditPopoverComponent {
   public readonly wallet: AirGapWallet
   private readonly onDelete: Function
+  private readonly openAddressQR: () => void | undefined
   private readonly getWalletShareUrl: () => Promise<string>
 
   constructor(
@@ -46,6 +47,12 @@ export class AccountEditPopoverComponent {
     await this.popoverController.dismiss()
   }
 
+  public async showAddressQR(): Promise<void> {
+    this.openAddressQR()
+
+    await this.popoverController.dismiss()
+  }
+
   public async openAddressExplorer(): Promise<void> {
     this.navigationService.routeWithState('/address-explorer', { wallet: this.wallet })
 

src/app/pages/account-share/account-share.page.html

@@ -8,10 +8,15 @@
 </ion-header>
 
 <ion-content class="ion-padding">
-  <h3 class="ion-padding-bottom" [innerHTML]="'wallet-share.heading' | translate"></h3>
+  <h3 class="ion-padding-bottom" [innerHTML]="'wallet-share.heading' | translate: { walletName: walletName }"></h3>
 
   <ion-row class="ion-justify-content-center ion-padding-bottom" *ngIf="interactionUrl">
-    <airgap-iac-qr [messageDefinitionObjects]="interactionUrl" [level]="'L'" [size]="300"></airgap-iac-qr>
+    <airgap-iac-qr
+      [messageDefinitionObjects]="interactionUrl"
+      [qrFormatPreference]="companionApp.qrType"
+      [level]="'L'"
+      [size]="300"
+    ></airgap-iac-qr>
   </ion-row>
 
   <ion-row><p [innerHTML]="'wallet-share.text' | translate"></p></ion-row>

src/app/pages/account-share/account-share.page.ts

@@ -1,9 +1,8 @@
 import { ClipboardService } from '@airgap/angular-core'
 import { IACMessageDefinitionObjectV3 } from '@airgap/coinlib-core'
 import { Component } from '@angular/core'
-
 import { NavigationService } from '../../services/navigation/navigation.service'
-
+import { airgapwallet, CompanionApp } from '../account-address/account-address.page'
 import { ErrorCategory, handleErrorLocal } from './../../services/error-handler/error-handler.service'
 
 @Component({
@@ -13,12 +12,16 @@ import { ErrorCategory, handleErrorLocal } from './../../services/error-handler/
 })
 export class AccountSharePage {
   public interactionUrl: IACMessageDefinitionObjectV3[] = []
+  public companionApp: CompanionApp
+  public walletName: string
   public splits: string[] = []
 
   displayRawData: boolean = false
 
   constructor(private readonly navigationService: NavigationService, private readonly clipboardService: ClipboardService) {
     this.interactionUrl = this.navigationService.getState().interactionUrl
+    this.companionApp = this.navigationService.getState().companionApp ?? airgapwallet
+    this.walletName = this.companionApp.name
   }
 
   public done(): void {

src/app/pages/secret-import/secret-import.page.ts

@@ -36,7 +36,7 @@ export class SecretImportPage {
 
   private maxWords: number = 24
 
-  @ViewChild('secretContainer', {read: ElementRef})
+  @ViewChild('secretContainer', { read: ElementRef })
   public secretContainer: ElementRef<HTMLElement>
 
   constructor(
@@ -58,10 +58,6 @@ export class SecretImportPage {
     this.selectedWordIndex = index
     this.selectedWord = this.secretWords[this.selectedWordIndex]
 
-    if (this.selectedWordIndex === 0 && !this.selectedWord) {
-      this.selectedWordIndex = -1
-    }
-
     this.setWordEmitter.next(this.selectedWord ?? '')
   }
 
@@ -97,7 +93,7 @@ export class SecretImportPage {
     this.getLastWord()
 
     this.setWordEmitter.next(this.selectedWord ?? '')
-    
+
     if (this.secretContainer) {
       this.secretContainer.nativeElement.scrollTop = this.secretContainer.nativeElement.scrollHeight
     }