feat: add onMissingSigner callback to useFrame_unstable hook (#538)

Author: normanzb

.changeset/chilled-spies-vanish.md

@@ -0,0 +1,5 @@
+---
+"@frames.js/render": patch
+---
+
+feat: add onMissingSigner callback to useFrame_unstable

package.json

@@ -8,7 +8,7 @@
     "dev:utils-starter": "FJS_MONOREPO=true turbo dev --filter=template-next-utils-starter... --filter=debugger...",
     "lint": "turbo lint --filter=!template-*",
     "test:ci": "jest --ci",
-    "test": "cd ./packages/frames.js && npm run test:watch",
+    "test": "cd ./packages/frames.js && yarn test:watch",
     "check:package-types": "turbo check:package-types",
     "check:package-lint": "turbo check:package-lint",
     "check:types": "turbo check:types",

packages/render/src/types.ts

@@ -43,6 +43,8 @@ export type OnSignatureFunc = (
   args: OnSignatureArgs
 ) => Promise<`0x${string}` | null>;
 
+export type OnMissingSignerFunction = () => void;
+
 type OnComposerFormActionFuncArgs = {
   form: ComposerActionFormResponse;
   cast: ComposerActionState;

packages/render/src/unstable-types.ts

@@ -26,6 +26,7 @@ import type {
   FrameGETRequest,
   FramePOSTRequest,
   FrameRequest,
+  OnMissingSignerFunction,
   OnMintArgs,
   OnSignatureFunc,
   OnTransactionFunc,
@@ -200,6 +201,8 @@ export type UseFrameOptions<
    * Only for frames v2
    */
   onLaunchFrameButtonPressed?: LaunchFrameButtonPressFunction;
+
+  onMissingSigner?: OnMissingSignerFunction;
 } & Partial<
   Pick<
     UseFetchFrameOptions,

packages/render/src/unstable-use-frame.tsx

@@ -19,7 +19,7 @@ import type {
 import { useFrameState } from "./unstable-use-frame-state";
 import { useFetchFrame } from "./unstable-use-fetch-frame";
 import { useFreshRef } from "./hooks/use-fresh-ref";
-import { tryCallAsync } from "./helpers";
+import { tryCall, tryCallAsync } from "./helpers";
 
 function onErrorFallback(e: Error): void {
   console.error("@frames.js/render", e);
@@ -192,6 +192,7 @@ export function useFrame_unstable<
   onTransactionProcessingError,
   onTransactionProcessingStart,
   onTransactionProcessingSuccess,
+  onMissingSigner,
 }: UseFrameOptions<
   TExtraDataPending,
   TExtraDataDone,
@@ -249,6 +250,7 @@ export function useFrame_unstable<
 
   const fetchFrameRef = useFreshRef(fetchFrame);
   const onErrorRef = useFreshRef(onError);
+  const onMissingSignerRef = useFreshRef(onMissingSigner);
 
   useEffect(() => {
     if (!homeframeUrl) {
@@ -318,6 +320,7 @@ export function useFrame_unstable<
       }
 
       if (!currentState.signerState.hasSigner) {
+        tryCall(() => onMissingSignerRef.current?.());
         await currentState.signerState.onSignerlessFramePress();
         return;
       }
@@ -341,7 +344,7 @@ export function useFrame_unstable<
         sourceFrame: currentFrame,
       });
     },
-    [fetchFrameRef, frameStateRef, onErrorRef]
+    [fetchFrameRef, frameStateRef, onErrorRef, onMissingSignerRef]
   );
 
   const resolveAddressRef = useFreshRef(resolveAddress);
@@ -370,6 +373,7 @@ export function useFrame_unstable<
 
       // Send post request to get calldata
       if (!currentState.signerState.hasSigner) {
+        tryCall(() => onMissingSignerRef.current?.());
         await currentState.signerState.onSignerlessFramePress();
         return;
       }
@@ -417,7 +421,7 @@ export function useFrame_unstable<
         sourceFrame: currentFrame,
       });
     },
-    [frameStateRef, fetchFrameRef, onErrorRef, resolveAddressRef]
+    [frameStateRef, fetchFrameRef, onErrorRef, onMissingSignerRef, resolveAddressRef]
   );
 
   const onLaunchFrameButtonPressRef = useFreshRef(onLaunchFrameButtonPressed);