From dcc2a936952953702997a5fab0c0977a52821700 Mon Sep 17 00:00:00 2001
From: swkatmask <158803171+swkatmask@users.noreply.github.com>
Date: Fri, 23 Feb 2024 11:19:09 +0800
Subject: [PATCH] fix: fw-433 could fail to load image from infura-ipfs.io
 gateway (#11430)

---
 .github/workflows/jira-issue-key-checking.yml       |  2 +-
 packages/plugins/Calendar/package.json              |  1 +
 .../src/SiteAdaptor/components/EventList.tsx        | 13 +++++++++----
 .../Calendar/src/SiteAdaptor/components/NFTList.tsx | 12 ++++++++----
 .../src/SiteAdaptor/components/NewsList.tsx         | 10 +++++-----
 pnpm-lock.yaml                                      |  3 +++
 6 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/.github/workflows/jira-issue-key-checking.yml b/.github/workflows/jira-issue-key-checking.yml
index 4252ea6522e3..ad21db8f9435 100644
--- 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
index 5da60cf8d2c4..fdc36b6cbe39 100644
--- 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
index 3d1e428a19c0..74caaefce2b2 100644
--- 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
index ea26e894e3ce..aa20a41cc190 100644
--- 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
index 81248ae75947..0c58f32e55ac 100644
--- 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
index 59b77769eba7..0a8b904d8d5b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1015,6 +1015,9 @@ importers:
       '@masknet/web3-providers':
         specifier: workspace:^
         version: link:../../web3-providers
+      '@masknet/web3-shared-base':
+        specifier: workspace:^
+        version: link:../../web3-shared/base
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0