refactor(crypto): adjust and clean code

package.json

@@ -48,7 +48,7 @@
     "@coast-team/mnemonicjs": "^1.0.0",
     "bragi-browser": "0.0.12",
     "core-js": "^2.5.4",
-    "crypto-api-wrapper": "^0.2.2-beta-1",
+    "crypto-api-wrapper": "^0.4.1-beta",
     "hammerjs": "^2.0.8",
     "jio": "git+https://github.com/Nexedi/jio.git#81cb08d",
     "loglevel": "^1.6.1",

src/app/core/crypto/symmetric-crypto.service.ts

@@ -3,29 +3,22 @@ import { symmetricCrypto } from 'crypto-api-wrapper'
 
 @Injectable()
 export class SymmetricCryptoService {
-  private textDecoder: TextDecoder
   private key: CryptoKey
-  constructor() {
-    this.textDecoder = new TextDecoder('utf-8')
-  }
 
   async generateKey(): Promise<string> {
     this.key = await symmetricCrypto.generateEncryptionKey()
-    const keyData = await symmetricCrypto.exportKey(this.key)
-    return btoa(JSON.stringify(keyData))
+    return symmetricCrypto.toB64(await symmetricCrypto.exportKey(this.key))
   }
 
-  async importKey(keyData: string): Promise<void> {
-    this.key = await symmetricCrypto.importKey(JSON.parse(atob(keyData)))
+  async importKey(key: string): Promise<void> {
+    this.key = await symmetricCrypto.importKey(symmetricCrypto.fromB64(key))
   }
 
   async encrypt(msg: Uint8Array): Promise<Uint8Array> {
-    const ciphertext = await symmetricCrypto.encrypt(msg, this.key)
-    return ciphertext
+    return symmetricCrypto.encrypt(msg, this.key)
   }
 
   async decrypt(ciphertext: Uint8Array): Promise<Uint8Array> {
-    const plaintext = await symmetricCrypto.decrypt(ciphertext, this.key)
-    return plaintext
+    return symmetricCrypto.decrypt(ciphertext, this.key)
   }
 }

src/app/doc/doc-resolver.service.ts

@@ -23,7 +23,7 @@ export class DocResolverService implements Resolve<Doc>, CanDeactivate<DocCompon
   async resolve(route: ActivatedRouteSnapshot): Promise<Doc> {
     const key = route.params['key']
     const remote = route.paramMap.get('remote')
-    this.symCrypto.importKey(key)
+    await this.symCrypto.importKey(key)
 
     try {
       // Retreive the document from the local database

src/app/doc/doc.component.ts

@@ -2,7 +2,7 @@ import { Component, Injectable, NgZone, OnDestroy, OnInit, ViewChild } from '@an
 import { MediaChange, ObservableMedia } from '@angular/flex-layout'
 import { ActivatedRoute } from '@angular/router'
 import { MuteCore, State } from 'mute-core'
-import { merge, Subject, Subscription } from 'rxjs'
+import { merge, Subscription } from 'rxjs'
 import { filter, flatMap, map } from 'rxjs/operators'
 
 import { ICollaborator } from 'mute-core/dist/types/collaborators/ICollaborator'
@@ -83,11 +83,10 @@ export class DocComponent implements OnDestroy, OnInit {
           avatar: this.settings.profile.avatar,
         })
         this.muteCore.collaboratorsService.messageSource = this.network.onMessage
-        const newOnMessage = new Subject<any>()
-        this.muteCore.syncMessageService.messageSource = newOnMessage.asObservable()
-        this.network.onMessage.pipe(filter((msg) => msg.service === 423)).subscribe((msg) => {
-          this.symCrypto.decrypt(msg.content).then((content) => newOnMessage.next(Object.assign({}, msg, { content })))
-        })
+        this.muteCore.syncMessageService.messageSource = this.network.onMessage.pipe(
+          filter(({ service }) => service === 423),
+          flatMap((msg) => this.symCrypto.decrypt(msg.content).then((content) => Object.assign({}, msg, { content })))
+        )
 
         this.network.initSource = this.muteCore.onInit