docs: customize image component

docs/pages/guides/apps/display-frames.mdx

@@ -101,3 +101,11 @@ pnpm dev
 ### Done! 🎉
 
 ::::
+
+## Using Next.js Image Optimization for image proxying
+
+You can use `next/image` to proxy images to preserve privacy and prevent CORS issues.
+
+```tsx
+// [!include ~/snippets/guides/apps/react-image-optimization.tsx]
+```

docs/pages/reference/render/use-frame.mdx

@@ -193,7 +193,7 @@ export default function Page() {
   const frameState = useFrame({
     // replace with your frame url
     homeframeUrl:
-      "https://fc-polls.vercel.app/polls/73c6efda-bae7-4d46-8f36-3bb3b8377448",
+      "https://framesjs.org",
     // corresponds to the name of the route for POST in step 3
     frameActionProxy: "/frames",
     // corresponds to the name of the route for GET in step 3

docs/snippets/guides/apps/react-full.tsx

@@ -5,7 +5,7 @@ import {
 } from "@frames.js/render/farcaster";
 import { useFrame } from "@frames.js/render/use-frame";
 import { fallbackFrameContext } from "@frames.js/render";
-// [!code focus:43]
+// [!code focus:64]
 import {
   FrameUI,
   type FrameUIComponents,
@@ -33,20 +33,40 @@ const components: FrameUIComponents<StylingProps> = {};
  * By default there are no styles so it is up to you to style the components as you wish.
  */
 const theme: FrameUITheme<StylingProps> = {
+  ButtonsContainer: {
+    className: "flex gap-[8px] px-2 pb-2 bg-white",
+  },
+  Button: {
+    className:
+      "border text-sm text-gray-700 rounded flex-1 bg-white border-gray-300 p-2",
+  },
   Root: {
     className:
-      "flex flex col w-full gap-2 border rounded-lg ovrflow-hidden bg-white relative",
+      "flex flex-col w-full gap-2 border rounded-lg overflow-hidden bg-white relative",
+  },
+  Error: {
+    className:
+      "flex text-red-500 text-sm p-2 bg-white border border-red-500 rounded-md shadow-md aspect-square justify-center items-center",
   },
   LoadingScreen: {
     className: "absolute top-0 left-0 right-0 bottom-0 bg-gray-300 z-10",
   },
+  Image: {
+    className: "w-full object-cover max-h-full",
+  },
   ImageContainer: {
     className:
       "relative w-full h-full border-b border-gray-300 overflow-hidden",
     style: {
-      aspectRatio: "var(--frame-image-aspect-ratio)", // helps to set the fixed loading skeleton size
+      aspectRatio: "var(--frame-image-aspect-ratio)", // fixed loading skeleton size
     },
   },
+  TextInput: {
+    className: "p-[6px] border rounded border-gray-300 box-border w-full",
+  },
+  TextInputContainer: {
+    className: "w-full px-2",
+  },
 };
 
 export default function App() {
@@ -62,29 +82,26 @@ export default function App() {
 
   const frameState = useFrame({
     // replace with frame URL
-    homeframeUrl:
-      "https://fc-polls.vercel.app/polls/73c6efda-bae7-4d46-8f36-3bb3b8377448",
+    homeframeUrl: "https://framesjs.org",
     // corresponds to the name of the route for POST and GET in step 2
     frameActionProxy: "/frames",
     frameGetProxy: "/frames",
     connectedAddress: undefined,
     frameContext: fallbackFrameContext,
     // map to your identity if you have one
     signerState: {
-      hasSigner:
-        farcasterSigner.status === "approved" ||
-        farcasterSigner.status === "impersonating",
+      hasSigner: farcasterSigner.status === "approved",
       signer: farcasterSigner,
       isLoadingSigner: false,
-      onSignerlessFramePress: () => {
+      async onSignerlessFramePress() {
         // Only run if `hasSigner` is set to `false`
         // This is a good place to throw an error or prompt the user to login
         console.log(
           "A frame button was pressed without a signer. Perhaps you want to prompt a login"
         );
       },
       signFrameAction,
-      logout() {
+      async logout() {
         // here you can add your logout logic
         console.log("logout");
       },

docs/snippets/guides/apps/react-image-optimization.tsx

@@ -0,0 +1,51 @@
+import { type FrameUIComponents } from "@frames.js/render/ui";
+import Image from "next/image";
+
+/**
+ * StylingProps is a type that defines the props that can be passed to the components to style them.
+ */
+type StylingProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+/**
+ * You can override components to change their internal logic or structure if you want.
+ * By default it is not necessary to do that since the default structure is already there
+ * so you can just pass an empty object and use theme to style the components.
+ *
+ * You can also style components here and completely ignore theme if you wish.
+ */
+const components: FrameUIComponents<StylingProps> = {
+  Image: (props, stylingProps) => {
+    if (props.status === "frame-loading") {
+      return <></>;
+    }
+
+    // Here you can add your own logic to sanitize and validate the image URL
+    let sanitizedSrc = props.src;
+
+    // Don't allow data URLs that are not images
+    if (props.src.startsWith("data:") && !props.src.startsWith("data:image")) {
+      sanitizedSrc = "";
+    }
+
+    // Don't allow SVG data URLs
+    if (props.src.startsWith("data:image/svg")) {
+      sanitizedSrc = "";
+    }
+
+    return (
+      <Image
+        {...stylingProps}
+        src={sanitizedSrc}
+        onLoad={props.onImageLoadEnd}
+        onError={props.onImageLoadEnd}
+        alt="Frame image"
+        sizes="100vw"
+        height={0}
+        width={0}
+      />
+    );
+  },
+};

docs/snippets/guides/apps/react-native-full.tsx

@@ -78,29 +78,26 @@ export default function App() {
 
   const frameState = useFrame({
     // replace with frame URL
-    homeframeUrl:
-      "https://fc-polls.vercel.app/polls/73c6efda-bae7-4d46-8f36-3bb3b8377448",
+    homeframeUrl: "https://framesjs.org",
     // corresponds to the name of the route for POST and GET in step 2
     frameActionProxy: "/frames",
     frameGetProxy: "/frames",
     connectedAddress: undefined,
     frameContext: fallbackFrameContext,
     // map to your identity if you have one
     signerState: {
-      hasSigner:
-        farcasterSigner.status === "approved" ||
-        farcasterSigner.status === "impersonating",
+      hasSigner: farcasterSigner.status === "approved",
       signer: farcasterSigner,
       isLoadingSigner: false,
-      onSignerlessFramePress: () => {
+      async onSignerlessFramePress() {
         // Only run if `hasSigner` is set to `false`
         // This is a good place to throw an error or prompt the user to login
         console.log(
           "A frame button was pressed without a signer. Perhaps you want to prompt a login"
         );
       },
       signFrameAction,
-      logout() {
+      async logout() {
         // here you can add your logout logic
         console.log("logout");
       },

docs/snippets/guides/apps/react-native-nativewind.tsx

@@ -90,29 +90,26 @@ export default function App() {
 
   const frameState = useFrame({
     // replace with frame URL
-    homeframeUrl:
-      "https://fc-polls.vercel.app/polls/73c6efda-bae7-4d46-8f36-3bb3b8377448",
+    homeframeUrl: "https://framesjs.org",
     // corresponds to the name of the route for POST and GET in step 2
     frameActionProxy: "/frames",
     frameGetProxy: "/frames",
     connectedAddress: undefined,
     frameContext: fallbackFrameContext,
     // map to your identity if you have one
     signerState: {
-      hasSigner:
-        farcasterSigner.status === "approved" ||
-        farcasterSigner.status === "impersonating",
+      hasSigner: farcasterSigner.status === "approved",
       signer: farcasterSigner,
       isLoadingSigner: false,
-      onSignerlessFramePress: () => {
+      async onSignerlessFramePress() {
         // Only run if `hasSigner` is set to `false`
         // This is a good place to throw an error or prompt the user to login
         console.log(
           "A frame button was pressed without a signer. Perhaps you want to prompt a login"
         );
       },
       signFrameAction,
-      logout() {
+      async logout() {
         // here you can add your logout logic
         console.log("logout");
       },

docs/snippets/guides/apps/react-native.tsx

@@ -20,29 +20,26 @@ export default function App() {
 
   const frameState = useFrame({
     // replace with frame URL
-    homeframeUrl:
-      "https://fc-polls.vercel.app/polls/73c6efda-bae7-4d46-8f36-3bb3b8377448",
+    homeframeUrl: "https://framesjs.org",
     // corresponds to the name of the route for POST and GET in step 2
     frameActionProxy: "/frames",
     frameGetProxy: "/frames",
     connectedAddress: undefined,
     frameContext: fallbackFrameContext,
     // map to your identity if you have one
     signerState: {
-      hasSigner:
-        farcasterSigner.status === "approved" ||
-        farcasterSigner.status === "impersonating",
+      hasSigner: farcasterSigner.status === "approved",
       signer: farcasterSigner,
       isLoadingSigner: false,
-      onSignerlessFramePress: () => {
+      async onSignerlessFramePress() {
         // Only run if `hasSigner` is set to `false`
         // This is a good place to throw an error or prompt the user to login
         console.log(
           "A frame button was pressed without a signer. Perhaps you want to prompt a login"
         );
       },
       signFrameAction,
-      logout() {
+      async logout() {
         // here you can add your logout logic
         console.log("logout");
       },

docs/snippets/guides/apps/react.tsx

@@ -21,29 +21,26 @@ export default function App() {
 
   const frameState = useFrame({
     // replace with frame URL
-    homeframeUrl:
-      "https://fc-polls.vercel.app/polls/73c6efda-bae7-4d46-8f36-3bb3b8377448",
+    homeframeUrl: "https://framesjs.org",
     // corresponds to the name of the route for POST and GET in step 2
     frameActionProxy: "/frames",
     frameGetProxy: "/frames",
     connectedAddress: undefined,
     frameContext: fallbackFrameContext,
     // map to your identity if you have one
     signerState: {
-      hasSigner:
-        farcasterSigner.status === "approved" ||
-        farcasterSigner.status === "impersonating",
+      hasSigner: farcasterSigner.status === "approved",
       signer: farcasterSigner,
       isLoadingSigner: false,
-      onSignerlessFramePress: () => {
+      async onSignerlessFramePress() {
         // Only run if `hasSigner` is set to `false`
         // This is a good place to throw an error or prompt the user to login
         console.log(
           "A frame button was pressed without a signer. Perhaps you want to prompt a login"
         );
       },
       signFrameAction,
-      logout() {
+      async logout() {
         // here you can add your logout logic
         console.log("logout");
       },