safeguard against assets without attributes.additionalInformation

src/components/molecules/AssetTeaser.tsx

@@ -15,11 +15,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
   ddo,
   metadata
 }: AssetTeaserProps) => {
-  // TODO: hacky safeguard should be replaced with search query to account for pagination
-  if (!metadata.additionalInformation) return null
-
   const { name } = metadata.main
-  const { description } = metadata.additionalInformation
   const isCompute = Boolean(ddo.findServiceByType('compute'))
 
   return (
@@ -30,7 +26,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
 
         <div className={styles.content}>
           <Dotdotdot tagName="p" clamp={3}>
-            {description || ''}
+            {metadata?.additionalInformation?.description || ''}
           </Dotdotdot>
         </div>
 

src/components/organisms/AssetActions/index.tsx

@@ -7,6 +7,7 @@ import Tabs from '../../atoms/Tabs'
 import { useOcean, useMetadata } from '@oceanprotocol/react'
 import compareAsBN from '../../../utils/compareAsBN'
 import Pool from './Pool'
+import { AdditionalInformationMarket } from '../../../@types/MetaData'
 
 export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
   const { balance } = useOcean()
@@ -15,7 +16,6 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
 
   const isCompute = Boolean(ddo.findServiceByType('compute'))
   const { attributes } = ddo.findServiceByType('metadata')
-  const { priceType } = attributes.additionalInformation
 
   // Check user balance against price
   useEffect(() => {
@@ -44,7 +44,10 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
       title: 'Use',
       content: UseContent
     },
-    (!priceType || priceType === 'dynamic') && {
+    (!((attributes.additionalInformation as unknown) as AdditionalInformationMarket)
+      ?.priceType ||
+      ((attributes.additionalInformation as unknown) as AdditionalInformationMarket)
+        ?.priceType === 'dynamic') && {
       title: 'Pool',
       content: <Pool ddo={ddo} />
     }

src/components/organisms/AssetContent/MetaFull.tsx

@@ -18,7 +18,6 @@ export default function MetaFull({
   const { ocean, accountId } = useOcean()
   const { id, dataToken } = ddo
   const { dateCreated, datePublished, author, license } = metadata.main
-  const { categories, copyrightHolder } = metadata.additionalInformation
 
   const [dtName, setDtName] = useState<string>()
   const [dtSymbol, setDtSymbol] = useState<string>()
@@ -38,9 +37,17 @@ export default function MetaFull({
   return (
     <div className={styles.metaFull}>
       <MetaItem title="Author" content={author} />
-      <MetaItem title="Copyright Holder" content={copyrightHolder} />
+      <MetaItem
+        title="Copyright Holder"
+        content={metadata?.additionalInformation?.copyrightHolder}
+      />
       <MetaItem title="License" content={license} />
-      {categories && <MetaItem title="Category" content={categories[0]} />}
+      {metadata?.additionalInformation?.categories && (
+        <MetaItem
+          title="Category"
+          content={metadata?.additionalInformation?.categories[0]}
+        />
+      )}
       <MetaItem title="Data Created" content={<Time date={dateCreated} />} />
 
       <MetaItem

src/components/organisms/AssetContent/MetaSecondary.tsx

@@ -10,31 +10,33 @@ export default function MetaSecondary({
 }: {
   metadata: MetadataMarket
 }): ReactElement {
-  const { links, tags } = metadata.additionalInformation
-
   return (
     <aside className={styles.metaSecondary}>
-      {tags && tags.length > 0 && <Tags items={tags} />}
+      {metadata?.additionalInformation?.tags &&
+        metadata?.additionalInformation?.tags.length > 0 && (
+          <Tags items={metadata?.additionalInformation?.tags} />
+        )}
 
-      {links && links.length && (
+      {metadata?.additionalInformation?.links &&
-        <div className={styles.samples}>
+        metadata?.additionalInformation?.links.length && (
-          <MetaItem
+          <div className={styles.samples}>
-            title="Sample Data"
+            <MetaItem
-            content={
+              title="Sample Data"
-              <Button
+              content={
-                href={links[0].url}
+                <Button
-                target="_blank"
+                  href={metadata?.additionalInformation?.links[0].url}
-                rel="noreferrer"
+                  target="_blank"
-                download
+                  rel="noreferrer"
-                style="text"
+                  download
-                size="small"
+                  style="text"
-              >
+                  size="small"
-                Download Sample
+                >
-              </Button>
+                  Download Sample
-            }
+                </Button>
-          />
+              }
-        </div>
+            />
-      )}
+          </div>
+        )}
     </aside>
   )
 }

src/components/organisms/AssetContent/index.tsx

@@ -21,7 +21,6 @@ export default function AssetContent({
   ddo
 }: AssetContentProps): ReactElement {
   const { datePublished } = metadata.main
-  const { description, categories } = metadata.additionalInformation
   const { debug } = useUserPreferences()
 
   return (
@@ -29,16 +28,19 @@ export default function AssetContent({
       <div className={styles.content}>
         <aside className={styles.meta}>
           <p>{datePublished && <Time date={datePublished} />}</p>
-          {categories && categories.length && (
+          {metadata?.additionalInformation?.categories &&
-            <p>
+            metadata?.additionalInformation?.categories?.length && (
-              <Link to={`/search?categories=["${categories[0]}"]`}>
+              <p>
-                {categories[0]}
+                <Link
-              </Link>
+                  to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
-            </p>
+                >
-          )}
+                  {metadata?.additionalInformation?.categories[0]}
+                </Link>
+              </p>
+            )}
         </aside>
 
-        <Markdown text={description || ''} />
+        <Markdown text={metadata?.additionalInformation?.description || ''} />
 
         <MetaSecondary metadata={metadata} />
 

src/components/pages/Home.tsx

@@ -14,8 +14,7 @@ async function getLatestAssets(metadataStoreUri: string) {
 
     const result = await metadataStore.queryMetadata({
       page: 1,
-      // TODO: hacky workaround because some assets pushed by external devs are faulty
+      // TODO: reduce assets here, once faulty assets pushed by external devs are removed
-      // See molecules/AssetTeaser.tsx
       offset: 100,
       query: {},
       sort: { created: -1 }