Merge branch 'dev' into acknowledgements-page

Author: pettinarip

next.config.js

@@ -29,15 +29,6 @@ module.exports = (phase, { defaultConfig }) => {
         test: /\.svg$/,
         use: "@svgr/webpack",
       })
-      config.module.rules.push({
-        test: /\.mp4$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            name: '[name].[ext]',
-          },
-        },
-      });
 
       return config
     },

package.json

@@ -23,7 +23,6 @@
     "@emotion/styled": "^11.11.0",
     "clipboard": "^2.0.11",
     "ethereum-blockies-base64": "^1.0.2",
-    "file-loader": "^6.2.0",
     "focus-trap-react": "^10.2.3",
     "framer-motion": "^10.13.0",
     "gray-matter": "^4.0.3",

src/components/EthVideo.tsx

@@ -1,10 +1,7 @@
 import { Box, useColorModeValue } from "@chakra-ui/react"
 
-import darkVideo from "@/public/ethereum-hero-dark.mp4"
-import lightVideo from "@/public/ethereum-hero-light.mp4"
-
 const EthVideo = () => {
-  const src = useColorModeValue(lightVideo, darkVideo)
+  const src = useColorModeValue("ethereum-hero-light.mp4", "ethereum-hero-dark.mp4")
 
   return (
     <Box>

src/components/Layer2/Layer2Onboard.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react"
+import { StaticImageData } from "next/image"
 import { useTranslation } from "next-i18next"
 import {
   Box,
@@ -10,17 +11,20 @@ import {
   UnorderedList,
 } from "@chakra-ui/react"
 
+import type { ChildOnlyProp } from "@/lib/types"
+
+import { Image } from "@/components/Image"
+
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
 // Data
 import {
   CexOnboard,
   cexOnboardData,
 } from "../../data/layer-2/cex-layer-2-onboard"
 import cexSupport from "../../data/layer-2/cex-layer-2-support.json"
-import { ChildOnlyProp } from "../../types"
-import { trackCustomEvent } from "../../utils/matomo"
 // Components
 import { ButtonLink } from "../Buttons"
-import GatsbyImage from "../GatsbyImage"
 import InlineLink from "../Link"
 import OldHeading from "../OldHeading"
 import Text from "../OldText"
@@ -110,7 +114,7 @@ interface CexOnboardOption extends Option {
 
 export interface IProps {
   layer2DataCombined: Array<Layer2>
-  ethIcon: IGatsbyImageData
+  ethIcon: StaticImageData
   ethIconAlt: string
 }
 
@@ -351,11 +355,11 @@ const Layer2Onboard: React.FC<IProps> = ({
         )}
         {/* EthLogo */}
         <Box {...gridContentPlacementStyles.logo}>
-          <GatsbyImage
-            image={ethIcon}
-            objectFit="contain"
+          <Image
+            src={ethIcon}
             alt={ethIconAlt}
-            w="full"
+            width={50}
+            style={{ objectFit: "contain" }}
           />
         </Box>
       </SimpleGrid>

src/components/Layer2ProductCard.tsx

@@ -1,17 +1,18 @@
 // Libraries
+import { StaticImageData } from "next/image"
 import { useTranslation } from "next-i18next"
 import { Box, Center, Flex, Heading } from "@chakra-ui/react"
 
-import { ButtonLink } from "./Buttons"
-import GatsbyImage from "./GatsbyImage"
-import InlineLink from "./Link"
-import Text from "./OldText"
+import { ButtonLink } from "@/components/Buttons"
+import { Image } from "@/components/Image"
+import InlineLink from "@/components/Link"
+import Text from "@/components/OldText"
 
 export interface IProps {
   children?: React.ReactNode
   url?: string
   background: string
-  image: IGatsbyImageData
+  image: StaticImageData
   name: string
   description: string
   note?: string
@@ -54,13 +55,12 @@ const Layer2ProductCard: React.FC<IProps> = ({
         boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
         minH="200px"
       >
-        <GatsbyImage
-          image={image}
+        <Image
+          src={image}
           alt={alt}
-          objectFit="contain"
-          alignSelf="center"
-          maxW={{ base: "311px", sm: "372px" }}
+          width={100}
           maxH={"257px"}
+          style={{ objectFit: "contain" }}
         />
       </Center>
       <Flex p={6} h="100%" direction="column">

src/components/ProductList.tsx

@@ -97,7 +97,7 @@ const ProductList = ({ content, category }: ProductListProps) => {
                   borderRadius="sm"
                   marginTop={{ base: 4, sm: 0 }}
                 >
-                  <Translation id="page-dapps:page-dapps-ready-button" />
+                  <Translation id="page-layer-2:page-dapps-ready-button" />
                   <VisuallyHidden>to {title} website</VisuallyHidden>
                 </ButtonLink>
               )}

src/components/RollupProductDevDoc.tsx

@@ -1,36 +1,13 @@
 import React from "react"
 import { Box, Flex, Heading, ListItem, UnorderedList } from "@chakra-ui/react"
 
-import type { TranslationKey } from "@/lib/types"
-
-import _rollups from "../data/layer-2/layer-2.json"
+import { layer2Data, Rollups,RollupType } from "@/data/layer-2/layer-2"
 
 import InlineLink from "./Link"
 import Text from "./OldText"
 import Translation from "./Translation"
 
-type RollupType = "optimistic" | "zk"
-
-interface Rollup {
-  name: string
-  website: string
-  developerDocs: string
-  l2beat: string
-  bridge: string
-  bridgeWallets: Array<string>
-  blockExplorer: string
-  ecosystemPortal: string
-  tokenLists: string
-  noteKey: TranslationKey
-  purpose: Array<string>
-  descriptionKey: string
-  imageKey: string
-  background: string
-}
-
-type Rollups = { [type in RollupType]: Array<Rollup> }
-
-const rollups = _rollups as Rollups
+const rollups = layer2Data as Rollups
 
 export interface IProps {
   rollupType: RollupType