fix: fw-433 could fail to load image from infura-ipfs.io gateway (#11430

)
DimensionDev · Feb 23, 2024 · dcc2a93 · dcc2a93
1 parent e85eaa7
commit dcc2a93
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 14 deletions.
diff --git a/.github/workflows/jira-issue-key-checking.yml b/.github/workflows/jira-issue-key-checking.yml
@@ -20,4 +20,4 @@ jobs:
         if: ${{ github.event.pull_request  }}
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          jira-prefix: 'MF'
+          jira-prefix: 'MF|FW'
diff --git a/packages/plugins/Calendar/package.json b/packages/plugins/Calendar/package.json
@@ -23,6 +23,7 @@
         "@masknet/shared-base-ui": "workspace:^",
         "@masknet/theme": "workspace:^",
         "@masknet/web3-providers": "workspace:^",
+        "@masknet/web3-shared-base": "workspace:^",
         "date-fns": "^2.30.0"
     }
 }
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx
@@ -1,5 +1,6 @@
-import { EmptyStatus, LoadingStatus } from '@masknet/shared'
+import { EmptyStatus, Image, LoadingStatus } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
+import { resolveIPFS_URL } from '@masknet/web3-shared-base'
 import { Link, Typography } from '@mui/material'
 import { format } from 'date-fns'
 import { useCallback, useMemo } from 'react'
@@ -67,9 +68,8 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '16px',
     },
     logo: {
-        width: '24px',
-        height: '24px',
         borderRadius: '50%',
+        overflow: 'hidden',
     },
     eventTitle: {
         fontSize: '14px',
@@ -144,7 +144,12 @@ export function EventList({ list, isLoading, empty, dateString }: EventListProps
                                         target="_blank">
                                         <div className={classes.eventHeader}>
                                             <div className={classes.projectWrap}>
-                                                <img src={v.project.logo} className={classes.logo} alt="logo" />
+                                                <Image
+                                                    src={resolveIPFS_URL(v.project.logo)}
+                                                    classes={{ container: classes.logo }}
+                                                    size={24}
+                                                    alt={v.project.name}
+                                                />
                                                 <Typography className={classes.projectName}>
                                                     {v.project.name}
                                                 </Typography>

diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx
@@ -1,5 +1,5 @@
 import { Icons } from '@masknet/icons'
-import { EmptyStatus, LoadingStatus } from '@masknet/shared'
+import { EmptyStatus, LoadingStatus, Image } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
 import { IconButton, Link, Typography } from '@mui/material'
 import { format } from 'date-fns'
@@ -72,9 +72,8 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '16px',
     },
     logo: {
-        width: '24px',
-        height: '24px',
         borderRadius: '50%',
+        overflow: 'hidden',
     },
     eventTitle: {
         fontSize: '14px',
@@ -168,7 +167,12 @@ export function NFTList({ list, isLoading, empty, dateString }: NFTListProps) {
                                         target="_blank">
                                         <div className={classes.eventHeader}>
                                             <div className={classes.projectWrap}>
-                                                <img src={v.project.logo} className={classes.logo} alt="logo" />
+                                                <Image
+                                                    src={v.project.logo}
+                                                    classes={{ container: classes.logo }}
+                                                    size={24}
+                                                    alt={v.project.name}
+                                                />
                                                 <Typography className={classes.projectName}>
                                                     {v.project.name}
                                                 </Typography>

diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
@@ -1,4 +1,4 @@
-import { EmptyStatus, LoadingStatus } from '@masknet/shared'
+import { EmptyStatus, LoadingStatus, Image } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
 import { Link, Typography } from '@mui/material'
 import { format } from 'date-fns'
@@ -69,9 +69,8 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '16px',
     },
     logo: {
-        width: '24px',
-        height: '24px',
         borderRadius: '50%',
+        overflow: 'hidden',
     },
     eventTitle: {
         fontSize: '14px',
@@ -152,9 +151,10 @@ export function NewsList({ list, isLoading, empty, dateString }: NewsListProps)
                                         target="_blank">
                                         <div className={classes.eventHeader}>
                                             <div className={classes.projectWrap}>
-                                                <img
+                                                <Image
                                                     src={v.project.logo}
-                                                    className={classes.logo}
+                                                    classes={{ container: classes.logo }}
+                                                    size={24}
                                                     alt={v.project.name}
                                                 />
                                                 <Typography className={classes.projectName}>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml