feat: update dependencies, add new methods

Author: michalkvasnicak

packages/debugger/app/components/frame-app-debugger.tsx

@@ -23,6 +23,8 @@ import type {
   FramePrimaryButton,
   ResolveClientFunction,
 } from "@frames.js/render/frame-app/types";
+import { useConfig } from "wagmi";
+import type { EIP6963ProviderInfo } from "@farcaster/frame-sdk";
 
 type TabValues = "events" | "console" | "notifications";
 
@@ -52,6 +54,7 @@ export function FrameAppDebugger({
   farcasterSigner,
   onClose,
 }: FrameAppDebuggerProps) {
+  const config = useConfig();
   const farcasterSignerRef = useRef(farcasterSigner);
   farcasterSignerRef.current = farcasterSigner;
   const frameAppNotificationManager = useFrameAppNotificationsManager({
@@ -122,6 +125,7 @@ export function FrameAppDebugger({
           }
         : {
             type: "cast_embed",
+            embed: "",
             cast: fallbackFrameContext.castId,
           },
     farcasterSigner,
@@ -233,6 +237,18 @@ export function FrameAppDebugger({
         throw e;
       }
     },
+    onEIP6963RequestProviderRequested({ endpoint }) {
+      if (!config._internal.mipd) {
+        return;
+      }
+
+      config._internal.mipd.getProviders().map((providerInfo) => {
+        endpoint.emit({
+          event: "eip6963:announceProvider",
+          info: providerInfo.info as EIP6963ProviderInfo,
+        });
+      });
+    },
   });
 
   return (

packages/debugger/package.json

@@ -18,14 +18,14 @@
   "dependencies": {
     "@upstash/redis": "^1.34.3",
     "@lens-protocol/client": "^2.3.2",
-    "@farcaster/frame-sdk": "^0.0.20",
+    "@farcaster/frame-sdk": "^0.0.26",
     "@xmtp/xmtp-js": "^12.0.0",
     "is-port-reachable": "^4.0.0",
     "next": "14.1.4",
     "open": "^10.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "zod": "^3.23.8",
+    "zod": "^3.24.1",
     "yargs": "^17.7.2"
   },
   "engines": {

packages/frames.js/package.json

@@ -419,13 +419,13 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@farcaster/frame-core": "^0.0.19",
-    "@farcaster/frame-node": "^0.0.8",
+    "@farcaster/frame-core": "^0.0.24",
+    "@farcaster/frame-node": "^0.0.13",
     "@vercel/og": "^0.6.3",
     "cheerio": "^1.0.0-rc.12",
     "protobufjs": "^7.2.6",
     "viem": "^2.7.8",
     "type-fest": "^4.28.1",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   }
 }

packages/render/package.json

@@ -336,7 +336,7 @@
     "src"
   ],
   "devDependencies": {
-    "@farcaster/frame-host-react-native": "^0.0.14",
+    "@farcaster/frame-host-react-native": "^0.0.19",
     "@lens-protocol/client": "^2.3.2",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@remix-run/node": "^2.8.1",
@@ -352,7 +352,7 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@farcaster/frame-host-react-native": "^0.0.14",
+    "@farcaster/frame-host-react-native": "^0.0.19",
     "@lens-protocol/client": "^2.0.0",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@types/react": "^18.2.0",
@@ -368,10 +368,10 @@
   },
   "dependencies": {
     "@farcaster/core": "^0.15.6",
-    "@farcaster/frame-host": "^0.0.19",
+    "@farcaster/frame-host": "^0.0.24",
     "@noble/ed25519": "^2.0.0",
     "frames.js": "^0.21.0",
-    "ox": "^0.4.0",
-    "zod": "^3.23.8"
+    "ox": "^0.4.4",
+    "zod": "^3.24.1"
   }
 }

packages/render/src/frame-app/types.ts

@@ -1,14 +1,15 @@
-import type { HostEndpoint } from "@farcaster/frame-host";
 import type {
-  AddFrameResult,
-  FrameContext,
-  SetPrimaryButton,
-} from "@farcaster/frame-sdk";
+  HostEndpoint,
+  Context,
+  SetPrimaryButtonOptions,
+  AddFrame,
+  FrameHost,
+} from "@farcaster/frame-host";
 import type { ParseFramesV2ResultWithFrameworkDetails } from "frames.js/frame-parsers";
 import type { Provider } from "ox/Provider";
 import type { Default as DefaultRpcSchema, ExtractRequest } from "ox/RpcSchema";
 
-export type FrameClientConfig = FrameContext["client"];
+export type FrameClientConfig = Context.ClientContext;
 
 export type SendTransactionRpcRequest = ExtractRequest<
   DefaultRpcSchema,
@@ -62,16 +63,32 @@ export type SharedEthProviderEventHandlers = {
   onSignTypedDataRequest: OnSignTypedDataRequestFunction;
 };
 
-export type FramePrimaryButton = Parameters<SetPrimaryButton>[0];
+export type FramePrimaryButton = SetPrimaryButtonOptions;
 
 export type OnPrimaryButtonSetFunction = (
   options: FramePrimaryButton,
   pressedCallback: () => void
 ) => void;
 
+/**
+ * Returns false if user rejected the request, otherwise it returns the notification details
+ */
 export type OnAddFrameRequestedFunction = (
   frame: ParseFramesV2ResultWithFrameworkDetails
-) => Promise<false | Extract<AddFrameResult, { added: true }>>;
+) => Promise<false | Required<AddFrame.AddFrameResult>>;
+
+export type OnEIP6963RequestProviderRequestedFunctionOptions = {
+  endpoint: HostEndpoint;
+};
+
+/**
+ * Function that must emit eip6963:announceProvider event on endpoint to announce available providers
+ */
+export type OnEIP6963RequestProviderRequestedFunction = (
+  options: OnEIP6963RequestProviderRequestedFunctionOptions
+) => unknown;
+
+export type OnViewProfileFunction = FrameHost["viewProfile"];
 
 /**
  * Function called when the frame app is being loaded and we need to resolve the client that renders the frame app

packages/render/src/use-frame-app.ts

@@ -1,10 +1,6 @@
-import type {
-  FrameHost,
-  FrameLocationContext,
-  FrameLocationContextLauncher,
-} from "@farcaster/frame-sdk";
 import type { ParseFramesV2ResultWithFrameworkDetails } from "frames.js/frame-parsers";
-import type { HostEndpoint } from "@farcaster/frame-host";
+import type { FrameHost, HostEndpoint, Context } from "@farcaster/frame-host";
+import { AddFrame } from "@farcaster/frame-host";
 import { useMemo } from "react";
 import { useFreshRef } from "./hooks/use-fresh-ref";
 import type { FarcasterSignerState } from "./farcaster";
@@ -14,10 +10,12 @@ import type {
   FrameClientConfig,
   HostEndpointEmitter,
   OnAddFrameRequestedFunction,
+  OnEIP6963RequestProviderRequestedFunction,
   OnPrimaryButtonSetFunction,
   OnSendTransactionRequestFunction,
   OnSignMessageRequestFunction,
   OnSignTypedDataRequestFunction,
+  OnViewProfileFunction,
   ResolveClientFunction,
 } from "./frame-app/types";
 import { assertNever } from "./assert-never";
@@ -69,6 +67,25 @@ const defaultOnSignTypedDataRequest: OnSignTypedDataRequestFunction = () => {
   return Promise.resolve(true);
 };
 
+const defaultViewProfile: OnViewProfileFunction = () => {
+  // eslint-disable-next-line no-console -- provide feedback to the developer
+  console.warn(
+    "@frames.js/render/use-frame-app",
+    "onViewProfile not implemented"
+  );
+
+  return Promise.reject(new Error("onViewProfile not implemented"));
+};
+
+const defaultEIP6963RequestProviderRequested: OnEIP6963RequestProviderRequestedFunction =
+  () => {
+    // eslint-disable-next-line no-console -- provide feedback to the developer
+    console.warn(
+      "@frames.js/render/use-frame-app",
+      "onEIP6963RequestProviderRequested not implemented"
+    );
+  };
+
 export type UseFrameAppOptions = {
   /**
    * @example
@@ -100,7 +117,7 @@ export type UseFrameAppOptions = {
    *
    * @defaultValue launcher context
    */
-  location?: FrameLocationContext;
+  location?: Context.LocationContext;
   /**
    * Either:
    *
@@ -164,6 +181,16 @@ export type UseFrameAppOptions = {
    * If the method has been called during the session more than once it immediatelly rejects
    */
   onAddFrameRequested?: OnAddFrameRequestedFunction;
+  /**
+   * Called when app calls `viewProfile` method.
+   */
+  onViewProfile?: OnViewProfileFunction;
+  /**
+   * Called when app calls `eip6963RequestProvider` method.
+   *
+   * It will announce the provider to the frame app once this function returns the info
+   */
+  onEIP6963RequestProviderRequested?: OnEIP6963RequestProviderRequestedFunction;
   /**
    * Enabled debugging
    *
@@ -201,7 +228,7 @@ export type UseFrameAppReturn =
       status: "error";
     };
 
-const defaultLocation: FrameLocationContextLauncher = {
+const defaultLocation: Context.LauncherLocationContext = {
   type: "launcher",
 };
 
@@ -226,6 +253,8 @@ export function useFrameApp({
   onSendTransactionRequest = defaultOnSendTransactionRequest,
   onSignMessageRequest = defaultOnSignMessageRequest,
   onSignTypedDataRequest = defaultOnSignTypedDataRequest,
+  onViewProfile = defaultViewProfile,
+  onEIP6963RequestProviderRequested = defaultEIP6963RequestProviderRequested,
 }: UseFrameAppOptions): UseFrameAppReturn {
   const providerRef = useFreshRef(provider);
   const debugRef = useFreshRef(debug);
@@ -234,6 +263,10 @@ export function useFrameApp({
   const closeRef = useFreshRef(onClose);
   const onOpenUrlRef = useFreshRef(onOpenUrl);
   const onPrimaryButtonSetRef = useFreshRef(onPrimaryButtonSet);
+  const onViewProfileRef = useFreshRef(onViewProfile);
+  const onEIP6963RequestProviderRequestedRef = useFreshRef(
+    onEIP6963RequestProviderRequested
+  );
   const farcasterSignerRef = useFreshRef(farcasterSigner);
   const onAddFrameRequestedRef = useFreshRef(onAddFrameRequested);
   const addFrameRequestsCacheRef = useFreshRef(addFrameRequestsCache);
@@ -307,10 +340,7 @@ export function useFrameApp({
                   reason: "invalid_domain_manifest",
                 });
 
-                return {
-                  added: false,
-                  reason: "invalid_domain_manifest",
-                };
+                throw new AddFrame.InvalidDomainManifest();
               }
 
               if (
@@ -325,40 +355,34 @@ export function useFrameApp({
                   reason: "rejected_by_user",
                 });
 
-                return {
-                  added: false,
-                  reason: "rejected_by_user",
-                };
+                throw new AddFrame.RejectedByUser();
               }
 
-              const added = await onAddFrameRequestedRef.current(frame);
+              const result = await onAddFrameRequestedRef.current(frame);
 
-              logDebug("onAddFrameRequested() called", added);
+              logDebug("onAddFrameRequested() called", result);
 
               addFrameRequestsCacheRef.current.add(
                 frame.frame.button.action.url
               );
 
-              if (!added) {
+              if (!result) {
                 logDebug("Frame add request rejected by user");
 
                 endpoint.emit({
                   event: "frame_add_rejected",
                   reason: "rejected_by_user",
                 });
 
-                return {
-                  added: false,
-                  reason: "rejected_by_user",
-                };
+                throw new AddFrame.RejectedByUser();
               }
 
               endpoint.emit({
                 event: "frame_added",
-                notificationDetails: added.notificationDetails,
+                notificationDetails: result.notificationDetails,
               });
 
-              return added;
+              return result;
             },
             close() {
               logDebug("sdk.close() called");
@@ -373,6 +397,9 @@ export function useFrameApp({
               // @ts-expect-error -- type mismatch
               return providerRef.current.request(parameters);
             },
+            eip6963RequestProvider() {
+              onEIP6963RequestProviderRequestedRef.current({ endpoint });
+            },
             openUrl(url) {
               logDebug("sdk.openUrl() called", url);
 
@@ -398,6 +425,9 @@ export function useFrameApp({
               // @todo implement
               throw new Error("not implemented");
             },
+            viewProfile(options) {
+              return onViewProfileRef.current(options);
+            },
           }),
           status: "success",
           frame: frameResolutionState.frame,
@@ -431,5 +461,7 @@ export function useFrameApp({
     onOpenUrlRef,
     readyRef,
     onPrimaryButtonSetRef,
+    onViewProfileRef,
+    onEIP6963RequestProviderRequestedRef,
   ]);
 }