@farcaster/frame-host 0.0.20 → 0.0.22

package/src/comlink/index.ts

@@ -1 +1 @@
-export * from "./comlink";
+export * from './comlink'

package/src/comlink/node-adapter.ts

@@ -4,46 +4,46 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Endpoint } from "./protocol";
+import type { Endpoint } from './protocol'
 
 export interface NodeEndpoint {
-  postMessage(message: any, transfer?: any[]): void;
+  postMessage(message: any, transfer?: any[]): void
   on(
     type: string,
     listener: EventListenerOrEventListenerObject,
     options?: {},
-  ): void;
+  ): void
   off(
     type: string,
     listener: EventListenerOrEventListenerObject,
     options?: {},
-  ): void;
-  start?: () => void;
+  ): void
+  start?: () => void
 }
 
 export default function nodeEndpoint(nep: NodeEndpoint): Endpoint {
-  const listeners = new WeakMap();
+  const listeners = new WeakMap()
   return {
     postMessage: nep.postMessage.bind(nep),
     addEventListener: (_, eh) => {
       const l = (data: any) => {
-        if ("handleEvent" in eh) {
-          eh.handleEvent({ data } as MessageEvent);
+        if ('handleEvent' in eh) {
+          eh.handleEvent({ data } as MessageEvent)
         } else {
-          eh({ data } as MessageEvent);
+          eh({ data } as MessageEvent)
         }
-      };
-      nep.on("message", l);
-      listeners.set(eh, l);
+      }
+      nep.on('message', l)
+      listeners.set(eh, l)
     },
     removeEventListener: (_, eh) => {
-      const l = listeners.get(eh);
+      const l = listeners.get(eh)
       if (!l) {
-        return;
+        return
       }
-      nep.off("message", l);
-      listeners.delete(eh);
+      nep.off('message', l)
+      listeners.delete(eh)
     },
-    start: nep.start && nep.start.bind(nep),
-  };
+    start: nep.start?.bind(nep),
+  }
 }

package/src/comlink/protocol.ts

@@ -9,13 +9,13 @@ export interface EventSource {
     type: string,
     listener: EventListenerOrEventListenerObject,
     options?: {},
-  ): void;
+  ): void
 
   removeEventListener(
     type: string,
     listener: EventListenerOrEventListenerObject,
     options?: {},
-  ): void;
+  ): void
 }
 
 export interface PostMessageWithOrigin {
@@ -23,83 +23,83 @@ export interface PostMessageWithOrigin {
     message: any,
     targetOrigin: string,
     transfer?: Transferable[],
-  ): void;
+  ): void
 }
 
 export interface Endpoint extends EventSource {
-  postMessage(message: any, transfer?: Transferable[]): void;
+  postMessage(message: any, transfer?: Transferable[]): void
 
-  start?: () => void;
+  start?: () => void
 }
 
-export const enum WireValueType {
-  RAW = "RAW",
-  PROXY = "PROXY",
-  THROW = "THROW",
-  HANDLER = "HANDLER",
+export enum WireValueType {
+  RAW = 'RAW',
+  PROXY = 'PROXY',
+  THROW = 'THROW',
+  HANDLER = 'HANDLER',
 }
 
 export interface RawWireValue {
-  id?: string;
-  type: WireValueType.RAW;
-  value: {};
+  id?: string
+  type: WireValueType.RAW
+  value: {}
 }
 
 export interface HandlerWireValue {
-  id?: string;
-  type: WireValueType.HANDLER;
-  name: string;
-  value: unknown;
+  id?: string
+  type: WireValueType.HANDLER
+  name: string
+  value: unknown
 }
 
-export type WireValue = RawWireValue | HandlerWireValue;
+export type WireValue = RawWireValue | HandlerWireValue
 
-export type MessageID = string;
+export type MessageID = string
 
-export const enum MessageType {
-  GET = "GET",
-  SET = "SET",
-  APPLY = "APPLY",
-  CONSTRUCT = "CONSTRUCT",
-  ENDPOINT = "ENDPOINT",
-  RELEASE = "RELEASE",
+export enum MessageType {
+  GET = 'GET',
+  SET = 'SET',
+  APPLY = 'APPLY',
+  CONSTRUCT = 'CONSTRUCT',
+  ENDPOINT = 'ENDPOINT',
+  RELEASE = 'RELEASE',
 }
 
 export interface GetMessage {
-  id?: MessageID;
-  type: MessageType.GET;
-  path: string[];
+  id?: MessageID
+  type: MessageType.GET
+  path: string[]
 }
 
 export interface SetMessage {
-  id?: MessageID;
-  type: MessageType.SET;
-  path: string[];
-  value: WireValue;
+  id?: MessageID
+  type: MessageType.SET
+  path: string[]
+  value: WireValue
 }
 
 export interface ApplyMessage {
-  id?: MessageID;
-  type: MessageType.APPLY;
-  path: string[];
-  argumentList: WireValue[];
+  id?: MessageID
+  type: MessageType.APPLY
+  path: string[]
+  argumentList: WireValue[]
 }
 
 export interface ConstructMessage {
-  id?: MessageID;
-  type: MessageType.CONSTRUCT;
-  path: string[];
-  argumentList: WireValue[];
+  id?: MessageID
+  type: MessageType.CONSTRUCT
+  path: string[]
+  argumentList: WireValue[]
 }
 
 export interface EndpointMessage {
-  id?: MessageID;
-  type: MessageType.ENDPOINT;
+  id?: MessageID
+  type: MessageType.ENDPOINT
 }
 
 export interface ReleaseMessage {
-  id?: MessageID;
-  type: MessageType.RELEASE;
+  id?: MessageID
+  type: MessageType.RELEASE
 }
 
 export type Message =
@@ -108,4 +108,4 @@ export type Message =
   | ApplyMessage
   | ConstructMessage
   | EndpointMessage
-  | ReleaseMessage;
+  | ReleaseMessage

package/src/helpers/endpoint.ts

@@ -1,10 +1,10 @@
-import { FrameHost } from "@farcaster/frame-core";
-import { Provider } from "ox";
-import * as Comlink from "../comlink";
-import { HostEndpoint } from "../types";
-import { forwardProviderEvents, wrapProviderRequest } from "./provider";
-import { wrapHandlers } from "./sdk";
-import { useEffect } from "react";
+import type { FrameHost } from '@farcaster/frame-core'
+import type { Provider } from 'ox'
+import { useEffect } from 'react'
+import * as Comlink from '../comlink'
+import type { HostEndpoint } from '../types'
+import { forwardProviderEvents, wrapProviderRequest } from './provider'
+import { wrapHandlers } from './sdk'
 
 /**
  * @returns function to cleanup provider listeners
@@ -16,29 +16,29 @@ export function exposeToEndpoint({
   ethProvider,
   debug = false,
 }: {
-  endpoint: HostEndpoint;
-  sdk: Omit<FrameHost, "ethProviderRequestV2">;
-  frameOrigin: string;
-  ethProvider?: Provider.Provider;
-  debug?: boolean;
+  endpoint: HostEndpoint
+  sdk: Omit<FrameHost, 'ethProviderRequestV2'>
+  frameOrigin: string
+  ethProvider?: Provider.Provider
+  debug?: boolean
 }) {
-  const extendedSdk = wrapHandlers(sdk as FrameHost);
+  const extendedSdk = wrapHandlers(sdk as FrameHost)
 
-  let cleanup: () => void | undefined;
+  let cleanup: (() => void) | undefined
   if (ethProvider) {
     extendedSdk.ethProviderRequestV2 = wrapProviderRequest({
       provider: ethProvider,
       debug,
-    });
-    cleanup = forwardProviderEvents({ provider: ethProvider, endpoint });
+    })
+    cleanup = forwardProviderEvents({ provider: ethProvider, endpoint })
   }
 
-  const unexpose = Comlink.expose(extendedSdk, endpoint, [frameOrigin]);
+  const unexpose = Comlink.expose(extendedSdk, endpoint, [frameOrigin])
 
   return () => {
-    cleanup?.();
-    unexpose();
-  };
+    cleanup?.()
+    unexpose()
+  }
 }
 
 export function useExposeToEndpoint({
@@ -48,15 +48,15 @@ export function useExposeToEndpoint({
   ethProvider,
   debug = false,
 }: {
-  endpoint: HostEndpoint | undefined;
-  sdk: Omit<FrameHost, "ethProviderRequestV2">;
-  frameOrigin: string;
-  ethProvider?: Provider.Provider;
-  debug?: boolean;
+  endpoint: HostEndpoint | undefined
+  sdk: Omit<FrameHost, 'ethProviderRequestV2'>
+  frameOrigin: string
+  ethProvider?: Provider.Provider
+  debug?: boolean
 }) {
   useEffect(() => {
     if (!endpoint) {
-      return;
+      return
     }
 
     const cleanup = exposeToEndpoint({
@@ -65,8 +65,8 @@ export function useExposeToEndpoint({
       frameOrigin,
       ethProvider,
       debug,
-    });
+    })
 
-    return cleanup;
-  }, [endpoint, sdk, ethProvider, frameOrigin, debug]);
+    return cleanup
+  }, [endpoint, sdk, ethProvider, frameOrigin, debug])
 }

package/src/helpers/provider.ts

@@ -1,42 +1,42 @@
-import { Provider, RpcRequest, RpcResponse } from "ox";
-import { HostEndpoint } from "../types";
+import { Provider, type RpcRequest, RpcResponse } from 'ox'
+import type { HostEndpoint } from '../types'
 
 export function forwardProviderEvents({
   provider,
   endpoint,
 }: {
-  provider: Provider.Provider;
-  endpoint: HostEndpoint;
+  provider: Provider.Provider
+  endpoint: HostEndpoint
 }) {
-  let accountsChanged: Provider.EventMap["accountsChanged"] = (accounts) => {
-    endpoint.emitEthProvider("accountsChanged", [accounts]);
-  };
-  let chainChanged: Provider.EventMap["chainChanged"] = (chainId) => {
-    endpoint.emitEthProvider("chainChanged", [chainId]);
-  };
-  let connect: Provider.EventMap["connect"] = (connectInfo) => {
-    endpoint.emitEthProvider("connect", [connectInfo]);
-  };
-  let disconnect: Provider.EventMap["disconnect"] = (providerRpcError) => {
-    endpoint.emitEthProvider("disconnect", [providerRpcError]);
-  };
-  let message: Provider.EventMap["message"] = (message) => {
-    endpoint.emitEthProvider("message", [message]);
-  };
+  const accountsChanged: Provider.EventMap['accountsChanged'] = (accounts) => {
+    endpoint.emitEthProvider('accountsChanged', [accounts])
+  }
+  const chainChanged: Provider.EventMap['chainChanged'] = (chainId) => {
+    endpoint.emitEthProvider('chainChanged', [chainId])
+  }
+  const connect: Provider.EventMap['connect'] = (connectInfo) => {
+    endpoint.emitEthProvider('connect', [connectInfo])
+  }
+  const disconnect: Provider.EventMap['disconnect'] = (providerRpcError) => {
+    endpoint.emitEthProvider('disconnect', [providerRpcError])
+  }
+  const message: Provider.EventMap['message'] = (message) => {
+    endpoint.emitEthProvider('message', [message])
+  }
 
-  provider.on("accountsChanged", accountsChanged);
-  provider.on("chainChanged", chainChanged);
-  provider.on("connect", connect);
-  provider.on("disconnect", disconnect);
-  provider.on("message", message);
+  provider.on('accountsChanged', accountsChanged)
+  provider.on('chainChanged', chainChanged)
+  provider.on('connect', connect)
+  provider.on('disconnect', disconnect)
+  provider.on('message', message)
 
   return () => {
-    provider.removeListener("accountsChanged", accountsChanged);
-    provider.removeListener("chainChanged", chainChanged);
-    provider.removeListener("connect", connect);
-    provider.removeListener("disconnect", disconnect);
-    provider.removeListener("message", message);
-  };
+    provider.removeListener('accountsChanged', accountsChanged)
+    provider.removeListener('chainChanged', chainChanged)
+    provider.removeListener('connect', connect)
+    provider.removeListener('disconnect', disconnect)
+    provider.removeListener('message', message)
+  }
 }
 
 // export type FrameTransport<
@@ -53,25 +53,25 @@ export const wrapProviderRequest =
     provider,
     debug = false,
   }: {
-    provider: Provider.Provider;
-    debug?: boolean;
+    provider: Provider.Provider
+    debug?: boolean
   }) =>
   async (request: RpcRequest.RpcRequest) => {
     try {
       if (debug) {
-        console.debug("[frame-host] eth provider req: ", request);
+        console.debug('[frame-host] eth provider req: ', request)
       }
-      const result = await provider.request(request);
-      const response = RpcResponse.from({ result }, { request });
+      const result = await provider.request(request)
+      const response = RpcResponse.from({ result }, { request })
 
       if (debug) {
-        console.debug("[frame-host] eth provider res: ", response);
+        console.debug('[frame-host] eth provider res: ', response)
       }
 
-      return response;
+      return response
     } catch (e) {
       if (debug) {
-        console.error("provider request error", e);
+        console.error('provider request error', e)
       }
       if (e instanceof Provider.ProviderRpcError) {
         return RpcResponse.from(
@@ -83,16 +83,16 @@ export const wrapProviderRequest =
             },
           },
           { request },
-        );
+        )
       }
 
       if (
         e !== null &&
-        typeof e === "object" &&
-        "message" in e &&
-        typeof e.message === "string" &&
-        "code" in e &&
-        typeof e.code === "number"
+        typeof e === 'object' &&
+        'message' in e &&
+        typeof e.message === 'string' &&
+        'code' in e &&
+        typeof e.code === 'number'
       ) {
         return RpcResponse.from(
           {
@@ -100,16 +100,16 @@ export const wrapProviderRequest =
               message: e.message,
               code: e.code,
               details:
-                "details" in e && typeof e.details === "string"
+                'details' in e && typeof e.details === 'string'
                   ? e.details
                   : undefined,
             },
           },
           { request },
-        );
+        )
       }
 
-      const errorMessage = e instanceof Error ? e.message : "Unknown";
+      const errorMessage = e instanceof Error ? e.message : 'Unknown'
       return RpcResponse.from(
         {
           error: {
@@ -118,6 +118,6 @@ export const wrapProviderRequest =
           },
         },
         { request },
-      );
+      )
     }
-  };
+  }

package/src/helpers/sdk.ts

@@ -1,24 +1,48 @@
-import type { FrameHost, WireFrameHost } from "@farcaster/frame-core";
-import { SignIn } from "@farcaster/frame-core";
+import type { FrameHost, WireFrameHost } from '@farcaster/frame-core'
+import { AddFrame, SignIn } from '@farcaster/frame-core'
 
 export function wrapHandlers(host: FrameHost): WireFrameHost {
   return {
     ...host,
+    addFrame: async () => {
+      try {
+        const result = await host.addFrame()
+        return { result }
+      } catch (e) {
+        if (e instanceof AddFrame.RejectedByUser) {
+          return {
+            error: {
+              type: 'rejected_by_user',
+            },
+          }
+        }
+
+        if (e instanceof AddFrame.InvalidDomainManifest) {
+          return {
+            error: {
+              type: 'invalid_domain_manifest',
+            },
+          }
+        }
+
+        throw e
+      }
+    },
     signIn: async (options) => {
       try {
-        const result = await host.signIn(options);
-        return { result };
+        const result = await host.signIn(options)
+        return { result }
       } catch (e) {
         if (e instanceof SignIn.RejectedByUser) {
           return {
             error: {
-              type: 'rejected_by_user' 
-            }
+              type: 'rejected_by_user',
+            },
           }
         }
 
-        throw e;
+        throw e
       }
-    }
+    },
   }
 }

package/src/iframe.ts

@@ -1,8 +1,8 @@
-import * as Comlink from "./comlink";
-import type { Provider } from "ox";
-import { FrameHost } from "@farcaster/frame-core";
-import { HostEndpoint } from "./types";
-import { exposeToEndpoint } from "./helpers/endpoint";
+import type { FrameHost } from '@farcaster/frame-core'
+import type { Provider } from 'ox'
+import * as Comlink from './comlink'
+import { exposeToEndpoint } from './helpers/endpoint'
+import type { HostEndpoint } from './types'
 
 /**
  * An endpoint of communicating with an iFrame
@@ -12,39 +12,39 @@ export function createIframeEndpoint({
   targetOrigin,
   debug = true,
 }: {
-  iframe: HTMLIFrameElement;
-  targetOrigin: string;
-  debug?: boolean;
+  iframe: HTMLIFrameElement
+  targetOrigin: string
+  debug?: boolean
 }): HostEndpoint {
   return {
     // when is contentWindow null
     ...Comlink.windowEndpoint(iframe.contentWindow!),
     emit: (event) => {
       if (debug) {
-        console.debug("frameEvent", event);
+        console.debug('frameEvent', event)
       }
 
       const wireEvent = {
-        type: "frameEvent",
+        type: 'frameEvent',
         event,
-      };
+      }
 
-      iframe.contentWindow?.postMessage(wireEvent, targetOrigin);
+      iframe.contentWindow?.postMessage(wireEvent, targetOrigin)
     },
     emitEthProvider: (event, params) => {
       if (debug) {
-        console.debug("fc:emitEthProvider", event, params);
+        console.debug('fc:emitEthProvider', event, params)
       }
 
       const wireEvent = {
-        type: "frameEthProviderEvent",
+        type: 'frameEthProviderEvent',
         event,
         params,
-      };
+      }
 
-      iframe.contentWindow?.postMessage(wireEvent, targetOrigin);
+      iframe.contentWindow?.postMessage(wireEvent, targetOrigin)
     },
-  };
+  }
 }
 
 export function exposeToIframe({
@@ -54,27 +54,27 @@ export function exposeToIframe({
   frameOrigin,
   debug = false,
 }: {
-  iframe: HTMLIFrameElement;
-  sdk: Omit<FrameHost, "ethProviderRequestV2">;
-  frameOrigin: string;
-  ethProvider?: Provider.Provider;
-  debug?: boolean;
+  iframe: HTMLIFrameElement
+  sdk: Omit<FrameHost, 'ethProviderRequestV2'>
+  frameOrigin: string
+  ethProvider?: Provider.Provider
+  debug?: boolean
 }) {
   const endpoint = createIframeEndpoint({
     iframe,
     targetOrigin: frameOrigin,
     debug,
-  });
+  })
   const cleanup = exposeToEndpoint({
     endpoint,
     sdk,
     ethProvider,
     frameOrigin,
     debug,
-  });
+  })
 
   return {
     endpoint,
     cleanup,
-  };
+  }
 }

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from "@farcaster/frame-core";
-export * from "./types";
-export * from "./iframe";
-export * from "./helpers/endpoint";
+export * from '@farcaster/frame-core'
+export * from './types'
+export * from './iframe'
+export * from './helpers/endpoint'

package/src/types.ts

@@ -1,7 +1,7 @@
-import type { Endpoint } from "./comlink";
-import type { EmitEthProvider, FrameClientEvent } from "@farcaster/frame-core";
+import type { EmitEthProvider, FrameClientEvent } from '@farcaster/frame-core'
+import type { Endpoint } from './comlink'
 
 export type HostEndpoint = Endpoint & {
-  emit: (event: FrameClientEvent) => void;
-  emitEthProvider: EmitEthProvider;
-};
+  emit: (event: FrameClientEvent) => void
+  emitEthProvider: EmitEthProvider
+}