- Refactored asset page to use ecoLinked instead of verified status

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}
+/>

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

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

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:',

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
 		 */

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,18 +50,19 @@ 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,
         verifiedData.entity_id,
         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,