Merge pull request #1249 from scroll-tech/ipfs-subdomain

fix: use subdomain gateway

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

@@ -17,7 +17,7 @@ import useSnackbar from "@/hooks/useSnackbar"
 import Dialog from "@/pages/canvas/components/Dialog"
 import { checkBadgeUpgradable, fetchNotionBadgeByAddr, mintBadge } from "@/services/canvasService"
 import useCanvasStore, { BadgeDetailDialogType, BadgesDialogType } from "@/stores/canvasStore"
-import { generateShareTwitterURL, getBadgeImgURL, requireEnv, sentryDebug } from "@/utils"
+import { generateShareTwitterURL, ipfsToBrowserURL, requireEnv, sentryDebug } from "@/utils"
 
 import BadgeDesc from "../../components/BadgeDesc"
 import UpgradeAction from "./UpgradeAction"
@@ -223,7 +223,7 @@ const BadgeDetailDialog = () => {
       >
         <Img
           alt="img"
-          src={getBadgeImgURL(selectedBadge.image)}
+          src={ipfsToBrowserURL(selectedBadge.image)}
           placeholder="/imgs/canvas/badgePlaceholder.svg"
           style={{
             width: isMobile ? "12rem" : "20rem",

src/pages/canvas/Dashboard/BadgeWall/Badge.tsx

@@ -4,7 +4,7 @@ import Img from "react-cool-img"
 import { Box, Badge as MuiBadge } from "@mui/material"
 
 import useCanvasStore, { BadgeDetailDialogType } from "@/stores/canvasStore"
-import { getBadgeImgURL } from "@/utils"
+import { ipfsToBrowserURL } from "@/utils"
 
 import ToolTip from "../../components/Tooltip"
 
@@ -75,7 +75,7 @@ const Badge = ({ badge, index, badgewidth }) => {
           <Img
             alt={badge.metadata?.name}
             style={{ width: "100%", borderRadius: "0.8rem" }}
-            src={getBadgeImgURL(badge.metadata?.image)}
+            src={ipfsToBrowserURL(badge.metadata?.image)}
             placeholder="/imgs/canvas/badgePlaceholder.svg"
           />
         </MuiBadge>

src/pages/canvas/Dashboard/CustomizeDisplayDialog/GridDragDrop/components/Item/Item.tsx

@@ -8,7 +8,7 @@ import { tooltipClasses } from "@mui/material/Tooltip"
 import { keyframes, styled } from "@mui/system"
 
 import NameTip from "@/pages/canvas/components/NameTip"
-import { getBadgeImgURL } from "@/utils/canvas"
+import { ipfsToBrowserURL } from "@/utils/canvas"
 
 // import styles from "./Item.module.css"
 const CustomTooltip = styled(Tooltip)(({ theme }) => ({}))
@@ -249,7 +249,7 @@ export const Item = React.memo(
               <Img
                 alt={(value as any)?.name}
                 style={{ borderRadius: "0.8rem" }}
-                src={getBadgeImgURL((value as any)?.image)}
+                src={ipfsToBrowserURL((value as any)?.image)}
                 placeholder="/imgs/canvas/badgePlaceholder.svg"
               />
             </StyledItem>

src/pages/canvas/Dashboard/CustomizeDisplayDialog/Transfer/Item.jsx

@@ -4,7 +4,7 @@ import { makeStyles } from "tss-react/mui"
 
 import { Box } from "@mui/material"
 
-import { getBadgeImgURL } from "@/utils"
+import { ipfsToBrowserURL } from "@/utils"
 
 const getTranslateX = transform => {
   return transform ? `${Math.round(transform.x)}px` : undefined
@@ -106,7 +106,7 @@ const Item = forwardRef((props: any, ref) => {
       }}
     >
       <Box className={cx(classes.item, dragging && classes.dragging, dragOverlay && "dragOverlay")} {...listeners}>
-        <Img alt={name} style={{ borderRadius: "0.8rem" }} src={getBadgeImgURL(image)} placeholder="/imgs/canvas/badgePlaceholder.svg" />
+        <Img alt={name} style={{ borderRadius: "0.8rem" }} src={ipfsToBrowserURL(image)} placeholder="/imgs/canvas/badgePlaceholder.svg" />
       </Box>
     </Box>
   )

src/pages/canvas/badge/BadgeDetail.tsx

@@ -10,7 +10,7 @@ import Skeleton from "@/components/Skeleton"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import UpgradeAction from "@/pages/canvas/Dashboard/BadgeDetailDialog/UpgradeAction"
 import useCanvasStore from "@/stores/canvasStore"
-import { getBadgeImgURL } from "@/utils"
+import { ipfsToBrowserURL } from "@/utils"
 
 import BadgeDesc from "../components/BadgeDesc"
 import Statistic from "../components/Statistic"
@@ -148,7 +148,7 @@ const BadgeDetail = props => {
               <Skeleton dark sx={{ height: "100%" }}></Skeleton>
             ) : (
               <Img
-                src={getBadgeImgURL(detail.image)}
+                src={ipfsToBrowserURL(detail.image)}
                 placeholder="/imgs/canvas/badgePlaceholder.svg"
                 style={{ borderRadius: "0.8rem" }}
                 alt="badge image"

src/services/canvasService.ts

@@ -11,6 +11,7 @@ import { ORIGINS_NFT_BADGE } from "@/constants"
 import {
   checkDelegatedAttestation,
   decodeBadgePayload,
+  ipfsToBrowserURL,
   isOriginsNFTBadge,
   isUserRejected,
   recognizeError,
@@ -118,9 +119,9 @@ const queryBadgeDetailById = async badgeId => {
 const getBadgeMetadata = async (provider, badgeContractAddress, badgeUID = ethers.encodeBytes32String("0x0")) => {
   try {
     const contract = new ethers.Contract(badgeContractAddress, BadgeABI, provider)
-    const badgeMetadataURI = await contract.badgeTokenURI(badgeUID)
-    let badgeImageURI = badgeMetadataURI.replace(/^ipfs:\/\/(.*)/, "https://ipfs.io/ipfs/$1")
-    const metadata = await scrollRequest(badgeImageURI, { timeout: 5e3 })
+    const badgeTokenURI = await contract.badgeTokenURI(badgeUID)
+    const badgeTokenBrowserURL = ipfsToBrowserURL(badgeTokenURI)
+    const metadata = await scrollRequest(badgeTokenBrowserURL, { timeout: 5e3 })
     return metadata
   } catch (error) {
     // console.log("Failed to get badge image URI:", error)
@@ -401,8 +402,8 @@ const upgradeBadge = async (provider, badge) => {
     const txReceipt = await tx.wait()
     if (txReceipt.status === 1) {
       const badgeMetadataURI = await badgeInstance.badgeTokenURI(id)
-      const accessableURI = badgeMetadataURI.replace(/^ipfs:\/\/(.*)/, "https://ipfs.io/ipfs/$1")
-      const metadata = await scrollRequest(accessableURI)
+      const badgeTokenBrowserURL = ipfsToBrowserURL(badgeMetadataURI)
+      const metadata = await scrollRequest(badgeTokenBrowserURL)
       return metadata
     } else {
       throw new Error("due to any operation that can cause the transaction or top-level call to revert")

src/utils/canvas.ts

@@ -9,9 +9,9 @@ const SCROLL_SEPOLIA_BADGE_SCHEMA = requireEnv("REACT_APP_BADGE_SCHEMA")
 
 const SCROLL_ORIGINS_BADGE_ADDRESS = "0x2dBce60ebeAafb77e5472308f432F78aC3AE07d9"
 
-export const getBadgeImgURL = image => {
-  if (!image) return ""
-  return image.replace(/^ipfs:\/\/(.*)/, "https://cloudflare-ipfs.com/ipfs/$1")
+export const ipfsToBrowserURL = ipfsAddress => {
+  if (!ipfsAddress) return ""
+  return ipfsAddress.replace(/^ipfs:\/\/(.*)/, "https://dweb.link/ipfs/$1")
 }
 
 export const decodeBadgePayload = encodedData => {