feat: frame v2 types

package.json

@@ -29,6 +29,7 @@
         "@dialectlabs/blinks": "^0.15.1",
         "@dimensiondev/holoflows-kit": "0.9.0-20240322092738-f9180f3",
         "@farcaster/core": "^0.15.6",
+        "@farcaster/frame-host": "^0.0.19",
         "@giphy/js-fetch-api": "^5.6.0",
         "@giphy/react-components": "^9.6.0",
         "@headlessui/react": "2.1.10",

src/components/Frame/V2/Card.tsx

@@ -1,18 +1,51 @@
-import { memo } from 'react';
+import type { SetPrimaryButton } from '@farcaster/frame-host';
+import { memo, useState } from 'react';
 
 import { ClickableButton } from '@/components/ClickableButton.js';
 import { Image } from '@/components/Image.js';
-import { FrameViewerModalRef } from '@/modals/controls.js';
+import { Source } from '@/constants/enum.js';
+import { getCurrentProfile } from '@/helpers/getCurrentProfile.js';
+import { FrameViewerModalRef, LoginModalRef } from '@/modals/controls.js';
+import { FarcasterFrameHost } from '@/providers/frame/Host.js';
+import type { Post } from '@/providers/types/SocialMedia.js';
 import type { FrameV2 } from '@/types/frame.js';
 
 interface CardProps {
+    post: Post;
     frame: FrameV2;
 }
 
-export const Card = memo<CardProps>(function Card({ frame }) {
+export const Card = memo<CardProps>(function Card({ post, frame }) {
+    const [primaryButton, setPrimaryButton] = useState<Parameters<SetPrimaryButton>[0] | null>(null);
+
+    const [frameHost] = useState(
+        () =>
+            new FarcasterFrameHost(frame, post, {
+                ready: (options) => {
+                    FrameViewerModalRef.open({
+                        ready: true,
+                        frame,
+                        frameHost,
+                    });
+                },
+                close: () => FrameViewerModalRef.close(),
+                setPrimaryButton,
+            }),
+    );
+
     const onClick = () => {
+        const profile = getCurrentProfile(Source.Farcaster);
+        if (!profile) {
+            LoginModalRef.open({
+                source: Source.Farcaster,
+            });
+            return;
+        }
+
         FrameViewerModalRef.open({
+            ready: false,
             frame,
+            frameHost,
         });
     };
 
@@ -26,9 +59,15 @@ export const Card = memo<CardProps>(function Card({ frame }) {
                 src={frame.imageUrl}
                 alt={frame.x_url}
             />
-            <ClickableButton className="bg-fireflyBrand px-1 py-3 font-bold text-white" onClick={onClick}>
-                {frame.button.action.name}
-            </ClickableButton>
+            {primaryButton?.hidden ? null : (
+                <ClickableButton
+                    className="bg-fireflyBrand px-1 py-3 font-bold text-white"
+                    disabled={primaryButton?.loading || primaryButton?.disabled}
+                    onClick={onClick}
+                >
+                    {primaryButton?.text ?? frame.button.action.name}
+                </ClickableButton>
+            )}
         </div>
     );
 });

src/components/Frame/V2/Layout.tsx

@@ -10,10 +10,10 @@ interface FrameLayoutProps {
     children?: ReactNode;
 }
 
-export const FrameLayout = memo<FrameLayoutProps>(function FrameLayout({ frame }) {
+export const FrameLayout = memo<FrameLayoutProps>(function FrameLayout({ post, frame }) {
     return (
         <div className="pt-2">
-            <Card frame={frame} />
+            <Card post={post} frame={frame} />
         </div>
     );
 });

src/helpers/createEIP1193Provider.ts

@@ -0,0 +1,17 @@
+import { noop } from 'lodash-es';
+import { getClient } from 'wagmi/actions';
+
+import { config } from '@/configs/wagmiClient.js';
+
+export function createEIP1193Provider() {
+    return {
+        async request<T>(parameters: unknown): Promise<T> {
+            const client = await getClient(config);
+            if (!client) throw new Error('Client not found');
+
+            return client.request(parameters as Parameters<typeof client.request>[0]);
+        },
+        on: noop,
+        removeListener: noop,
+    };
+}

src/modals/FrameViewerModal/MoreActionMenu.tsx

@@ -9,16 +9,18 @@ import { MenuGroup } from '@/components/MenuGroup.js';
 import { MoreActionMenu } from '@/components/MoreActionMenu.js';
 
 interface MoreActionProps {
+    disabled?: boolean;
     onReload?: () => void;
 }
 
-export const MoreAction = memo(function MoreAction({ onReload }: MoreActionProps) {
+export const MoreAction = memo(function MoreAction({ disabled = false, onReload }: MoreActionProps) {
     return (
         <MoreActionMenu loginRequired={false} button={<MoreIcon width={24} height={24} className="text-main" />}>
             <MenuGroup>
                 <MenuItem>
                     {({ close }) => (
                         <MenuButton
+                            disabled={disabled}
                             onClick={() => {
                                 close();
                                 onReload?.();

src/modals/FrameViewerModal/index.tsx

@@ -1,21 +1,29 @@
-import { forwardRef, useState } from 'react';
+import { exposeToIframe, type FrameHost } from '@farcaster/frame-host';
+import { delay } from '@masknet/kit';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useAsyncFn } from 'react-use';
 
+import FireflyLogo from '@/assets/firefly.logo.svg';
 import { CloseButton } from '@/components/IconButton.js';
 import { Modal } from '@/components/Modal.js';
-import { NotImplementedError } from '@/constants/error.js';
+import { IS_DEVELOPMENT } from '@/constants/index.js';
+import { createEIP1193Provider } from '@/helpers/createEIP1193Provider.js';
 import { parseUrl } from '@/helpers/parseUrl.js';
 import { useSingletonModal } from '@/hooks/useSingletonModal.js';
 import type { SingletonModalRefCreator } from '@/libs/SingletonModal.js';
 import { MoreAction } from '@/modals/FrameViewerModal/MoreActionMenu.js';
 import type { FrameV2 } from '@/types/frame.js';
 
 export type FrameViewerModalOpenProps = {
+    ready: boolean;
     frame: FrameV2;
+    frameHost: Omit<FrameHost, 'ethProviderRequestV2'>;
 };
 export type FrameViewerModalCloseProps = void;
 
 export const FrameViewerModal = forwardRef<SingletonModalRefCreator<FrameViewerModalOpenProps>>(
     function FrameViewerModal(_, ref) {
+        const frameRef = useRef<HTMLIFrameElement | null>(null);
         const [props, setProps] = useState<FrameViewerModalOpenProps | null>(null);
 
         const [open, dispatch] = useSingletonModal(ref, {
@@ -27,6 +35,38 @@ export const FrameViewerModal = forwardRef<SingletonModalRefCreator<FrameViewerM
             },
         });
 
+        useEffect(() => {
+            if (!frameRef.current) return;
+
+            // frame host is required
+            if (!props?.frameHost) return;
+
+            const result = exposeToIframe({
+                debug: IS_DEVELOPMENT,
+                iframe: frameRef.current,
+                sdk: props.frameHost,
+                ethProvider: createEIP1193Provider(),
+                frameOrigin: '*',
+            });
+
+            return () => {
+                result?.cleanup();
+            };
+        }, [props]);
+
+        const [{ loading }, onReload] = useAsyncFn(async () => {
+            if (!props) return;
+
+            const modalProps = props;
+
+            setProps(null);
+            await delay(1000);
+            setProps({
+                ...modalProps,
+                ready: false,
+            });
+        }, [props]);
+
         if (!open || !props) return null;
 
         const { frame } = props;
@@ -44,22 +84,24 @@ export const FrameViewerModal = forwardRef<SingletonModalRefCreator<FrameViewerM
                             {u ? <div className="text-faint text-xs">{u.host}</div> : null}
                         </div>
                         <div>
-                            <MoreAction
-                                onReload={() => {
-                                    throw new NotImplementedError();
-                                }}
-                            />
+                            <MoreAction disabled={loading} onReload={onReload} />
                         </div>
                     </div>
                     <iframe
                         className="scrollbar-hide h-full w-full opacity-100"
+                        ref={frameRef}
                         src={frame.button.action.url}
                         allow="clipboard-write 'src'"
                         sandbox="allow-forms allow-scripts allow-same-origin"
                         style={{
                             backgroundColor: frame.button.action.splashBackgroundColor,
                         }}
                     />
+                    {!props.ready ? (
+                        <div className="absolute inset-0 top-[60px] flex items-center justify-center bg-white dark:bg-black">
+                            <FireflyLogo width={80} height={80} />
+                        </div>
+                    ) : null}
                 </div>
             </Modal>
         );