chore: add alert on unsupported signer state

Author: michalkvasnicak

packages/debugger/app/components/frame-app-notifications-control-panel.tsx

@@ -8,6 +8,7 @@ import {
   InfoIcon,
   Loader2Icon,
   RefreshCwIcon,
+  ShieldAlertIcon,
 } from "lucide-react";
 import { useFrameAppNotificationsManagerContext } from "../providers/FrameAppNotificationsManagerProvider";
 import { useCallback, useState } from "react";
@@ -94,7 +95,7 @@ export function FrameAppNotificationsControlPanel({
   );
 
   return (
-    <div className="flex flex-col gap-2 w-full border rounded-lg p-2">
+    <div className="flex flex-col gap-4 w-full border rounded-lg p-2">
       <h3 className="font-semibold">
         Client settings
         <WithTooltip tooltip="Reload settings">
@@ -114,6 +115,17 @@ export function FrameAppNotificationsControlPanel({
           </Button>
         </WithTooltip>
       </h3>
+      {!window.location.origin.match(/^https?:\/\/(localhost|127.0.0.1)/) && (
+        <Alert variant="destructive">
+          <ShieldAlertIcon className="h-[1em] w-[1em]"></ShieldAlertIcon>
+          <AlertTitle>Be careful!</AlertTitle>
+          <AlertDescription>
+            At the moment we&apos;re sending your signer private key to the
+            backend to sign event payload sent to webhook. We aren&apos;t
+            storing your private key.
+          </AlertDescription>
+        </Alert>
+      )}
       {isAddedToClient ? (
         <>
           <div className="flex gap-2 items-center">

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

@@ -4,22 +4,19 @@ import {
   getFrameV2Flattened,
   type ParsingReport,
 } from "frames.js";
-import {
-  AlertTriangleIcon,
-  CheckCircle2Icon,
-  XCircleIcon,
-  AlertTriangle,
-} from "lucide-react";
+import { AlertTriangleIcon, CheckCircle2Icon, XCircleIcon } from "lucide-react";
 import { useMemo } from "react";
 import { ShortenedText } from "./shortened-text";
 import type { DebuggerFrameStackItem } from "../hooks/useDebuggerFrameState";
 import { cn } from "@/lib/utils";
 import type { ProtocolConfiguration } from "./protocol-config-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import type { FarcasterSigner } from "@frames.js/render/identity/farcaster";
 
 type FrameDebuggerDiagnosticsProps = {
   stackItem: DebuggerFrameStackItem;
   protocol: ProtocolConfiguration;
+  farcasterSigner: FarcasterSigner | null;
 };
 
 function isPropertyExperimental([key, value]: [string, string]) {
@@ -30,6 +27,7 @@ function isPropertyExperimental([key, value]: [string, string]) {
 export function FrameDebuggerDiagnostics({
   stackItem,
   protocol,
+  farcasterSigner,
 }: FrameDebuggerDiagnosticsProps) {
   const properties = useMemo(() => {
     /** tuple of key and value */
@@ -121,6 +119,10 @@ export function FrameDebuggerDiagnostics({
         stackItem={stackItem}
         protocol={protocol}
       />
+      <FarcasterV2DoesNotSupportImpersonatedSignersAlert
+        protocol={protocol}
+        farcasterSigner={farcasterSigner}
+      />
       <Table>
         <TableBody>
           <TableRow>
@@ -237,7 +239,7 @@ function TryDifferentFarcasterSpecificationAlert({
     ) {
       return (
         <Alert className="mb-4" variant="destructive">
-          <AlertTriangle className="h-4 w-4" />
+          <AlertTriangleIcon className="h-4 w-4" />
           <AlertTitle>Warning!</AlertTitle>
           <AlertDescription>
             This frame appears to be Farcaster v1 compatible only. Try parsing
@@ -257,7 +259,7 @@ function TryDifferentFarcasterSpecificationAlert({
   ) {
     return (
       <Alert className="mb-4" variant="destructive">
-        <AlertTriangle className="h-4 w-4" />
+        <AlertTriangleIcon className="h-4 w-4" />
         <AlertTitle>Warning!</AlertTitle>
         <AlertDescription>
           This frame appears to be Farcaster v2 compatible only. Try parsing it
@@ -269,3 +271,31 @@ function TryDifferentFarcasterSpecificationAlert({
 
   return null;
 }
+
+type FarcasterV2DoesNotSupportImpersonatedSignersAlertProps = {
+  farcasterSigner: FarcasterSigner | null;
+  protocol: ProtocolConfiguration;
+};
+
+function FarcasterV2DoesNotSupportImpersonatedSignersAlert({
+  protocol,
+  farcasterSigner: signer,
+}: FarcasterV2DoesNotSupportImpersonatedSignersAlertProps) {
+  if (protocol.protocol !== "farcaster_v2") {
+    return null;
+  }
+
+  if (signer?.status !== "impersonating") {
+    return;
+  }
+
+  return (
+    <Alert className="mb-4" variant="destructive">
+      <AlertTriangleIcon className="h-4 w-4" />
+      <AlertTitle>Unsupported farcaster signer</AlertTitle>
+      <AlertDescription>
+        Please use approved signer because impersonated signer is not supported.
+      </AlertDescription>
+    </Alert>
+  );
+}

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

@@ -470,6 +470,7 @@ export const FrameDebugger = React.forwardRef<
                   </TabsList>
                   <TabsContent className="overflow-y-auto" value="diagnostics">
                     <FrameDebuggerDiagnostics
+                      farcasterSigner={farcasterSignerState.signer}
                       stackItem={currentFrameStackItem}
                       protocol={protocol}
                     />