Add related DA project banner to L2/L3s (l2beat#5707)

morph-l2 · Nov 5, 2024 · ed92d9d · ed92d9d
1 parent adcdc89
commit ed92d9d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git a/packages/frontend/src/components/project-details-related-project-banner.tsx b/packages/frontend/src/components/project-details-related-project-banner.tsx
@@ -1,29 +1,37 @@
 import Image from 'next/image'
 import Link from 'next/link'
+import { cn } from '~/utils/cn'
 
 export type ProjectDetailsRelatedProjectBannerProps = {
   text: string
   project: {
     name: string
-    type: 'scaling' | 'bridges'
+    type: 'scaling' | 'bridges' | 'data-availability'
     slug: string
   }
+  className?: string
 }
 
 export function ProjectDetailsRelatedProjectBanner({
   text,
   project,
+  className,
 }: ProjectDetailsRelatedProjectBannerProps) {
   const href = `/${project.type}/projects/${project.slug}` as const
 
   return (
-    <div className="flex w-full items-center rounded-lg bg-gray-200 px-4 py-2 text-xs font-medium dark:bg-zinc-800">
+    <div
+      className={cn(
+        'flex w-full items-center rounded-lg bg-gray-200 px-4 py-2 text-xs font-medium dark:bg-zinc-800',
+        className,
+      )}
+    >
       <div>
         {text}{' '}
         <span className="inline-block">
           <Image
             className="mr-1 inline-block size-5"
-            src={`/icons/${project.slug}.png`}
+            src={`/icons/${project.slug.split('/')[0]}.png`}
             width={20}
             height={20}
             alt={`${project.name} logo`}

diff --git a/packages/frontend/src/components/projects/sections/technology-section.tsx b/packages/frontend/src/components/projects/sections/technology-section.tsx
@@ -3,6 +3,10 @@ import {
   type HostChainRisksWarningProps,
 } from '~/components/host-chain-risks-warning'
 import { Markdown } from '~/components/markdown/markdown'
+import {
+  ProjectDetailsRelatedProjectBanner,
+  type ProjectDetailsRelatedProjectBannerProps,
+} from '~/components/project-details-related-project-banner'
 import { UnderReviewCallout } from '../under-review-callout'
 import { TechnologyIncompleteNote } from './contracts/technology-incomplete-note'
 import { ProjectSection } from './project-section'
@@ -23,6 +27,7 @@ export interface TechnologyChoice {
   isUnderReview: boolean
   risks: TechnologyRisk[]
   references: Reference[]
+  relatedProjectBanner?: ProjectDetailsRelatedProjectBannerProps
 }
 
 export function TechnologySection({
@@ -50,6 +55,12 @@ export function TechnologySection({
               <ReferenceList references={item.references} />{' '}
             </>
           )}
+          {item.relatedProjectBanner && (
+            <ProjectDetailsRelatedProjectBanner
+              className="mt-4 md:mt-6"
+              {...item.relatedProjectBanner}
+            />
+          )}
         </div>
       ))}
     </ProjectSection>

diff --git a/packages/frontend/src/utils/project/technology/get-technology-section.ts b/packages/frontend/src/utils/project/technology/get-technology-section.ts
@@ -1,9 +1,17 @@
+import { daLayers } from '@l2beat/config'
 import { type Bridge, type Layer2, type Layer3 } from '@l2beat/config'
 import { compact } from 'lodash'
+import { env } from '~/env'
 import { getTechnologySectionProps } from './get-technology-section-props'
 import { makeTechnologyChoice } from './make-technology-section'
 
 export function getScalingTechnologySection(project: Layer2 | Layer3) {
+  const relatedDaProjects = daLayers.filter(
+    (layer) =>
+      layer.usedIn.some((usedIn) => usedIn.id === project.id) &&
+      layer.bridges.length > 0,
+  )
+
   const items = compact([
     project.technology.stateCorrectness &&
       makeTechnologyChoice(
@@ -19,6 +27,21 @@ export function getScalingTechnologySection(project: Layer2 | Layer3) {
       makeTechnologyChoice(
         'data-availability',
         project.technology.dataAvailability,
+        {
+          relatedProjectBanner:
+            env.NEXT_PUBLIC_FEATURE_FLAG_DA_BEAT &&
+            relatedDaProjects.length < 2 &&
+            relatedDaProjects[0]
+              ? {
+                  text: 'Learn more about the DA layer here:',
+                  project: {
+                    name: relatedDaProjects[0].display.name,
+                    slug: `${relatedDaProjects[0].display.slug}/${relatedDaProjects[0].bridges[0]?.display.slug}`,
+                    type: 'data-availability',
+                  },
+                }
+              : undefined,
+        },
       ),
   ])
 

diff --git a/packages/frontend/src/utils/project/technology/make-technology-section.ts b/packages/frontend/src/utils/project/technology/make-technology-section.ts
@@ -1,9 +1,13 @@
 import { type ScalingProjectTechnologyChoice } from '@l2beat/config'
+import { type ProjectDetailsRelatedProjectBannerProps } from '~/components/project-details-related-project-banner'
 import { type TechnologyChoice } from '../../../components/projects/sections/technology-section'
 
 export function makeTechnologyChoice(
   id: string,
   item: ScalingProjectTechnologyChoice,
+  options: {
+    relatedProjectBanner?: ProjectDetailsRelatedProjectBannerProps
+  } = {},
 ): TechnologyChoice {
   const risks = item.risks.map((risk) => ({
     text: `${risk.category} ${risk.text}`,
@@ -18,5 +22,6 @@ export function makeTechnologyChoice(
     isUnderReview: !!item.isUnderReview,
     references: item.references,
     risks,
+    ...options,
   }
 }