From 8af3bd0321058889ce84aaf89ced91851415ad79 Mon Sep 17 00:00:00 2001
From: Maija Grudule <34912439+MGrudule@users.noreply.github.com>
Date: Thu, 4 Jul 2024 16:16:11 +0200
Subject: [PATCH] - Refactored asset page to use ecoLinked instead of verified
 status (#1506)

- Added ecoLinked state to social share cards
- Translations
Minor bugfix:
- fixed asset page/server typescript errors
- Sanitized social share image card text to fix Satori text wrap bug with #
---
 .../src/lib/entities/OgShare/CardBase.svelte  |  15 +-
 .../lib/entities/OgShare/CardLandscape.svelte |   8 +-
 .../lib/entities/OgShare/CardSquare.svelte    |   6 +-
 .../src/lib/shared/i18n/en/index.ts           |   2 +-
 .../src/lib/shared/i18n/i18n-types.ts         |   8 +-
 .../assets/[assetAddress]/+page.server.ts     |  24 +-
 .../routes/assets/[assetAddress]/+page.svelte | 437 +++++++++---------
 .../src/routes/og/+server.ts                  |  10 +-
 8 files changed, 266 insertions(+), 244 deletions(-)

diff --git a/apps/verification-portal/src/lib/entities/OgShare/CardBase.svelte b/apps/verification-portal/src/lib/entities/OgShare/CardBase.svelte
index 21b5e0b3e..0fd0bb178 100644
--- a/apps/verification-portal/src/lib/entities/OgShare/CardBase.svelte
+++ b/apps/verification-portal/src/lib/entities/OgShare/CardBase.svelte
@@ -12,6 +12,7 @@
   let fontSizeClass = baseFontSize;
 
   $: imageUrl = img;
+  $: sanitizedTitle = sanitizeTitle(title);
 
   const mediumTitle = isLongTitle(title);
   const smallTitle = isLongTitle(title, 9, 3);
@@ -29,6 +30,18 @@
   } else if (mediumTitle) {
     fontSizeClass = 'text-62px'; // Medium font size
   }
+
+  // Function to sanitize title from any hashtags, workaround for Satori generator text wrap bug
+  function sanitizeTitle(title: string): string {
+    return title.replace(/#/g, '').trim();
+  }
 </script>
 
-<slot {imageUrl} {sourceText} {tokenText} {fundsText} {fontSizeClass} />
+<slot
+  {sanitizedTitle}
+  {imageUrl}
+  {sourceText}
+  {tokenText}
+  {fundsText}
+  {fontSizeClass}
+/>
diff --git a/apps/verification-portal/src/lib/entities/OgShare/CardLandscape.svelte b/apps/verification-portal/src/lib/entities/OgShare/CardLandscape.svelte
index 345c3a6ea..0dd9daf0e 100644
--- a/apps/verification-portal/src/lib/entities/OgShare/CardLandscape.svelte
+++ b/apps/verification-portal/src/lib/entities/OgShare/CardLandscape.svelte
@@ -7,11 +7,13 @@
   export let funds = '';
   export let source = '';
   export let img = '';
+  export let ecoLinked = false;
 </script>
 
 <CardBase
-  {title}
   {img}
+  {title}
+  let:sanitizedTitle
   let:imageUrl
   let:fontSizeClass
   let:sourceText
@@ -34,7 +36,7 @@
       <h1
         class="font-serif text-white capitalize leading-snug max-h-199px max-w-352px overflow-hidden break-all {fontSizeClass}"
       >
-        {title}
+        {sanitizedTitle}
       </h1>
       {#if source}
         <div
@@ -55,7 +57,7 @@
         </div>
       {/if}
     </div>
-    {#if funds}
+    {#if ecoLinked}
       <span
         class="absolute left-58px top-510px text-[#00C67E] text-21px"
         style="font-family: Roboto; font-weight:400">{fundsText}</span
diff --git a/apps/verification-portal/src/lib/entities/OgShare/CardSquare.svelte b/apps/verification-portal/src/lib/entities/OgShare/CardSquare.svelte
index b70f85d0a..d32d937ba 100644
--- a/apps/verification-portal/src/lib/entities/OgShare/CardSquare.svelte
+++ b/apps/verification-portal/src/lib/entities/OgShare/CardSquare.svelte
@@ -11,6 +11,7 @@
   export let funds = '';
   export let source = '';
   export let img = '';
+  export let ecoLinked = false;
 
   const baseFontSize = 'text-68px'; // override for square card
   const today = format(new Date(), 'd MMM yyyy');
@@ -23,6 +24,7 @@
   {title}
   {img}
   {baseFontSize}
+  let:sanitizedTitle
   let:imageUrl
   let:fontSizeClass
   let:sourceText
@@ -45,7 +47,7 @@
       <h1
         class="font-serif text-white capitalize leading-snug max-h-199px max-w-352px overflow-hidden break-all {fontSizeClass}"
       >
-        {title}
+        {sanitizedTitle}
       </h1>
       {#if source}
         <div
@@ -66,7 +68,7 @@
         </div>
       {/if}
     </div>
-    {#if funds}
+    {#if ecoLinked}
       <span
         class="absolute left-58px bottom-75px text-[#00C67E] text-21px"
         style="font-family: Roboto; font-weight:400">{fundsText}</span
diff --git a/apps/verification-portal/src/lib/shared/i18n/en/index.ts b/apps/verification-portal/src/lib/shared/i18n/en/index.ts
index 385be4414..f7f9287ec 100644
--- a/apps/verification-portal/src/lib/shared/i18n/en/index.ts
+++ b/apps/verification-portal/src/lib/shared/i18n/en/index.ts
@@ -108,7 +108,7 @@ const en: BaseTranslation = {
     intro: {
       sub0: 'Welcome to the Polkadot sub0 biodiversity collection. Your contribution makes a REAL difference. Connect with the marine biodiversity served by the organisation AIMM Portugal.',
     },
-    verified: 'Verified:',
+    ecoLinked: 'Eco-Linked:',
     shareText: 'Share your asset',
     funds: {
       cardTitle: 'Funds generated so far:',
diff --git a/apps/verification-portal/src/lib/shared/i18n/i18n-types.ts b/apps/verification-portal/src/lib/shared/i18n/i18n-types.ts
index 72c8fb5ce..dbe61b5a3 100644
--- a/apps/verification-portal/src/lib/shared/i18n/i18n-types.ts
+++ b/apps/verification-portal/src/lib/shared/i18n/i18n-types.ts
@@ -315,9 +315,9 @@ type RootTranslation = {
 			sub0: string
 		}
 		/**
-		 * V​e​r​i​f​i​e​d​:
+		 * E​c​o​-​L​i​n​k​e​d​:
 		 */
-		verified: string
+		ecoLinked: string
 		/**
 		 * S​h​a​r​e​ ​y​o​u​r​ ​a​s​s​e​t
 		 */
@@ -784,9 +784,9 @@ export type TranslationFunctions = {
 			sub0: () => LocalizedString
 		}
 		/**
-		 * Verified:
+		 * Eco-Linked:
 		 */
-		verified: () => LocalizedString
+		ecoLinked: () => LocalizedString
 		/**
 		 * Share your asset
 		 */
diff --git a/apps/verification-portal/src/routes/assets/[assetAddress]/+page.server.ts b/apps/verification-portal/src/routes/assets/[assetAddress]/+page.server.ts
index d31581674..2535232fe 100644
--- a/apps/verification-portal/src/routes/assets/[assetAddress]/+page.server.ts
+++ b/apps/verification-portal/src/routes/assets/[assetAddress]/+page.server.ts
@@ -18,11 +18,11 @@ const config = {
 const notFoundMessage = 'We’re sorry but that page can’t be found.';
 
 export async function load({ params }) {
-  let assetData: DeepAsset;
-  let deepData: DeepData;
+  let nftData: DeepAsset;
+  let deepData: DeepData | undefined = undefined;
   let addressDetails: Address;
   const assetAddress: string = params.assetAddress;
-  let verifiedStatus: boolean = false;
+  let ecoLinked: boolean = false;
 
   //TODO: Move to a @sni/clients/assets-client
   try {
@@ -36,7 +36,7 @@ export async function load({ params }) {
       throw new Error();
     }
 
-    assetData = fetchedAsset;
+    nftData = fetchedAsset;
     addressDetails = parseAddress(assetAddress);
   } catch (e) {
     error(404, notFoundMessage);
@@ -50,11 +50,11 @@ export async function load({ params }) {
       config
     ).then((response) => {
       if (response.data && response.data.data) {
-        verifiedStatus = true;
+        ecoLinked = true;
       }
       return response.data.data;
     });
-    if (verifiedStatus) {
+    if (ecoLinked) {
       // Fetch deep entity data
       const { data: entityResponse } = await getEntity(
         verifiedData.collection_id,
@@ -62,6 +62,7 @@ export async function load({ params }) {
         config
       );
       deepData = entityResponse.data;
+      if (!deepData) return;
       deepData.link = verifiedData;
 
       const { data: stewardResponse } = await getNewsBySteward(
@@ -96,13 +97,18 @@ export async function load({ params }) {
 
     return { traces_recorded: tracesRecorded };
   }
+  let extractedProperties: ExtractedProperties;
+  if (deepData !== undefined) {
+    extractedProperties = processDeepData(deepData);
+  } else {
+    extractedProperties = { traces_recorded: {} };
+  }
 
-  const extractedProperties: ExtractedProperties = processDeepData(deepData);
   return {
     assetAddress,
     addressDetails,
-    nftData: assetData,
-    verifiedStatus,
+    nftData,
+    ecoLinked,
     deepData,
     baseUrl,
     properties: extractedProperties,
diff --git a/apps/verification-portal/src/routes/assets/[assetAddress]/+page.svelte b/apps/verification-portal/src/routes/assets/[assetAddress]/+page.svelte
index 1fed611af..31d692d97 100644
--- a/apps/verification-portal/src/routes/assets/[assetAddress]/+page.svelte
+++ b/apps/verification-portal/src/routes/assets/[assetAddress]/+page.svelte
@@ -4,6 +4,7 @@
     CAMP_PLACEHOLDER,
   } from '@sni/constants/cdn/placeholders';
   import { chainIdToName } from '@sni/address-utils';
+  import { onDestroy } from 'svelte';
   import Property from '$lib/shared/typography/Property.svelte';
   import Info from '$lib/shared/typography/Info.svelte';
   import Subheader from '$lib/shared/typography/Subheader.svelte';
@@ -18,7 +19,6 @@
   import NewsCarousel from '$lib/components/carousel/NewsCarousel.svelte';
   import LL from '$lib/shared/i18n/i18n-svelte.js';
   import { subscribeToPage, setTocTitle } from '$lib/features/toc';
-  import { onDestroy } from 'svelte';
 
   import { page } from '$app/stores';
 
@@ -27,34 +27,34 @@
   onDestroy(unsubscribe);
 
   $: currentPath = $page.url.toString();
-  $: pageTitle = `${$LL.assets.title({ assetName: nftData.name })}`;
+  $: pageTitle = `${$LL.assets.title({ assetName: nftData!.name })}`;
 
   export let data;
   const {
     nftData,
-    verifiedStatus,
+    ecoLinked,
     deepData,
     baseUrl,
     assetAddress,
     addressDetails,
     properties,
   } = data;
-  const chainReference = addressDetails?.chain?.reference;
-  setTocTitle(nftData.name);
+  const chainReference = addressDetails?.chain?.reference ?? '';
+  setTocTitle(nftData!.name);
 
   // Define specific share card data for a page
-  $: pageDescription = nftData?.collection?.description || ''; //TODO: Replace with asset description
-  $: name = nftData.name || '';
+  $: pageDescription = nftData?.description || '';
+  $: name = nftData!.name;
   $: funds = deepData?.steward?.funds_raised || 0;
   $: source = isNaN(parseInt(chainReference))
     ? chainReference
     : chainIdToName(parseInt(chainReference));
-  $: image = nftData.image;
+  $: image = nftData!.image;
   $: pageImagePath = `/og?title=${encodeURIComponent(
     name
   )}&funds=${encodeURIComponent(funds.toString())}&img=${encodeURIComponent(
     image
-  )}&source=${encodeURIComponent(source)}`;
+  )}&source=${encodeURIComponent(source)}&${ecoLinked ? '&ecoLinked' : ''}`;
   $: pageImage = `${baseUrl}${pageImagePath}`;
   $: pageImageSquare = `${pageImagePath}&ratio=square`;
   // styling
@@ -70,249 +70,248 @@
   />
 {/key}
 
-<!-- Header -->
-<div
-  class="mb-4 grid grid-cols-1 px-10 md:px-8 lg:mb-10 lg:grid-cols-12 lg:gap-5 lg:px-4 xl:mb-16 xl:px-16"
->
+{#if nftData}
+  <!-- Header -->
   <div
-    class="w-100 relative z-10 col-span-1 mb-8 flex justify-center lg:col-span-4 lg:mb-4 xl:col-span-4 xl:col-start-1"
+    class="mb-4 grid grid-cols-1 px-10 md:px-8 lg:mb-10 lg:grid-cols-12 lg:gap-5 lg:px-4 xl:mb-16 xl:px-16"
   >
-    {#key nftData}
-      <NFTImage
-        verified={verifiedStatus}
-        url={nftData.image}
-        alt={nftData.name}
-      />
-    {/key}
-  </div>
-  <div class="lg:col-span-8 xl:col-span-8">
-    <div>
-      <h1
-        class="mb-4 text-[22px] sm:text-2xl leading-none md:text-3xl lg:text-4xl"
-      >
-        {#if verifiedStatus}
-          <span class="text-primary-300">{$LL.assets.verified()}</span>
-        {/if}
-        <span class="font-aeonik">
-          {nftData.name}
-        </span>
-      </h1>
-      <div class="mb-6">
-        {#if nftData.description}
-          <span class="block pt-2 text-base sm:text-sm">
-            {nftData.description}</span
-          >
-        {/if}
-      </div>
+    <div
+      class="w-100 relative z-10 col-span-1 mb-8 flex justify-center lg:col-span-4 lg:mb-4 xl:col-span-4 xl:col-start-1"
+    >
+      {#key nftData}
+        <NFTImage verified={ecoLinked} url={nftData.image} alt={nftData.name} />
+      {/key}
     </div>
-    <div class="grid gap-x-1 gap-y-5 lg:grid-cols-5">
-      <div class="col-span-3">
-        <Property name="Source">
-          <p>{source}</p>
-        </Property>
-        {#if nftData.tokenId}
-          <Property name="Token ID">
-            <p>{nftData.tokenId}</p>
+    <div class="lg:col-span-8 xl:col-span-8">
+      <div>
+        <h1
+          class="mb-4 text-[22px] sm:text-2xl leading-none md:text-3xl lg:text-4xl"
+        >
+          {#if ecoLinked}
+            <span class="text-primary-300">{$LL.assets.ecoLinked()}</span>
+          {/if}
+          <span class="font-aeonik">
+            {nftData.name}
+          </span>
+        </h1>
+        <div class="mb-6">
+          {#if nftData.description}
+            <span class="block pt-2 text-base sm:text-sm">
+              {nftData.description}</span
+            >
+          {/if}
+        </div>
+      </div>
+      <div class="grid gap-x-1 gap-y-5 lg:grid-cols-5">
+        <div class="col-span-3">
+          <Property name="Source">
+            <p>{source}</p>
           </Property>
-        {/if}
+          {#if nftData.tokenId}
+            <Property name="Token ID">
+              <p>{nftData.tokenId}</p>
+            </Property>
+          {/if}
 
-        <Property name="Asset Address">
-          <Info>{assetAddress}</Info>
-        </Property>
-      </div>
+          <Property name="Asset Address">
+            <Info>{assetAddress}</Info>
+          </Property>
+        </div>
 
-      <div
-        class="col-span-2 flex flex-col gap-5 pb-4 lg:flex-row lg:items-center lg:pb-0"
-      >
-        <span class="text-sm">{$LL.assets.shareText()}</span>
-        <SocialShare
-          shareUrl={currentPath}
-          shareImage={pageImageSquare}
-          shareTitle={assetAddress}
-        />
+        <div
+          class="col-span-2 flex flex-col gap-5 pb-4 lg:flex-row lg:items-center lg:pb-0"
+        >
+          <span class="text-sm">{$LL.assets.shareText()}</span>
+          <SocialShare
+            shareUrl={currentPath}
+            shareImage={pageImageSquare}
+            shareTitle={assetAddress}
+          />
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-<!-- /header -->
+  <!-- /header -->
 
-{#if verifiedStatus}
-  <div
-    class="container-grid grid grid-cols-1 sm:mx-4 lg:px-4 xl:mx-0 xl:grid-cols-3"
-  >
-    <!-- Fund Data -->
+  {#if ecoLinked && deepData}
     <div
-      class="Fund-Data xl:dark:bg-primary-100 xl:bg-primary-500 mb-5 px-12 sm:px-8 md:px-11 xl:rounded-lg xl:py-8 xl:pt-11 text-white"
+      class="container-grid grid grid-cols-1 sm:mx-4 lg:px-4 xl:mx-0 xl:grid-cols-3"
     >
-      <Subheader
-        id="funds"
-        title={$LL.assets.funds.cardTitle()}
-        className="md:!text-base !font-normal  text-black dark:text-white   xl:text-white xl:dark:!text-black md:pt-8 xl:pt-0 flex justify-start lg:justify-center xl:justify-start "
-        >{$LL.assets.funds.cardTitle()}</Subheader
+      <!-- Fund Data -->
+      <div
+        class="Fund-Data xl:dark:bg-primary-100 xl:bg-primary-500 mb-5 px-12 sm:px-8 md:px-11 xl:rounded-lg xl:py-8 xl:pt-11 text-white"
       >
-      <FundsDashboard
-        totalFunds={deepData.steward?.funds_raised.toString()}
-        totalFundsSubtitle={$LL.assets.funds.labelTotal()}
-      ></FundsDashboard>
-    </div>
-
-    <!-- Animal Data -->
-    <div
-      class="asset-content-card Animal-Data min-h-100 text-white bg-deep-green dark:bg-primary-500 overflow-hidden sm:rounded-lg md:mb-4 xl:mb-0 xl:rounded-b-none mt-8 sm:mt-auto"
-    >
-      <div class={`${cardHeaderClass} mb-8`}>
         <Subheader
-          id="entity"
-          title={$LL.assets.ecEntity.cardTitle()}
-          className="md:!text-base font-normal"
-          >{$LL.assets.ecEntity.cardTitle()}</Subheader
+          id="funds"
+          title={$LL.assets.funds.cardTitle()}
+          className="md:!text-base !font-normal  text-black dark:text-white   xl:text-white xl:dark:!text-black md:pt-8 xl:pt-0 flex justify-start lg:justify-center xl:justify-start "
+          >{$LL.assets.funds.cardTitle()}</Subheader
         >
-        <h3 class="text-6xl">{deepData?.id}</h3>
+        <FundsDashboard
+          totalFunds={deepData.steward?.funds_raised.toString()}
+          totalFundsSubtitle={$LL.assets.funds.labelTotal()}
+        ></FundsDashboard>
       </div>
-      <div class="full">
-        {#key deepData}
-          {#if deepData.sound}
-            <AudioPlayer
-              assetID={deepData.sound?.id}
-              file={deepData.sound?.filename_disk}
-            ></AudioPlayer>
-          {/if}
-        {/key}
-      </div>
-      <div class="w-full">
-        {#key deepData}
-          {#if deepData.images?.length > 0}
-            {#each deepData?.images as image, index}
-              <ImageSrcSet
-                classNameImage={index > 0
-                  ? 'border-t-2 dark:border-deep-green '
-                  : ''}
-                assetID={image.directus_files_id}
-                altText={deepData?.id}
+
+      <!-- Animal Data -->
+      <div
+        class="asset-content-card Animal-Data min-h-100 text-white bg-deep-green dark:bg-primary-500 overflow-hidden sm:rounded-lg md:mb-4 xl:mb-0 xl:rounded-b-none mt-8 sm:mt-auto"
+      >
+        <div class={`${cardHeaderClass} mb-8`}>
+          <Subheader
+            id="entity"
+            title={$LL.assets.ecEntity.cardTitle()}
+            className="md:!text-base font-normal"
+            >{$LL.assets.ecEntity.cardTitle()}</Subheader
+          >
+          <h3 class="text-6xl">{deepData?.id}</h3>
+        </div>
+        <div class="full">
+          {#key deepData}
+            {#if deepData.sound}
+              <AudioPlayer
+                assetID={deepData.sound?.id}
+                file={deepData.sound?.filename_disk}
+              ></AudioPlayer>
+            {/if}
+          {/key}
+        </div>
+        <div class="w-full">
+          {#key deepData}
+            {#if deepData.images?.length > 0}
+              {#each deepData?.images as image, index}
+                <ImageSrcSet
+                  classNameImage={index > 0
+                    ? 'border-t-2 dark:border-deep-green '
+                    : ''}
+                  assetID={image.directus_files_id}
+                  altText={deepData?.id}
+                />
+              {/each}
+            {:else}
+              <img
+                style="width:inherit"
+                src={ANIMAL_PLACEHOLDER}
+                alt="Not Available"
               />
-            {/each}
-          {:else}
-            <img
-              style="width:inherit"
-              src={ANIMAL_PLACEHOLDER}
-              alt="Not Available"
-            />
-          {/if}
-        {/key}
+            {/if}
+          {/key}
+        </div>
       </div>
-    </div>
 
-    <!-- Animal Data Map -->
-    <div
-      class="asset-content-card Animal-Data-Map sm:bg-deep-green sm:dark:bg-primary-500 md:border-t-none dark:border-deep-green relative z-20 overflow-hidden border-t-2 sm:rounded-lg xl:rounded-t-none xl:border-t-2"
-    >
-      <div class="aspect-video w-full">
-        {#key deepData.location}
-          <SimpleMap geoJSONData={deepData.location} />
-        {/key}
+      <!-- Animal Data Map -->
+      <div
+        class="asset-content-card Animal-Data-Map sm:bg-deep-green sm:dark:bg-primary-500 md:border-t-none dark:border-deep-green relative z-20 overflow-hidden border-t-2 sm:rounded-lg xl:rounded-t-none xl:border-t-2"
+      >
+        <div class="aspect-video w-full">
+          {#key deepData.location}
+            <SimpleMap geoJSONData={deepData.location} />
+          {/key}
+        </div>
       </div>
-    </div>
 
-    <!-- Animal Data Continued -->
-    <div class="asset-content-card Animal-Data-Continued mb-5 bg-transparent">
-      <div class={`${cardHeaderClass} mb-5`}>
-        <Subheader id="ecological-entity" title={$LL.assets.ecEntity.title()}
-          >{$LL.assets.ecEntity.title()}</Subheader
-        >
-        <CardHeader title={deepData.name ? deepData.name : 'Unnamed'} />
-        <p class="card-description">
-          {deepData.description ? deepData.description : '...'}
-        </p>
-      </div>
-      {#key properties}
-        {#if Object.keys(properties).length > 0 && Object.keys(properties.traces_recorded).length > 0}
-          <div
-            class="mx-4 sm:mx-6 rounded-lg bg-gray-300 p-11 dark:bg-black dark:text-gray-300"
+      <!-- Animal Data Continued -->
+      <div class="asset-content-card Animal-Data-Continued mb-5 bg-transparent">
+        <div class={`${cardHeaderClass} mb-5`}>
+          <Subheader id="ecological-entity" title={$LL.assets.ecEntity.title()}
+            >{$LL.assets.ecEntity.title()}</Subheader
           >
-            <Subheader
-              id="tracking-data"
-              title={$LL.assets.ecEntity.propsTitle()}
-              >{$LL.assets.ecEntity.propsTitle()}</Subheader
+          <CardHeader title={deepData.name ? deepData.name : 'Unnamed'} />
+          <p class="card-description">
+            {deepData.description ? deepData.description : '...'}
+          </p>
+        </div>
+        {#key properties}
+          {#if Object.keys(properties).length > 0 && Object.keys(properties.traces_recorded).length > 0}
+            <div
+              class="mx-4 sm:mx-6 rounded-lg bg-gray-300 p-11 dark:bg-black dark:text-gray-300"
             >
-
-            {#if Object.keys(properties.traces_recorded).length > 0}
-              <div class="mb-2 font-serif text-[26px]">
-                {$LL.assets.ecEntity.traces()}
-              </div>
-              <div
-                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-2 gap-y-2"
+              <Subheader
+                id="tracking-data"
+                title={$LL.assets.ecEntity.propsTitle()}
+                >{$LL.assets.ecEntity.propsTitle()}</Subheader
               >
-                {#each Object.keys(properties.traces_recorded) as property}
-                  {#if properties.traces_recorded[property] > 0}
-                    <div
-                      class="col-span-1 font-serif font-light text-2xl sm:text-base"
-                    >
-                      From {property}:
-                      <span class="text-primary-400 dark:text-primary-300 ms-1"
-                        >{properties.traces_recorded[property]}</span
+
+              {#if Object.keys(properties.traces_recorded).length > 0}
+                <div class="mb-2 font-serif text-[26px]">
+                  {$LL.assets.ecEntity.traces()}
+                </div>
+                <div
+                  class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-2 gap-y-2"
+                >
+                  {#each Object.keys(properties.traces_recorded) as property}
+                    {#if properties.traces_recorded[property] > 0}
+                      <div
+                        class="col-span-1 font-serif font-light text-2xl sm:text-base"
                       >
-                    </div>
-                  {/if}
-                {/each}
-              </div>
-            {/if}
-          </div>
-        {/if}
-      {/key}
-    </div>
+                        From {property}:
+                        <span
+                          class="text-primary-400 dark:text-primary-300 ms-1"
+                          >{properties.traces_recorded[property]}</span
+                        >
+                      </div>
+                    {/if}
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          {/if}
+        {/key}
+      </div>
 
-    {#key deepData.steward}
-      <div class="Steward-Data w-full">
-        <!-- Steward News -->
+      {#key deepData.steward}
+        <div class="Steward-Data w-full">
+          <!-- Steward News -->
 
-        {#if deepData.news?.length > 0}
+          {#if deepData.news?.length > 0}
+            <div
+              class=" w-inherit relative z-20 overflow-hidden bg-gray-100 mb-5 rounded-lg dark:text-black mx-4 sm:mx-0 mt-8 sm:mt-auto"
+            >
+              <NewsCarousel newsData={deepData.news}></NewsCarousel>
+            </div>
+          {/if}
+          <!-- Steward Data -->
           <div
-            class=" w-inherit relative z-20 overflow-hidden bg-gray-100 mb-5 rounded-lg dark:text-black mx-4 sm:mx-0 mt-8 sm:mt-auto"
+            class="asset-content-card sm:bg-primary-100 sm:dark:bg-deep-green relative z-20 overflow-hidden sm:rounded-lg"
           >
-            <NewsCarousel newsData={deepData.news}></NewsCarousel>
-          </div>
-        {/if}
-        <!-- Steward Data -->
-        <div
-          class="asset-content-card sm:bg-primary-100 sm:dark:bg-deep-green relative z-20 overflow-hidden sm:rounded-lg"
-        >
-          <div class={`${cardHeaderClass} mb-8`}>
-            <Subheader id="steward" title={$LL.assets.ecSteward.title()}
-              >{$LL.assets.ecSteward.title()}</Subheader
-            >
-            <CardHeader
-              title={deepData.steward?.name}
-              url={deepData.steward?.website}
-            />
-            <p class="card-description">
-              {deepData.steward?.description}
-            </p>
-          </div>
-          <div class="aspect-video w-full pt-8 sm:pt-auto">
-            <SimpleMap geoJSONData={deepData?.steward?.area} />
-          </div>
-          <div class="flex w-full flex-col">
-            {#if deepData.steward?.images?.length > 0}
-              {#each deepData.steward?.images as image}
-                <ImageSrcSet
-                  classNameImage="border-t-2 dark:border-deep-green"
-                  assetID={image.directus_files_id}
-                  altText={deepData?.steward?.name}
-                />
-              {/each}
-            {:else}
-              <img
-                style="width:inherit"
-                src={CAMP_PLACEHOLDER}
-                alt="Not Available"
+            <div class={`${cardHeaderClass} mb-8`}>
+              <Subheader id="steward" title={$LL.assets.ecSteward.title()}
+                >{$LL.assets.ecSteward.title()}</Subheader
+              >
+              <CardHeader
+                title={deepData.steward?.name}
+                url={deepData.steward?.website}
               />
-            {/if}
+              <p class="card-description">
+                {deepData.steward?.description}
+              </p>
+            </div>
+            <div class="aspect-video w-full pt-8 sm:pt-auto">
+              <SimpleMap geoJSONData={deepData?.steward?.area} />
+            </div>
+            <div class="flex w-full flex-col">
+              {#if deepData.steward?.images?.length > 0}
+                {#each deepData.steward?.images as image}
+                  <ImageSrcSet
+                    classNameImage="border-t-2 dark:border-deep-green"
+                    assetID={image.directus_files_id}
+                    altText={deepData?.steward?.name}
+                  />
+                {/each}
+              {:else}
+                <img
+                  style="width:inherit"
+                  src={CAMP_PLACEHOLDER}
+                  alt="Not Available"
+                />
+              {/if}
+            </div>
           </div>
         </div>
-      </div>
-    {/key}
-  </div>
+      {/key}
+    </div>
+  {/if}
 {/if}
 
 <style>
diff --git a/apps/verification-portal/src/routes/og/+server.ts b/apps/verification-portal/src/routes/og/+server.ts
index 4ac2d5a5c..b0e68c879 100644
--- a/apps/verification-portal/src/routes/og/+server.ts
+++ b/apps/verification-portal/src/routes/og/+server.ts
@@ -25,7 +25,10 @@ export const GET: RequestHandler = async ({ url }) => {
 
   const title: string =
     decodeQueryParam(url.searchParams.get('title')) || 'NFT';
-  const funds: string = decodeQueryParam(url.searchParams.get('funds')) || '';
+  const ecoLinked: boolean = url.searchParams.has('ecoLinked');
+  const funds: string = ecoLinked
+    ? decodeQueryParam(url.searchParams.get('funds')) || ''
+    : '';
   const tokenId: string =
     decodeQueryParam(url.searchParams.get('tokenId')) || '';
   const img: string = getAssetImageUrl(
@@ -46,10 +49,6 @@ export const GET: RequestHandler = async ({ url }) => {
     : (OgCard as unknown as SvelteComponent<any, any, any>);
   /* eslint-enable @typescript-eslint/no-explicit-any */
 
-  console.log('RENDERING');
-  console.log('ratio', ratio);
-  console.log('img', img);
-
   return componentToImageResponse(
     component,
     {
@@ -58,6 +57,7 @@ export const GET: RequestHandler = async ({ url }) => {
       tokenId,
       img,
       source,
+      ecoLinked,
     },
     {
       width: width,