fix: fix bugs

.yarn/versions/f9c50e83.yml

@@ -0,0 +1,2 @@
+declined:
+  - helios-popup

packages/popup/src/components/Avatar.js

@@ -1,37 +1,51 @@
 import jazzIcon from '@fluent-wallet/jazz-icon'
 import PropTypes from 'prop-types'
-import {useRef, useEffect} from 'react'
-import {useRPC} from '@fluent-wallet/use-rpc'
-import {isNumber} from '@fluent-wallet/checks'
+import {useRef, useEffect, useState} from 'react'
+import {isNumber, isArray} from '@fluent-wallet/checks'
 import {isHexAddress} from '@fluent-wallet/account'
 import {removeAllChild, jsNumberForAddress} from '../utils'
-import {useCfxNetwork} from '../hooks/useApi'
+import {useAddress} from '../hooks/useApi'
 import {RPC_METHODS} from '../constants'
-import {CFX_MAINNET_NAME} from '@fluent-wallet/consts'
-
-const {WALLET_GET_ACCOUNT_ADDRESS_BY_NETWORK} = RPC_METHODS
-const useCfxMainnetAddress = accountIdentity => {
-  const cfxNetwork = useCfxNetwork()
-  let networkId
-  const cfxMainnetArr = cfxNetwork.filter(({name}) => name === CFX_MAINNET_NAME)
-  if (cfxMainnetArr.length) {
-    networkId = cfxMainnetArr[0].eid
-  }
-  const {data: accountAddress} = useRPC(
-    isNumber(accountIdentity) && isNumber(networkId)
-      ? [WALLET_GET_ACCOUNT_ADDRESS_BY_NETWORK, networkId, accountIdentity]
-      : null,
-    {accountId: accountIdentity, networkId},
-    {fallbackData: {}},
-  )
-  const hex = isHexAddress(accountIdentity)
-    ? accountIdentity
-    : accountAddress?.hex
-  return jsNumberForAddress(hex)
+import {CFX_MAINNET_CHAINID} from '@fluent-wallet/consts'
+
+const {ACCOUNT_GROUP_TYPE} = RPC_METHODS
+
+const useAvatarAddress = accountIdentity => {
+  const [address, setAddress] = useState(undefined)
+
+  const {data} = useAddress({
+    stop: !isNumber(accountIdentity),
+    accountId: accountIdentity,
+  })
+  useEffect(() => {
+    let hex
+
+    if (isHexAddress(accountIdentity)) {
+      hex = accountIdentity
+    } else if (isArray(data) && data.length) {
+      const accountGroupType =
+        data?.[0]?.account?.[0]?.accountGroup?.vault?.type
+
+      if (accountGroupType === ACCOUNT_GROUP_TYPE.HW) {
+        hex = data?.[0]?.hex
+      }
+      if (
+        accountGroupType === ACCOUNT_GROUP_TYPE.HD ||
+        accountGroupType === ACCOUNT_GROUP_TYPE.PK
+      ) {
+        hex = data.filter(
+          ({network}) => network?.chainId === CFX_MAINNET_CHAINID,
+        )?.[0]?.hex
+      }
+    }
+    setAddress(jsNumberForAddress(hex))
+  }, [accountIdentity, data])
+
+  return address
 }
 
 function Avatar({diameter, accountIdentity, ...props}) {
-  const address = useCfxMainnetAddress(accountIdentity)
+  const address = useAvatarAddress(accountIdentity)
   const avatarContainerRef = useRef(null)
   useEffect(() => {
     const avatarDom = jazzIcon(diameter, address)

packages/popup/src/components/DappProgressHeader.js

@@ -1,21 +1,20 @@
 import PropTypes from 'prop-types'
 import {TitleNav, ProgressIcon} from '.'
 import {usePendingAuthReq} from '../hooks/useApi'
+import {useDappIcon} from '../hooks'
 function DappProgressHeader({title}) {
   const pendingAuthReq = usePendingAuthReq()
   const [{app, site}] = pendingAuthReq?.length ? pendingAuthReq : [{}]
 
+  const dappIconUrl = useDappIcon(app?.site?.icon)
+
   return (
     <header>
       <div id="dappProgressHeader">
         <TitleNav title={title} hasGoBack={false} />
         <div className="flex justify-center items-center mt-1">
           <div className="w-12 h-12 rounded-full border-solid border-gray-20 border flex items-center justify-center mr-2">
-            <img
-              src={app?.site?.icon || '/images/default-dapp-icon.svg'}
-              alt="favicon"
-              className="w-8 h-8"
-            />
+            <img src={dappIconUrl} alt="favicon" className="w-8 h-8" />
           </div>
           <ProgressIcon
             dashLengthStyle="w-[42px]"

packages/popup/src/components/TokenItem.js

@@ -9,11 +9,9 @@ import {
 import {useCheckImage} from '../hooks'
 import {DisplayBalance} from './'
 
-const getTokenItem = t => {
+const useTokenItemData = t => {
   const rst = [
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     useSingleTokenInfoWithNativeTokenSupport(t),
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     useSingleAddressTokenBalanceWithNativeTokenSupport({
       tokenId: t,
     }),
@@ -34,12 +32,13 @@ function TokenItem({
   className = '',
   ...props
 }) {
-  const [state, balance] = getTokenItem(token)
+  const [state, balance] = useTokenItemData(token)
 
   // In order for cfx that exist locally to appear with other coins as much as possible
   const [nextTickState, setNextTickState] = useState(() => {})
   const {logoURI, name, symbol, decimals} =
     token === 'native' ? nextTickState ?? {} : state
+
   useEffect(() => {
     if (token === 'native') {
       setTimeout(() => setNextTickState(state), 50)

packages/popup/src/hooks/index.js

@@ -487,7 +487,7 @@ export const useCheckImage = url => {
   }
   const [isImg, setIsImg] = useState(null)
   useEffect(() => {
-    if (!/\.(gif|jpg|jpeg|png|svg|GIF|JPG|PNG)$/.test(url)) {
+    if (!/\.(gif|jpg|jpeg|png|svg|ico|GIF|JPG|PNG|ICO)$/.test(url)) {
       return setIsImg(false)
     }
     isImgUrl(url)
@@ -501,6 +501,11 @@ export const useCheckImage = url => {
   return isImg
 }
 
+export const useDappIcon = url => {
+  const isImgUrl = useCheckImage(url)
+  return isImgUrl ? url : '/images/default-dapp-icon.svg'
+}
+
 export const useLedgerBindingApi = () => {
   const {
     data: {

packages/popup/src/hooks/useApi.js

@@ -329,21 +329,25 @@ export const useCurrentAddressTokens = () => {
 }
 
 export const useSingleTokenInfoWithNativeTokenSupport = tokenId => {
-  if (tokenId === 'native' || tokenId === '0x0') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const {ticker} = useCurrentAddress().data.network
-    ticker.logoURI = ticker.iconUrls?.[0]
-    return ticker
-  }
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return useRPC(
-    tokenId ? [QUERY_TOKEN, 'useSingleTokenInfo', tokenId] : null,
+  const {
+    data: {
+      network: {ticker},
+    },
+  } = useCurrentAddress()
+  const {data} = useRPC(
+    isNumber(tokenId) ? [QUERY_TOKEN, 'useSingleTokenInfo', tokenId] : null,
     {
       tokenId,
       g: {name: 1, address: 1, symbol: 1, decimals: 1, logoURI: 1},
     },
-    {fallbackData: {}},
-  ).data
+    {fallbackData: {}, refreshInterval: 0},
+  )
+  if (tokenId === 'native' || tokenId === '0x0') {
+    ticker.logoURI = ticker?.iconUrls?.[0]
+    return ticker
+  }
+
+  return data || {}
 }
 
 export const useValidate20Token = address => {

packages/popup/src/pages/AuthorizedWebsite/components/DappItem.js

@@ -7,20 +7,16 @@ import {request} from '../../../utils'
 import {RPC_METHODS} from '../../../constants'
 import useLoading from '../../../hooks/useLoading'
 import {useGroupAccountAuthorizedDapps} from '../../../hooks/useApi'
+import {useDappIcon} from '../../../hooks'
 
 const {WALLET_REQUEST_PERMISSIONS, WALLET_DELETE_APP} = RPC_METHODS
 
-function DappItem({
-  iconUrl = '/images/default-dapp-icon.svg',
-  origin,
-  siteId,
-  appId,
-  accountId,
-  accountSiteId,
-}) {
+function DappItem({iconUrl, origin, siteId, appId, accountId, accountSiteId}) {
   const {t} = useTranslation()
   const {setLoading} = useLoading()
   const {mutate} = useGroupAccountAuthorizedDapps()
+  const dappIconUrl = useDappIcon(iconUrl)
+
   const onCancelAuth = () => {
     const method =
       accountSiteId[siteId]?.length === 1
@@ -55,7 +51,7 @@ function DappItem({
   return (
     <div className="hover:bg-primary-4 flex items-center p-3">
       <WrapIcon className="w-6 h-6 mr-2">
-        <img src={iconUrl} alt="icon" className="w-4 h-4" />
+        <img src={dappIconUrl} alt="icon" className="w-4 h-4" />
       </WrapIcon>
       <div className="flex-1 text-gray-80 text-ellipsis">{origin}</div>
       <CloseCircleFilled

packages/popup/src/pages/ConfirmTransaction/components/InfoList.js

@@ -3,7 +3,7 @@ import {useTranslation} from 'react-i18next'
 import {useHistory} from 'react-router-dom'
 import {EditOutlined} from '@fluent-wallet/component-icons'
 import {useCurrentDapp} from '../../../hooks/useApi'
-import {useCurrentTxParams} from '../../../hooks'
+import {useCurrentTxParams, useDappIcon} from '../../../hooks'
 import {
   DisplayBalance,
   WrapIcon,
@@ -29,6 +29,8 @@ function InfoList({
   const currentDapp = isDapp ? app : data?.app
   const currentNetwork = isDapp ? app?.currentNetwork : {}
 
+  const dappIconUrl = useDappIcon(currentDapp?.site?.icon)
+
   return (
     <div className="info-list-container flex flex-col">
       <div className="flex justify-between mb-4">
@@ -75,7 +77,7 @@ function InfoList({
             id="currentDapp"
           >
             <img
-              src={currentDapp?.site?.icon || '/images/default-dapp-icon.svg'}
+              src={dappIconUrl}
               alt="icon"
               className="w-4 h-4 mr-1 shrink-0"
               id="currentDappIcon"

packages/popup/src/pages/History/components/HistoryItem.js

@@ -22,7 +22,7 @@ import {
   formatIntoChecksumAddress,
 } from '../../../utils'
 import {useNetworkTypeIsCfx, useCurrentTicker} from '../../../hooks/useApi'
-import {useDecodeData} from '../../../hooks'
+import {useDecodeData, useDappIcon} from '../../../hooks'
 import {
   WrapIcon,
   CopyButton,
@@ -70,6 +70,7 @@ function HistoryItem({
   const [symbol, setSymbol] = useState('')
   const [toAddress, setToAddress] = useState('')
   const {t} = useTranslation()
+  const dappIconUrl = useDappIcon(app?.site?.icon)
   const {
     symbol: tokenSymbol,
     name: tokenName,
@@ -254,11 +255,7 @@ function HistoryItem({
           } w-8 h-8 rounded-full border-solid border flex items-center justify-center mr-2`}
         >
           {app ? (
-            <img
-              src={app?.site?.icon || '/images/default-dapp-icon.svg'}
-              alt="favicon"
-              className="w-4 h-4"
-            />
+            <img src={dappIconUrl} alt="favicon" className="w-4 h-4" />
           ) : (
             <SendOutlined className="w-4 h-4 text-success" />
           )}