chore: add experimental mods, fix render poll

davidfurlong · davidfurlong · commit 01c40d3ad1e5 · 2023-12-07T10:23:53.000+01:00
diff --git a/examples/nextjs-shadcn/.env.example b/examples/nextjs-shadcn/.env.example
@@ -1,4 +1,5 @@
 NEXT_PUBLIC_API_URL="http://localhost:3001/api"
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=""
 NEXT_PUBLIC_URL="http://localhost:3000"
-NEXT_PUBLIC_HOST="localhost:3000"
+NEXT_PUBLIC_HOST="localhost:3000"
+NEXT_PUBLIC_EXPERIMENTAL_MODS="false"
diff --git a/examples/nextjs-shadcn/src/app/editor-example.tsx b/examples/nextjs-shadcn/src/app/editor-example.tsx
@@ -13,7 +13,11 @@ import {
 } from "@mod-protocol/farcaster";
 import { CreationMod, RichEmbed } from "@mod-protocol/react";
 import { useEditor, EditorContent } from "@mod-protocol/react-editor";
-import { creationMods, defaultRichEmbedMod } from "@mod-protocol/mod-registry";
+import {
+  creationMods,
+  creationModsExperimental,
+  defaultRichEmbedMod,
+} from "@mod-protocol/mod-registry";
 import {
   Embed,
   EthPersonalSignActionResolverInit,
@@ -201,7 +205,14 @@ export default function EditorExample() {
           }}
         >
           <PopoverTrigger></PopoverTrigger>
-          <ModsSearch mods={creationMods} onSelect={setCurrentMod} />
+          <ModsSearch
+            mods={
+              process.env.NEXT_PUBLIC_EXPERIMENTAL_MODS === "true"
+                ? creationModsExperimental
+                : creationMods
+            }
+            onSelect={setCurrentMod}
+          />
           <PopoverContent className="w-[400px] ml-2" align="start">
             <div className="space-y-4">
               <h4 className="font-medium leading-none">{currentMod?.name}</h4>
diff --git a/examples/nextjs-shadcn/src/app/embeds.tsx b/examples/nextjs-shadcn/src/app/embeds.tsx
@@ -6,7 +6,11 @@ import {
   SendEthTransactionActionResolverEvents,
   SendEthTransactionActionResolverInit,
 } from "@mod-protocol/core";
-import { richEmbedMods, defaultRichEmbedMod } from "@mod-protocol/mod-registry";
+import {
+  richEmbedMods,
+  defaultRichEmbedMod,
+  richEmbedModsExperimental,
+} from "@mod-protocol/mod-registry";
 import { RichEmbed } from "@mod-protocol/react";
 import { renderers } from "@mod-protocol/react-ui-shadcn/dist/renderers";
 import {
@@ -77,7 +81,11 @@ export function Embeds(props: { embeds: Array<Embed> }) {
           key={i}
           renderers={renderers}
           defaultRichEmbedMod={defaultRichEmbedMod}
-          mods={richEmbedMods}
+          mods={
+            process.env.NEXT_PUBLIC_EXPERIMENTAL_MODS === "true"
+              ? richEmbedModsExperimental
+              : richEmbedMods
+          }
           resolvers={{
             onSendEthTransactionAction,
           }}
diff --git a/examples/nextjs-shadcn/src/app/page.tsx b/examples/nextjs-shadcn/src/app/page.tsx
@@ -77,10 +77,10 @@ export default function Page() {
           </div>
           <div className="flex md:flex-row gap-10 flex-col container">
             <div className="flex flex-col md:w-1/2">
-              <h2 className="text-xl">Mod Editor</h2>
+              <h2 className="text-xl">Creation Mods</h2>
               <h3 className="my-2">
                 An open source library for Farcaster cast creation supporting
-                Mods
+                Mods. Try pressing the plus icon
               </h3>
               <div className="max-w-lg">
                 <EditorExample />
@@ -100,7 +100,7 @@ export default function Page() {
               </div>
             </div>
             <div className="flex flex-col md:w-1/2">
-              <h2 className="text-xl">Embed renderers</h2>
+              <h2 className="text-xl">Rich-embed Mods</h2>
               <h3 className="mb-2 mt-2">NFT Mod with native minting</h3>
               <Cast cast={dummyCastData[4]} />
               <h3 className="mb-2 mt-4">Video Mod</h3>
diff --git a/mods/infura-ipfs-upload/src/manifest.ts b/mods/infura-ipfs-upload/src/manifest.ts
@@ -6,7 +6,7 @@ import upload from "./upload";
 
 const manifest: ModManifest = {
   slug: "infura-ipfs-upload",
-  name: "Add image",
+  name: "Upload image to IPFS",
   custodyAddress: "furlong.eth",
   logo: "https://i.imgur.com/ptsz1Ig.png",
   custodyGithubUsername: "davidfurlong",
diff --git a/mods/livepeer-video/src/manifest.ts b/mods/livepeer-video/src/manifest.ts
@@ -6,7 +6,7 @@ import upload from "./upload";
 
 const manifest: ModManifest = {
   slug: "livepeer-video",
-  name: "Add video",
+  name: "Upload video",
   custodyAddress: "furlong.eth",
   logo: "https://i.imgur.com/UeuTxpI.png",
   custodyGithubUsername: "davidfurlong",
diff --git a/mods/render-poll/src/loading.ts b/mods/render-poll/src/loading.ts
@@ -1,23 +1,20 @@
 import { ModElement } from "@mod-protocol/core";
 
-const loading: ModElement[] = [
-  {
-    type: "horizontal-layout",
-    onload: {
-      ref: "pollResults",
-      type: "GET",
-      url: "{{api}}/render-poll",
-      searchParams: {
-        embedUrl: "{{embed}}",
-        fid: "{{user.farcaster.fid}}",
-        endDate:
-          "{{embed.metadata.json-ld.WebPage[0].mod:model.payload.endDate}}",
-      },
-      onsuccess: "#results",
-      onerror: "#error",
-      onloading: "#loading",
+const loading: ModElement = {
+  type: "horizontal-layout",
+  onload: {
+    ref: "pollResults",
+    type: "GET",
+    url: "{{api}}/render-poll",
+    searchParams: {
+      embedUrl: "{{embed}}",
+      fid: "{{user.farcaster.fid}}",
+      endDate:
+        "{{embed.metadata.json-ld.WebPage[0].mod:model.payload.endDate}}",
     },
+    onsuccess: "#results",
+    onerror: "#error",
   },
-];
+};
 
 export default loading;
diff --git a/mods/render-poll/src/manifest.ts b/mods/render-poll/src/manifest.ts
@@ -1,9 +1,7 @@
 import { ModManifest } from "@mod-protocol/core";
 import view from "./view";
-import loading from "./loading";
 import error from "./error";
 import results from "./results";
-import vote from "./vote";
 
 const manifest: ModManifest = {
   slug: "render-poll",
@@ -16,10 +14,7 @@ const manifest: ModManifest = {
   permissions: ["farcaster.messagereply.create", "user.farcaster.fid"],
   elements: {
     "#error": error,
-    "#view": view,
-    "#vote": vote,
     "#results": results,
-    "#loading": loading,
   },
 };
 
diff --git a/mods/render-poll/src/view.ts b/mods/render-poll/src/view.ts
@@ -1,4 +1,6 @@
 import { ModConditionalElement } from "@mod-protocol/core";
+import vote from "./vote";
+import loading from "./loading";
 
 const rendering: ModConditionalElement[] = [
   {
@@ -21,8 +23,8 @@ const rendering: ModConditionalElement[] = [
                 greaterThan: "{{date.now.iso}}",
               },
             },
-            then: "#loading",
-            else: "#vote",
+            then: loading,
+            else: vote,
           },
         ],
       },
diff --git a/mods/render-poll/src/vote.ts b/mods/render-poll/src/vote.ts
@@ -1,51 +1,81 @@
 import { ModElement } from "@mod-protocol/core";
 
-const vote: ModElement[] = [
-  {
-    type: "vertical-layout",
-    elements: [
-      {
-        type: "button",
-        onclick: {
-          ref: "choice1",
-          type: "ADDREPLY",
-          text: "1.",
-          onsuccess: "#results",
-        },
-        label: "Choice 1",
+const vote: ModElement = {
+  type: "vertical-layout",
+  elements: [
+    {
+      type: "text",
+      label: "{{embed.metadata.json-ld.WebPage[0].mod:model.payload.question}}",
+    },
+    {
+      type: "button",
+      variant: "secondary",
+      onclick: {
+        ref: "choice1",
+        type: "ADDREPLY",
+        text: "1.",
+        onsuccess: "#results",
       },
-      {
-        type: "button",
-        onclick: {
-          ref: "choice1",
-          type: "ADDREPLY",
-          text: "2.",
-          onsuccess: "#results",
+      label: "{{embed.metadata.json-ld.WebPage[0].mod:model.payload.choice1}}",
+    },
+    {
+      type: "button",
+      variant: "secondary",
+      onclick: {
+        ref: "choice2",
+        type: "ADDREPLY",
+        text: "2.",
+        onsuccess: "#results",
+      },
+      label: "{{embed.metadata.json-ld.WebPage[0].mod:model.payload.choice2}}",
+    },
+    {
+      if: {
+        value:
+          "{{embed.metadata.json-ld.WebPage[0].mod:model.payload.choice3}}",
+        match: {
+          NOT: {
+            equals: "",
+          },
         },
-        label: "Choice 2",
       },
-      {
+      then: {
         type: "button",
+        variant: "secondary",
         onclick: {
-          ref: "choice1",
+          ref: "choice3",
           type: "ADDREPLY",
           text: "3.",
           onsuccess: "#results",
         },
-        label: "Choice 3 (optional)",
+        label:
+          "{{embed.metadata.json-ld.WebPage[0].mod:model.payload.choice3}}",
+      },
+    },
+    {
+      if: {
+        value:
+          "{{embed.metadata.json-ld.WebPage[0].mod:model.payload.choice4}}",
+        match: {
+          NOT: {
+            equals: "",
+          },
+        },
       },
-      {
+      then: {
         type: "button",
+        variant: "secondary",
         onclick: {
-          ref: "choice1",
+          ref: "choice4",
           type: "ADDREPLY",
           text: "4.",
           onsuccess: "#results",
         },
-        label: "Choice 4 (optional)",
+        label:
+          "{{embed.metadata.json-ld.WebPage[0].mod:model.payload.choice4}}",
       },
-    ],
-  },
-];
+    },
+  ],
+};
 
 export default vote;
diff --git a/packages/core/src/manifest.ts b/packages/core/src/manifest.ts
@@ -218,8 +218,8 @@ export type ModElement =
   | {
       type: "progress";
       label?: string;
-      /** percentage from 0 to 100. example: 33 **/
-      value: number;
+      /** string percentage from 0 to 100. example: 33 **/
+      value: string;
     }
   | {
       type: "circular-progress";
diff --git a/packages/core/src/renderer.ts b/packages/core/src/renderer.ts
@@ -343,6 +343,8 @@ function replaceInlineContext(target: string, context: any): string {
       },
     },
   };
+  // safeguard
+  if (typeof target !== "string") return target;
   return target.replace(/{{([^{{}}]+)}}/g, (_, key) =>
     get({ ...context, ...dynamicContext }, key, ``)
   );
@@ -1262,7 +1264,7 @@ export class Renderer {
           return fn(
             {
               type: "progress",
-              value: el.value,
+              value: Number(this.replaceInlineContext(el.value)),
               label: el.label ? this.replaceInlineContext(el.label) : el.label,
             },
             key
diff --git a/packages/mod-registry/src/index.ts b/packages/mod-registry/src/index.ts
@@ -41,6 +41,8 @@ export const richEmbedMods: ModManifest[] = allMods.filter(
 
 /** All + Experimental - Potentially unstable, unsuitable for production use  */
 export const allModsExperimental = [
+  CreatePoll,
+  RenderPoll,
   ImgurUpload,
   InfuraIPFSUpload,
   LivepeerVideo,
@@ -52,8 +54,6 @@ export const allModsExperimental = [
   ChatGPTShorten,
   ChatGPT,
   DALLE,
-  CreatePoll,
-  RenderPoll,
 ];
 
 export const creationModsExperimental: ModManifest[] =
diff --git a/packages/react-ui-shadcn/src/components/creation-mods-search.tsx b/packages/react-ui-shadcn/src/components/creation-mods-search.tsx
@@ -57,7 +57,9 @@ export function ModsSearch(props: Props) {
                 className="cursor-pointer"
                 onSelect={handleSelect}
               >
-                <img height={24} width={24} alt={mod.name} src={mod.logo} />
+                <div className="bg-white rounded-full p-2">
+                  <img height={16} width={16} alt={mod.name} src={mod.logo} />
+                </div>
                 <span className="ml-2">{mod.name}</span>
               </CommandItem>
             ))}
diff --git a/packages/react-ui-shadcn/src/renderers/card.tsx b/packages/react-ui-shadcn/src/renderers/card.tsx
@@ -18,7 +18,7 @@ export const CardRenderer = (
   } = props;
   return (
     <div
-      className="flex flex-col"
+      className="flex flex-col -m-2"
       onClick={(e) => {
         // Prevent double event firing when clicking child components
         e.stopPropagation();
diff --git a/packages/react-ui-shadcn/src/renderers/combobox.tsx b/packages/react-ui-shadcn/src/renderers/combobox.tsx
@@ -31,15 +31,15 @@ export function ComboboxRenderer<T extends number | string = any>(
 
   React.useEffect(() => {
     onChange("");
-  }, []);
+  }, [onChange]);
 
   const handlePick = React.useCallback(
     (newValue: ResultType<T>) => {
       setOpen(false);
       setValue(newValue);
       onPick(newValue.value);
     },
-    [onChange, setOpen, setValue]
+    [onChange, setOpen, setValue, onPick]
   );
   return (
     <Popover open={open} onOpenChange={setOpen}>
diff --git a/packages/react-ui-shadcn/src/renderers/container.tsx b/packages/react-ui-shadcn/src/renderers/container.tsx
@@ -5,7 +5,7 @@ export const ContainerRenderer = (
   props: React.ComponentProps<Renderers["Container"]>
 ) => {
   return (
-    <div className="mt-2 rounded-md overflow-hidden border">
+    <div className="mt-2 rounded-md overflow-hidden border p-2">
       {props.children}
     </div>
   );
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -271,7 +271,7 @@ const WrappedComboboxRenderer = <T extends React.ReactNode>(props: {
 
   React.useEffect(() => {
     events.onLoad();
-  }, []);
+  }, [events]);
 
   const onPick = React.useCallback(
     (value: string) => {
diff --git a/turbo.json b/turbo.json
diff --git a/yarn.lock b/yarn.lock
