@coinflowlabs/angular 0.0.1

package/README.md

@@ -0,0 +1,24 @@
+# Coinflowlabs
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project coinflowlabs` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project coinflowlabs`.
+> Note: Don't forget to add `--project coinflowlabs` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build coinflowlabs` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build coinflowlabs`, go to the dist folder `cd dist/coinflowlabs` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test coinflowlabs` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

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

@@ -0,0 +1,28 @@
+{
+  "name": "@coinflowlabs/angular",
+  "version": "0.0.1",
+  "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",
+    "@coinflowlabs/lib-common": "*",
+    "@solana/web3.js": ">=1.54.0",
+    "bs58": "~5.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@solana/web3.js": {
+      "optional": true
+    },
+    "bs58": {
+      "optional": true
+    }
+  },
+  "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);
+    },
+  };
+}

package/src/lib/common/CoinflowTypes.ts

@@ -0,0 +1,398 @@
+import type {Connection, VersionedTransaction} from '@solana/web3.js';
+import {PublicKey, Signer, Transaction} from '@solana/web3.js';
+
+export enum SettlementType {
+  Credits = 'Credits',
+  USDC = 'USDC',
+  Bank = 'Bank',
+}
+
+export enum MerchantStyle {
+  Rounded = 'rounded',
+  Sharp = 'sharp',
+  Pill = 'pill',
+}
+
+export type MerchantTheme = {
+  primary?: string;
+  background?: string;
+  backgroundAccent?: string;
+  backgroundAccent2?: string;
+  textColor?: string;
+  textColorAccent?: string;
+  textColorAction?: string;
+  font?: string;
+  style?: MerchantStyle;
+};
+
+export interface CustomerInfo {
+  name?: string;
+  verificationId?: string;
+  displayName?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zip?: string;
+  country?: string;
+  ip?: string;
+  lat?: string;
+  lng?: string;
+}
+
+/** Coinflow Types **/
+export type CoinflowBlockchain = 'solana' | 'near' | 'eth' | 'polygon' | 'base';
+export type CoinflowEnvs = 'prod' | 'staging' | 'sandbox' | 'local';
+
+export interface CoinflowTypes {
+  merchantId: string;
+  env?: CoinflowEnvs;
+  loaderBackground?: string;
+  blockchain: CoinflowBlockchain;
+  handleHeightChange?: (height: string) => void;
+  theme?: MerchantTheme;
+}
+
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+export type OnSuccessMethod = (params: string) => void | Promise<void>;
+
+/** Wallets **/
+export interface SolanaWallet {
+  publicKey: PublicKey | null;
+  signTransaction?: <T extends Transaction | VersionedTransaction>(
+    transaction: T
+  ) => Promise<T>;
+  sendTransaction: <T extends Transaction | VersionedTransaction>(
+    transaction: T
+  ) => Promise<string>;
+  signMessage?: (message: Uint8Array) => Promise<Uint8Array>;
+}
+
+export interface NearWallet {
+  accountId: string;
+  signAndSendTransaction: (transaction: unknown) => Promise<{
+    transaction: {hash: string};
+  }>;
+}
+
+type AccessList = Array<{address: string; storageKeys: Array<string>}>;
+type AccessListish =
+  | AccessList
+  | Array<[string, Array<string>]>
+  | Record<string, Array<string>>;
+
+export type EthWallet = {
+  address: string | null | undefined;
+  sendTransaction: (transaction: {
+    to: string;
+    from?: string;
+    nonce?: Bytes | bigint | string | number;
+
+    gasLimit?: Bytes | bigint | string | number;
+    gasPrice?: Bytes | bigint | string | number;
+
+    data?: BytesLike;
+    value?: Bytes | bigint | string | number;
+    chainId?: number;
+
+    type?: number;
+    accessList?: AccessListish;
+
+    maxPriorityFeePerGas?: Bytes | bigint | string | number;
+    maxFeePerGas?: Bytes | bigint | string | number;
+
+    customData?: Record<string, any>;
+    ccipReadEnabled?: boolean;
+  }) => Promise<{hash: string}>;
+  signMessage: (message: string) => Promise<string>;
+};
+
+/** History **/
+export interface CoinflowSolanaHistoryProps extends CoinflowTypes {
+  wallet: SolanaWallet;
+  connection: Connection;
+  blockchain: 'solana';
+}
+
+export interface CoinflowNearHistoryProps extends CoinflowTypes {
+  wallet: NearWallet;
+  blockchain: 'near';
+}
+
+export interface CoinflowEvmHistoryProps extends CoinflowTypes {
+  wallet: EthWallet;
+}
+
+export interface CoinflowEthHistoryProps extends CoinflowEvmHistoryProps {
+  blockchain: 'eth';
+}
+
+export interface CoinflowPolygonHistoryProps extends CoinflowEvmHistoryProps {
+  blockchain: 'polygon';
+}
+
+export interface CoinflowBaseHistoryProps extends CoinflowEvmHistoryProps {
+  blockchain: 'base';
+}
+
+export type CoinflowHistoryProps =
+  | CoinflowSolanaHistoryProps
+  | CoinflowNearHistoryProps
+  | CoinflowPolygonHistoryProps
+  | CoinflowEthHistoryProps
+  | CoinflowBaseHistoryProps;
+
+/** Transactions **/
+
+export type NearFtTransferCallAction = {
+  methodName: 'ft_transfer_call';
+  args: object;
+  gas: string;
+  deposit: string;
+};
+
+type Bytes = ArrayLike<number>;
+type BytesLike = Bytes | string;
+
+/** Purchase **/
+
+export type ChargebackProtectionData = ChargebackProtectionItem[];
+
+export interface ChargebackProtectionItem {
+  /**
+   * The name of the product
+   */
+  productName: string;
+  /**
+   * The product type. Possible values include: inGameProduct, gameOfSkill, dataStorage, computingResources, sportsTicket, eSportsTicket, musicTicket, conferenceTicket, virtualSportsTicket, virtualESportsTicket, virtualMusicTicket, virtualConferenceTicket, alcohol, DLC, subscription, fundACause, realEstate, computingContract, digitalArt, topUp
+   */
+  productType:
+    | 'inGameProduct'
+    | 'gameOfSkill'
+    | 'dataStorage'
+    | 'computingResources'
+    | 'sportsTicket'
+    | 'eSportsTicket'
+    | 'musicTicket'
+    | 'conferenceTicket'
+    | 'virtualSportsTicket'
+    | 'virtualESportsTicket'
+    | 'virtualMusicTicket'
+    | 'virtualConferenceTicket'
+    | 'alcohol'
+    | 'DLC'
+    | 'subscription'
+    | 'fundACause'
+    | 'realEstate'
+    | 'computingContract'
+    | 'digitalArt'
+    | 'topUp'
+    | 'ownershipContract';
+  /**
+   * The item's list price
+   */
+  /**
+   * The number of units sold
+   */
+  quantity: number;
+  /**
+   * Any additional data that the store can provide on the product, e.g. description, link to image, etc.
+   */
+  rawProductData?: {[key: string]: any};
+}
+
+export interface CoinflowCommonPurchaseProps extends CoinflowTypes {
+  amount?: number;
+  onSuccess?: OnSuccessMethod;
+  webhookInfo?: object;
+  email?: string;
+  chargebackProtectionData?: ChargebackProtectionData;
+  planCode?: string;
+  disableApplePay?: boolean;
+  disableGooglePay?: boolean;
+  customerInfo?: CustomerInfo;
+  settlementType?: SettlementType;
+  authOnly?: boolean;
+  deviceId?: string;
+}
+
+export interface CoinflowSolanaPurchaseProps
+  extends CoinflowCommonPurchaseProps {
+  wallet: SolanaWallet;
+  transaction?: Transaction | VersionedTransaction;
+  partialSigners?: Signer[];
+  debugTx?: boolean;
+  connection: Connection;
+  blockchain: 'solana';
+  token?: PublicKey | string;
+  supportsVersionedTransactions?: boolean;
+  rent?: {lamports: string | number};
+  nativeSolToConvert?: {lamports: string | number};
+}
+
+export interface CoinflowNearPurchaseProps extends CoinflowCommonPurchaseProps {
+  wallet: NearWallet;
+  blockchain: 'near';
+  action?: NearFtTransferCallAction;
+  nearDeposit?: string;
+}
+
+export interface CoinflowEvmPurchaseProps extends CoinflowCommonPurchaseProps {
+  transaction?: EvmTransactionData;
+  token?: string;
+  wallet: EthWallet;
+}
+
+export interface CoinflowPolygonPurchaseProps extends CoinflowEvmPurchaseProps {
+  blockchain: 'polygon';
+}
+
+export interface CoinflowEthPurchaseProps extends CoinflowEvmPurchaseProps {
+  blockchain: 'eth';
+}
+
+export interface CoinflowBasePurchaseProps extends CoinflowEvmPurchaseProps {
+  blockchain: 'base';
+}
+
+export type CoinflowPurchaseProps =
+  | CoinflowSolanaPurchaseProps
+  | CoinflowNearPurchaseProps
+  | CoinflowPolygonPurchaseProps
+  | CoinflowEthPurchaseProps
+  | CoinflowBasePurchaseProps;
+
+/** Withdraw **/
+
+export interface CoinflowCommonWithdrawProps extends CoinflowTypes {
+  onSuccess?: OnSuccessMethod;
+  tokens?: string[];
+  lockDefaultToken?: boolean;
+  amount?: number;
+  email?: string;
+  bankAccountLinkRedirect?: string;
+  additionalWallets?: {
+    wallet: string;
+    blockchain: 'solana' | 'eth' | 'near' | 'polygon';
+  }[];
+  supportsVersionedTransactions?: boolean;
+  lockAmount?: boolean;
+  transactionSigner?: string;
+}
+
+export interface CoinflowSolanaWithdrawProps
+  extends CoinflowCommonWithdrawProps {
+  wallet: SolanaWallet;
+  connection: Connection;
+  blockchain: 'solana';
+}
+
+export interface CoinflowNearWithdrawProps extends CoinflowCommonWithdrawProps {
+  wallet: NearWallet;
+  blockchain: 'near';
+}
+
+export interface CoinflowEvmWithdrawProps extends CoinflowCommonWithdrawProps {
+  wallet: EthWallet;
+  usePermit?: boolean;
+}
+
+export interface CoinflowEthWithdrawProps extends CoinflowEvmWithdrawProps {
+  blockchain: 'eth';
+  usePermit?: boolean;
+}
+
+export interface CoinflowPolygonWithdrawProps extends CoinflowEvmWithdrawProps {
+  blockchain: 'polygon';
+}
+
+export interface CoinflowBaseWithdrawProps extends CoinflowEvmWithdrawProps {
+  blockchain: 'base';
+}
+
+export type CoinflowWithdrawProps =
+  | CoinflowSolanaWithdrawProps
+  | CoinflowNearWithdrawProps
+  | CoinflowEthWithdrawProps
+  | CoinflowPolygonWithdrawProps
+  | CoinflowBaseWithdrawProps;
+
+export interface CommonEvmRedeem {
+  waitForHash?: boolean;
+}
+
+export interface NormalRedeem extends CommonEvmRedeem {
+  transaction: {to: string; data: string};
+}
+
+export interface KnownTokenIdRedeem extends NormalRedeem {
+  nftContract: string;
+  nftId: string;
+}
+
+export interface SafeMintRedeem extends NormalRedeem {
+  type: 'safeMint';
+  nftContract?: string;
+}
+
+export interface ReturnedTokenIdRedeem extends NormalRedeem {
+  type: 'returned';
+  nftContract?: string;
+}
+
+type ReservoirNftIdItem = Omit<KnownTokenIdRedeem, keyof NormalRedeem>;
+interface ReservoirOrderIdItem {
+  orderId: string;
+}
+type ReservoirItem = ReservoirNftIdItem | ReservoirOrderIdItem;
+type ReservoirItems = ReservoirItem | ReservoirItem[];
+
+export interface ReservoirRedeem extends CommonEvmRedeem {
+  type: 'reservoir';
+  items: ReservoirItems;
+}
+
+export type EvmTransactionData =
+  | SafeMintRedeem
+  | ReturnedTokenIdRedeem
+  | ReservoirRedeem
+  | KnownTokenIdRedeem
+  | NormalRedeem;
+
+export interface CoinflowIFrameProps
+  extends Omit<CoinflowTypes, 'merchantId'>,
+    Pick<
+      CoinflowCommonPurchaseProps,
+      | 'chargebackProtectionData'
+      | 'webhookInfo'
+      | 'amount'
+      | 'customerInfo'
+      | 'settlementType'
+      | 'email'
+      | 'planCode'
+      | 'deviceId'
+    >,
+    Pick<
+      CoinflowCommonWithdrawProps,
+      | 'bankAccountLinkRedirect'
+      | 'additionalWallets'
+      | 'transactionSigner'
+      | 'lockAmount'
+      | 'lockDefaultToken'
+    >,
+    Pick<CoinflowEvmPurchaseProps, 'authOnly'>,
+    Pick<CoinflowSolanaPurchaseProps, 'rent' | 'nativeSolToConvert' | 'token'> {
+  walletPubkey: string | null | undefined;
+  route: string;
+  routePrefix?: string;
+  transaction?: string;
+  tokens?: string[] | PublicKey[];
+  supportsVersionedTransactions?: boolean;
+  nearDeposit?: string;
+  merchantCss?: string;
+  color?: 'white' | 'black';
+  disableApplePay?: boolean;
+  disableGooglePay?: boolean;
+  theme?: MerchantTheme;
+  usePermit?: boolean;
+}

package/src/lib/common/CoinflowUtils.ts

@@ -0,0 +1,267 @@
+import {
+  CoinflowBlockchain,
+  CoinflowEnvs,
+  CoinflowIFrameProps,
+  CoinflowPurchaseProps,
+} from './CoinflowTypes';
+import {Transaction, VersionedTransaction} from '@solana/web3.js';
+import base58 from 'bs58';
+
+export class CoinflowUtils {
+  env: CoinflowEnvs;
+  url: string;
+
+  constructor(env?: CoinflowEnvs) {
+    this.env = env ?? 'prod';
+    if (this.env === 'prod') this.url = 'https://api.coinflow.cash';
+    else if (this.env === 'local') this.url = 'http://localhost:5000';
+    else this.url = `https://api-${this.env}.coinflow.cash`;
+  }
+
+  async getNSurePartnerId(merchantId: string): Promise<string | undefined> {
+    return fetch(this.url + `/merchant/view/${merchantId}`)
+      .then(response => response.json())
+      .then(
+        (json: {
+          nSurePartnerId: string | undefined;
+          nSureSettings: {nSurePartnerId: string | undefined};
+        }) => json.nSureSettings?.nSurePartnerId || json.nSurePartnerId
+      )
+      .catch(e => {
+        console.error(e);
+        return undefined;
+      });
+  }
+
+  async getCreditBalance(
+    publicKey: string,
+    merchantId: string,
+    blockchain: 'solana' | 'near'
+  ): Promise<{cents: number}> {
+    const response = await fetch(
+      this.url + `/api/customer/balances/${merchantId}`,
+      {
+        method: 'GET',
+        headers: {
+          'x-coinflow-auth-wallet': publicKey,
+          'x-coinflow-auth-blockchain': blockchain,
+        },
+      }
+    );
+    const {credits} = await response.json();
+    return credits;
+  }
+
+  static getCoinflowBaseUrl(env?: CoinflowEnvs): string {
+    if (!env || env === 'prod') return 'https://coinflow.cash';
+    if (env === 'local') return 'http://localhost:3000';
+
+    return `https://${env}.coinflow.cash`;
+  }
+
+  static getCoinflowApiUrl(env?: CoinflowEnvs): string {
+    if (!env || env === 'prod') return 'https://api.coinflow.cash';
+    if (env === 'local') return 'http://localhost:5000';
+
+    return `https://api-${env}.coinflow.cash`;
+  }
+
+  static getCoinflowUrl({
+    walletPubkey,
+    route,
+    routePrefix,
+    env,
+    amount,
+    transaction,
+    blockchain,
+    supportsVersionedTransactions,
+    webhookInfo,
+    email,
+    loaderBackground,
+    handleHeightChange,
+    bankAccountLinkRedirect,
+    additionalWallets,
+    nearDeposit,
+    chargebackProtectionData,
+    merchantCss,
+    color,
+    rent,
+    lockDefaultToken,
+    token,
+    tokens,
+    planCode,
+    disableApplePay,
+    disableGooglePay,
+    customerInfo,
+    settlementType,
+    lockAmount,
+    nativeSolToConvert,
+    theme,
+    usePermit,
+    transactionSigner,
+    authOnly,
+    deviceId,
+  }: CoinflowIFrameProps): string {
+    const prefix = routePrefix
+      ? `/${routePrefix}/${blockchain}`
+      : `/${blockchain}`;
+    const url = new URL(prefix + route, CoinflowUtils.getCoinflowBaseUrl(env));
+    url.searchParams.append('pubkey', walletPubkey!);
+
+    if (transaction) {
+      url.searchParams.append('transaction', transaction);
+    }
+    if (amount) {
+      url.searchParams.append('amount', amount.toString());
+    }
+
+    if (supportsVersionedTransactions) {
+      url.searchParams.append('supportsVersionedTransactions', 'true');
+    }
+
+    if (webhookInfo) {
+      url.searchParams.append(
+        'webhookInfo',
+        Buffer.from(JSON.stringify(webhookInfo)).toString('base64')
+      );
+    }
+
+    if (theme) {
+      url.searchParams.append(
+        'theme',
+        Buffer.from(JSON.stringify(theme)).toString('base64')
+      );
+    }
+
+    if (customerInfo) {
+      url.searchParams.append(
+        'customerInfo',
+        Buffer.from(JSON.stringify(customerInfo)).toString('base64')
+      );
+    }
+
+    if (email) {
+      url.searchParams.append('email', email);
+    }
+
+    if (token) {
+      url.searchParams.append('token', token.toString());
+    }
+
+    if (tokens) {
+      url.searchParams.append('tokens', tokens.toString());
+    }
+
+    if (loaderBackground) {
+      url.searchParams.append('loaderBackground', loaderBackground);
+    }
+
+    if (handleHeightChange) {
+      url.searchParams.append('useHeightChange', 'true');
+    }
+
+    if (bankAccountLinkRedirect) {
+      url.searchParams.append(
+        'bankAccountLinkRedirect',
+        bankAccountLinkRedirect
+      );
+    }
+
+    if (additionalWallets)
+      url.searchParams.append(
+        'additionalWallets',
+        JSON.stringify(additionalWallets)
+      );
+
+    if (nearDeposit) url.searchParams.append('nearDeposit', nearDeposit);
+
+    if (chargebackProtectionData)
+      url.searchParams.append(
+        'chargebackProtectionData',
+        JSON.stringify(chargebackProtectionData)
+      );
+    if (deviceId) {
+      url.searchParams.append('deviceId', deviceId);
+    } else {
+      if (typeof window !== 'undefined') {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const deviceId = window?.nSureSDK?.getDeviceId();
+        if (deviceId) url.searchParams.append('deviceId', deviceId);
+      }
+    }
+
+    if (merchantCss) url.searchParams.append('merchantCss', merchantCss);
+    if (color) url.searchParams.append('color', color);
+    if (rent) url.searchParams.append('rent', rent.lamports.toString());
+    if (nativeSolToConvert)
+      url.searchParams.append(
+        'nativeSolToConvert',
+        nativeSolToConvert.lamports.toString()
+      );
+    if (lockDefaultToken) url.searchParams.append('lockDefaultToken', 'true');
+    if (planCode) url.searchParams.append('planCode', planCode);
+
+    if (disableApplePay) url.searchParams.append('disableApplePay', 'true');
+    if (disableGooglePay) url.searchParams.append('disableGooglePay', 'true');
+    if (settlementType)
+      url.searchParams.append('settlementType', settlementType);
+
+    if (lockAmount) url.searchParams.append('lockAmount', 'true');
+
+    if (usePermit === false) url.searchParams.append('usePermit', 'false');
+    if (transactionSigner)
+      url.searchParams.append('transactionSigner', transactionSigner);
+    if (authOnly === true) url.searchParams.append('authOnly', 'true');
+
+    return url.toString();
+  }
+
+  static getTransaction(props: CoinflowPurchaseProps): string | undefined {
+    if ('transaction' in props) {
+      const {transaction} = props;
+      if (transaction instanceof Transaction) {
+        return base58.encode(
+          transaction.serialize({
+            requireAllSignatures: false,
+            verifySignatures: false,
+          })
+        );
+      }
+
+      if (transaction instanceof VersionedTransaction) {
+        return base58.encode(transaction.serialize());
+      }
+
+      return btoa(JSON.stringify(transaction));
+    }
+
+    if ('action' in props) {
+      return btoa(JSON.stringify(props.action));
+    }
+
+    return undefined;
+  }
+
+  static byBlockchain<T>(
+    blockchain: CoinflowBlockchain,
+    args: {solana: T; near: T; eth?: T; polygon: T; base: T}
+  ): T {
+    switch (blockchain) {
+      case 'solana':
+        return args.solana;
+      case 'near':
+        return args.near;
+      case 'polygon':
+        return args.polygon;
+      case 'eth':
+        if (args.eth === undefined)
+          throw new Error('blockchain not supported for this operation!');
+        return args.eth;
+      case 'base':
+        return args.base;
+      default:
+        throw new Error('blockchain not supported!');
+    }
+  }
+}

package/src/lib/common/index.ts

@@ -0,0 +1,3 @@
+export * from './CoinflowTypes';
+export * from './CoinflowUtils';
+export * from './CoinflowLibMessageHandlers';

package/src/public-api.ts

@@ -0,0 +1,10 @@
+/*
+ * Public API Surface of coinflowlabs
+ */
+
+export * from './lib/coinflow-iframe.component';
+export * from './lib/coinflow-purchase.component';
+export * from './lib/coinflow-purchase-history.component';
+export * from './lib/coinflow-purchase-protection.component';
+export * from './lib/coinflow-withdraw.component';
+export * from './lib/coinflow-withdraw-history.component';

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}