fix: support issuerName

src/apis/ecosystem.ts

@@ -8,6 +8,9 @@ export const l2beatOrigin = "https://l2beat.com"
 export const ecosystemTVLUrl = l2beatOrigin + "/api/tvl/scroll.json"
 export const ecosystemActivityUrl = l2beatOrigin + "/api/activity/scroll.json"
 
+export const fetchEcosystemProtocolLogo = (name, ext) => `${ecosystemListLogoUrl}${name}${ext}`
+export const fetchEcosystemProtocolByNameURL = name => `${ecosystemListUrl}?name=${name}`
+
 // cross origin
 // export const l2beatOrigin = "https://api.l2beat.com"
 // export const ecosystemTVLUrl = l2beatOrigin + "/api/tvl/aggregate?projectSlugs=scroll"

src/pages/canvas/Dashboard/BadgeDetailDialog/index.tsx

@@ -15,7 +15,7 @@ import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import useSnackbar from "@/hooks/useSnackbar"
 import Dialog from "@/pages/canvas/components/Dialog"
-import { checkBadgeUpgradable, fetchNotionBadgeByAddr, mintBadge } from "@/services/canvasService"
+import { checkBadgeUpgradable, fetchIssuer, fetchNotionBadgeByAddr, mintBadge } from "@/services/canvasService"
 import useCanvasStore, { BadgeDetailDialogType, BadgesDialogType } from "@/stores/canvasStore"
 import { generateShareTwitterURL, ipfsToBrowserURL, requireEnv, sentryDebug } from "@/utils"
 
@@ -85,7 +85,13 @@ const BadgeDetailDialog = () => {
     queryKey: ["notionBadge", selectedBadge.badgeContract],
     queryFn: async () => {
       const badge = await fetchNotionBadgeByAddr(selectedBadge.badgeContract)
-      return badge.issuer ?? {}
+      if (badge.issuer) {
+        return badge.issuer
+      } else if (selectedBadge.issuerName) {
+        const issuer = await fetchIssuer(selectedBadge.issuerName)
+        return issuer
+      }
+      return {}
     },
     initialData: {},
   })

src/pages/canvas/badge/index.tsx

@@ -13,6 +13,7 @@ import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useSnackbar from "@/hooks/useSnackbar"
 import {
   checkBadgeUpgradable,
+  fetchIssuer,
   fetchNotionBadgeByAddr,
   fillBadgeDetailWithPayload,
   queryBadgeDetailById,
@@ -85,8 +86,14 @@ const BadgeDetailPage = () => {
 
       const { badgeContract, description, ...badgeMetadata } = await fillBadgeDetailWithPayload(publicProvider, { id, data })
 
-      const notionBadge = await fetchNotionBadgeByAddr(badgeContract)
-      console.log(notionBadge, "notionBadge")
+      let badgeWidthIssuer = await fetchNotionBadgeByAddr(badgeContract)
+      if (!badgeWidthIssuer.issuer) {
+        const issuer = await fetchIssuer(badgeMetadata.issuerName)
+        badgeWidthIssuer = {
+          issuer,
+          thirdParty: true,
+        }
+      }
 
       const name = await fetchProfileUsername(publicProvider, recipient)
       let upgradable = false
@@ -101,12 +108,12 @@ const BadgeDetailPage = () => {
         ownerLogo: getSmallAvatarURL(recipient),
         mintedOn: formatDate(time * 1000),
         badgeContract,
-        issuer: notionBadge.issuer,
-        description: isOriginsNFTBadge(notionBadge.badgeContract) ? notionBadge.description : description,
+        issuer: badgeWidthIssuer.issuer,
+        description: isOriginsNFTBadge(badgeContract) ? badgeWidthIssuer.description : description,
         upgradable,
-        thirdParty: notionBadge.thirdParty,
+        thirdParty: badgeWidthIssuer.thirdParty,
       }
-      if (isOriginsNFTBadge(notionBadge.badgeContract)) {
+      if (isOriginsNFTBadge(badgeContract)) {
         const rarityNum = badgeMetadata.attributes.find(item => item.trait_type === "Rarity").value
         badgeDetail.rarity = NFT_RARITY_MAP[rarityNum]
       }

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

@@ -4,7 +4,7 @@ import { makeStyles } from "tss-react/mui"
 
 import { Box, Button, Stack, SvgIcon, Typography } from "@mui/material"
 
-import { ecosystemListLogoUrl } from "@/apis/ecosystem"
+import { fetchEcosystemProtocolLogo } from "@/apis/ecosystem"
 import { ReactComponent as ArrowSvg } from "@/assets/svgs/ecosystem/arrow.svg"
 import { ReactComponent as TwitterSvg } from "@/assets/svgs/ecosystem/twitter.svg"
 import LinesEllipsis from "@/components/LinesEllipsis"
@@ -155,7 +155,7 @@ const ProtocolCard = props => {
           gridArea: "logo",
         }}
       >
-        <Img alt={name} src={`${ecosystemListLogoUrl}${name}${ext}`} placeholder={hash} width={isMobile ? 48 : 88} height={isMobile ? 48 : 88}></Img>
+        <Img alt={name} src={fetchEcosystemProtocolLogo(name, ext)} placeholder={hash} width={isMobile ? 48 : 88} height={isMobile ? 48 : 88}></Img>
       </Stack>
       <Stack direction="row" alignItems="center" gap="0.8rem" className={classes.name}>
         <Typography sx={{ fontSize: ["2rem", "2.4rem"], lineHeight: ["2.8rem", "3.2rem"], fontWeight: 600 }}>{name}</Typography>

src/services/canvasService.ts

@@ -3,6 +3,7 @@ import { AbiCoder, ethers } from "ethers"
 
 import { checkBadgeEligibilityURL, claimBadgeURL } from "@/apis/canvas"
 import { fetchBadgeByAddrURL } from "@/apis/canvas-badge"
+import { fetchEcosystemProtocolByNameURL, fetchEcosystemProtocolLogo } from "@/apis/ecosystem"
 import AttestProxyABI from "@/assets/abis/CanvasAttestProxy.json"
 import BadgeABI from "@/assets/abis/CanvasBadge.json"
 import ProfileABI from "@/assets/abis/CanvasProfile.json"
@@ -124,8 +125,7 @@ const getBadgeMetadata = async (provider, badgeContractAddress, badgeUID = ether
     const metadata = await scrollRequest(badgeTokenBrowserURL, { timeout: 5e3 })
     return metadata
   } catch (error) {
-    // console.log("Failed to get badge image URI:", error)
-    return ""
+    return {}
   }
 }
 
@@ -503,6 +503,25 @@ const fetchNotionBadgeByAddr = async addr => {
   }
 }
 
+export const fetchIssuer = async issuerName => {
+  try {
+    const { data } = await scrollRequest(fetchEcosystemProtocolByNameURL(issuerName))
+    if (!data.length) {
+      return {}
+    }
+    const [{ name: issuerFullName, ext, website }] = data
+    const issuerLogo = fetchEcosystemProtocolLogo(issuerFullName, ext)
+    const issuer = {
+      name: issuerFullName,
+      logo: issuerLogo,
+      origin: website,
+    }
+    return issuer
+  } catch (error) {
+    return {}
+  }
+}
+
 const testAsyncFunc = value => {
   return new Promise(resolve => {
     setTimeout(() => {