Merge pull request #1438 from scroll-tech/fix-protocol-key

fix: protocol key

Author: Holybasil

src/app/ecosystem/Protocols/ProtocolList/ProtocolCard.tsx

@@ -1,5 +1,5 @@
+import Image from "next/image"
 import { useRef, useState } from "react"
-import Img from "react-cool-img"
 import { makeStyles } from "tss-react/mui"
 
 import { Box, Button, Stack, SvgIcon, Typography } from "@mui/material"
@@ -15,6 +15,18 @@ import useCheckViewport from "@/hooks/useCheckViewport"
 
 import NetworkLabel from "./NetworkLabel"
 
+export interface Protocol {
+  name: string
+  desc: string
+  ext: string
+  // networkLabel: "Mainnet" | "Testnet"
+  networkLabel: string
+  rank: object
+  tags: string[]
+  twitterHandle: string
+  website: string
+}
+
 const useStyles = makeStyles()(theme => ({
   grid: {
     backgroundColor: theme.vars.palette.themeBackground.normal,
@@ -123,7 +135,7 @@ const useStyles = makeStyles()(theme => ({
 }))
 
 const ProtocolCard = props => {
-  const { name, hash, ext, tags, desc, website, twitterHandle, networkLabel, onResize, className, ...restProps } = props
+  const { name, ext, tags, desc, website, twitterHandle, networkLabel, onResize, className, ...restProps } = props
   const { classes, cx } = useStyles()
   const { isMobile, isDesktop } = useCheckViewport()
 
@@ -146,7 +158,13 @@ const ProtocolCard = props => {
           gridArea: "logo",
         }}
       >
-        <Img alt={name} src={fetchEcosystemProtocolLogo(name, ext)} placeholder={hash} width={isMobile ? 48 : 88} height={isMobile ? 48 : 88}></Img>{" "}
+        <Image
+          alt={name}
+          src={fetchEcosystemProtocolLogo(name, ext)}
+          placeholder="empty"
+          width={isMobile ? 48 : 88}
+          height={isMobile ? 48 : 88}
+        ></Image>
       </Stack>
       <Stack direction="row" alignItems="center" gap="0.8rem" className={classes.name}>
         <Typography

src/app/ecosystem/Protocols/ProtocolList/index.tsx

@@ -14,7 +14,7 @@ import { isAboveScreen } from "@/utils/dom"
 
 import Error from "./Error"
 import NoData from "./NoData"
-import ProtocolCard from "./ProtocolCard"
+import ProtocolCard, { type Protocol } from "./ProtocolCard"
 
 const useStyles = makeStyles()(theme => ({
   listRoot: {
@@ -36,7 +36,7 @@ const ProtocolList = props => {
   const { classes } = useStyles()
   const [loading, setLoading] = useState(false)
   const prePage = usePrevious(page)
-  const [ecosystemList, setEcosystemList] = useState([])
+  const [ecosystemList, setEcosystemList] = useState<Protocol[]>([])
   const [isError, setIsError] = useState(false)
   const [hasMore, setHasMore] = useState(false)
 
@@ -46,7 +46,9 @@ const ProtocolList = props => {
     estimateSize: () => 136,
     overscan: 5,
     gap: 20,
+
     scrollMargin: listRef.current?.offsetTop ?? 0,
+    getItemKey: index => ecosystemList[index].name,
   })
   const rows = virtualizer.getVirtualItems()
 

src/components/LinesEllipsis/index.tsx

@@ -36,7 +36,7 @@ function prevSibling(node, count) {
 }
 
 const LinesEllipsis = props => {
-  const { component: Component = "div", ellipsis, trimRight = true, basedOn, maxLine = 1, text, className, onReflow, ...rest } = props
+  const { component: Component = "div", ellipsis, trimRight = true, basedOn, maxLine = 1, text, className, ...rest } = props
 
   const [displayedText, setDisplayedText] = useState(text)
   const [clamped, setClamped] = useState(false)
@@ -92,7 +92,7 @@ const LinesEllipsis = props => {
     const nextDisplayedText = nextClamped ? units.current.slice(0, ellipsisIndex).join("") : props.text
     setClamped(nextClamped)
     setDisplayedText(nextDisplayedText)
-    onReflow({ clamped: nextClamped, text: nextDisplayedText })
+    // onReflow({ clamped: nextClamped, text: nextDisplayedText })
   }
 
   // return the index of the first letter/word of each line