feat: add open action embedded status to NewPublication

heyxyz · Feb 27, 2024 · 733e185 · 733e185
1 parent 654c12e
commit 733e185
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 37 deletions.
diff --git a/apps/web/src/components/Composer/LinkPreviews.tsx b/apps/web/src/components/Composer/LinkPreviews.tsx
@@ -4,7 +4,15 @@ import Oembed from '@components/Shared/Oembed';
 import getURLs from '@hey/lib/getURLs';
 import { usePublicationStore } from 'src/store/non-persisted/publication/usePublicationStore';
 
-const LinkPreviews: FC = () => {
+interface LinkPreviewProps {
+  openActionEmbed: boolean;
+  openActionEmbedLoading: boolean;
+}
+
+const LinkPreviews: FC<LinkPreviewProps> = ({
+  openActionEmbed,
+  openActionEmbedLoading
+}) => {
   const publicationContent = usePublicationStore(
     (state) => state.publicationContent
   );
@@ -15,7 +23,14 @@ const LinkPreviews: FC = () => {
     return null;
   }
 
-  return <Oembed className="m-5" url={urls[0]} />;
+  return (
+    <Oembed
+      className="m-5"
+      openActionEmbed={openActionEmbed}
+      openActionEmbedLoading={openActionEmbedLoading}
+      url={urls[0]}
+    />
+  );
 };
 
 export default LinkPreviews;
diff --git a/apps/web/src/components/Composer/NewPublication.tsx b/apps/web/src/components/Composer/NewPublication.tsx
@@ -111,6 +111,12 @@ interface NewPublicationProps {
   publication: MirrorablePublication;
 }
 
+const nftOpenActionKit = new NftOpenActionKit({
+  decentApiKey: process.env.NEXT_PUBLIC_DECENT_API_KEY || '',
+  openSeaApiKey: process.env.NEXT_PUBLIC_OPENSEA_API_KEY || '',
+  raribleApiKey: process.env.NEXT_PUBLIC_RARIBLE_API_KEY || ''
+});
+
 const NewPublication: FC<NewPublicationProps> = ({ publication }) => {
   const currentProfile = useProfileStore((state) => state.currentProfile);
   const { isSuspended } = useProfileRestriction();
@@ -205,6 +211,9 @@ const NewPublication: FC<NewPublicationProps> = ({ publication }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
   const [publicationContentError, setPublicationContentError] = useState('');
+  const [openActionEmbedLoading, setOpenActionEmbedLoading] =
+    useState<boolean>(false);
+  const [openActionEmbed, setOpenActionEmbed] = useState<any | undefined>();
 
   const [editor] = useLexicalComposerContext();
   const createPoll = useCreatePoll();
@@ -320,6 +329,35 @@ const NewPublication: FC<NewPublicationProps> = ({ publication }) => {
     setPublicationContentError('');
   }, [audioPublication]);
 
+  useEffect(() => {
+    const fetchOpenActionEmbed = async () => {
+      setOpenActionEmbedLoading(true);
+      const publicationContentUrls = getURLs(publicationContent);
+
+      try {
+        const calldata = await nftOpenActionKit.detectAndReturnCalldata(
+          publicationContentUrls[0]
+        );
+        if (calldata) {
+          setOpenActionEmbed({
+            unknownOpenAction: {
+              address: VerifiedOpenActionModules.DecentNFT,
+              data: calldata
+            }
+          });
+        } else {
+          setOpenActionEmbed(undefined);
+        }
+      } catch (error_) {
+        setOpenActionEmbed(undefined);
+        setOpenActionEmbedLoading(false);
+      }
+      setOpenActionEmbedLoading(false);
+    };
+
+    fetchOpenActionEmbed();
+  }, [publicationContent]);
+
   useEffect(() => {
     editor.update(() => {
       $convertFromMarkdownString(publicationContent);
@@ -418,35 +456,8 @@ const NewPublication: FC<NewPublicationProps> = ({ publication }) => {
       // Payload for the open action module
       const openActionModules = [];
 
-      // Flag to determine if open action module can be parsed from URL, if set Momoka will be disabled
-      let urlsWithParseableActions = false;
-
-      const publicationContentUrls = getURLs(publicationContent);
-
-      const nftOpenActionKit = new NftOpenActionKit({
-        decentApiKey: process.env.NEXT_PUBLIC_DECENT_API_KEY || '',
-        openSeaApiKey: process.env.NEXT_PUBLIC_OPENSEA_API_KEY || '',
-        raribleApiKey: process.env.NEXT_PUBLIC_RARIBLE_API_KEY || ''
-      });
-
-      // Embed action module for publications with URLs that have recognized actions
-      for (const publicationContentUrl of publicationContentUrls) {
-        try {
-          const calldata = await nftOpenActionKit.detectAndReturnCalldata(
-            publicationContentUrl
-          );
-          if (calldata) {
-            urlsWithParseableActions = true;
-            openActionModules.push({
-              unknownOpenAction: {
-                address: VerifiedOpenActionModules.DecentNFT,
-                data: calldata
-              }
-            });
-          }
-        } catch (error_) {
-          console.log(error_);
-        }
+      if (openActionEmbed) {
+        openActionModules.push(openActionEmbed);
       }
 
       if (collectModule.type) {
@@ -469,7 +480,7 @@ const NewPublication: FC<NewPublicationProps> = ({ publication }) => {
         contentURI: `ar://${arweaveId}`
       };
 
-      if (useMomoka && !urlsWithParseableActions) {
+      if (useMomoka && !openActionEmbed) {
         if (canUseLensManager) {
           if (isComment) {
             return await createCommentOnMomka(
@@ -641,7 +652,10 @@ const NewPublication: FC<NewPublicationProps> = ({ publication }) => {
           />
         </Wrapper>
       ) : null}
-      <LinkPreviews />
+      <LinkPreviews
+        openActionEmbed={!!openActionEmbed}
+        openActionEmbedLoading={openActionEmbedLoading}
+      />
       <div className="block items-center px-5 sm:flex">
         <div className="flex items-center space-x-4">
           <Attachment />

diff --git a/apps/web/src/components/Shared/Oembed/Nft/index.tsx b/apps/web/src/components/Shared/Oembed/Nft/index.tsx
@@ -9,18 +9,25 @@ import getNftChainInfo from '@hey/lib/getNftChainInfo';
 import { isMirrorPublication } from '@hey/lib/publicationHelpers';
 import stopEventPropagation from '@hey/lib/stopEventPropagation';
 import { Nft } from '@hey/types/misc';
-import { Button, Card, Tooltip } from '@hey/ui';
+import { Button, Card, Spinner, Tooltip } from '@hey/ui';
 import { Leafwatch } from '@lib/leafwatch';
 import Link from 'next/link';
 
 import MintedBy from './MintedBy';
 
 interface NftProps {
   nft: Nft;
+  openActionEmbed: boolean;
+  openActionEmbedLoading: boolean;
   publication?: AnyPublication;
 }
 
-const Nft: FC<NftProps> = ({ nft, publication }) => {
+const Nft: FC<NftProps> = ({
+  nft,
+  openActionEmbed,
+  openActionEmbedLoading,
+  publication
+}) => {
   const targetPublication =
     publication && isMirrorPublication(publication)
       ? publication.mirrorOn
@@ -77,6 +84,13 @@ const Nft: FC<NftProps> = ({ nft, publication }) => {
           >
             Mint
           </Button>
+          {openActionEmbedLoading ? (
+            <Spinner size="xs" />
+          ) : openActionEmbed === true ? (
+            <div>Open Action Embedded</div>
+          ) : (
+            <div>No Open Action Embedded</div>
+          )}
         </Link>
       </div>
     </Card>

diff --git a/apps/web/src/components/Shared/Oembed/index.tsx b/apps/web/src/components/Shared/Oembed/index.tsx
@@ -14,11 +14,19 @@ import Portal from './Portal';
 
 interface OembedProps {
   className?: string;
+  openActionEmbed: boolean;
+  openActionEmbedLoading: boolean;
   publication?: AnyPublication;
   url?: string;
 }
 
-const Oembed: FC<OembedProps> = ({ className = '', publication, url }) => {
+const Oembed: FC<OembedProps> = ({
+  className = '',
+  openActionEmbed,
+  openActionEmbedLoading,
+  publication,
+  url
+}) => {
   const { data, error, isLoading } = useQuery({
     enabled: Boolean(url),
     queryFn: async () => {
@@ -57,7 +65,12 @@ const Oembed: FC<OembedProps> = ({ className = '', publication, url }) => {
       {og.html ? (
         <Player og={og} />
       ) : og.nft ? (
-        <Nft nft={og.nft} publication={publication} />
+        <Nft
+          nft={og.nft}
+          openActionEmbed={openActionEmbed}
+          openActionEmbedLoading={openActionEmbedLoading}
+          publication={publication}
+        />
       ) : og.portal ? (
         <Portal portal={og.portal} publicationId={publication?.id} />
       ) : (