feat: support download collectror list

showtime-xyz · Sep 19, 2023 · 6a09b8c · 6a09b8c
1 parent c15e7af
commit 6a09b8c
Show file tree

Hide file tree

Showing 7 changed files with 343 additions and 12 deletions.
diff --git a/packages/app/components/nft-dropdown.tsx b/packages/app/components/nft-dropdown.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useCallback } from "react";
 import { Linking, Platform } from "react-native";
 
 import {
@@ -14,6 +14,7 @@ import {
   Edit,
   QrCode,
   Sendv2,
+  Download2,
 } from "@showtime-xyz/universal.icon";
 import { Pressable } from "@showtime-xyz/universal.pressable";
 import { useRouter } from "@showtime-xyz/universal.router";
@@ -26,14 +27,18 @@ import { CreatorEditionResponse } from "app/hooks/use-creator-collection-detail"
 import { useHideNFT } from "app/hooks/use-hide-nft";
 import { useRedirectDropImageShareScreen } from "app/hooks/use-redirect-to-drop-image-share-screen";
 import { useRefreshMedadata } from "app/hooks/use-refresh-metadata";
-import { useShareNFT } from "app/hooks/use-share-nft";
+import { useShareNFT, useShareNFTOnTwitter } from "app/hooks/use-share-nft";
 import { getNFTSlug } from "app/hooks/use-share-nft";
 import { useSocialColor } from "app/hooks/use-social-color";
 import { useUser } from "app/hooks/use-user";
 import { scheme } from "app/lib/scheme";
 import { useNavigateToLogin } from "app/navigation/use-navigate-to";
 import type { NFT } from "app/types";
-import { isMobileWeb, isAndroid } from "app/utilities";
+import {
+  isMobileWeb,
+  isAndroid,
+  downloadCollectorListByContractAddress,
+} from "app/utilities";
 
 import {
   DropdownMenuContent,
@@ -45,7 +50,6 @@ import {
 import { OpenSea } from "design-system/icon";
 
 import { MenuItemIcon } from "./dropdown/menu-item-icon";
-import { ShareOnTwitterDropdownMenuItem } from "./nft-share-dropdown";
 
 type Props = {
   nft: NFT;
@@ -74,10 +78,12 @@ function NFTDropdown({
   const { unfollow, isFollowing } = useMyInfo();
   const { hideNFT, unhideNFT } = useHideNFT();
   const { getIsBlocked, toggleBlock } = useBlock();
+  const { shareNFTOnTwitter } = useShareNFTOnTwitter(nft);
+
   const router = useRouter();
 
   const isCreatorDrop = nft.creator_airdrop_edition_address;
-  const { shareNFT, shareNFTOnTwitter } = useShareNFT();
+  const { shareNFT } = useShareNFT();
   const refreshMetadata = useRefreshMedadata();
   const navigateToLogin = useNavigateToLogin();
   const redirectToStarDropShareScreen = useRedirectDropImageShareScreen();
@@ -103,12 +109,221 @@ function NFTDropdown({
     web: typeof window !== "undefined" && !!navigator.share,
   });
 
-  const viewOnOpenSea = () => {
+  const viewOnOpenSea = useCallback(() => {
     const chainName = nft?.chain_name === "polygon" ? "matic" : nft?.chain_name;
     const link = `https://opensea.io/assets/${chainName}/${nft.contract_address}`;
     Linking.openURL(link);
-  };
+  }, [nft?.chain_name, nft.contract_address]);
+
+  const dropdownMaps = useMemo(() => {
+    return [
+      {
+        title: "Share...",
+        show: true,
+        icon: Sendv2,
+        iosIconName: "paperplane",
+        onSelect: () => redirectToStarDropShareScreen(nft?.contract_address),
+      },
+      {
+        title: "Share on Twitter",
+        show: !isShareAPIAvailable && shouldEnableSharing,
+        icon: Twitter,
+        iosIconName: "link",
+        onSelect: () => shareNFTOnTwitter(),
+      },
+      {
+        title: isShareAPIAvailable ? "Share" : "Copy Link",
+        show: shouldEnableSharing,
+        icon: Copy,
+        iosIconName: "square.and.arrow.up",
+        onSelect: () => shareNFT(nft),
+      },
+      {
+        title: "Download collector list",
+        show: true,
+        icon: Download2,
+        iosIconName: "arrow.down.doc",
+        onSelect: () =>
+          downloadCollectorListByContractAddress(nft?.contract_address),
+      },
+      {
+        title: "View on OpenSea",
+        show: true,
+        icon: OpenSea,
+        iosIconName: "arrow.right",
+        onSelect: viewOnOpenSea,
+      },
+      {
+        title: "Show QR Code",
+        show: true,
+        icon: QrCode,
+        iosIconName: "qrcode",
+        onSelect: () => {
+          const as = `/qr-code-share/${nft?.contract_address}`;
+          router.push(
+            Platform.select({
+              native: as,
+              web: {
+                pathname: router.pathname,
+                query: {
+                  ...router.query,
+                  contractAddress: nft?.contract_address,
+                  qrCodeShareModal: true,
+                },
+              } as any,
+            }),
+            Platform.select({
+              native: as,
+              web: router.asPath,
+            }),
+            { shallow: true }
+          );
+        },
+      },
+      {
+        title: "Edit Drop Details",
+        show: edition?.is_editable && isSelf,
+        icon: Edit,
+        iosIconName: "square.and.pencil",
+        onSelect: () => {
+          const contractAddress = nft?.contract_address;
+          const tokenId = nft?.token_id;
+          const chainName = nft?.chain_name;
+
+          const as = `/drop/edit-details/${chainName}/${contractAddress}/${tokenId}`;
+          router.push(
+            Platform.select({
+              native: as,
+              web: {
+                pathname: router.pathname,
+                query: {
+                  ...router.query,
+                  contractAddress,
+                  tokenId,
+                  chainName,
+                  dropEditDetailsModal: true,
+                },
+              } as any,
+            }),
+            Platform.select({
+              native: as,
+              web: router.asPath,
+            }),
+            { shallow: true }
+          );
+        },
+      },
+      {
+        title: "Open in app",
+        show: isMobileWeb(),
+        icon: Showtime,
+        iosIconName: "arrow.right",
+        onSelect: () => {
+          window.location.replace(`${scheme}://${getNFTSlug(nft)}`);
 
+          setTimeout(function () {
+            window.open(
+              isAndroid()
+                ? "https://play.google.com/store/apps/details?id=io.showtime"
+                : "https://apps.apple.com/us/app/showtime-nft-social-network/id1606611688",
+              "_blank"
+            );
+          }, 2000);
+        },
+      },
+      {
+        title: "Refresh Metadata",
+        show: !isCreatorDrop,
+        icon: Refresh,
+        iosIconName: "arrow.triangle.2.circlepath",
+        onSelect: () => refreshMetadata(nft),
+      },
+      {
+        title: "Unfollow User",
+        show: !hasOwnership && isFollowingUser && !isSelf,
+        icon: UserMinus,
+        iosIconName: "person.fill.badge.plus",
+        onSelect: async () => {
+          if (isAuthenticated) {
+            await unfollow(nft.creator_id);
+            return null;
+          } else {
+            navigateToLogin();
+          }
+        },
+      },
+      {
+        title: isBlocked ? "Unblock User" : "Block User",
+        show: !hasOwnership && !isSelf,
+        icon: Slash,
+        iosIconName: isBlocked ? "circle" : ("circle.slash" as any),
+        onSelect: () =>
+          toggleBlock({
+            isBlocked,
+            creatorId: nft.creator_id,
+            name: nft.creator_name,
+          }),
+      },
+      {
+        title: "Hide",
+        show: tabType && tabType !== "hidden",
+        icon: EyeOff,
+        iosIconName: "eye.slash",
+        onSelect: () => hideNFT(nft.nft_id),
+      },
+      {
+        title: "Unhide",
+        show: tabType && tabType === "hidden" && isSelf,
+        icon: EyeOff,
+        iosIconName: "eye",
+        onSelect: () => {
+          unhideNFT(nft.nft_id);
+        },
+      },
+      {
+        title: "Report",
+        show: !hasOwnership && !isSelf,
+        icon: Flag,
+        iosIconName: "flag",
+        onSelect: async () => {
+          router.push(
+            {
+              pathname: Platform.OS === "web" ? router.pathname : "/report",
+              query: {
+                ...router.query,
+                reportModal: true,
+                nftId: nft.nft_id,
+              },
+            },
+            Platform.OS === "web" ? router.asPath : undefined
+          );
+        },
+      },
+    ];
+  }, [
+    edition?.is_editable,
+    hasOwnership,
+    hideNFT,
+    isAuthenticated,
+    isBlocked,
+    isCreatorDrop,
+    isFollowingUser,
+    isSelf,
+    isShareAPIAvailable,
+    navigateToLogin,
+    nft,
+    redirectToStarDropShareScreen,
+    refreshMetadata,
+    router,
+    shareNFT,
+    shareNFTOnTwitter,
+    shouldEnableSharing,
+    tabType,
+    toggleBlock,
+    unfollow,
+    unhideNFT,
+    viewOnOpenSea,
+  ]);
   return (
     <>
       <DropdownMenuRoot>
@@ -127,7 +342,26 @@ function NFTDropdown({
         </DropdownMenuTrigger>
 
         <DropdownMenuContent loop sideOffset={8}>
-          {tabType && tabType !== "hidden" ? (
+          {dropdownMaps.map((item) => {
+            return item.show ? (
+              <DropdownMenuItem
+                onSelect={item.onSelect}
+                key={item.title}
+                className={item.title === "Block User" ? "danger" : ""}
+              >
+                <MenuItemIcon
+                  Icon={item.icon}
+                  ios={{
+                    name: item.iosIconName,
+                  }}
+                />
+                <DropdownMenuItemTitle tw="text-gray-700 dark:text-neutral-300">
+                  {item.title}
+                </DropdownMenuItemTitle>
+              </DropdownMenuItem>
+            ) : null;
+          })}
+          {/* {tabType && tabType !== "hidden" ? (
             <DropdownMenuItem
               onSelect={() => {
                 hideNFT(nft.nft_id);
@@ -145,9 +379,9 @@ function NFTDropdown({
                 Hide
               </DropdownMenuItemTitle>
             </DropdownMenuItem>
-          ) : null}
+          ) : null} */}
 
-          {tabType && tabType === "hidden" && isSelf ? (
+          {/* {tabType && tabType === "hidden" && isSelf ? (
             <DropdownMenuItem
               onSelect={() => {
                 unhideNFT(nft.nft_id);
@@ -407,7 +641,7 @@ function NFTDropdown({
                 </DropdownMenuItemTitle>
               </DropdownMenuItem>
             </>
-          ) : null}
+          ) : null} */}
         </DropdownMenuContent>
       </DropdownMenuRoot>
     </>

diff --git a/packages/app/lib/axios.ts b/packages/app/lib/axios.ts
@@ -1,5 +1,5 @@
 import axios from "axios";
-import type { Method, AxiosRequestHeaders } from "axios";
+import type { Method, AxiosRequestHeaders, ResponseType } from "axios";
 
 import { getAccessToken } from "app/lib/access-token";
 import { Logger } from "app/lib/logger";
@@ -15,6 +15,7 @@ export type AxiosParams = {
   unmountSignal?: AbortSignal;
   overrides?: AxiosOverrides;
   headers?: AxiosRequestHeaders;
+  responseType?: ResponseType;
 };
 
 const axiosAPI = async ({
@@ -24,6 +25,7 @@ const axiosAPI = async ({
   unmountSignal,
   headers,
   overrides,
+  ...rest
 }: AxiosParams) => {
   const accessToken = getAccessToken();
   const forceAccessTokenAuthorization =
@@ -57,6 +59,7 @@ const axiosAPI = async ({
       : headers
       ? { headers }
       : {}),
+    ...rest,
   };
 
   try {