feat: framegear supports mock following option (#233)

coinbase · Mar 7, 2024 · 924150a · 924150a
1 parent 1b17de1
commit 924150a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 15 deletions.
diff --git a/framegear/components/Frame/Frame.tsx b/framegear/components/Frame/Frame.tsx
@@ -1,5 +1,5 @@
 import { postFrame } from '@/utils/postFrame';
-import { frameResultsAtom } from '@/utils/store';
+import { frameResultsAtom, mockFrameOptionsAtom } from '@/utils/store';
 import { useAtom } from 'jotai';
 import { ChangeEvent, PropsWithChildren, useCallback, useMemo, useState } from 'react';
 import { ExternalLinkIcon, ResetIcon, RocketIcon } from '@radix-ui/react-icons';
@@ -62,6 +62,7 @@ function ValidFrame({ metadata }: { metadata: FrameMetadataWithImageObject }) {
           )}
         </div>
       </div>
+      <MockFrameOptions />
     </div>
   );
 }
@@ -102,26 +103,30 @@ function FrameButton({
   const { openModal } = useRedirectModal();
   const [isLoading, setIsLoading] = useState(false);
   const [_, setResults] = useAtom(frameResultsAtom);
+  const [mockFrameOptions] = useAtom(mockFrameOptionsAtom);
 
   const handleClick = useCallback(async () => {
     if (button?.action === 'post' || button?.action === 'post_redirect') {
       // TODO: collect user options (follow, like, etc.) and include
       const confirmAction = async () => {
-        const result = await postFrame({
-          buttonIndex: index,
-          url: button.target!,
-          state: JSON.stringify(state),
-          // TODO: make these user-input-driven
-          castId: {
+        const result = await postFrame(
+          {
+            buttonIndex: index,
+            url: button.target!,
+            state: JSON.stringify(state),
+            // TODO: make these user-input-driven
+            castId: {
+              fid: 0,
+              hash: '0xthisisnotreal',
+            },
+            inputText,
             fid: 0,
-            hash: '0xthisisnotreal',
+            messageHash: '0xthisisnotreal',
+            network: 0,
+            timestamp: 0,
           },
-          inputText,
-          fid: 0,
-          messageHash: '0xthisisnotreal',
-          network: 0,
-          timestamp: 0,
-        });
+          mockFrameOptions,
+        );
         // TODO: handle when result is not defined
         if (result) {
           setResults((prev) => [...prev, result]);
@@ -140,7 +145,16 @@ function FrameButton({
       openModal(onConfirm);
     }
     // TODO: implement other actions (mint, etc.)
-  }, [button, index, inputText, openModal, setResults, state]);
+  }, [
+    button?.action,
+    button?.target,
+    index,
+    inputText,
+    mockFrameOptions,
+    openModal,
+    setResults,
+    state,
+  ]);
 
   const buttonIcon = useMemo(() => {
     switch (button?.action) {
@@ -169,3 +183,18 @@ function FrameButton({
     </button>
   );
 }
+
+function MockFrameOptions() {
+  const [mockFrameOptions, setMockFrameOptions] = useAtom(mockFrameOptionsAtom);
+  const toggleFollowing = useCallback(() => {
+    setMockFrameOptions((prev) => ({ ...prev, following: !prev.following }));
+  }, [setMockFrameOptions]);
+  return (
+    <fieldset>
+      <label>
+        Following{' '}
+        <input onClick={toggleFollowing} type="checkbox" checked={!!mockFrameOptions.following} />
+      </label>
+    </fieldset>
+  );
+}
diff --git a/framegear/utils/store.ts b/framegear/utils/store.ts
@@ -1,6 +1,9 @@
 import { atom } from 'jotai';
 import { fetchFrame } from './fetchFrame';
+import { MockFrameRequestOptions } from '@coinbase/onchainkit';
 
 // We store an array here so that we can step through history, e.g. seeing the
 // chain of responses through a number of frame actions.
 export const frameResultsAtom = atom<Awaited<ReturnType<typeof fetchFrame>>[]>([]);
+
+export const mockFrameOptionsAtom = atom<MockFrameRequestOptions>({});