proof of concept copy clipboard data from ionic to iframe

numbersprotocol · Aug 7, 2023 · 4823a4d · 4823a4d
1 parent 5cdb5f0
commit 4823a4d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/src/app/features/wallets/wallets.page.html b/src/app/features/wallets/wallets.page.html
@@ -10,6 +10,7 @@
 
 <ng-template #bubbleIframe>
   <iframe
+    #walletIframe
     [src]="iframeUrl$ | async | safeResourceUrl"
     class="bubble-iframe"
   ></iframe>

diff --git a/src/app/features/wallets/wallets.page.ts b/src/app/features/wallets/wallets.page.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { Clipboard } from '@capacitor/clipboard';
@@ -7,12 +7,16 @@ import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { NgxQrcodeElementTypes } from '@techiediaries/ngx-qrcode';
 import { BehaviorSubject, fromEvent } from 'rxjs';
-import { concatMap, first, map, tap } from 'rxjs/operators';
+import { concatMap, filter, first, map, tap } from 'rxjs/operators';
 import { CaptureAppWebCryptoApiSignatureProvider } from '../../shared/collector/signature/capture-app-web-crypto-api-signature-provider/capture-app-web-crypto-api-signature-provider.service';
 import { DiaBackendAuthService } from '../../shared/dia-backend/auth/dia-backend-auth.service';
 import { BUBBLE_IFRAME_URL } from '../../shared/dia-backend/secret';
 import { DiaBackendWalletService } from '../../shared/dia-backend/wallet/dia-backend-wallet.service';
-import { BubbleToIonicPostMessage } from '../../shared/iframe/iframe';
+import {
+  BubbleToIonicPostMessage,
+  IonicIframePostMessage,
+  IonicToBubblePostMessage,
+} from '../../shared/iframe/iframe';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'app-wallets',
@@ -28,6 +32,7 @@ export class WalletsPage {
 
   readonly iframeUrl$ = this.diaBackendAuthService.cachedQueryJWTToken$.pipe(
     map(token => {
+      return 'https://captureappiframe.numbersprotocol.io/version-87gw/experiment_paste';
       const queryParams = `token=${token.access}&refresh_token=${token.refresh}`;
       const url = `${BUBBLE_IFRAME_URL}/wallet?${queryParams}`;
       return url;
@@ -38,6 +43,8 @@ export class WalletsPage {
   elementType = NgxQrcodeElementTypes.URL;
   shouldHideDepositButton = false;
 
+  @ViewChild('walletIframe') walletIframe?: ElementRef<HTMLIFrameElement>;
+
   constructor(
     private readonly diaBackendWalletService: DiaBackendWalletService,
     private readonly diaBackendAuthService: DiaBackendAuthService,
@@ -53,6 +60,7 @@ export class WalletsPage {
   private processIframeEvents() {
     fromEvent(window, 'message')
       .pipe(
+        filter(event => (event as MessageEvent).origin === BUBBLE_IFRAME_URL),
         tap(event => {
           const postMessageEvent = event as MessageEvent;
           const data = postMessageEvent.data as BubbleToIonicPostMessage;
@@ -75,6 +83,9 @@ export class WalletsPage {
             case BubbleToIonicPostMessage.IFRAME_COPY_TO_CLIPBOARD_PRIVATE_KEY:
               this.copyToClipboardPrivateKey();
               break;
+            case BubbleToIonicPostMessage.REQUEST_CLIPBOARD_DATA_FROM_IONIC:
+              this.sendClipboarDataToIonic();
+              break;
             default:
               break;
           }
@@ -114,6 +125,18 @@ export class WalletsPage {
       .subscribe();
   }
 
+  private async sendClipboarDataToIonic() {
+    const clipboardData = await Clipboard.read();
+    const iframePostMessage: IonicIframePostMessage = {
+      type: IonicToBubblePostMessage.CLIPBOARD_DATA_FROM_IONIC,
+      payload: clipboardData.type === 'text/plain' ? clipboardData.value : '',
+    };
+    this.walletIframe?.nativeElement.contentWindow?.postMessage(
+      iframePostMessage,
+      BUBBLE_IFRAME_URL
+    );
+  }
+
   navigateToBuyNumPage() {
     this.router.navigate(['wallets', 'buy-num']);
   }

diff --git a/src/app/shared/iframe/iframe.ts b/src/app/shared/iframe/iframe.ts
@@ -7,8 +7,15 @@ export enum BubbleToIonicPostMessage {
   IFRAME_COPY_TO_CLIPBOARD_ASSET_WALLET = 'iframe-copy-to-clipboard-asset-wallet',
   IFRAME_COPY_TO_CLIPBOARD_INTEGRITY_WALLET = 'iframe-copy-to-clipboard-integrity-wallet',
   IFRAME_COPY_TO_CLIPBOARD_PRIVATE_KEY = 'iframe-copy-to-clipboard-private-key',
+  REQUEST_CLIPBOARD_DATA_FROM_IONIC = 'request-clipboard-data-from-ionic',
 }
 
 export enum IonicToBubblePostMessage {
   ANDROID_BACK_BUTTON = 'android-back-button',
+  CLIPBOARD_DATA_FROM_IONIC = 'clipboard-data-from-ionic',
+}
+
+export interface IonicIframePostMessage {
+  type: BubbleToIonicPostMessage | IonicToBubblePostMessage;
+  payload: any;
 }