Merge pull request #44 from l2beat/main

[pull] main from l2beat:main

packages/frontend/src/app/(side-nav)/scaling/activity/_components/scaling-activity-tabs.tsx

@@ -10,6 +10,11 @@ import {
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
 import { HorizontalSeparator } from '~/components/core/horizontal-separator'
+import {
+  OthersInfo,
+  RollupsInfo,
+  ValidiumsAndOptimiumsInfo,
+} from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingActivityEntry } from '~/server/features/scaling/activity/get-scaling-activity-entries'
@@ -87,6 +92,7 @@ export function ScalingActivityTabs({
                 <HorizontalSeparator className="mb-3 mt-5" />
               </>
             )}
+            <RollupsInfo />
             <ScalingActivityTable entries={filteredEntries.rollups} rollups />
           </DirectoryTabsContent>
         </TableSortingProvider>
@@ -106,6 +112,7 @@ export function ScalingActivityTabs({
                 <HorizontalSeparator className="mb-3 mt-5" />
               </>
             )}
+            <ValidiumsAndOptimiumsInfo />
             <ScalingActivityTable
               entries={filteredEntries.validiumsAndOptimiums}
             />
@@ -128,6 +135,7 @@ export function ScalingActivityTabs({
                   <HorizontalSeparator className="mb-3 mt-5" />
                 </>
               )}
+              <OthersInfo />
               <ScalingActivityTable entries={filteredEntries.others} />
             </DirectoryTabsContent>
           </TableSortingProvider>

packages/frontend/src/app/(side-nav)/scaling/archived/_components/scaling-archived-tables.tsx

@@ -7,6 +7,11 @@ import {
   DirectoryTabsList,
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
+import {
+  OthersInfo,
+  RollupsInfo,
+  ValidiumsAndOptimiumsInfo,
+} from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingArchivedEntry } from '~/server/features/scaling/archived/get-scaling-archived-entries'
@@ -60,11 +65,13 @@ export function ScalingArchivedTables({
         </DirectoryTabsList>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="rollups">
+            <RollupsInfo />
             <ScalingArchivedTable entries={filteredEntries.rollups} />
           </DirectoryTabsContent>
         </TableSortingProvider>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="validiums-and-optimiums">
+            <ValidiumsAndOptimiumsInfo />
             <ScalingArchivedTable
               entries={filteredEntries.validiumsAndOptimiums}
             />
@@ -73,6 +80,7 @@ export function ScalingArchivedTables({
         {featureFlags.showOthers && filteredEntries.others.length > 0 && (
           <TableSortingProvider initialSort={initialSort}>
             <DirectoryTabsContent value="others">
+              <OthersInfo />
               <ScalingArchivedTable entries={filteredEntries.others} />
             </DirectoryTabsContent>
           </TableSortingProvider>

packages/frontend/src/app/(side-nav)/scaling/costs/_components/scaling-costs-tabs.tsx

@@ -9,6 +9,7 @@ import {
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
 import { HorizontalSeparator } from '~/components/core/horizontal-separator'
+import { OthersInfo, RollupsInfo } from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingCostsEntry } from '~/server/features/scaling/costs/get-scaling-costs-entries'
@@ -69,6 +70,7 @@ export function ScalingCostsTabs(props: Props) {
                 <HorizontalSeparator className="my-5" />
               </>
             )}
+            <RollupsInfo />
             <ScalingCostsTable entries={filteredEntries.rollups} rollups />
           </DirectoryTabsContent>
         </TableSortingProvider>
@@ -87,6 +89,7 @@ export function ScalingCostsTabs(props: Props) {
                   <HorizontalSeparator className="my-5" />
                 </>
               )}
+              <OthersInfo />
               <ScalingCostsTable entries={filteredEntries.others} />
             </DirectoryTabsContent>
           </TableSortingProvider>

packages/frontend/src/app/(side-nav)/scaling/data-availability/_components/scaling-da-tables.tsx

@@ -6,6 +6,11 @@ import {
   DirectoryTabsList,
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
+import {
+  OthersInfo,
+  RollupsInfo,
+  ValidiumsAndOptimiumsInfo,
+} from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingDataAvailabilityEntry } from '~/server/features/scaling/data-availability/get-scaling-da-entries'
@@ -58,6 +63,7 @@ export function ScalingDaTables(props: Props) {
         </DirectoryTabsList>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="rollups">
+            <RollupsInfo />
             <ScalingDataAvailabilityTable
               entries={filteredEntries.rollups}
               rollups
@@ -66,6 +72,7 @@ export function ScalingDaTables(props: Props) {
         </TableSortingProvider>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="validiums-and-optimiums">
+            <ValidiumsAndOptimiumsInfo />
             <ScalingDataAvailabilityTable
               entries={filteredEntries.validiumsAndOptimiums}
             />
@@ -74,6 +81,7 @@ export function ScalingDaTables(props: Props) {
         {featureFlags.showOthers && filteredEntries.others.length > 0 && (
           <TableSortingProvider initialSort={initialSort}>
             <DirectoryTabsContent value="others">
+              <OthersInfo />
               <ScalingDataAvailabilityTable entries={filteredEntries.others} />
             </DirectoryTabsContent>
           </TableSortingProvider>

packages/frontend/src/app/(side-nav)/scaling/finality/_components/scaling-finality-tables.tsx

@@ -6,6 +6,7 @@ import {
   DirectoryTabsList,
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
+import { OthersInfo, RollupsInfo } from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingFinalityEntry } from '~/server/features/scaling/finality/get-scaling-finality-entries'
@@ -52,12 +53,14 @@ export function ScalingFinalityTables(props: Props) {
         </DirectoryTabsList>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="rollups">
+            <RollupsInfo />
             <ScalingFinalityTable entries={filteredEntries.rollups} rollups />
           </DirectoryTabsContent>
         </TableSortingProvider>
         {featureFlags.showOthers && filteredEntries.others.length > 0 && (
           <TableSortingProvider initialSort={initialSort}>
             <DirectoryTabsContent value="others">
+              <OthersInfo />
               <ScalingFinalityTable entries={filteredEntries.others} />
             </DirectoryTabsContent>
           </TableSortingProvider>

packages/frontend/src/app/(side-nav)/scaling/liveness/_components/scaling-liveness-tables.tsx

@@ -7,6 +7,7 @@ import {
   DirectoryTabsList,
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
+import { OthersInfo, RollupsInfo } from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingLivenessEntry } from '~/server/features/scaling/liveness/get-scaling-liveness-entries'
@@ -55,12 +56,14 @@ export function ScalingLivenessTables(props: Props) {
         </DirectoryTabsList>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="rollups">
+            <RollupsInfo />
             <ScalingLivenessTable entries={filteredEntries.rollups} rollups />
           </DirectoryTabsContent>
         </TableSortingProvider>
         {featureFlags.showOthers && filteredEntries.others.length > 0 && (
           <TableSortingProvider initialSort={initialSort}>
             <DirectoryTabsContent value="others">
+              <OthersInfo />
               <ScalingLivenessTable entries={filteredEntries.others} />
             </DirectoryTabsContent>
           </TableSortingProvider>

packages/frontend/src/app/(side-nav)/scaling/risk/_components/scaling-risk-tables.tsx

@@ -6,6 +6,11 @@ import {
   DirectoryTabsList,
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
+import {
+  OthersInfo,
+  RollupsInfo,
+  ValidiumsAndOptimiumsInfo,
+} from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingRiskEntry } from '~/server/features/scaling/risks/get-scaling-risk-entries'
@@ -60,17 +65,20 @@ export function ScalingRiskTables(props: Props) {
         </DirectoryTabsList>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="rollups">
+            <RollupsInfo />
             <ScalingRiskTable entries={filteredEntries.rollups} rollups />
           </DirectoryTabsContent>
         </TableSortingProvider>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="validiums-and-optimiums">
+            <ValidiumsAndOptimiumsInfo />
             <ScalingRiskTable entries={filteredEntries.validiumsAndOptimiums} />
           </DirectoryTabsContent>
         </TableSortingProvider>
         {featureFlags.showOthers && filteredEntries.others.length > 0 && (
           <TableSortingProvider initialSort={initialSort}>
             <DirectoryTabsContent value="others">
+              <OthersInfo />
               <ScalingRiskTable entries={filteredEntries.others} />
             </DirectoryTabsContent>
           </TableSortingProvider>

packages/frontend/src/app/(side-nav)/scaling/summary/_components/scaling-summary-tables.tsx

@@ -7,6 +7,11 @@ import {
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
 import { HorizontalSeparator } from '~/components/core/horizontal-separator'
+import {
+  OthersInfo,
+  RollupsInfo,
+  ValidiumsAndOptimiumsInfo,
+} from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingSummaryEntry } from '~/server/features/scaling/summary/get-scaling-summary-entries'
@@ -64,11 +69,13 @@ export function ScalingSummaryTables(props: Props) {
         </DirectoryTabsList>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="rollups">
+            <RollupsInfo />
             <ScalingSummaryRollupsTable entries={filteredEntries.rollups} />
           </DirectoryTabsContent>
         </TableSortingProvider>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="validiums-and-optimiums">
+            <ValidiumsAndOptimiumsInfo />
             <ScalingSummaryValidiumsAndOptimiumsTable
               entries={filteredEntries.validiumsAndOptimiums}
             />
@@ -77,7 +84,10 @@ export function ScalingSummaryTables(props: Props) {
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="others">
             {featureFlags.showOthers && filteredEntries.others.length > 0 ? (
-              <ScalingSummaryOthersTable entries={filteredEntries.others} />
+              <>
+                <OthersInfo />
+                <ScalingSummaryOthersTable entries={filteredEntries.others} />
+              </>
             ) : (
               <OthersComingSoonNotice />
             )}

packages/frontend/src/app/(side-nav)/scaling/tvl/_components/scaling-tvl-tabs.tsx

@@ -9,6 +9,11 @@ import {
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
 import { HorizontalSeparator } from '~/components/core/horizontal-separator'
+import {
+  OthersInfo,
+  RollupsInfo,
+  ValidiumsAndOptimiumsInfo,
+} from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingTvlEntry } from '~/server/features/scaling/tvl/get-scaling-tvl-entries'
@@ -73,6 +78,7 @@ export function ScalingTvlTabs(props: Props) {
                 <HorizontalSeparator className="my-5" />
               </>
             )}
+            <RollupsInfo />
             <ScalingTvlTable entries={filteredEntries.rollups} rollups />
           </DirectoryTabsContent>
         </TableSortingProvider>
@@ -90,6 +96,7 @@ export function ScalingTvlTabs(props: Props) {
                 <HorizontalSeparator className="my-5" />
               </>
             )}
+            <ValidiumsAndOptimiumsInfo />
             <ScalingTvlTable entries={filteredEntries.validiumsAndOptimiums} />
           </DirectoryTabsContent>
         </TableSortingProvider>
@@ -108,6 +115,7 @@ export function ScalingTvlTabs(props: Props) {
                   <HorizontalSeparator className="my-5" />
                 </>
               )}
+              <OthersInfo />
               <ScalingTvlTable entries={filteredEntries.others} />
             </DirectoryTabsContent>
           </TableSortingProvider>

packages/frontend/src/app/(side-nav)/scaling/upcoming/_components/scaling-upcoming-tables.tsx

@@ -7,6 +7,11 @@ import {
   DirectoryTabsList,
   DirectoryTabsTrigger,
 } from '~/components/core/directory-tabs'
+import {
+  OthersInfo,
+  RollupsInfo,
+  ValidiumsAndOptimiumsInfo,
+} from '~/components/scaling-tabs-info'
 import { TableSortingProvider } from '~/components/table/sorting/table-sorting-context'
 import { featureFlags } from '~/consts/feature-flags'
 import { type ScalingUpcomingEntry } from '~/server/features/scaling/upcoming/get-scaling-upcoming-entries'
@@ -60,11 +65,13 @@ export function ScalingUpcomingTables({
         </DirectoryTabsList>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="rollups">
+            <RollupsInfo />
             <ScalingUpcomingTable entries={filteredEntries.rollups} />
           </DirectoryTabsContent>
         </TableSortingProvider>
         <TableSortingProvider initialSort={initialSort}>
           <DirectoryTabsContent value="validiums-and-optimiums">
+            <ValidiumsAndOptimiumsInfo />
             <ScalingUpcomingTable
               entries={filteredEntries.validiumsAndOptimiums}
             />
@@ -73,6 +80,7 @@ export function ScalingUpcomingTables({
         {featureFlags.showOthers && filteredEntries.others.length > 0 && (
           <TableSortingProvider initialSort={initialSort}>
             <DirectoryTabsContent value="others">
+              <OthersInfo />
               <ScalingUpcomingTable entries={filteredEntries.others} />
             </DirectoryTabsContent>
           </TableSortingProvider>

packages/frontend/src/components/scaling-tabs-info.tsx

@@ -0,0 +1,73 @@
+import { InfoIcon } from '~/icons/info'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTrigger,
+} from './core/drawer'
+
+export function RollupsInfo() {
+  return (
+    <InfoWithMobileDrawer
+      title="What are rollups?"
+      content="Rollups are L2s that periodically post state commitments to Ethereum.
+        These commitments are validated by either Validity Proofs or are
+        accepted optimistically and can be challenged via Fraud Proof mechanism
+        within a certain fraud proof window. Additionally L2 data is also posted
+        to Ethereum, hence there are no additional trust assumptions introduced."
+    />
+  )
+}
+
+export function ValidiumsAndOptimiumsInfo() {
+  return (
+    <InfoWithMobileDrawer
+      title="What are Validiums and Optimiums?"
+      content="Alt-DAs are L2s that, similarly to Rollups, periodically post state
+      commitments to Ethereum that are validated by it, however data is not
+      posted to Ethereum. This means that additional trust assumptions, external
+      to Ethereum, are introduced to prevent data withholding attacks."
+    />
+  )
+}
+
+export function OthersInfo() {
+  return (
+    <InfoWithMobileDrawer
+      title="What are Others?"
+      content="OTHERS are L2s that either do not have a working proof system or they
+      don&apos;t have an external DA sufficiently decentralised (ie at least 5
+      independent attesters)"
+    />
+  )
+}
+
+function InfoWithMobileDrawer({
+  title,
+  content,
+}: { title: string; content: string }) {
+  return (
+    <div className="flex flex-row sm:mb-2">
+      <div className="text-[11px] leading-snug text-zinc-500 dark:text-secondary md:text-[13px] md:leading-tight">
+        <p className="max-sm:hidden">{content}</p>
+        <Drawer>
+          <DrawerTrigger className="flex items-center gap-1 sm:hidden">
+            <InfoIcon className="size-3 fill-blue-550" />
+            <div className="text-2xs font-medium underline">{title}</div>
+          </DrawerTrigger>
+          <DrawerContent className="px-1 pb-0">
+            <DrawerHeader className="text-[18px] font-semibold text-zinc-800 dark:text-primary">
+              {title}
+            </DrawerHeader>
+            <p className="mt-4 text-sm font-normal text-zinc-500 dark:text-primary">
+              {content}
+            </p>
+            <DrawerTrigger className="w-full py-8 text-center text-zinc-500 underline dark:text-primary">
+              Close
+            </DrawerTrigger>
+          </DrawerContent>
+        </Drawer>
+      </div>
+    </div>
+  )
+}