Merge branch 'develop' into 'master'

Develop

See merge request papers/airgap/airgap-wallet!597

android/app/capacitor.build.gradle

@@ -20,6 +20,7 @@ dependencies {
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
+    implementation project(':robingenz-capacitor-android-dark-mode-support')
     implementation "androidx.legacy:legacy-support-v4:1.+"
     implementation "androidx.appcompat:appcompat:1.+"
 }

android/app/src/main/assets/capacitor.plugins.json

@@ -42,5 +42,9 @@
 	{
 		"pkg": "@capacitor/status-bar",
 		"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"
+	},
+	{
+		"pkg": "@robingenz/capacitor-android-dark-mode-support",
+		"classpath": "dev.robingenz.capacitor.androiddarkmodesupport.AndroidDarkModeSupportPlugin"
 	}
 ]

android/app/src/main/java/it/airgap/wallet/MainActivity.java

@@ -1,6 +1,8 @@
 package it.airgap.wallet;
 
+import android.content.res.Configuration;
 import android.os.Bundle;
+import android.webkit.WebSettings;
 
 import com.getcapacitor.BridgeActivity;
 import com.getcapacitor.Plugin;

android/capacitor.settings.gradle

@@ -34,3 +34,6 @@ project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capa
 
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
+
+include ':robingenz-capacitor-android-dark-mode-support'
+project(':robingenz-capacitor-android-dark-mode-support').projectDir = new File('../node_modules/@robingenz/capacitor-android-dark-mode-support/android')

ios/App/App/Info.plist

@@ -80,8 +80,6 @@
 		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
-	<key>UIUserInterfaceStyle</key>
-	<string>Light</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>
 </dict>

package.json

@@ -54,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@airgap/angular-core": "0.0.30",
-    "@airgap/angular-ngrx": "0.0.30",
+    "@airgap/angular-core": "0.0.31",
+    "@airgap/angular-ngrx": "0.0.31",
     "@airgap/beacon-sdk": "3.1.1",
-    "@airgap/coinlib-core": "0.13.4",
+    "@airgap/coinlib-core": "0.13.5",
     "@airgap/sapling-wasm": "0.0.7",
     "@angular/animations": "^11.2.9",
     "@angular/common": "^11.2.9",
@@ -104,6 +104,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@obsidiansystems/hw-app-xtz": "^4.72.3",
+    "@robingenz/capacitor-android-dark-mode-support": "^1.0.1",
     "@sentry/browser": "6.2.5",
     "@taquito/taquito": "^10.0.0",
     "@types/ledgerhq__hw-transport": "^4.21.2",
@@ -208,4 +209,4 @@
       "last 1 firefox version"
     ]
   }
-}
+}

src/app/app.component.ts

@@ -8,8 +8,7 @@ import {
   LanguageService,
   ProtocolService,
   SerializerService,
-  SPLASH_SCREEN_PLUGIN,
-  STATUS_BAR_PLUGIN
+  SPLASH_SCREEN_PLUGIN
 } from '@airgap/angular-core'
 import {
   AirGapMarketWallet,
@@ -45,12 +44,12 @@ import { AfterViewInit, Component, Inject, NgZone } from '@angular/core'
 import { Router } from '@angular/router'
 import { AppPlugin, URLOpenListenerEvent } from '@capacitor/app'
 import { SplashScreenPlugin } from '@capacitor/splash-screen'
-import { StatusBarPlugin, Style } from '@capacitor/status-bar'
 import { Config, Platform } from '@ionic/angular'
 import { TranslateService } from '@ngx-translate/core'
 import { Subscription } from 'rxjs'
 
 import { AccountProvider } from './services/account/account.provider'
+import { ThemeService } from './services/appearance/theme.service'
 import { DataService, DataServiceKey } from './services/data/data.service'
 import { IACService } from './services/iac/iac.service'
 import { PushProvider } from './services/push/push'
@@ -86,10 +85,10 @@ export class AppComponent implements AfterViewInit {
     private readonly config: Config,
     private readonly ngZone: NgZone,
     private readonly saplingNativeService: SaplingNativeService,
+    private readonly themeService: ThemeService,
     @Inject(APP_PLUGIN) private readonly app: AppPlugin,
     @Inject(APP_INFO_PLUGIN) private readonly appInfo: AppInfoPlugin,
-    @Inject(SPLASH_SCREEN_PLUGIN) private readonly splashScreen: SplashScreenPlugin,
-    @Inject(STATUS_BAR_PLUGIN) private readonly statusBar: StatusBarPlugin
+    @Inject(SPLASH_SCREEN_PLUGIN) private readonly splashScreen: SplashScreenPlugin
   ) {
     this.initializeApp().catch(handleErrorSentry(ErrorCategory.OTHER))
     this.isMobile = this.platform.is('android') || this.platform.is('ios')
@@ -99,14 +98,12 @@ export class AppComponent implements AfterViewInit {
   public async initializeApp(): Promise<void> {
     await Promise.all([this.initializeTranslations(), this.platform.ready(), this.initializeProtocols(), this.initializeWalletConnect()])
 
-    if (this.platform.is('hybrid')) {
-      await Promise.all([
-        this.statusBar.setStyle({ style: Style.Light }),
-        this.statusBar.setBackgroundColor({ color: '#FFFFFF' }),
-        this.splashScreen.hide(),
+    this.themeService.register()
+
+    this.themeService.statusBarStyleDark(await this.themeService.isDarkMode())
 
-        this.pushProvider.initPush()
-      ])
+    if (this.platform.is('hybrid')) {
+      await Promise.all([this.splashScreen.hide(), this.pushProvider.initPush()])
 
       this.appInfo
         .get()
@@ -195,7 +192,7 @@ export class AppComponent implements AfterViewInit {
 
   private async initializeTranslations(): Promise<void> {
     return this.languageService.init({
-      supportedLanguages: ['en', 'de', 'zh-cn'],
+      supportedLanguages: ['en', 'de', 'zh'],
       defaultLanguage: 'en'
     })
   }
@@ -238,14 +235,17 @@ export class AppComponent implements AfterViewInit {
 
     const shieldedTezProtocol = new TezosShieldedTezProtocol(
       new TezosSaplingProtocolOptions(
-        undefined, 
+        undefined,
         new TezosShieldedTezProtocolConfig(undefined, undefined, undefined, externalMethodProvider)
       )
     )
 
     this.protocolService.init({
       extraActiveProtocols: [ithacanetProtocol, shieldedTezProtocol, jakartanetProtocol],
-      extraPassiveSubProtocols: [[jakartanetProtocol, new TezosKtProtocol(new TezosProtocolOptions(jakartanetNetwork))], [ithacanetProtocol, new TezosKtProtocol(new TezosProtocolOptions(ithacanetNetwork))]]
+      extraPassiveSubProtocols: [
+        [jakartanetProtocol, new TezosKtProtocol(new TezosProtocolOptions(jakartanetNetwork))],
+        [ithacanetProtocol, new TezosKtProtocol(new TezosProtocolOptions(ithacanetNetwork))]
+      ]
     })
 
     await Promise.all([this.getGenericSubProtocols(), this.initializeTezosDomains()])
@@ -255,11 +255,11 @@ export class AppComponent implements AfterViewInit {
     const genericSubProtocols = await this.storageProvider.get(WalletStorageKey.GENERIC_SUBPROTOCOLS)
     const identifiersWithOptions = Object.entries(genericSubProtocols)
     const supportedTestNetworkIdentifiers = (await this.protocolService.getNetworksForProtocol(MainProtocolSymbols.XTZ))
-      .filter(network => network.type == NetworkType.TESTNET)
-      .map(network => network.identifier)
+      .filter((network) => network.type == NetworkType.TESTNET)
+      .map((network) => network.identifier)
     const protocols = identifiersWithOptions
       .map(([protocolNetworkIdentifier, options]) => {
-        const [protocolIdentifier,] = protocolNetworkIdentifier.split(':')
+        const [protocolIdentifier] = protocolNetworkIdentifier.split(':')
 
         if (protocolIdentifier.startsWith(MainProtocolSymbols.XTZ)) {
           const tezosOptions = options as TezosProtocolOptions
@@ -275,7 +275,10 @@ export class AppComponent implements AfterViewInit {
               tezosOptions.network.extras.conseilApiKey
             )
           )
-          if (tezosProtocolNetwork.type === NetworkType.TESTNET && !supportedTestNetworkIdentifiers.includes(tezosProtocolNetwork.identifier)) {
+          if (
+            tezosProtocolNetwork.type === NetworkType.TESTNET &&
+            !supportedTestNetworkIdentifiers.includes(tezosProtocolNetwork.identifier)
+          ) {
             delete genericSubProtocols[protocolNetworkIdentifier]
             return undefined
           }
@@ -332,7 +335,7 @@ export class AppComponent implements AfterViewInit {
     const tezosDomainsAddresses: Record<TezosNetwork, string | undefined> = {
       [TezosNetwork.MAINNET]: 'KT1GBZmSxmnKJXGMdMLbugPfLyUPmuLSMwKS',
       [TezosNetwork.ITHACANET]: undefined,
-      [TezosNetwork.JAKARTANET]: undefined,
+      [TezosNetwork.JAKARTANET]: undefined
     }
 
     const tezosNetworks: TezosProtocolNetwork[] = (await this.protocolService.getNetworksForProtocol(

src/app/app.module.ts

@@ -62,6 +62,7 @@ import { ProtocolSelectPageModule } from './pages/protocol-select/protocol-selec
 import { PipesModule } from './pipes/pipes.module'
 import { ShortenStringPipe } from './pipes/shorten-string/shorten-string.pipe'
 import { AccountProvider } from './services/account/account.provider'
+import { ThemeService } from './services/appearance/theme.service'
 import { CoinlibService } from './services/coinlib/coinlib.service'
 import { DrawChartService } from './services/draw-chart/draw-chart.service'
 import { ExchangeProvider } from './services/exchange/exchange'
@@ -172,8 +173,9 @@ export function createTranslateLoader(http: HttpClient): AirGapTranslateLoader {
     TransactionHashGuard,
     PercentPipe,
     FeeConverterPipe,
-    InteractionService
-  ],
+    InteractionService,
+    ThemeService
+   ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/pages/account-transaction-list/account-transaction-list.html

@@ -11,7 +11,7 @@
         </ion-button>
       </ion-buttons>
     </ion-toolbar>
-    <ion-row style="display: block"><portfolio-item [wallet]="wallet" [maxDigits]="0"></portfolio-item></ion-row>
+    <ion-row style="display: block;"><portfolio-item [wallet]="wallet" [maxDigits]="0"></portfolio-item></ion-row>
     <ion-row class="ion-padding-top ion-padding-horizontal action--container">
       <ion-button *ngFor="let action of actions" color="secondary" (click)="action.start()" shape="round" size="small" fill="outline">
         <ion-icon slot="start" [name]="action.context.icon"></ion-icon>
@@ -22,7 +22,7 @@
 </ion-header>
 
 <ion-content no-bounce has-bouncing="false" forceOverscroll="false">
-  <ion-grid fixed="true" class="ion-no-padding">
+  <ion-grid fixed="true" class="ion-no-padding action--container">
     <tezos-delegation-card
       *ngIf="wallet.protocol.identifier === mainProtocolSymbols.XTZ && balance"
       [wallet]="wallet"
@@ -99,7 +99,9 @@
       [wallet]="wallet"
     ></transaction-list>
     <ng-container *ngIf="isDesktop && infiniteEnabled && !infiniteScrollActivated">
-      <ion-button fill="clear" size="small" (click)="loadMoreTransactions()">{{ 'account-transaction-list.load_more' | translate }}</ion-button>
+      <ion-button fill="clear" size="small" (click)="loadMoreTransactions()">
+        {{ 'account-transaction-list.load_more' | translate }}
+      </ion-button>
     </ng-container>
 
     <ion-infinite-scroll (ionInfinite)="doInfinite($event)">

src/app/pages/account-transaction-list/account-transaction-list.scss

@@ -27,6 +27,3 @@ ion-fab {
 svg {
   stroke: none;
 }
-.action--container {
-  background: #fff;
-}

src/app/pages/beacon-request/beacon-request.page.html

@@ -22,7 +22,7 @@
               <p>{{ 'beacon-request.request-by-dapp_label' | translate }}</p>
               <h3>{{requesterName}}</h3>
             </ion-label>
-            <img src="assets/img/beacon_logo.svg" slot="end" class="by-beacon__img" />
+            <ion-icon src="assets/img/beacon_logo.svg" slot="end"></ion-icon>
           </ion-item>
         </ion-card>
       </ng-container>

src/app/pages/beacon-request/beacon-request.page.scss

@@ -1,3 +0,0 @@
-.by-beacon__img {
-  width: 32px;
-}

src/app/pages/delegation-detail/delegation-detail.scss

@@ -29,7 +29,3 @@ ion-segment {
     min-width: fit-content;
   }
 }
-
-.action--container {
-  background: #fff;
-}

src/app/pages/scan/scan.ts

@@ -36,6 +36,8 @@ export class ScanPage extends ScanBasePage {
   }
 
   public async ionViewWillEnter(): Promise<void> {
+    // We need this for the background to be transparent when using dark mode
+    document.body.style.backgroundColor = 'transparent'
     await super.ionViewWillEnter()
     this.resetScannerPage()
     this.iacService.resetHandlers()

src/app/pages/settings/settings.html

@@ -11,6 +11,22 @@
 
 <ion-content>
   <ion-grid fixed="true" class="ion-no-padding">
+    <ion-list lines="none">
+      <ion-list-header class="ion-no-margin" lines="none">
+        <ion-label>{{ 'settings.appearance_label' | translate }}</ion-label>
+      </ion-list-header>
+      <ion-item>
+        <ion-icon name="build-outline" slot="start"></ion-icon>
+        {{ 'settings.theme_label' | translate }}
+        <ion-select [attr.value]="this.getTheme | async" (ionChange)="onThemeSelection($event)" interface="action-sheet" slot="end">
+          <ion-select-option *ngIf="this.themeService.supportsSystemPref" value="system">
+            {{ 'settings.select-theme.system' | translate }}
+          </ion-select-option>
+          <ion-select-option value="light">{{ 'settings.select-theme.light' | translate }}</ion-select-option>
+          <ion-select-option value="dark">{{ 'settings.select-theme.dark' | translate }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-list>
     <ion-list lines="none">
       <ion-list-header class="ion-no-margin" lines="none">
         <ion-label>{{ 'settings.help_label' | translate }}</ion-label>
@@ -55,11 +71,11 @@
         <ion-label>{{ 'settings.dapp.label' | translate }}</ion-label>
       </ion-list-header>
       <ion-item (click)="dappPermissions()" detail="true">
-        <ion-icon src="assets/img/beacon_logo_black.svg" slot="start"></ion-icon>
+        <ion-icon src="assets/img/beacon_logo.svg" slot="start"></ion-icon>
         {{ 'settings.dapp.permission-list_label' | translate }}
       </ion-item>
       <ion-item (click)="dappSettings()" detail="true">
-        <ion-icon src="assets/img/beacon_logo_black.svg" slot="start"></ion-icon>
+        <ion-icon src="assets/img/beacon_logo.svg" slot="start"></ion-icon>
         {{ 'settings.dapp.settings_label' | translate }}
       </ion-item>
       <ion-item (click)="aboutBeacon()" detail="true">

src/app/pages/settings/settings.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router'
 import { Capacitor } from '@capacitor/core'
 import { SharePlugin } from '@capacitor/share'
 import { AlertController, ModalController } from '@ionic/angular'
+import { ThemeService } from 'src/app/services/appearance/theme.service'
 import { SHARE_PLUGIN } from 'src/app/capacitor-plugins/injection-tokens'
 import { BrowserService } from 'src/app/services/browser/browser.service'
 import { IACService } from 'src/app/services/iac/iac.service'
@@ -17,10 +18,12 @@ import { IntroductionPage } from '../introduction/introduction'
 })
 export class SettingsPage {
   public readonly platform: string = Capacitor.getPlatform()
+  public readonly getTheme = this.themeService.getTheme()
 
   constructor(
     public readonly alertCtrl: AlertController,
     public readonly serializerService: SerializerService,
+    public readonly themeService: ThemeService,
     private readonly router: Router,
     private readonly modalController: ModalController,
     private readonly clipboardProvider: ClipboardService,
@@ -29,6 +32,12 @@ export class SettingsPage {
     @Inject(SHARE_PLUGIN) private readonly sharePlugin: SharePlugin
   ) {}
 
+  public async onThemeSelection(event) {
+    this.themeService.themeSubject.next(event.detail.value)
+
+    await this.themeService.setStorageItem(event.detail.value)
+  }
+
   public about(): void {
     this.navigate('/about')
   }

src/app/pages/transaction-prepare/transaction-prepare.html

@@ -33,8 +33,19 @@
     <form [formGroup]="transactionForm" class="ion-padding-bottom">
       <ion-card>
         <ion-item class="ion-no-padding ion-margin-bottom" lines="none" *ngIf="state.collectible">
-          <img class="collectible--img" *ngIf="state.collectible.thumbnails.length > 0" [src]="state.collectible.thumbnails[0]" (error)="onCollectibleThumbnailError()" slot="start" />
-          <img class="collectible--img" *ngIf="state.collectible.thumbnails.length === 0" src="./assets/img/collectible-placeholder.png" slot="start" />
+          <img
+            class="collectible--img"
+            *ngIf="state.collectible.thumbnails.length > 0"
+            [src]="state.collectible.thumbnails[0]"
+            (error)="onCollectibleThumbnailError()"
+            slot="start"
+          />
+          <img
+            class="collectible--img"
+            *ngIf="state.collectible.thumbnails.length === 0"
+            src="./assets/img/collectible-placeholder.png"
+            slot="start"
+          />
           <h6>{{ state.collectible.name }}</h6>
         </ion-item>
         <ion-row class="ion-justify-content-between">
@@ -71,7 +82,7 @@ <h6>{{ state.collectible.name }}</h6>
             </ion-item>
           </ion-col>
           <ion-col size="3" class="ion-no-padding d-flex ion-align-items-center">
-            <ion-toolbar>
+            <ion-toolbar color="transparent">
               <ion-buttons slot="end">
                 <ion-button
                   shape="round"