refactor: endpoints

ArkProjectNFTs · Apr 5, 2024 · 1e4b6fc · 1e4b6fc
1 parent e1ce046
commit 1e4b6fc
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 57 deletions.
diff --git a/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx b/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx
@@ -57,7 +57,7 @@ export default function TransferNftsList() {
                 media={selectedNft.media}
                 width={52}
               />
-              <div className="flex flex-col">
+              <div className="flex w-full flex-col">
                 <Typography ellipsable variant="body_text_14">
                   {selectedNft.collectionName}
                 </Typography>

diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx
@@ -41,9 +41,13 @@ function getDisplayedDate(timestamp?: number) {
 
   const date = new Date(timestamp * 1000);
 
-  return `${
-    date.getMonth() + 1
-  }/${date.getDate()}/${date.getFullYear()} - ${date.getHours()}:${date.getMinutes()}`;
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+  const year = date.getFullYear();
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+
+  return `${month}/${day}/${year} - ${hours}:${minutes}`;
 }
 
 export default function NftTransferItem({

diff --git a/apps/web/src/server/api/helpers/l1nfts.ts b/apps/web/src/server/api/helpers/l1nfts.ts
@@ -0,0 +1,16 @@
+import { type Media } from "alchemy-sdk";
+
+import { type NftMedia } from "../types";
+
+export function getMediaObjectFromAlchemyMedia(
+  alchemyMedia: Media | undefined
+): NftMedia {
+  if (alchemyMedia === undefined) {
+    return { format: "image", src: undefined };
+  }
+  const mediaSrc =
+    alchemyMedia?.gateway ?? alchemyMedia?.thumbnail ?? alchemyMedia?.raw;
+  const mediaFormat = alchemyMedia?.format === "mp4" ? "video" : "image";
+
+  return { format: mediaFormat, src: mediaSrc };
+}
diff --git a/apps/web/src/server/api/helpers/l2nfts.ts b/apps/web/src/server/api/helpers/l2nfts.ts
@@ -36,25 +36,26 @@ export async function getL2ContractsForOwner(address: string) {
 type ArkBatchNftsApiResponse = {
   result: Array<{
     contract_address: string;
+    contract_name: string;
     metadata?: { normalized: { image?: string; name?: string } };
     owner: string;
     token_id: string;
   }>;
 };
 export async function getL2NftsMetadataBatch(
-  tokenIds: Array<string>,
-  contractAddress: string
+  tokens: Array<{ contract_address: string; token_id: string }>
 ) {
   const url = `${nftApiUrl}/v1/tokens/batch`;
 
   const nftsResponse = await fetch(url, {
     body: JSON.stringify({
-      tokens: tokenIds.map((tokenId) => ({
-        contract_address: validateAndParseAddress(contractAddress),
-        token_id: tokenId,
+      tokens: tokens.map((token) => ({
+        contract_address: validateAndParseAddress(token.contract_address),
+        token_id: token.token_id,
       })),
     }),
     headers: requestsHeader,
+    method: "POST",
   });
 
   const nfts = (await nftsResponse.json()) as ArkBatchNftsApiResponse;

diff --git a/apps/web/src/server/api/routers/bridgeRequest.ts b/apps/web/src/server/api/routers/bridgeRequest.ts
@@ -133,7 +133,6 @@ export const bridgeRequestRouter = createTRPCRouter({
               requestContent: JSON.parse(
                 bridgeRequest.req.content
               ) as Array<string>,
-              // requestHash: bridgeRequest.req.hash,
               status: lastBridgeRequestEvent?.label ?? "error",
               statusTimestamp: lastBridgeRequestEvent?.block_timestamp ?? 0,
               tokenIds: bridgeRequest.token_ids,

diff --git a/apps/web/src/server/api/routers/l1Nfts.ts b/apps/web/src/server/api/routers/l1Nfts.ts
@@ -6,6 +6,7 @@ import { z } from "zod";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
 
 import l1_bridge_contract from "../../../app/_abis/bridge_l1_abi.json";
+import { getMediaObjectFromAlchemyMedia } from "../helpers/l1nfts";
 import { type Collection, type Nft } from "../types";
 
 const viemClient = createClient({
@@ -47,25 +48,19 @@ export const l1NftsRouter = createTRPCRouter({
     .query(async ({ input }) => {
       const { address, cursor, pageSize } = input;
       const { contracts, pageKey, totalCount } =
-        await alchemy.nft.getContractsForOwner(
-          // address.toLowerCase(),
-          "0x14dd4FBB0708aF74Bd3F86698122c6F3829b1462",
-          {
-            excludeFilters: [NftFilters.SPAM],
-            pageKey: cursor,
-            pageSize,
-          }
-        );
+        await alchemy.nft.getContractsForOwner(address.toLowerCase(), {
+          excludeFilters: [NftFilters.SPAM],
+          pageKey: cursor,
+          pageSize,
+        });
 
       const whitelistedCollections =
         (await bridgeL1Contract.read?.getWhiteListedCollections?.()) as
           | Array<string>
           | undefined;
 
       const collections: Array<Collection> = contracts.map((contract) => {
-        const media = contract.media[0];
-        const mediaSrc = media?.gateway ?? media?.thumbnail ?? media?.raw;
-        const mediaFormat = media?.format === "mp4" ? "video" : "image";
+        const media = getMediaObjectFromAlchemyMedia(contract.media[0]);
         const isBridgeable =
           whitelistedCollections !== undefined &&
           whitelistedCollections.find(
@@ -77,7 +72,7 @@ export const l1NftsRouter = createTRPCRouter({
         return {
           contractAddress: contract.address,
           isBridgeable,
-          media: { format: mediaFormat, src: mediaSrc },
+          media,
           name: contract.name ?? contract.symbol ?? "Unknown",
           totalBalance: contract.totalBalance,
         };
@@ -104,15 +99,14 @@ export const l1NftsRouter = createTRPCRouter({
       );
 
       return response.map((nft) => {
-        const media = nft.media[0];
-        const mediaSrc = media?.gateway ?? media?.thumbnail ?? media?.raw;
-        const mediaFormat = media?.format === "mp4" ? "video" : "image";
+        const media = getMediaObjectFromAlchemyMedia(nft.media[0]);
+        const tokenName = nft.title.length > 0 ? nft.title : `#${nft.tokenId}`;
 
         return {
           collectionName: nft.contract.name,
-          media: { format: mediaFormat, src: mediaSrc },
+          media,
           tokenId: nft.tokenId,
-          tokenName: nft.title.length > 0 ? nft.title : `#${nft.tokenId}`,
+          tokenName,
         };
       });
     }),
@@ -135,31 +129,25 @@ export const l1NftsRouter = createTRPCRouter({
         ownedNfts: nfts,
         pageKey,
         totalCount,
-      } = await alchemy.nft.getNftsForOwner(
-        // userAddress.toLowerCase(),
-        "0x14dd4FBB0708aF74Bd3F86698122c6F3829b1462",
-        {
-          contractAddresses:
-            contractAddress !== undefined ? [contractAddress] : undefined,
-          excludeFilters: [NftFilters.SPAM],
-          pageKey: cursor,
-          pageSize,
-        }
-      );
+      } = await alchemy.nft.getNftsForOwner(userAddress.toLowerCase(), {
+        contractAddresses:
+          contractAddress !== undefined ? [contractAddress] : undefined,
+        excludeFilters: [NftFilters.SPAM],
+        pageKey: cursor,
+        pageSize,
+      });
 
-      // TODO @YohanTz: Handle videos
       const ownedNfts: Array<Nft> = nfts.map((nft) => {
-        const media = nft.media[0];
-        const mediaSrc = media?.gateway ?? media?.thumbnail ?? media?.raw;
-        const mediaFormat = media?.format === "mp4" ? "video" : "image";
+        const media = getMediaObjectFromAlchemyMedia(nft.media[0]);
+        const name =
+          nft.title.length > 0
+            ? nft.title
+            : `${nft.title ?? nft.contract.name} #${nft.tokenId}`;
 
         return {
           contractAddress: nft.contract.address,
-          media: { format: mediaFormat, src: mediaSrc },
-          name:
-            nft.title.length > 0
-              ? nft.title
-              : `${nft.title ?? nft.contract.name} #${nft.tokenId}`,
+          media,
+          name,
           tokenId: nft.tokenId,
         };
       });

diff --git a/apps/web/src/server/api/routers/l2Nfts.ts b/apps/web/src/server/api/routers/l2Nfts.ts
@@ -39,20 +39,15 @@ export const l2NftsRouter = createTRPCRouter({
 
         const collections: Array<Collection> = contractsForOwner.result.map(
           (contract) => {
-            const mediaSrc = contract.image?.replace(
-              "ipfs://",
-              process.env.IPFS_GATEWAY ?? ""
-            );
-            const mediaFormat =
-              mediaSrc?.split(".").pop() === "mp4" ? "video" : "image";
+            const media = getMediaObjectFromUrl(contract.image);
 
             return {
               contractAddress: contract.contract_address,
               isBridgeable: true,
 
               // isBridgeable:
               //   contract.contract_address ===
-              media: { format: mediaFormat, src: mediaSrc },
+              media,
               name: contract.name ?? contract.symbol ?? "Unknown",
               totalBalance: contract.tokens_count,
             };
@@ -81,7 +76,12 @@ export const l2NftsRouter = createTRPCRouter({
       }
 
       try {
-        const nfts = await getL2NftsMetadataBatch(tokenIds, contractAddress);
+        const nfts = await getL2NftsMetadataBatch(
+          tokenIds.map((tokenId) => ({
+            contract_address: contractAddress,
+            token_id: tokenId,
+          }))
+        );
 
         return nfts.result
           .filter(
@@ -94,7 +94,7 @@ export const l2NftsRouter = createTRPCRouter({
             const media = getMediaObjectFromUrl(nft.metadata?.normalized.image);
 
             return {
-              collectionName: "EveraiDuo",
+              collectionName: nft.contract_name,
               media,
               tokenId: nft.token_id,
               tokenName: nft.metadata?.normalized.name ?? `#${nft.token_id}`,