@farcaster/frame-sdk 0.0.22 → 0.0.24

package/dist/types.d.ts

@@ -1,6 +1,6 @@
-import type { EventEmitter } from "eventemitter3";
-import type { Provider } from "ox";
-import type { FrameContext, AddFrame, ReadyOptions, SignIn, FrameNotificationDetails, AddFrameRejectedReason } from "@farcaster/frame-core";
+import type { AddFrame, FrameContext, FrameNotificationDetails, ReadyOptions, SetPrimaryButtonOptions, SignIn } from '@farcaster/frame-core';
+import type { EventEmitter } from 'eventemitter3';
+import type { Provider } from 'ox';
 declare global {
     interface Window {
         ReactNativeWebView: {
@@ -9,7 +9,7 @@ declare global {
     }
 }
 /** Combines members of an intersection into a readable type. */
-export type Compute<type> = {
+type Compute<type> = {
     [key in keyof type]: type[key];
 } & unknown;
 export type EventMap = {
@@ -17,8 +17,8 @@ export type EventMap = {
     frameAdded: ({ notificationDetails, }: {
         notificationDetails?: FrameNotificationDetails;
     }) => void;
-    frameAddRejected: ({ reason }: {
-        reason: AddFrameRejectedReason;
+    frameAddRejected: ({ reason, }: {
+        reason: AddFrame.AddFrameRejectedReason;
     }) => void;
     frameRemoved: () => void;
     notificationsEnabled: ({ notificationDetails, }: {
@@ -27,12 +27,7 @@ export type EventMap = {
     notificationsDisabled: () => void;
 };
 export type Emitter = Compute<EventEmitter<EventMap>>;
-export type SetPrimaryButton = (options: {
-    text: string;
-    loading?: boolean;
-    disabled?: boolean;
-    hidden?: boolean;
-}) => Promise<void>;
+type SetPrimaryButton = (options: SetPrimaryButtonOptions) => Promise<void>;
 export type FrameSDK = {
     context: Promise<FrameContext>;
     actions: {
@@ -41,9 +36,10 @@ export type FrameSDK = {
         signIn: SignIn.SignIn;
         close: () => Promise<void>;
         setPrimaryButton: SetPrimaryButton;
-        addFrame: AddFrame;
+        addFrame: AddFrame.AddFrame;
     };
     wallet: {
         ethProvider: Provider.Provider;
     };
 } & Emitter;
+export {};

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@farcaster/frame-sdk",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "main": "dist/index.js",
   "files": [
     "dist",
     "src"
   ],
   "devDependencies": {
-    "esbuild": "^0.24.0",
-    "typescript": "^5.6.3",
+    "esbuild": "^0.24.2",
+    "mipd": "^0.0.7",
+    "typescript": "^5.7.2",
     "@farcaster/tsconfig": "0.0.2"
   },
   "dependencies": {
     "comlink": "^4.4.2",
     "eventemitter3": "^5.0.1",
-    "ox": "^0.4.0",
-    "@farcaster/frame-core": "0.0.21"
+    "ox": "^0.4.4",
+    "@farcaster/frame-core": "0.0.22"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/endpoint.ts

@@ -1,4 +1,4 @@
-import { type Endpoint, windowEndpoint } from "comlink";
+import { type Endpoint, windowEndpoint } from 'comlink'
 
 const mockEndpoint: Endpoint = {
   postMessage() {
@@ -10,25 +10,25 @@ const mockEndpoint: Endpoint = {
   removeEventListener: () => {
     // noop
   },
-};
+}
 
 const webViewEndpoint: Endpoint = {
   postMessage: (data: unknown) => {
-    console.debug("[webview:req]", data);
-    window.ReactNativeWebView.postMessage(JSON.stringify(data));
+    console.debug('[webview:req]', data)
+    window.ReactNativeWebView.postMessage(JSON.stringify(data))
   },
   addEventListener: (_, listener, ...args) => {
-    document.addEventListener("FarcasterFrameCallback", listener, ...args);
+    document.addEventListener('FarcasterFrameCallback', listener, ...args)
   },
   removeEventListener: (_, listener) => {
-    document.removeEventListener("FarcasterFrameCallback", listener);
+    document.removeEventListener('FarcasterFrameCallback', listener)
   },
-};
+}
 
 export const endpoint = (() => {
   // No actions are actually gonna take place during SSR, thus it's safe to return mocked endpoint
-  if (typeof window === "undefined") return mockEndpoint;
+  if (typeof window === 'undefined') return mockEndpoint
   return window?.ReactNativeWebView
     ? webViewEndpoint
-    : windowEndpoint(window?.parent ?? window);
-})();
+    : windowEndpoint(window?.parent ?? window)
+})()

package/src/frameHost.ts

@@ -1,5 +1,5 @@
-import { wrap } from "comlink";
-import { endpoint } from "./endpoint";
-import { WireFrameHost } from "@farcaster/frame-core";
+import type { WireFrameHost } from '@farcaster/frame-core'
+import { wrap } from 'comlink'
+import { endpoint } from './endpoint'
 
-export const frameHost = wrap<WireFrameHost>(endpoint);
+export const frameHost = wrap<WireFrameHost>(endpoint)

package/src/index.ts

@@ -1,6 +1,6 @@
-import { sdk } from "./sdk";
+import { sdk } from './sdk'
 
-export * from "./sdk";
-export * from "@farcaster/frame-core";
+export * from './sdk'
+export * from '@farcaster/frame-core'
 
-export default sdk;
+export default sdk

package/src/provider.ts

@@ -1,35 +1,44 @@
-import { Provider, RpcRequest, RpcResponse } from "ox";
-import { frameHost } from "./frameHost";
-import { EthProviderWireEvent } from "@farcaster/frame-core";
+import type {
+  EthProviderWireEvent,
+  FrameClientEvent,
+} from '@farcaster/frame-core'
+import type {
+  AnnounceProviderParameters,
+  AnnounceProviderReturnType,
+  EIP1193Provider,
+  EIP6963ProviderDetail,
+} from 'mipd'
+import { Provider, RpcRequest, RpcResponse } from 'ox'
+import { frameHost } from './frameHost'
 
-const emitter = Provider.createEmitter();
-const store = RpcRequest.createStore();
+const emitter = Provider.createEmitter()
+const store = RpcRequest.createStore()
 
 type GenericProviderRpcError = {
-  code: number;
-  details?: string;
-};
+  code: number
+  details?: string
+}
 
-export function toProviderRpcError({
+function toProviderRpcError({
   code,
   details,
 }: GenericProviderRpcError): Provider.ProviderRpcError {
   switch (code) {
     case 4001:
-      return new Provider.UserRejectedRequestError();
+      return new Provider.UserRejectedRequestError()
     case 4100:
-      return new Provider.UnauthorizedError();
+      return new Provider.UnauthorizedError()
     case 4200:
-      return new Provider.UnsupportedMethodError();
+      return new Provider.UnsupportedMethodError()
     case 4900:
-      return new Provider.DisconnectedError();
+      return new Provider.DisconnectedError()
     case 4901:
-      return new Provider.ChainDisconnectedError();
+      return new Provider.ChainDisconnectedError()
     default:
       return new Provider.ProviderRpcError(
         code,
-        details ?? "Unknown provider RPC error",
-      );
+        details ?? 'Unknown provider RPC error',
+      )
   }
 }
 
@@ -37,63 +46,114 @@ export const provider: Provider.Provider = Provider.from({
   ...emitter,
   async request(args) {
     // @ts-expect-error
-    const request = store.prepare(args);
+    const request = store.prepare(args)
 
     try {
       const response = await frameHost
         .ethProviderRequestV2(request)
-        .then((res) => RpcResponse.parse(res, { request, raw: true }));
+        .then((res) => RpcResponse.parse(res, { request, raw: true }))
 
       if (response.error) {
-        throw toProviderRpcError(response.error);
+        throw toProviderRpcError(response.error)
       }
 
-      return response.result;
+      return response.result
     } catch (e) {
       // ethProviderRequestV2 not supported, fall back to v1
       if (
         e instanceof Error &&
         e.message.match(/cannot read property 'apply'/i)
       ) {
-        return await frameHost.ethProviderRequest(request);
+        return await frameHost.ethProviderRequest(request)
       }
 
       if (
         e instanceof Provider.ProviderRpcError ||
         e instanceof RpcResponse.BaseError
       ) {
-        throw e;
+        throw e
       }
 
       throw new RpcResponse.InternalError({
         message: e instanceof Error ? e.message : undefined,
-      });
+      })
     }
   },
-});
+})
+
+function announceProvider(
+  detail: AnnounceProviderParameters,
+): AnnounceProviderReturnType {
+  const event: CustomEvent<EIP6963ProviderDetail> = new CustomEvent(
+    'eip6963:announceProvider',
+    { detail: Object.freeze(detail) },
+  )
+
+  window.dispatchEvent(event)
+
+  const handler = () => window.dispatchEvent(event)
+  window.addEventListener('eip6963:requestProvider', handler)
+  return () => window.removeEventListener('eip6963:requestProvider', handler)
+}
 
 // Required to pass SSR
-if (typeof document !== "undefined") {
+if (typeof document !== 'undefined') {
+  // forward eip6963:requestProvider events to the host
+  document.addEventListener('eip6963:requestProvider', () => {
+    frameHost.eip6963RequestProvider()
+  })
+
   // react native webview events
-  document.addEventListener("FarcasterFrameEthProviderEvent", (event) => {
+  document.addEventListener('FarcasterFrameEthProviderEvent', (event) => {
     if (event instanceof MessageEvent) {
-      const ethProviderEvent = event.data as EthProviderWireEvent;
+      const ethProviderEvent = event.data as EthProviderWireEvent
       // @ts-expect-error
-      emitter.emit(ethProviderEvent.event, ...ethProviderEvent.params);
+      emitter.emit(ethProviderEvent.event, ...ethProviderEvent.params)
     }
-  });
+  })
+
+  document.addEventListener('FarcasterFrameEvent', (event) => {
+    if (event instanceof MessageEvent) {
+      const frameEvent = event.data as FrameClientEvent
+      if (frameEvent.event === 'eip6963:announceProvider') {
+        announceProvider({
+          info: frameEvent.info,
+          provider: provider as EIP1193Provider,
+        })
+      }
+    }
+  })
 }
 
 // Required to pass SSR
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined') {
+  // forward eip6963:requestProvider events to the host
+  window.addEventListener('eip6963:requestProvider', () => {
+    frameHost.eip6963RequestProvider()
+  })
+
   // web events
-  window.addEventListener("message", (event) => {
+  window.addEventListener('message', (event) => {
     if (event instanceof MessageEvent) {
-      if (event.data.type === "frameEthProviderEvent") {
-        const ethProviderEvent = event.data as EthProviderWireEvent;
+      if (event.data.type === 'frameEthProviderEvent') {
+        const ethProviderEvent = event.data as EthProviderWireEvent
         // @ts-expect-error
-        emitter.emit(ethProviderEvent.event, ...ethProviderEvent.params);
+        emitter.emit(ethProviderEvent.event, ...ethProviderEvent.params)
+      }
+    }
+  })
+
+  window.addEventListener('message', (event) => {
+    if (event instanceof MessageEvent) {
+      if (event.data.type === 'frameEvent') {
+        const frameEvent = event.data.event as FrameClientEvent
+        if (frameEvent.event === 'eip6963:announceProvider') {
+          announceProvider({
+            info: frameEvent.info,
+            provider: provider as EIP1193Provider,
+          })
+        }
       }
     }
-  });
+  })
 }

package/src/sdk.ts

@@ -1,21 +1,21 @@
-import { EventEmitter } from "eventemitter3";
-import { FrameSDK, Emitter, EventMap } from "./types";
-import { frameHost } from "./frameHost";
-import { provider } from "./provider";
-import { FrameClientEvent, SignIn } from "@farcaster/frame-core";
+import { AddFrame, type FrameClientEvent, SignIn } from '@farcaster/frame-core'
+import { EventEmitter } from 'eventemitter3'
+import { frameHost } from './frameHost'
+import { provider } from './provider'
+import type { Emitter, EventMap, FrameSDK } from './types'
 
 export function createEmitter(): Emitter {
-  const emitter = new EventEmitter<EventMap>();
+  const emitter = new EventEmitter<EventMap>()
 
   return {
     get eventNames() {
-      return emitter.eventNames.bind(emitter);
+      return emitter.eventNames.bind(emitter)
     },
     get listenerCount() {
-      return emitter.listenerCount.bind(emitter);
+      return emitter.listenerCount.bind(emitter)
     },
     get listeners() {
-      return emitter.listeners.bind(emitter);
+      return emitter.listeners.bind(emitter)
     },
     addListener: emitter.addListener.bind(emitter),
     emit: emitter.emit.bind(emitter),
@@ -24,10 +24,10 @@ export function createEmitter(): Emitter {
     once: emitter.once.bind(emitter),
     removeAllListeners: emitter.removeAllListeners.bind(emitter),
     removeListener: emitter.removeListener.bind(emitter),
-  };
+  }
 }
 
-const emitter = createEmitter();
+const emitter = createEmitter()
 
 export const sdk: FrameSDK = {
   ...emitter,
@@ -37,80 +37,94 @@ export const sdk: FrameSDK = {
     ready: frameHost.ready.bind(frameHost),
     close: frameHost.close.bind(frameHost),
     signIn: async (options) => {
-      const response = await frameHost.signIn(options);
-      console.log(response);
+      const response = await frameHost.signIn(options)
       if (response.result) {
-        return response.result;
+        return response.result
       }
 
-      if (response.error.type === "rejected_by_user") {
-        throw new SignIn.RejectedByUser();
+      if (response.error.type === 'rejected_by_user') {
+        throw new SignIn.RejectedByUser()
       }
 
-      throw new Error("Unreachable");
+      throw new Error('Unreachable')
     },
     openUrl: (url: string) => {
-      return frameHost.openUrl(url.trim());
+      return frameHost.openUrl(url.trim())
+    },
+    addFrame: async () => {
+      const response = await frameHost.addFrame()
+      if (response.result) {
+        return response.result
+      }
+
+      if (response.error.type === 'invalid_domain_manifest') {
+        throw new AddFrame.InvalidDomainManifest()
+      }
+
+      if (response.error.type === 'rejected_by_user') {
+        throw new AddFrame.RejectedByUser()
+      }
+
+      throw new Error('Unreachable')
     },
-    addFrame: frameHost.addFrame.bind(frameHost),
   },
   wallet: {
     ethProvider: provider,
   },
-};
+}
 
 // Required to pass SSR
-if (typeof document !== "undefined") {
+if (typeof document !== 'undefined') {
   // react native webview events
-  document.addEventListener("FarcasterFrameEvent", (event) => {
+  document.addEventListener('FarcasterFrameEvent', (event) => {
     if (event instanceof MessageEvent) {
-      const frameEvent = event.data as FrameClientEvent;
-      if (frameEvent.event === "primary_button_clicked") {
-        emitter.emit("primaryButtonClicked");
-      } else if (frameEvent.event === "frame_added") {
-        emitter.emit("frameAdded", {
+      const frameEvent = event.data as FrameClientEvent
+      if (frameEvent.event === 'primary_button_clicked') {
+        emitter.emit('primaryButtonClicked')
+      } else if (frameEvent.event === 'frame_added') {
+        emitter.emit('frameAdded', {
           notificationDetails: frameEvent.notificationDetails,
-        });
-      } else if (frameEvent.event === "frame_add_rejected") {
-        emitter.emit("frameAddRejected", { reason: frameEvent.reason });
-      } else if (frameEvent.event === "frame_removed") {
-        emitter.emit("frameRemoved");
-      } else if (frameEvent.event === "notifications_enabled") {
-        emitter.emit("notificationsEnabled", {
+        })
+      } else if (frameEvent.event === 'frame_add_rejected') {
+        emitter.emit('frameAddRejected', { reason: frameEvent.reason })
+      } else if (frameEvent.event === 'frame_removed') {
+        emitter.emit('frameRemoved')
+      } else if (frameEvent.event === 'notifications_enabled') {
+        emitter.emit('notificationsEnabled', {
           notificationDetails: frameEvent.notificationDetails,
-        });
-      } else if (frameEvent.event === "notifications_disabled") {
-        emitter.emit("notificationsDisabled");
+        })
+      } else if (frameEvent.event === 'notifications_disabled') {
+        emitter.emit('notificationsDisabled')
       }
     }
-  });
+  })
 }
 
 // Required to pass SSR
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined') {
   // web events
-  window.addEventListener("message", (event) => {
+  window.addEventListener('message', (event) => {
     if (event instanceof MessageEvent) {
-      if (event.data.type === "frameEvent") {
-        const frameEvent = event.data.event as FrameClientEvent;
-        if (frameEvent.event === "primary_button_clicked") {
-          emitter.emit("primaryButtonClicked");
-        } else if (frameEvent.event === "frame_added") {
-          emitter.emit("frameAdded", {
+      if (event.data.type === 'frameEvent') {
+        const frameEvent = event.data.event as FrameClientEvent
+        if (frameEvent.event === 'primary_button_clicked') {
+          emitter.emit('primaryButtonClicked')
+        } else if (frameEvent.event === 'frame_added') {
+          emitter.emit('frameAdded', {
             notificationDetails: frameEvent.notificationDetails,
-          });
-        } else if (frameEvent.event === "frame_add_rejected") {
-          emitter.emit("frameAddRejected", { reason: frameEvent.reason });
-        } else if (frameEvent.event === "frame_removed") {
-          emitter.emit("frameRemoved");
-        } else if (frameEvent.event === "notifications_enabled") {
-          emitter.emit("notificationsEnabled", {
+          })
+        } else if (frameEvent.event === 'frame_add_rejected') {
+          emitter.emit('frameAddRejected', { reason: frameEvent.reason })
+        } else if (frameEvent.event === 'frame_removed') {
+          emitter.emit('frameRemoved')
+        } else if (frameEvent.event === 'notifications_enabled') {
+          emitter.emit('notificationsEnabled', {
             notificationDetails: frameEvent.notificationDetails,
-          });
-        } else if (frameEvent.event === "notifications_disabled") {
-          emitter.emit("notificationsDisabled");
+          })
+        } else if (frameEvent.event === 'notifications_disabled') {
+          emitter.emit('notificationsDisabled')
         }
       }
     }
-  });
+  })
 }

package/src/types.ts

@@ -1,64 +1,61 @@
-import type { EventEmitter } from "eventemitter3";
-import type { Provider } from "ox";
 import type {
-  FrameContext,
   AddFrame,
+  FrameContext,
+  FrameNotificationDetails,
   ReadyOptions,
+  SetPrimaryButtonOptions,
   SignIn,
-  FrameNotificationDetails,
-  AddFrameRejectedReason,
-} from "@farcaster/frame-core";
+} from '@farcaster/frame-core'
+import type { EventEmitter } from 'eventemitter3'
+import type { Provider } from 'ox'
 
 declare global {
   interface Window {
     // Exposed by react-native-webview
     ReactNativeWebView: {
-      postMessage: (message: string) => void;
-    };
+      postMessage: (message: string) => void
+    }
   }
 }
 
 /** Combines members of an intersection into a readable type. */
 // https://twitter.com/mattpocockuk/status/1622730173446557697?s=20&t=v01xkqU3KO0Mg
-export type Compute<type> = { [key in keyof type]: type[key] } & unknown;
+type Compute<type> = { [key in keyof type]: type[key] } & unknown
 
 export type EventMap = {
-  primaryButtonClicked: () => void;
+  primaryButtonClicked: () => void
   frameAdded: ({
     notificationDetails,
   }: {
-    notificationDetails?: FrameNotificationDetails;
-  }) => void;
-  frameAddRejected: ({ reason }: { reason: AddFrameRejectedReason }) => void;
-  frameRemoved: () => void;
+    notificationDetails?: FrameNotificationDetails
+  }) => void
+  frameAddRejected: ({
+    reason,
+  }: { reason: AddFrame.AddFrameRejectedReason }) => void
+  frameRemoved: () => void
   notificationsEnabled: ({
     notificationDetails,
   }: {
-    notificationDetails: FrameNotificationDetails;
-  }) => void;
-  notificationsDisabled: () => void;
-};
+    notificationDetails: FrameNotificationDetails
+  }) => void
+  notificationsDisabled: () => void
+}
 
-export type Emitter = Compute<EventEmitter<EventMap>>;
+export type Emitter = Compute<EventEmitter<EventMap>>
 
-export type SetPrimaryButton = (options: {
-  text: string;
-  loading?: boolean;
-  disabled?: boolean;
-  hidden?: boolean;
-}) => Promise<void>;
+type SetPrimaryButton = (options: SetPrimaryButtonOptions) => Promise<void>
 
 export type FrameSDK = {
-  context: Promise<FrameContext>;
+  context: Promise<FrameContext>
   actions: {
-    ready: (options?: Partial<ReadyOptions>) => Promise<void>;
-    openUrl: (url: string) => Promise<void>;
-    signIn: SignIn.SignIn;
-    close: () => Promise<void>;
-    setPrimaryButton: SetPrimaryButton;
-    addFrame: AddFrame;
-  };
+    ready: (options?: Partial<ReadyOptions>) => Promise<void>
+    openUrl: (url: string) => Promise<void>
+    signIn: SignIn.SignIn
+    close: () => Promise<void>
+    setPrimaryButton: SetPrimaryButton
+    addFrame: AddFrame.AddFrame
+  }
   wallet: {
-    ethProvider: Provider.Provider;
-  };
-} & Emitter;
+    ethProvider: Provider.Provider
+  }
+} & Emitter