fixed images

ArkProjectNFTs · Apr 3, 2024 · aa1f113 · aa1f113
1 parent de82d7b
commit aa1f113
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 179 deletions.
diff --git a/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx b/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx
@@ -159,9 +159,9 @@ export default function TokenList({ nftContractAddress }: TokenListProps) {
                 cardType="nft"
                 chain={sourceChain}
                 disabled={isAllSelected && !isSelected}
-                image={ownedNft.image}
                 isSelected={isSelected}
                 key={ownedNft.tokenId}
+                media={ownedNft.media}
                 title={ownedNft.name}
               />
             );

diff --git a/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx b/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx
@@ -62,8 +62,8 @@ export default function CollectionGrid({
                 cardType="collection"
                 chain={sourceChain}
                 disabled={!nftCollection.isBridgeable}
-                image={nftCollection.image}
                 isBridgeable={nftCollection.isBridgeable}
+                media={nftCollection.media}
                 numberOfNfts={nftCollection.totalBalance}
                 onClick={() => {}}
                 title={nftCollection.name}

diff --git a/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx b/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx
@@ -50,32 +50,13 @@ export default function TransferNftsList() {
         return (
           <div className="flex justify-between" key={selectedNft.tokenId}>
             <div className="flex items-center gap-4">
-              {selectedNft?.image ? (
-                <Media
-                  alt={selectedNft.tokenName}
-                  className="rounded"
-                  height={52}
-                  src={selectedNft.image}
-                  width={52}
-                />
-              ) : (
-                <>
-                  <Media
-                    alt="empty Nft image"
-                    className="hidden rounded dark:block"
-                    height={52}
-                    src={`/medias/dark/empty_nft.png`}
-                    width={52}
-                  />
-                  <Media
-                    alt="empty Nft image"
-                    className="rounded dark:hidden"
-                    height={52}
-                    src={`/medias/empty_nft.png`}
-                    width={52}
-                  />
-                </>
-              )}
+              <Media
+                alt={selectedNft.tokenName}
+                className="rounded"
+                height={52}
+                media={selectedNft.media}
+                width={52}
+              />
               <div className="flex flex-col">
                 <Typography ellipsable variant="body_text_14">
                   {selectedNft.collectionName}

diff --git a/apps/web/src/app/(routes)/bridge/_hooks/useTransferStarknetNfts.ts b/apps/web/src/app/(routes)/bridge/_hooks/useTransferStarknetNfts.ts
@@ -140,7 +140,7 @@ export default function useTransferStarknetNfts() {
         setIsSigning(false);
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
       setIsSigning(false);
     }
   }

diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx
@@ -86,32 +86,13 @@ export default function NftTransferItem({
         )}
       >
         <div className="flex items-center gap-4">
-          {collectionImage ? (
-            <Media
-              alt="nft"
-              className="rounded-lg"
-              height={62}
-              src={collectionImage}
-              width={62}
-            />
-          ) : (
-            <>
-              <Image
-                alt="empty Nft image"
-                className="hidden aspect-square rounded-lg object-cover dark:block"
-                height={62}
-                src={`/medias/dark/empty_nft.png`}
-                width={62}
-              />
-              <Image
-                alt="empty Nft image"
-                className="aspect-square rounded-lg object-cover dark:hidden"
-                height={62}
-                src={`/medias/empty_nft.png`}
-                width={62}
-              />
-            </>
-          )}
+          <Media
+            alt="nft"
+            className="rounded-lg"
+            height={62}
+            src={collectionImage}
+            width={62}
+          />
           <div className="text-left">
             <Typography component="p" variant="body_text_bold_14">
               {collectionName} Collection

diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferItemContent.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferItemContent.tsx
@@ -97,32 +97,13 @@ export default function NftTransferItemContent({
               <div key={nft.tokenName}>
                 <div className="grid grid-cols-[1fr_1fr_1fr_1fr_2.25rem] place-items-start items-center">
                   <div className="flex items-center gap-4">
-                    {nft.image !== undefined ? (
-                      <Media
-                        alt="nft"
-                        className="flex-shrink-0 rounded-md"
-                        height={52}
-                        src={nft.image}
-                        width={52}
-                      />
-                    ) : (
-                      <>
-                        <Media
-                          alt="empty Nft image"
-                          className="hidden aspect-square rounded-lg object-cover dark:block"
-                          height={52}
-                          src={`/medias/dark/empty_nft.png`}
-                          width={52}
-                        />
-                        <Media
-                          alt="empty Nft image"
-                          className="aspect-square rounded-lg object-cover dark:hidden"
-                          height={52}
-                          src={`/medias/empty_nft.png`}
-                          width={52}
-                        />
-                      </>
-                    )}
+                    <Media
+                      alt="nft"
+                      className="flex-shrink-0 rounded-md"
+                      height={52}
+                      media={nft.media}
+                      width={52}
+                    />
                     <div className="text-left">
                       <Typography component="p" variant="body_text_14">
                         {nft.collectionName}

diff --git a/apps/web/src/app/(routes)/portfolio/_components/NftTabsContent.tsx b/apps/web/src/app/(routes)/portfolio/_components/NftTabsContent.tsx
@@ -62,9 +62,9 @@ function AllNftsTabsContent() {
               <NftCard
                 cardType="nft"
                 chain="Ethereum"
-                image={nft.image}
                 isSelected={false}
                 key={`${nft.contractAddress}-${nft.tokenId}`}
+                media={nft.media}
                 title={nft.name}
               />
             );
@@ -78,9 +78,9 @@ function AllNftsTabsContent() {
                 <NftCard
                   cardType="nft"
                   chain="Starknet"
-                  image={nft.image}
                   isSelected={false}
                   key={`${nft.contractAddress}-${nft.tokenId}`}
+                  media={nft.media}
                   title={nft.name}
                 />
               );
@@ -147,9 +147,9 @@ function CollectionsTabsContent() {
               <NftCard
                 cardType="collection"
                 chain="Ethereum"
-                image={collection.image}
                 isSelected={false}
                 key={collection.contractAddress}
+                media={collection.media}
                 numberOfNfts={collection.totalBalance}
                 title={collection.name}
               />
@@ -163,9 +163,9 @@ function CollectionsTabsContent() {
                 <NftCard
                   cardType="collection"
                   chain="Starknet"
-                  image={collection.image}
                   isSelected={false}
                   key={collection.contractAddress}
+                  media={collection.media}
                   numberOfNfts={collection.totalBalance}
                   title={collection.name}
                 />
@@ -222,9 +222,9 @@ function EthereumNTabsContent() {
               <NftCard
                 cardType="nft"
                 chain="Ethereum"
-                image={nft.image}
                 isSelected={false}
                 key={`${nft.contractAddress}-${nft.tokenId}`}
+                media={nft.media}
                 title={nft.name}
               />
             );
@@ -282,9 +282,9 @@ function StarknetTabsContent() {
             <NftCard
               cardType="nft"
               chain="Starknet"
-              image={nft.image}
               isSelected={false}
               key={`${nft.contractAddress}-${nft.tokenId}`}
+              media={nft.media}
               title={nft.name}
             />
           );

diff --git a/apps/web/src/app/(routes)/portfolio/page.tsx b/apps/web/src/app/(routes)/portfolio/page.tsx
@@ -15,9 +15,9 @@ export default function Page() {
 
           <NftsTabs />
 
-          <BridgingQuestBanner className="mt-16" />
+          <BridgingQuestBanner className="my-16" />
 
-          <NftTransferList className="mt-16" variant="lounge" />
+          <NftTransferList variant="lounge" />
         </MainPageContainer>
       </div>
       <Footer />

diff --git a/apps/web/src/app/_components/Media.tsx b/apps/web/src/app/_components/Media.tsx
@@ -1,23 +1,40 @@
 import Image from "next/image";
+import { useTheme } from "next-themes";
+
+import { type NftMedia } from "~/server/api/types";
+/* eslint-disable @next/next/no-img-element */
 
 interface MediaProps {
   alt: string;
   className?: string;
   height: number;
-  src: string;
+  media: NftMedia;
   width: number;
 }
 
 export default function Media({
   alt,
   className,
   height,
-  src,
+  media,
   width,
 }: MediaProps) {
-  const extension = src.split(".").pop();
+  const { resolvedTheme } = useTheme();
+  console.log(media);
+
+  if (media.src === undefined || media.src.length === 0) {
+    return (
+      <Image
+        alt={alt}
+        className={className}
+        height={height}
+        src={`/medias/${resolvedTheme === "dark" ? "dark/" : ""}empty_nft.png`}
+        width={width}
+      />
+    );
+  }
 
-  if (extension === "mp4") {
+  if (media.format === "video") {
     return (
       <video
         autoPlay
@@ -27,17 +44,17 @@ export default function Media({
         muted
         width={width}
       >
-        <source src={src} type="video/mp4" />
+        <source src={media.src} type="video/mp4" />
         Your browser does not support the video tag.
       </video>
     );
   } else {
     return (
-      <Image
+      <img
         alt={alt}
         className={className}
         height={height}
-        src={src}
+        src={media.src}
         width={width}
       />
     );

diff --git a/apps/web/src/app/_components/NftCard/NftCard.tsx b/apps/web/src/app/_components/NftCard/NftCard.tsx
@@ -1,6 +1,8 @@
 import clsx from "clsx";
 import { Typography } from "design-system";
 
+import { type NftMedia } from "~/server/api/types";
+
 import { type Chain } from "../../_types";
 import ConditionalWrapper from "../ConditionalWrapper";
 import NftCardImage from "./NftCardImage";
@@ -10,8 +12,8 @@ type NftCardProps = {
   chain?: Chain;
   className?: string;
   disabled?: boolean;
-  image?: string;
   isSelected: boolean;
+  media: NftMedia;
   onClick?: () => void;
   title: string;
 } & (
@@ -28,8 +30,8 @@ export default function NftCard({
   chain,
   className,
   disabled,
-  image,
   isSelected,
+  media,
   numberOfNfts,
   onClick,
   title,
@@ -68,7 +70,7 @@ export default function NftCard({
           )
         }
       >
-        <NftCardImage chain={chain} imageUrl={image} />
+        <NftCardImage chain={chain} media={media} />
         <div className="mt-3 text-left">
           <div className="flex items-center justify-between">
             <Typography
@@ -82,7 +84,7 @@ export default function NftCard({
             {cardType === "nft" && onClick !== undefined && (
               <div
                 className={clsx(
-                  "h-5 w-5 rounded-full",
+                  "h-5 w-5 flex-shrink-0 rounded-full",
                   isSelected
                     ? "border-[6px] border-primary-source bg-white "
                     : "bg-neutral-300 dark:bg-space-blue-300"