Fix token limit display

frontend/src/features/collections/components/collection-card/collection-card.module.scss

@@ -66,3 +66,9 @@
   line-height: 13px;
   color: #93989a;
 }
+
+.cards {
+  padding: 12px 16px;
+
+  border-top: 1px solid #f3f3f3;
+}

frontend/src/features/collections/components/collection-card/collection-card.tsx

@@ -6,6 +6,8 @@ import { ROUTE } from '@/consts';
 import { useCollection } from '@/hooks';
 import { getIpfsLink } from '@/utils';
 
+import { MintLimitInfoCard } from '../mint-limit-info-card';
+
 import styles from './collection-card.module.scss';
 
 type Props = {
@@ -14,9 +16,9 @@ type Props = {
 
 function CollectionCard({ id }: Props) {
   const collection = useCollection(id);
-  const { config, collectionOwner } = collection || {};
+  const { config, collectionOwner, tokens, totalNumberOfTokens } = collection || {};
 
-  return config && collectionOwner ? (
+  return config && collectionOwner && tokens !== undefined && totalNumberOfTokens !== undefined ? (
     <li className={styles.collection}>
       <Link to={generatePath(ROUTE.COLLECTION, { id })}>
         <div className={styles.cover}>
@@ -35,6 +37,10 @@ function CollectionCard({ id }: Props) {
             </div>
           </div>
         </div>
+
+        <div className={styles.cards}>
+          <MintLimitInfoCard heading={totalNumberOfTokens} text={tokens.length} color="dark" />
+        </div>
       </Link>
     </li>
   ) : null;

frontend/src/features/collections/components/collection-header/collection-header.tsx

@@ -1,9 +1,9 @@
 import { HexString } from '@gear-js/api';
 
-import LandscapeSVG from '../../assets/landscape.svg?react';
 import UserSVG from '../../assets/user.svg?react';
 import { SOCIAL_ICON } from '../../consts';
 import { InfoCard } from '../info-card';
+import { MintLimitInfoCard } from '../mint-limit-info-card';
 import { MintNFT } from '../mint-nft';
 
 import styles from './collection-header.module.scss';
@@ -14,12 +14,13 @@ type Props = {
   logo: string;
   owner: HexString;
   tokensCount: number;
+  tokensLimit: string | null;
   name: string;
   description: string;
   socials: Record<string, string | null>;
 };
 
-function CollectionHeader({ id, banner, logo, owner, tokensCount, name, description, socials }: Props) {
+function CollectionHeader({ id, banner, logo, owner, tokensCount, tokensLimit, name, description, socials }: Props) {
   const socialEntries = Object.entries(socials).filter(([, value]) => !!value) as [string, string][];
 
   const renderSocials = () =>
@@ -43,7 +44,7 @@ function CollectionHeader({ id, banner, logo, owner, tokensCount, name, descript
 
         <div className={styles.cards}>
           <InfoCard heading="Creator" text={owner} SVG={UserSVG} color="light" textOverflow />
-          <InfoCard heading="Unlimited series" text={`${tokensCount} NFTs`} SVG={LandscapeSVG} color="light" />
+          <MintLimitInfoCard heading={tokensLimit} text={tokensCount} color="light" />
         </div>
       </div>
 

frontend/src/features/collections/components/collection/collection.tsx

@@ -19,22 +19,23 @@ function Collection() {
   const { id } = useParams() as Params;
 
   const collection = useCollection(id);
-  const { config, tokens, collectionOwner } = collection || {};
+  const { config, tokens, collectionOwner, totalNumberOfTokens } = collection || {};
   const tokensCount = tokens?.length;
 
   const getNFTs = () =>
     collection?.tokens.map(([nftId, nft]) => (
       <NFTCard key={nftId} nft={{ ...nft, id: nftId }} collection={{ ...collection.config, id }} />
     ));
 
-  return config && collectionOwner && tokensCount !== undefined ? (
+  return config && collectionOwner && tokensCount !== undefined && totalNumberOfTokens !== undefined ? (
     <Container>
       <CollectionHeader
         id={id}
         banner={getIpfsLink(config.collectionBanner)}
         logo={getIpfsLink(config.collectionLogo)}
         owner={collectionOwner}
         tokensCount={tokensCount}
+        tokensLimit={totalNumberOfTokens}
         name={config.name}
         description={config.description}
         socials={config.additionalLinks || {}}

frontend/src/features/collections/components/info-card/info-card.module.scss

@@ -61,6 +61,10 @@
   .text {
     color: #000;
   }
+
+  svg path {
+    fill: #000;
+  }
 }
 
 .light {

frontend/src/features/collections/components/mint-limit-info-card/index.ts

@@ -0,0 +1,3 @@
+import { MintLimitInfoCard } from './mint-limit-info-card';
+
+export { MintLimitInfoCard };

frontend/src/features/collections/components/mint-limit-info-card/mint-limit-info-card.tsx

@@ -0,0 +1,20 @@
+import LandscapeSVG from '../../assets/landscape.svg?react';
+import { InfoCard, Props as InfoCardProps } from '../info-card';
+
+type Props = Omit<InfoCardProps, 'heading' | 'text' | 'SVG'> & {
+  heading: string | null;
+  text: number;
+};
+
+function MintLimitInfoCard({ heading, text, ...props }: Props) {
+  return (
+    <InfoCard
+      heading={heading ? `of ${heading} to be minted` : 'Unlimited series'}
+      text={`${text} NFTs`}
+      SVG={LandscapeSVG}
+      {...props}
+    />
+  );
+}
+
+export { MintLimitInfoCard };

frontend/src/features/collections/types.ts

@@ -81,6 +81,7 @@ type CollectionState = {
       },
     ][];
     collectionOwner: HexString;
+    totalNumberOfTokens: string | null;
   };
 };