@portal-hq/web 0.0.1-beta-1

package/src/mpc/index.ts

@@ -0,0 +1,443 @@
+import { PortalError, PortalMpcError } from '@portal-hq/utils'
+
+import Portal from '../index'
+import {
+  BackupArgs,
+  DecryptArgs,
+  DecryptResult,
+  EncryptArgs,
+  EncryptResult,
+  GenerateArgs,
+  GenerateResult,
+  IframeConfigurationOptions,
+  MpcOptions,
+  RecoverArgs,
+  SignArgs,
+  WorkerResult,
+} from '../../types'
+
+const WEB_SDK_VERSION = '0.0.1-beta-1'
+
+class Mpc {
+  private apiHost: string
+  private apiKey: string
+  private autoApprove: boolean
+  private chainId: number
+  private iframe?: HTMLIFrameElement
+  private mpcHost: string
+  private portal: Portal
+  private rpcUrl: string
+  private webHost: string
+
+  constructor({
+    apiKey,
+    chainId,
+    portal,
+    rpcUrl,
+
+    // Optional
+    apiHost = 'api.portalhq.io',
+    autoApprove = false,
+    mpcHost = 'mpc.portalhq.io',
+    webHost = 'web.portalhq.io',
+  }: MpcOptions) {
+    this.apiHost = apiHost
+    this.apiKey = apiKey
+    this.autoApprove = autoApprove
+    this.chainId = chainId
+    this.mpcHost = mpcHost
+    this.portal = portal
+    this.rpcUrl = rpcUrl
+    this.webHost = webHost
+
+    // Handle scoping of certain functions
+    this.configureIframe = this.configureIframe.bind(this)
+
+    // Create the iFrame for MPC operations
+    this.appendIframe()
+  }
+
+  // In Progress
+  public async backup(data: BackupArgs): Promise<GenerateResult> {
+    const message = {
+      type: 'portal:wasm:backup', 
+      data,
+    }
+
+    return new Promise((resolve, reject) => {
+      // Create a function to be bound when backup is triggered
+      const handleBackup = (event: MessageEvent<GenerateResult>) => {
+        const { type, data: result } = event
+
+        // Check that the message is the one we're looking for
+        if (type === 'portal:wasm:backupResult') {
+          // Check if the result is an error
+          if (result.error && result.error.code > 0) {
+            // Remove the event listener
+            window.removeEventListener('message', handleBackup)
+
+            // Reject the promise with the error
+            return reject(new PortalMpcError(result.error))
+          }
+
+          // Remove the event listener
+          window.removeEventListener('message', handleBackup)
+
+          // Resolve the promise with the result
+          resolve(result)
+        }
+      }
+
+      // Bind the function to the message event
+      window.addEventListener('message', handleBackup)
+
+      // Send the request to the iframe
+      this.postMessage(message)
+    })
+  }
+
+  // In Progress
+  public async decrypt(data: DecryptArgs): Promise<DecryptResult> {
+    const message = {
+      type: 'portal:wasm:decrypt', 
+      data,
+    }
+
+    return new Promise((resolve, reject) => {
+      const handleDecrypt = (event: MessageEvent<DecryptResult>) => {
+        const { type, data: result } = event
+
+        // Check that the message is the one we're looking for
+        if (type === 'portal:wasm:decryptResult') {
+          // Check if the result is an error
+          if (result.error && result.error.code > 0) {
+            // Remove the event listener
+            window.removeEventListener('message', handleDecrypt)
+
+            // Reject the promise with the error
+            return reject(new PortalMpcError(result.error))
+          }
+
+          // Remove the event listener
+          window.removeEventListener('message', handleDecrypt)
+
+          // Resolve the promise with the result
+          resolve(result)
+        }
+      }
+
+      // Bind the function to the message event
+      window.addEventListener('message', handleDecrypt)
+
+      // Send the request to the iframe
+      this.postMessage(message)
+    })
+  }
+
+  // In Progress
+  public async encrypt(data: EncryptArgs): Promise<EncryptResult> {
+    const message = {
+      type: 'portal:wasm:encrypt', 
+      data,
+    }
+
+    return new Promise((resolve, reject) => {
+      const handleEncrypt = (event: MessageEvent<EncryptResult>) => {
+        const { type, data: result } = event
+
+        // Check that the message is the one we're looking for
+        if (type === 'portal:wasm:encryptResult') {
+          // Check if the result is an error
+          if (result.error && result.error.code > 0) {
+            // Remove the event listener
+            window.removeEventListener('message', handleEncrypt)
+
+            // Reject the promise with the error
+            return reject(new PortalMpcError(result.error))
+          }
+
+          // Remove the event listener
+          window.removeEventListener('message', handleEncrypt)
+
+          // Resolve the promise with the result
+          resolve(result)
+        }
+      }
+
+      // Bind the function to the message event
+      window.addEventListener('message', handleEncrypt)
+
+      // Send the request to the iframe
+      this.postMessage(message)
+    })
+  }
+
+  public async generate(data: GenerateArgs): Promise<string> {
+    const message = {
+      type: 'portal:wasm:generate', 
+      data,
+    }
+
+    return new Promise((resolve, reject) => {
+      // Create a function to be bound when generate is triggered
+      const handleGenerate = (event: MessageEvent<WorkerResult>) => {
+        console.log(`[MPC] Temporary listener received event: `, event)
+
+        const { type, data: result } = event.data
+
+        // Handle errors
+        if (type === 'portal:wasm:generateError') {
+          // Remove the event listener
+          window.removeEventListener('message', handleGenerate)
+
+          // Reject the promise with the error
+          return reject(new PortalMpcError(result))
+        } else if (type === 'portal:wasm:generateResult') {
+          // Remove the event listener
+          window.removeEventListener('message', handleGenerate)
+
+          // Resolve the promise with the result
+          resolve(result)
+        }
+      }
+
+      // Bind the function to the message event
+      window.addEventListener('message', handleGenerate)
+
+      // Send the request to the iframe
+      this.postMessage(message)
+    })
+  }
+
+  public async getAddress(): Promise<string> {
+    const message = {
+      type: 'portal:address', 
+      data: {},
+    }
+
+    return new Promise((resolve) => {
+      // Create a function to be bound when getAddress is triggered
+      const handleGetAddress = (event: MessageEvent<WorkerResult>) => {
+        const { type, data: result } = event.data
+
+        // Check that the message is the one we're looking for
+        if (type === 'portal:addressResult') {
+          // Remove the event listener
+          window.removeEventListener('message', handleGetAddress)
+
+          // Resolve the promise with the result
+          resolve(result)
+        }
+      }
+
+      // Bind the function to the message event
+      window.addEventListener('message', handleGetAddress)
+
+      // Send the request to the iframe
+      this.postMessage(message)
+    })
+  }
+
+  // In Progress
+  public async recover(data: RecoverArgs): Promise<string> {
+    await this.recoverBackup(data)
+    // TODO: Write the DKG Result to local storage
+    const cipherText = await this.recoverSigning(data)
+
+    return JSON.stringify(cipherText)
+  }
+
+  // In Progress
+  private async recoverBackup(data: RecoverArgs): Promise<GenerateResult> {
+    const message = {
+      type: 'portal:wasm:recoverBackup', 
+      data,
+    }
+
+    return new Promise((resolve, reject) => {
+      // Create a function to be bound when recoverSigning is triggered
+      const handleRecovery = (event: MessageEvent<GenerateResult>) => {
+        const { type, data: result } = event
+
+        // Check that the message is the one we're looking for
+        if (type === 'portal:wasm:recoverBackupResult') {
+          // Check if the result is an error
+          if (result.error && result.error.code > 0) {
+            // Remove the event listener
+            window.removeEventListener('message', handleRecovery)
+
+            // Reject the promise with the error
+            return reject(new PortalMpcError(result.error))
+          }
+
+          // Remove the event listener
+          window.removeEventListener('message', handleRecovery)
+
+          // Resolve the promise with the result
+          resolve(result)
+        }
+      }
+
+      // Bind the function to the message event
+      window.addEventListener('message', handleRecovery)
+
+      // Send the request to the iframe
+      this.postMessage(message)
+    })
+  }
+
+  // In Progress
+  private async recoverSigning(data: RecoverArgs): Promise<GenerateResult> {
+    const message = {
+      type: 'portal:wasm:recoverSigning', 
+      data,
+    }
+
+    return new Promise((resolve, reject) => {
+      // Create a function to be bound when recoverSigning is triggered
+      const handleRecovery = (event: MessageEvent<GenerateResult>) => {
+        const { type, data: result } = event
+
+        // Check that the message is the one we're looking for
+        if (type === 'portal:wasm:recoverSigningResult') {
+          // Check if the result is an error
+          if (result.error && result.error.code > 0) {
+            // Remove the event listener
+            window.removeEventListener('message', handleRecovery)
+
+            // Reject the promise with the error
+            return reject(new PortalMpcError(result.error))
+          }
+
+          // Remove the event listener
+          window.removeEventListener('message', handleRecovery)
+
+          // Resolve the promise with the result
+          resolve(result)
+        }
+      }
+
+      // Bind the function to the message event
+      window.addEventListener('message', handleRecovery)
+
+      // Send the request to the iframe
+      this.postMessage(message)
+    })
+  }
+
+  public async sign(data: SignArgs): Promise<string> {
+    const message = {
+      type: 'portal:wasm:sign', 
+      data,
+    }
+
+    return new Promise((resolve, reject) => {
+      // Create a function to be bound when sign is triggered
+      const handleSign = (event: MessageEvent<WorkerResult>) => {
+        const { type, data: result } = event.data
+
+        if (type === 'portal:wasm:signError') {
+          // Remove the event listener
+          window.removeEventListener('message', handleSign)
+
+          // Reject the promise with the error
+          return reject(new PortalMpcError(result as PortalError))
+        } else if (type === 'portal:wasm:signResult') {
+          // Remove the event listener
+          window.removeEventListener('message', handleSign)
+
+          // Resolve the promise with the result
+          resolve(result as string)
+        }
+      }
+
+      // Bind the function to the message event
+      window.addEventListener('message', handleSign)
+
+      // Send the request to the iframe
+      this.postMessage(message)
+    })
+  }
+
+  /***************************
+   * Private Methods
+   ***************************/
+
+  /**
+   * Appends the iframe to the document body
+   */
+  private appendIframe() {
+    const source = this.webHost.startsWith('locahost:')
+      ? `http://${this.webHost}/${WEB_SDK_VERSION}/iframe/index.html?t=${Date.now()}`
+      : `https://${this.webHost}/${WEB_SDK_VERSION}/iframe/index.html?t=${Date.now()}`
+
+    const iframe = document.createElement('iframe')
+    iframe.height = '0'
+    iframe.width = '0'
+    iframe.src = source
+    iframe.addEventListener('load', this.configureIframe)
+
+    document.body.appendChild(iframe)
+
+    this.iframe = iframe
+
+  }
+
+  private configureIframe() {
+    const config: IframeConfigurationOptions = {
+      apiHost: this.apiHost,
+      apiKey: this.apiKey,
+      autoApprove: this.autoApprove,
+      chainId: this.chainId,
+      mpcHost: this.mpcHost,
+      rpcUrl: this.rpcUrl,
+    }
+
+    const message = {
+      type: 'portal:configure',
+      data: config
+    }
+
+    this.postMessage(message)
+
+    this.waitForReadyMessage()
+  }
+
+  private getOrigin(): string {
+    const origin = this.webHost.startsWith('localhost:')
+      ? `http://${this.webHost}`
+      : `https://${this.webHost}`
+
+    return origin
+  }
+
+  private postMessage(event: { type: string, data: any }) {
+    console.log(`[MpcProxy] Sending new message: `, event, this.iframe?.contentWindow)
+    this.iframe?.contentWindow?.postMessage(event, this.getOrigin())
+  }
+
+  private waitForReadyMessage() {
+    const handleReady = async (message: MessageEvent<WorkerResult>) => {
+      const { type, data } = message.data
+
+      if (type === 'portal:wasm:ready' && data === true) {
+        // Unbind the event listener
+        window.removeEventListener('message', handleReady)
+
+        // Update ready state
+        this.portal.ready = true
+
+        // Update the address
+        const address = await this.getAddress()
+        this.portal.address = address
+
+        // Trigger the ready callback
+        this.portal.triggerReady()
+      }
+    }
+
+    window.addEventListener('message', handleReady)
+  }
+}
+
+export default Mpc