fix: adding actionData fallback for partial campaigns

heyxyz · May 15, 2024 · a5f6a34 · a5f6a34
1 parent 9a481a0
commit a5f6a34
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 43 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -51,7 +51,7 @@
     "idb-keyval": "^6.2.1",
     "next": "^14.2.3",
     "next-themes": "^0.3.0",
-    "nft-openaction-kit": "^1.0.25",
+    "nft-openaction-kit": "^1.0.27",
     "party-js": "^2.2.0",
     "plur": "^5.1.0",
     "plyr-react": "^5.3.0",

diff --git a/apps/web/src/components/Publication/OpenAction/UnknownModule/Decent/FeedEmbed.tsx b/apps/web/src/components/Publication/OpenAction/UnknownModule/Decent/FeedEmbed.tsx
@@ -4,30 +4,36 @@ import type {
   UnknownOpenActionModuleSettings
 } from '@hey/lens';
 import type { OG } from '@hey/types/misc';
-import type { ActionData, PublicationInfo } from 'nft-openaction-kit';
+import type { ActionData, PublicationInfo, UIData } from 'nft-openaction-kit';
 import type { FC } from 'react';
 
 import ActionInfo from '@components/Shared/Oembed/Nft/ActionInfo';
 import DecentOpenActionShimmer from '@components/Shared/Shimmer/DecentOpenActionShimmer';
 import getNftOpenActionKit from '@helpers/getNftOpenActionKit';
 import { Leafwatch } from '@helpers/leafwatch';
+import { CursorArrowRaysIcon } from '@heroicons/react/24/outline';
 import { ZERO_ADDRESS } from '@hey/data/constants';
 import { PUBLICATION } from '@hey/data/tracking';
 import { VerifiedOpenActionModules } from '@hey/data/verified-openaction-modules';
 import { isMirrorPublication } from '@hey/helpers/publicationHelpers';
 import sanitizeDStorageUrl from '@hey/helpers/sanitizeDStorageUrl';
 import stopEventPropagation from '@hey/helpers/stopEventPropagation';
-import { Button, Card, Image } from '@hey/ui';
+import { Button, Card, Image, Tooltip } from '@hey/ui';
 import cn from '@hey/ui/cn';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { CHAIN, HEY_REFERRAL_PROFILE_ID } from 'src/constants';
 import { useNftOaCurrencyStore } from 'src/store/persisted/useNftOaCurrencyStore';
 import { useAccount } from 'wagmi';
 
-import { openActionCTA } from '.';
+import { OPEN_ACTION_NO_EMBED_TOOLTIP, openActionCTA } from '.';
 import DecentOpenActionModule from './Module';
 
+enum ActionDataResponseType {
+  FULL = 'FULL',
+  PARTIAL = 'PARTIAL'
+}
+
 const formatPublicationData = (
   targetPublication: MirrorablePublication
 ): PublicationInfo => {
@@ -90,7 +96,23 @@ const FeedEmbed: FC<FeedEmbedProps> = ({
     (module) => module.contract.address === VerifiedOpenActionModules.DecentNFT
   );
 
-  const getActionData = async (): Promise<ActionData> => {
+  const getUiData = async () => {
+    const nftOpenActionKit = getNftOpenActionKit();
+    try {
+      const uiDataResult = await nftOpenActionKit.generateUiData({
+        contentURI: og.url
+      });
+
+      return uiDataResult;
+    } catch (error) {
+      return null;
+    }
+  };
+
+  const getActionData = async (): Promise<{
+    data: ActionData | null | UIData;
+    type: ActionDataResponseType;
+  }> => {
     const nftOpenActionKit = getNftOpenActionKit();
     const pubInfo = formatPublicationData(targetPublication);
 
@@ -120,12 +142,27 @@ const FeedEmbed: FC<FeedEmbedProps> = ({
           schema: actionData.uiData.tokenStandard || prevNft.schema
         }));
 
-        return actionData;
+        return { data: actionData, type: ActionDataResponseType.FULL };
+      })
+      .catch(async () => {
+        return await getUiData().then((uiData) => {
+          setNft((prevNft) => ({
+            ...prevNft,
+            chain: uiData?.dstChainId.toString() || prevNft.chain,
+            collectionName: uiData?.nftName || prevNft.collectionName,
+            creatorAddress: (uiData?.nftCreatorAddress ||
+              prevNft.creatorAddress) as `0x{string}`,
+            mediaUrl: sanitizeDStorageUrl(uiData?.nftUri) || prevNft.mediaUrl,
+            schema: uiData?.tokenStandard || prevNft.schema
+          }));
+
+          return { data: uiData, type: ActionDataResponseType.PARTIAL };
+        });
       });
   };
 
   const {
-    data: actionData,
+    data: actionDataResponse,
     isLoading: loadingActionData,
     refetch
   } = useQuery({
@@ -144,6 +181,9 @@ const FeedEmbed: FC<FeedEmbedProps> = ({
     ]
   });
 
+  const actionData = actionDataResponse?.data;
+  const dataType = actionDataResponse?.type;
+
   useEffect(() => {
     refetch();
   }, [selectedNftOaCurrency, address, refetch]);
@@ -178,37 +218,58 @@ const FeedEmbed: FC<FeedEmbedProps> = ({
                 actionData={actionData}
                 collectionName={nft.collectionName}
                 creatorAddress={nft.creatorAddress}
-                uiData={actionData?.uiData}
+                uiData={
+                  dataType === ActionDataResponseType.FULL
+                    ? actionData?.uiData
+                    : actionData
+                }
               />
             ) : null}
-            <Button
-              className="w-full sm:w-auto"
-              onClick={() => {
-                setShowOpenActionModal(true);
-                Leafwatch.track(PUBLICATION.OPEN_ACTIONS.DECENT.OPEN_DECENT, {
-                  publication_id: publication.id
-                });
-              }}
-              size="lg"
-            >
-              {openActionCTA(actionData.uiData.platformName)}
-            </Button>
+            {dataType === ActionDataResponseType.FULL ? (
+              <Button
+                className="w-full sm:w-auto"
+                onClick={() => {
+                  setShowOpenActionModal(true);
+                  Leafwatch.track(PUBLICATION.OPEN_ACTIONS.DECENT.OPEN_DECENT, {
+                    publication_id: publication.id
+                  });
+                }}
+                size="lg"
+              >
+                {openActionCTA(actionData.platformName)}
+              </Button>
+            ) : (
+              <Tooltip
+                content={<span>{OPEN_ACTION_NO_EMBED_TOOLTIP}</span>}
+                placement="top"
+              >
+                <Button
+                  disabled
+                  icon={<CursorArrowRaysIcon className="size-5" />}
+                  size="md"
+                >
+                  {'Mint'}
+                </Button>
+              </Tooltip>
+            )}
           </div>
         ) : loadingActionData ? (
           <DecentOpenActionShimmer />
         ) : null}
       </Card>
-      <DecentOpenActionModule
-        actionData={actionData}
-        loadingCurrency={loadingActionData}
-        module={module as UnknownOpenActionModuleSettings}
-        nft={nft}
-        onClose={() => setShowOpenActionModal(false)}
-        publication={targetPublication}
-        selectedQuantity={selectedQuantity}
-        setSelectedQuantity={setSelectedQuantity}
-        show={showOpenActionModal}
-      />
+      {Boolean(actionData) && dataType === ActionDataResponseType.FULL ? (
+        <DecentOpenActionModule
+          actionData={actionData}
+          loadingCurrency={loadingActionData}
+          module={module as UnknownOpenActionModuleSettings}
+          nft={nft}
+          onClose={() => setShowOpenActionModal(false)}
+          publication={targetPublication}
+          selectedQuantity={selectedQuantity}
+          setSelectedQuantity={setSelectedQuantity}
+          show={showOpenActionModal}
+        />
+      ) : null}
     </>
   );
 };

diff --git a/apps/web/src/components/Publication/OpenAction/UnknownModule/Decent/index.tsx b/apps/web/src/components/Publication/OpenAction/UnknownModule/Decent/index.tsx
@@ -17,7 +17,7 @@ import { useEffect, useState } from 'react';
 import FeedEmbed from './FeedEmbed';
 
 export const OPEN_ACTION_EMBED_TOOLTIP = 'Open action embedded';
-export const OPEN_ACTION_NO_EMBED_TOOLTIP = 'Unable to embed open action';
+export const OPEN_ACTION_NO_EMBED_TOOLTIP = 'Mint not availabe anymore';
 
 export const openActionCTA = (platformName?: string): string => {
   const name = platformName || '';

diff --git a/apps/web/src/components/Shared/Oembed/Nft/ActionInfo.tsx b/apps/web/src/components/Shared/Oembed/Nft/ActionInfo.tsx
@@ -48,14 +48,17 @@ const ActionInfo: FC<ActionInfoProps> = ({
     variables: { request: { for: creatorAddress } }
   });
 
-  const formattedPrice = formatPrice(
-    Number(actionData?.actArgumentsFormatted.paymentToken.amount) /
-      Math.pow(
-        10,
-        allowedTokens?.find((t) => t.contractAddress === selectedNftOaCurrency)
-          ?.decimals || 18
+  const formattedPrice = actionData?.actArgumentsFormatted?.paymentToken?.amount
+    ? formatPrice(
+        Number(actionData?.actArgumentsFormatted.paymentToken.amount) /
+          Math.pow(
+            10,
+            allowedTokens?.find(
+              (t) => t.contractAddress === selectedNftOaCurrency
+            )?.decimals || 18
+          )
       )
-  );
+    : null;
 
   if (!creatorAddress && loading) {
     return null;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml