creating minimal asset teaser

src/components/@shared/AssetList/index.tsx

@@ -28,6 +28,7 @@ declare type AssetListProps = {
   onPageChange?: React.Dispatch<React.SetStateAction<number>>
   className?: string
   noPublisher?: boolean
+  minimal?: boolean
 }
 
 export default function AssetList({
@@ -38,7 +39,8 @@ export default function AssetList({
   isLoading,
   onPageChange,
   className,
-  noPublisher
+  noPublisher,
+  minimal
 }: AssetListProps): ReactElement {
   const { chainIds } = useUserPreferences()
   const { accountId } = useWeb3()
@@ -85,6 +87,7 @@ export default function AssetList({
               asset={assetWithPrice}
               key={assetWithPrice.id}
               noPublisher={noPublisher}
+              minimal={minimal}
             />
           ))
         ) : (

src/components/@shared/AssetTeaser/index.tsx

@@ -14,11 +14,13 @@ import { useUserPreferences } from '@context/UserPreferences'
 declare type AssetTeaserProps = {
   asset: AssetExtended
   noPublisher?: boolean
+  minimal?: boolean
 }
 
 export default function AssetTeaser({
   asset,
-  noPublisher
+  noPublisher,
+  minimal
 }: AssetTeaserProps): ReactElement {
   const { name, type, description } = asset.metadata
   const { datatokens } = asset
@@ -51,13 +53,15 @@ export default function AssetTeaser({
             <Dotdotdot tagName="h1" clamp={3} className={styles.title}>
               {name.slice(0, 200)}
             </Dotdotdot>
-            {!noPublisher && <Publisher account={owner} minimal />}
+            {!noPublisher && !minimal && <Publisher account={owner} minimal />}
           </header>
-          <div className={styles.content}>
+          {!minimal && (
-            <Dotdotdot tagName="p" clamp={3}>
+            <div className={styles.content}>
-              {removeMarkdown(description?.substring(0, 300) || '')}
+              <Dotdotdot tagName="p" clamp={3}>
-            </Dotdotdot>
+                {removeMarkdown(description?.substring(0, 300) || '')}
-          </div>
+              </Dotdotdot>
+            </div>
+          )}
           {isUnsupportedPricing ? (
             <strong>No pricing schema available</strong>
           ) : (

src/components/Asset/RelatedAssets/index.tsx

@@ -5,7 +5,7 @@ import { useUserPreferences } from '@context/UserPreferences'
 import { SortTermOptions } from '../../../@types/aquarius/SearchQuery'
 import styles from './index.module.css'
 import { useCancelToken } from '@hooks/useCancelToken'
-import Link from 'next/link'
+import AssetList from '@shared/AssetList'
 
 export default function RelatedAssets({
   tags,
@@ -19,6 +19,7 @@ export default function RelatedAssets({
   const { chainIds } = useUserPreferences()
   const newCancelToken = useCancelToken()
   const [relatedAssets, setRelatedAssets] = useState<Asset[]>()
+  const [isLoading, setIsLoading] = useState<boolean>()
 
   function generateQuery(
     size: number,
@@ -52,13 +53,14 @@ export default function RelatedAssets({
   }
 
   useEffect(() => {
+    setIsLoading(true)
     async function getAssets() {
       const tagQuery = generateBaseQuery(generateQuery(3, true, false))
       const tagResults = (await queryMetadata(tagQuery, newCancelToken()))
         .results
-      console.log(tagResults, tagResults.length)
       if (tagResults.length === 3) {
         setRelatedAssets(tagResults)
+        setIsLoading(false)
       } else {
         const ownerQuery = generateBaseQuery(
           generateQuery(3 - tagResults.length, false, true)
@@ -67,7 +69,7 @@ export default function RelatedAssets({
           .results
         const bothResults = tagResults.concat(ownerResults)
         setRelatedAssets(bothResults)
-        console.log(tagResults, tagResults.length)
+        setIsLoading(false)
       }
     }
     getAssets()
@@ -76,14 +78,14 @@ export default function RelatedAssets({
   return (
     <section className={styles.section}>
       <h3>Related Assets</h3>
-      <ul>
+      {relatedAssets && (
-        {relatedAssets &&
+        <AssetList
-          relatedAssets.map((asset) => (
+          assets={relatedAssets}
-            <li key={asset?.id}>
+          showPagination={false}
-              <Link href={`/asset/${asset?.id}`}>{asset.metadata.name}</Link>
+          isLoading={isLoading}
-            </li>
+          minimal={true}
-          ))}
+        />
-      </ul>
+      )}
     </section>
   )
 }