@coinflowlabs/angular 0.0.3 → 0.0.4

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/coinflowlabs",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,11 @@
 {
   "name": "@coinflowlabs/angular",
-  "version": "0.0.3",
+  "version": "0.0.4",
+  "scripts": {
+    "clean": "rimraf ../../dist && rimraf ./src/lib/common",
+    "build": "npm run codegen && ng build coinflowlabs",
+    "codegen": "cp -r ../../../lib-common/src/ ./src/lib/common/"
+  },
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0",
@@ -9,7 +14,7 @@
     "bs58": "~5.0.0"
   },
   "dependencies": {
-    "tslib": "^2.3.0"
+    "tslib": "^2.6.2"
   },
   "peerDependenciesMeta": {
     "@coinflowlabs/lib-common": {
@@ -22,18 +27,5 @@
       "optional": true
     }
   },
-  "sideEffects": false,
-  "module": "fesm2022/coinflowlabs-angular.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/coinflowlabs-angular.mjs",
-      "esm": "./esm2022/coinflowlabs-angular.mjs",
-      "default": "./fesm2022/coinflowlabs-angular.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/coinflow-iframe.component.ts

@@ -0,0 +1,63 @@
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import {
+  CoinflowIFrameProps,
+  CoinflowUtils,
+  IFrameMessageHandlers,
+  handleIFrameMessage,
+} from './common';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+
+@Component({
+  selector: 'lib-coinflow-iframe',
+  standalone: true,
+  imports: [],
+  template: ` <iframe
+    width="100%"
+    height="100%"
+    #iframe
+    scrolling="{{ iframeProps?.handleHeightChange ? 'no' : 'yes' }}"
+    allow="payment;camera"
+    title="withdraw"
+    frameBorder="0"
+    [src]="dynamicUrl"
+  ></iframe>`,
+})
+export class CoinflowIFrameComponent {
+  @Input() iframeProps!: CoinflowIFrameProps;
+  @Input() messageHandlers!: IFrameMessageHandlers;
+
+  dynamicUrl?: SafeResourceUrl;
+  @ViewChild('iframe') iframe?: ElementRef<HTMLIFrameElement>;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnInit() {
+    const coinflowUrl = CoinflowUtils.getCoinflowUrl(this.iframeProps);
+    this.dynamicUrl =
+      this.sanitizer.bypassSecurityTrustResourceUrl(coinflowUrl);
+  }
+
+  @HostListener('window:message', ['$event']) onPostMessage(event: any) {
+    if (
+      !event.origin.includes(
+        CoinflowUtils.getCoinflowBaseUrl(this.iframeProps.env)
+      )
+    )
+      return;
+
+    const promise = handleIFrameMessage(event.data, this.messageHandlers);
+    if (!promise) return;
+    promise.then(this.sendMessage.bind(this));
+  }
+
+  sendMessage(message: string) {
+    if (!this.iframe || !this.iframe.nativeElement) return;
+    this.iframe.nativeElement.contentWindow!.postMessage(message, '*');
+  }
+}

package/src/lib/coinflow-purchase-history.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'lib-coinflow-purchase-history',
+  standalone: true,
+  imports: [],
+  template: ' <p>coinflow-purchase-history works!</p> ',
+})
+export class CoinflowPurchaseHistoryComponent {}

package/src/lib/coinflow-purchase-protection.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'lib-coinflow-purchase-protection',
+  standalone: true,
+  imports: [],
+  template: ' <p>coinflow-purchase-protection works!</p> ',
+})
+export class CoinflowPurchaseProtectionComponent {}

package/src/lib/coinflow-purchase.component.ts

@@ -0,0 +1,37 @@
+import {Component, Input} from '@angular/core';
+import {CoinflowIFrameComponent} from './coinflow-iframe.component';
+import {
+  CoinflowIFrameProps,
+  CoinflowPurchaseProps,
+  IFrameMessageHandlers,
+  getHandlers,
+  getWalletPubkey,
+  CoinflowUtils,
+} from './common';
+
+@Component({
+  selector: 'lib-coinflow-purchase',
+  standalone: true,
+  imports: [CoinflowIFrameComponent],
+  template:
+    ' <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ',
+})
+export class CoinflowPurchaseComponent {
+  @Input() purchaseProps!: CoinflowPurchaseProps;
+  iframeProps?: CoinflowIFrameProps;
+  messageHandlers?: IFrameMessageHandlers;
+
+  ngOnInit() {
+    const walletPubkey = getWalletPubkey(this.purchaseProps);
+    this.messageHandlers = getHandlers(this.purchaseProps);
+    this.messageHandlers.handleHeightChange =
+      this.purchaseProps.handleHeightChange;
+
+    this.iframeProps = {
+      ...this.purchaseProps,
+      walletPubkey,
+      route: `/purchase/${this.purchaseProps?.merchantId}`,
+      transaction: CoinflowUtils.getTransaction(this.purchaseProps),
+    };
+  }
+}

package/src/lib/coinflow-withdraw-history.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'lib-coinflow-withdraw-history',
+  standalone: true,
+  imports: [],
+  template: ' <p>coinflow-withdraw-history works!</p> ',
+})
+export class CoinflowWithdrawHistoryComponent {}

package/src/lib/coinflow-withdraw.component.ts

@@ -0,0 +1,36 @@
+import {Component, Input} from '@angular/core';
+import {
+  CoinflowIFrameProps,
+  CoinflowWithdrawProps,
+  IFrameMessageHandlers,
+  getHandlers,
+  getWalletPubkey,
+} from './common';
+import {CoinflowIFrameComponent} from './coinflow-iframe.component';
+
+@Component({
+  selector: 'lib-coinflow-withdraw',
+  standalone: true,
+  imports: [CoinflowIFrameComponent],
+  template:
+    '  <lib-coinflow-iframe ng-if="iframeProps && messageHandlers" [iframeProps]="iframeProps!" [messageHandlers]="messageHandlers!"></lib-coinflow-iframe> ',
+})
+export class CoinflowWithdrawComponent {
+  @Input() withdrawProps!: CoinflowWithdrawProps;
+  iframeProps?: CoinflowIFrameProps;
+  messageHandlers?: IFrameMessageHandlers;
+
+  ngOnInit() {
+    const walletPubkey = getWalletPubkey(this.withdrawProps);
+    this.messageHandlers = getHandlers(this.withdrawProps);
+    this.messageHandlers.handleHeightChange =
+      this.withdrawProps.handleHeightChange;
+
+    this.iframeProps = {
+      ...this.withdrawProps,
+      walletPubkey,
+      route: `/withdraw/${this.withdrawProps?.merchantId}`,
+      transaction: undefined,
+    };
+  }
+}

package/src/lib/common/CoinflowLibMessageHandlers.ts

@@ -0,0 +1,188 @@
+import {
+  CoinflowPurchaseProps,
+  EthWallet,
+  NearWallet,
+  SolanaWallet,
+} from './CoinflowTypes';
+import {CoinflowUtils} from './CoinflowUtils';
+import {Transaction, VersionedTransaction} from '@solana/web3.js';
+import * as web3 from '@solana/web3.js';
+import base58 from 'bs58';
+
+export type WalletCall = {method: IFrameMessageMethods; data: string};
+
+export interface IFrameMessageHandlers {
+  handleSendTransaction: (transaction: string) => Promise<string>;
+  handleSignMessage?: (message: string) => Promise<string>;
+  handleSignTransaction?: (transaction: string) => Promise<string>;
+  handleHeightChange?: (height: string) => void;
+}
+
+enum IFrameMessageMethods {
+  SignMessage = 'signMessage',
+  SignTransaction = 'signTransaction',
+  SendTransaction = 'sendTransaction',
+  HeightChange = 'heightChange',
+}
+
+export function getWalletPubkey({
+  wallet,
+}: Pick<CoinflowPurchaseProps, 'wallet'>): string | null | undefined {
+  if ('publicKey' in wallet) {
+    return wallet.publicKey!.toString();
+  }
+
+  if ('address' in wallet) {
+    return wallet.address;
+  }
+
+  if ('accountId' in wallet) {
+    return wallet.accountId;
+  }
+
+  return null;
+}
+
+export function handleIFrameMessage(
+  rawMessage: string,
+  handlers: IFrameMessageHandlers
+): Promise<string> | void {
+  let walletCall: WalletCall;
+  try {
+    walletCall = JSON.parse(rawMessage);
+    if (!('method' in walletCall) || !('data' in walletCall)) return;
+  } catch (e) {
+    console.error('handleIFrameMessage JSON parse', e);
+    return;
+  }
+
+  const {data, method} = walletCall;
+  switch (method) {
+    case IFrameMessageMethods.SignMessage:
+      if (!handlers.handleSignMessage) return;
+      return handlers.handleSignMessage(data);
+    case IFrameMessageMethods.SignTransaction:
+      if (!handlers.handleSignTransaction) return;
+      return handlers.handleSignTransaction(data);
+    case IFrameMessageMethods.SendTransaction:
+      return handlers.handleSendTransaction(data);
+    case IFrameMessageMethods.HeightChange:
+      if (!handlers.handleHeightChange) return;
+      return handlers.handleHeightChange(data);
+  }
+
+  console.warn(
+    `Didn't expect to get here, handleIFrameMessage method:${method} is not one of ${Object.values(IFrameMessageMethods)}`
+  );
+}
+
+export function getHandlers({
+  wallet,
+  blockchain,
+}: Pick<CoinflowPurchaseProps, 'wallet' | 'blockchain'>): Omit<
+  IFrameMessageHandlers,
+  'handleHeightChange'
+> {
+  return CoinflowUtils.byBlockchain(blockchain, {
+    solana: () => getSolanaWalletHandlers({wallet}),
+    near: () => getNearWalletHandlers({wallet}),
+    eth: () => getEvmWalletHandlers({wallet}),
+    polygon: () => getEvmWalletHandlers({wallet}),
+    base: () => getEvmWalletHandlers({wallet}),
+  })();
+}
+
+function getSolanaWalletHandlers({
+  wallet,
+}: Pick<CoinflowPurchaseProps, 'wallet'>): Omit<
+  IFrameMessageHandlers,
+  'handleHeightChange'
+> {
+  return {
+    handleSendTransaction: async (transaction: string) => {
+      const tx = getSolanaTransaction(transaction);
+      return (wallet as SolanaWallet).sendTransaction(tx);
+    },
+    handleSignMessage: async (message: string) => {
+      const signMessage = (wallet as SolanaWallet).signMessage;
+      if (!signMessage) {
+        throw new Error('signMessage is not supported by this wallet');
+      }
+
+      const signedMessage = await signMessage(
+        new TextEncoder().encode(message)
+      );
+      return base58.encode(signedMessage);
+    },
+    handleSignTransaction: async (transaction: string) => {
+      const signTransaction = (wallet as SolanaWallet).signTransaction;
+      if (!signTransaction) {
+        throw new Error('signTransaction is not supported by this wallet');
+      }
+      const tx = getSolanaTransaction(transaction);
+      const signedTransaction = await signTransaction(tx);
+      return base58.encode(
+        signedTransaction.serialize({
+          requireAllSignatures: false,
+          verifySignatures: false,
+        })
+      );
+    },
+  };
+}
+
+function getSolanaTransaction(
+  data: string
+): Transaction | VersionedTransaction {
+  if (!web3)
+    throw new Error(
+      '@solana/web3.js is not defined. Please install @solana/web3.js into your project'
+    );
+
+  if (!base58)
+    throw new Error(
+      'bs58 is not defined. Please install bs58 into your project'
+    );
+
+  const parsedUInt8Array = base58.decode(data);
+  const vtx = web3.VersionedTransaction.deserialize(parsedUInt8Array);
+  if (vtx.version === 'legacy') return web3.Transaction.from(parsedUInt8Array);
+  return vtx;
+}
+
+function getNearWalletHandlers({
+  wallet,
+}: Pick<CoinflowPurchaseProps, 'wallet'>): Omit<
+  IFrameMessageHandlers,
+  'handleHeightChange'
+> {
+  const nearWallet = wallet as NearWallet;
+  return {
+    handleSendTransaction: async (transaction: string) => {
+      const action = JSON.parse(Buffer.from(transaction, 'base64').toString());
+      const executionOutcome = await nearWallet.signAndSendTransaction(action);
+      if (!executionOutcome) throw new Error('Transaction did not send');
+      const {transaction: transactionResult} = executionOutcome;
+      return transactionResult.hash;
+    },
+  };
+}
+
+function getEvmWalletHandlers({
+  wallet,
+}: Pick<CoinflowPurchaseProps, 'wallet'>): Omit<
+  IFrameMessageHandlers,
+  'handleHeightChange'
+> {
+  const evmWallet = wallet as EthWallet;
+  return {
+    handleSendTransaction: async (transaction: string) => {
+      const tx = JSON.parse(Buffer.from(transaction, 'base64').toString());
+      const {hash} = await evmWallet.sendTransaction(tx);
+      return hash;
+    },
+    handleSignMessage: async (message: string) => {
+      return evmWallet.signMessage(message);
+    },
+  };
+}