nft medias in transfer list

ArkProjectNFTs · Apr 4, 2024 · 51170b5 · 51170b5
1 parent 3d93d6f
commit 51170b5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx
@@ -8,6 +8,7 @@ import { useEnsName } from "wagmi";
 
 import Media from "~/app/_components/Media";
 import { type Chain } from "~/app/_types";
+import { type NftMedia } from "~/server/api/types";
 
 import NftTransferItemContent from "./NftTransferItemContent";
 import NftTransferStatus from "./NftTransferStatus";
@@ -17,7 +18,7 @@ interface NftTransferItemProps {
   arrivalAddress: string;
   arrivalChain: Chain;
   arrivalTimestamp?: number;
-  collectionImage: string | undefined;
+  collectionMedia: NftMedia;
   collectionName: string;
   contractAddress: string;
   onWithdrawSuccess: () => void;
@@ -49,7 +50,7 @@ export default function NftTransferItem({
   arrivalAddress,
   arrivalChain,
   arrivalTimestamp,
-  collectionImage,
+  collectionMedia,
   collectionName,
   contractAddress,
   onWithdrawSuccess,
@@ -90,7 +91,7 @@ export default function NftTransferItem({
             alt="nft"
             className="rounded-lg"
             height={62}
-            media={{ format: "image", src: collectionImage }}
+            media={collectionMedia}
             width={62}
           />
           <div className="text-left">

diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferList.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferList.tsx
@@ -133,7 +133,7 @@ export default function NftTransferList({
                 <NftTransferItem
                   arrivalAddress={bridgeRequest.arrivalAddress}
                   arrivalChain={bridgeRequest.arrivalChain}
-                  collectionImage={bridgeRequest.collectionImage}
+                  collectionMedia={bridgeRequest.collectionMedia}
                   collectionName={bridgeRequest.collectionName}
                   contractAddress={bridgeRequest.collectionSourceAddress}
                   key={`${bridgeRequest.statusTimestamp}-$${bridgeRequest.collectionName}}`}
@@ -173,7 +173,7 @@ export default function NftTransferList({
                   arrivalAddress={bridgeRequest.arrivalAddress}
                   arrivalChain={bridgeRequest.arrivalChain}
                   arrivalTimestamp={bridgeRequest.arrivalTimestamp}
-                  collectionImage={bridgeRequest.collectionImage}
+                  collectionMedia={bridgeRequest.collectionMedia}
                   collectionName={bridgeRequest.collectionName}
                   contractAddress={bridgeRequest.collectionSourceAddress}
                   key={bridgeRequest.statusTimestamp}

diff --git a/apps/web/src/server/api/routers/bridgeRequest.ts b/apps/web/src/server/api/routers/bridgeRequest.ts
@@ -4,6 +4,8 @@ import { z } from "zod";
 import { type Chain } from "~/app/_types";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
 
+import { type NftMedia } from "../types";
+
 const alchemy = new Alchemy({
   apiKey: process.env.ALCHEMY_API_KEY,
   // network: Network.ETH_MAINNET,
@@ -42,7 +44,7 @@ type BridgeRequestResponse = {
   arrivalAddress: string;
   arrivalChain: Chain;
   arrivalTimestamp?: number;
-  collectionImage: string | undefined;
+  collectionMedia: NftMedia;
   collectionName: string;
   collectionSourceAddress: string;
   requestContent: Array<string>;
@@ -115,6 +117,9 @@ export const bridgeRequestRouter = createTRPCRouter({
               lastBridgeRequestEvent?.label === "withdraw_available_l1" ||
               lastBridgeRequestEvent?.label === "withdraw_completed_l1" ||
               lastBridgeRequestEvent?.label === "withdraw_completed_l2";
+            const media = requestMetadata[index]?.media[0];
+            const mediaSrc = media?.gateway ?? media?.thumbnail ?? media?.raw;
+            const mediaFormat = media?.format === "mp4" ? "video" : "image";
 
             return {
               arrivalAddress: bridgeRequest.req.to,
@@ -125,9 +130,7 @@ export const bridgeRequestRouter = createTRPCRouter({
               arrivalTimestamp: isArrived
                 ? lastBridgeRequestEvent?.block_timestamp
                 : undefined,
-              collectionImage:
-                requestMetadata[index]?.media[0]?.raw ??
-                requestMetadata[index]?.media[0]?.thumbnail,
+              collectionMedia: { format: mediaFormat, src: mediaSrc },
               collectionName: requestMetadata[index]?.contract.name ?? "",
               collectionSourceAddress: bridgeRequest.req.collection_src,
               requestContent: JSON.parse(