fix(nft lucky drop): ui issue

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx

@@ -50,7 +50,7 @@ const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
 }))
 
 export function RedPacketCreateNew(props: RedPacketFormProps & { state: readonly [number, (next: number) => void] }) {
-    const { origin, onNext, onChange, onClose, state } = props
+    const { origin, onNext, onChange, onClose, state, setERC721DialogHeight } = props
     const t = useI18N()
     const { classes } = useStyles({ snsId: activatedSocialNetworkUI.networkIdentifier })
     const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
@@ -74,7 +74,7 @@ export function RedPacketCreateNew(props: RedPacketFormProps & { state: readonly
                         <span>{t.erc721_tab_title()}</span>
                     </div>
                 ),
-                children: <RedPacketERC721Form onClose={onClose} />,
+                children: <RedPacketERC721Form onClose={onClose} setERC721DialogHeight={setERC721DialogHeight} />,
                 sx: { p: 0 },
                 disabled: ![ChainId.Mainnet, ChainId.Matic, ChainId.BSC, ChainId.Conflux].includes(chainId),
             },

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx

@@ -131,7 +131,11 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
 
     const tokenState = useState(RpTypeTabs.ERC20)
 
-    const dialogContentHeight = state[0] === DialogTabs.past ? 600 : tokenState[0] === RpTypeTabs.ERC20 ? 350 : 690
+    // nft dialog height depends on the detailed step
+    const [ERC721DialogHeight, setERC721DialogHeight] = useState(350)
+
+    const dialogContentHeight =
+        state[0] === DialogTabs.past ? 600 : tokenState[0] === RpTypeTabs.ERC20 ? 350 : ERC721DialogHeight
 
     const tabProps: AbstractTabProps = {
         tabs: [
@@ -144,6 +148,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
                         state={tokenState}
                         onClose={onClose}
                         onChange={onChange}
+                        setERC721DialogHeight={(height: number) => setERC721DialogHeight(height)}
                     />
                 ),
                 sx: { p: 0 },

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx

@@ -80,6 +80,7 @@ export interface RedPacketFormProps extends withClasses<never> {
     onClose: () => void
     origin?: RedPacketSettings
     onNext: () => void
+    setERC721DialogHeight?: (height: number) => void
 }
 
 export function RedPacketERC20Form(props: RedPacketFormProps) {

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx

@@ -195,10 +195,11 @@ const useStyles = makeStyles()((theme) => {
 })
 interface RedPacketERC721FormProps {
     onClose: () => void
+    setERC721DialogHeight?: (height: number) => void
 }
 export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
     const t = useI18N()
-    const { onClose } = props
+    const { onClose, setERC721DialogHeight } = props
     const { classes } = useStyles()
     const [open, setOpen] = useState(false)
     const [balance, setBalance] = useState(0)
@@ -267,6 +268,8 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
         return ''
     }, [tokenDetailedList.length, balance, t])
 
+    setERC721DialogHeight?.(balance > 0 ? 690 : 350)
+
     return (
         <>
             <Box className={classes.root}>

packages/mask/src/plugins/RedPacket/locales/en-US.json

@@ -48,7 +48,7 @@
     "erc20_tab_title": "Token",
     "claimed": "Claimed",
     "details": "Lucky Drop Details",
-    "display_name": "Plugin: Lucky Drop",
+    "display_name": "Lucky Drop",
     "select_existing": "History",
     "create_new": "New",
     "send_symbol": "Send {{amount}} {{symbol}}",

packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx

@@ -280,8 +280,10 @@ interface ContractListItemProps {
 function ContractListItem(props: ContractListItemProps) {
     const { onSubmit, contract } = props
     const { classes } = useStyles()
-    const { value: balance = '0' } = useNonFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, contract.address)
-    return (
+    const { value: balance = '0' } = useNonFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, contract.address, {
+        chainId: contract.chainId,
+    })
+    return balance === '0' ? null : (
         <div style={{ position: 'relative' }}>
             <ListItem className={classes.listItem} onClick={() => onSubmit(balance, contract)}>
                 <Avatar className={classes.icon} src={contract.iconURL} />

packages/plugins/EVM/src/state/Connection/connection.ts

@@ -33,6 +33,7 @@ import {
     createWeb3Provider,
     getEthereumConstants,
     isValidAddress,
+    resolveIPFSLinkFromURL,
 } from '@masknet/web3-shared-evm'
 import {
     Account,
@@ -373,8 +374,8 @@ class Connection implements EVM_Connection {
                 '',
                 response.description,
                 undefined,
-                response.image,
-                response.image,
+                resolveIPFSLinkFromURL(response.image),
+                resolveIPFSLinkFromURL(response.image),
             )
         }
 
@@ -391,8 +392,8 @@ class Connection implements EVM_Connection {
             '',
             response.description,
             undefined,
-            response.image,
-            response.image,
+            resolveIPFSLinkFromURL(response.image),
+            resolveIPFSLinkFromURL(response.image),
         )
     }
     async getNonFungibleTokenContract(

packages/web3-shared/evm/pipes/index.ts

@@ -4,7 +4,7 @@ import { SourceType } from '@masknet/web3-shared-base'
 
 // TODO check ipfs inside before resolving
 export function resolveIPFSLink(ipfs: string): string {
-    return urlcat('https://coldcdn.com/api/cdn/mipfsygtms/ipfs/:ipfs', { ipfs })
+    return urlcat('https://ipfs.io/ipfs/:ipfs', { ipfs })
 }
 
 export function resolveIPFSLinkFromURL(url: string): string {