From b9ab76c5850a063dea4f666be96a53b89fe02ffe Mon Sep 17 00:00:00 2001 From: RickStormBringer <13621099447@163.com> Date: Wed, 18 May 2022 12:49:58 +0800 Subject: [PATCH 1/3] feat: add PORTAL-3103 --- .yarn/versions/f9c50e83.yml | 2 + .../src/components/DappProgressHeader.js | 9 +- packages/popup/src/hooks/index.js | 5 + .../AuthorizedWebsite/components/DappItem.js | 14 +- .../ConfirmTransaction/components/InfoList.js | 6 +- .../pages/History/components/HistoryItem.js | 9 +- .../src/pages/Home/components/AccountList.js | 170 ++++++++++++------ .../src/pages/Home/components/CurrentDapp.js | 8 +- .../components/useAuthorizedAccountIdIcon.js | 2 +- 9 files changed, 140 insertions(+), 85 deletions(-) create mode 100644 .yarn/versions/f9c50e83.yml diff --git a/.yarn/versions/f9c50e83.yml b/.yarn/versions/f9c50e83.yml new file mode 100644 index 000000000..6cc5c675c --- /dev/null +++ b/.yarn/versions/f9c50e83.yml @@ -0,0 +1,2 @@ +declined: + - helios-popup diff --git a/packages/popup/src/components/DappProgressHeader.js b/packages/popup/src/components/DappProgressHeader.js index 63152575d..464353e76 100644 --- a/packages/popup/src/components/DappProgressHeader.js +++ b/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 (
- favicon + favicon
{ return isImg } +export const useDappIcon = url => { + const isImgUrl = useCheckImage(url) + return isImgUrl ? url : '/images/default-dapp-icon.svg' +} + export const useLedgerBindingApi = () => { const { data: { diff --git a/packages/popup/src/pages/AuthorizedWebsite/components/DappItem.js b/packages/popup/src/pages/AuthorizedWebsite/components/DappItem.js index d85bbcf2a..9f2c54032 100644 --- a/packages/popup/src/pages/AuthorizedWebsite/components/DappItem.js +++ b/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 (
- icon + icon
{origin}
@@ -75,7 +77,7 @@ function InfoList({ id="currentDapp" > icon {app ? ( - favicon + favicon ) : ( )} diff --git a/packages/popup/src/pages/Home/components/AccountList.js b/packages/popup/src/pages/Home/components/AccountList.js index f59de087a..d3c4daadb 100644 --- a/packages/popup/src/pages/Home/components/AccountList.js +++ b/packages/popup/src/pages/Home/components/AccountList.js @@ -15,27 +15,34 @@ import { StretchInput, } from '../../../components' import {useAccountList, useCurrentAddress} from '../../../hooks/useApi' +import {useDappIcon} from '../../../hooks' import {RPC_METHODS, ROUTES} from '../../../constants' const {WALLET_SET_CURRENT_ACCOUNT, ACCOUNT_GROUP_TYPE} = RPC_METHODS const {SELECT_CREATE_TYPE} = ROUTES function AccountItem({ - nickname, - accounts, - authorizedAccountIdIconObj, onClose, - groupType = '', - index, + authorizedAccountIdIconObj = {}, + nickname = '', + accountId, + selected, + nativeBalance = '0x0', + network, + mutateAllAccountGroups, + mutateCurrentAddress, }) { const {t} = useTranslation() - const {mutate} = useCurrentAddress() + const dappIconUrl = useDappIcon(authorizedAccountIdIconObj[accountId]) + const onChangeAccount = accountId => { request(WALLET_SET_CURRENT_ACCOUNT, [accountId]) .then(() => { - mutate().then(() => { - onClose?.() - }) + Promise.all([mutateAllAccountGroups(), mutateCurrentAddress()]).then( + () => { + onClose?.() + }, + ) }) .catch(e => { Message.error({ @@ -46,7 +53,68 @@ function AccountItem({ }) }) } + return ( + + ) +} +AccountItem.propTypes = { + onClose: PropTypes.func, + authorizedAccountIdIconObj: PropTypes.object, + nickname: PropTypes.string, + accountId: PropTypes.number, + selected: PropTypes.bool, + nativeBalance: PropTypes.string, + network: PropTypes.object, + mutateCurrentAddress: PropTypes.func, + mutateAllAccountGroups: PropTypes.func, +} +function GroupItem({ + nickname, + accounts, + authorizedAccountIdIconObj, + onClose, + groupType = '', + index, + mutateAllAccountGroups, + mutateCurrentAddress, +}) { return ( !!accounts.length && (
@@ -60,55 +128,26 @@ function AccountItem({

{nickname}

)} + {accounts.map( ({ nickname, - eid, + eid: accountId, selected, currentAddress: {nativeBalance, network}, }) => ( - + ), )}
@@ -116,26 +155,35 @@ function AccountItem({ ) } -AccountItem.propTypes = { +GroupItem.propTypes = { nickname: PropTypes.string, accounts: PropTypes.array, authorizedAccountIdIconObj: PropTypes.object.isRequired, onClose: PropTypes.func, groupType: PropTypes.string, index: PropTypes.number.isRequired, + mutateCurrentAddress: PropTypes.func, + mutateAllAccountGroups: PropTypes.func, } -function AccountCardContent({searchedAccountGroup, accountGroupData, onClose}) { +function AccountCardContent({ + searchedAccountGroup, + accountGroupData, + onClose, + mutateAllAccountGroups, + mutateCurrentAddress, +}) { const {t} = useTranslation() const authorizedAccountIdIconObj = useAuthorizedAccountIdIcon() - return (
{searchedAccountGroup && accountGroupData.length === 0 ? ( ) : ( accountGroupData.map(({nickname, account, vault, eid}, index) => ( - { @@ -215,6 +269,8 @@ function AccountList({onClose, open, accountsAnimate = true}) { searchedAccountGroup={searchedAccountGroup} accountGroupData={accountGroupData} onClose={onClose} + mutateAllAccountGroups={mutateAllAccountGroups} + mutateCurrentAddress={mutateCurrentAddress} /> } /> diff --git a/packages/popup/src/pages/Home/components/CurrentDapp.js b/packages/popup/src/pages/Home/components/CurrentDapp.js index 52fd2dae9..7b04a9006 100644 --- a/packages/popup/src/pages/Home/components/CurrentDapp.js +++ b/packages/popup/src/pages/Home/components/CurrentDapp.js @@ -4,6 +4,7 @@ import {AuthorizeModal, DisconnectModal} from '../components' import {request} from '../../../utils' import useGlobalStore from '../../../stores/index.js' import {useCurrentDapp, useCurrentAddress} from '../../../hooks/useApi' +import {useDappIcon} from '../../../hooks' import {RPC_METHODS} from '../../../constants' const {WALLET_REQUEST_PERMISSIONS, WALLET_DELETE_APP} = RPC_METHODS @@ -24,6 +25,7 @@ function CurrentDapp() { account: {nickname: currentNickname, eid: currentEid}, }, } = useCurrentAddress() + const dappIconUrl = useDappIcon(icon) const isConnected = !!data?.app const isConnectedCurrentAccount = connectedEid === currentEid const connectedAccounts = @@ -63,11 +65,7 @@ function CurrentDapp() { {isConnected && ( <>
- logo + logo
diff --git a/packages/popup/src/pages/Home/components/useAuthorizedAccountIdIcon.js b/packages/popup/src/pages/Home/components/useAuthorizedAccountIdIcon.js index c04058b2f..b7a78e356 100644 --- a/packages/popup/src/pages/Home/components/useAuthorizedAccountIdIcon.js +++ b/packages/popup/src/pages/Home/components/useAuthorizedAccountIdIcon.js @@ -4,7 +4,7 @@ import {useCurrentDapp} from '../../../hooks/useApi' const getAuthorizedAccountIdIcon = (accounts, icon) => { const accountIcons = {} accounts.forEach(({eid}) => { - accountIcons[eid] = icon || '/images/default-dapp-icon.svg' + accountIcons[eid] = icon }) return accountIcons } From 8d8f8980f0fd5c80cca40a1dfc0a33168576877e Mon Sep 17 00:00:00 2001 From: RickStormBringer <13621099447@163.com> Date: Wed, 18 May 2022 18:43:01 +0800 Subject: [PATCH 2/3] fix: fix PORTAL-3102 --- packages/popup/src/components/Avatar.js | 66 +++++++++++++++---------- packages/popup/src/pages/Home/index.js | 7 ++- 2 files changed, 46 insertions(+), 27 deletions(-) diff --git a/packages/popup/src/components/Avatar.js b/packages/popup/src/components/Avatar.js index b33167053..fa2dec08c 100644 --- a/packages/popup/src/components/Avatar.js +++ b/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) diff --git a/packages/popup/src/pages/Home/index.js b/packages/popup/src/pages/Home/index.js index b6f29b8cb..de5cdb464 100644 --- a/packages/popup/src/pages/Home/index.js +++ b/packages/popup/src/pages/Home/index.js @@ -1,4 +1,8 @@ import {useState, useCallback} from 'react' +import { + CFX_MAINNET_CHAINID, + CFX_ESPACE_MAINNET_CHAINID, +} from '@fluent-wallet/consts' import {useQuery} from '../../hooks' import {useTxList, useCurrentAddress} from '../../hooks/useApi' import {useEffectOnce} from 'react-use' @@ -125,7 +129,8 @@ function Home() {
{/* only conflux main network show cross space button */} - {(network?.chainId === '0x405' || network?.chainId === '0x406') && ( + {(network?.chainId === CFX_MAINNET_CHAINID || + network?.chainId === CFX_ESPACE_MAINNET_CHAINID) && ( )}
From c9a9361f428b85949e131901efd8c86d34e47309 Mon Sep 17 00:00:00 2001 From: RickStormBringer <13621099447@163.com> Date: Thu, 19 May 2022 17:54:53 +0800 Subject: [PATCH 3/3] fix: fix PORTAL-3117 --- packages/popup/src/components/TokenItem.js | 7 +- packages/popup/src/hooks/index.js | 2 +- packages/popup/src/hooks/useApi.js | 26 +-- .../src/pages/Home/components/AccountList.js | 170 ++++++------------ .../src/pages/Home/components/AddToken.js | 74 ++++---- .../components/useAuthorizedAccountIdIcon.js | 11 +- 6 files changed, 117 insertions(+), 173 deletions(-) diff --git a/packages/popup/src/components/TokenItem.js b/packages/popup/src/components/TokenItem.js index 4144aa979..f30e353d9 100644 --- a/packages/popup/src/components/TokenItem.js +++ b/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) diff --git a/packages/popup/src/hooks/index.js b/packages/popup/src/hooks/index.js index d85d47378..9007986c0 100644 --- a/packages/popup/src/hooks/index.js +++ b/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) diff --git a/packages/popup/src/hooks/useApi.js b/packages/popup/src/hooks/useApi.js index b5652dcec..2cec2e4b0 100644 --- a/packages/popup/src/hooks/useApi.js +++ b/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 => { diff --git a/packages/popup/src/pages/Home/components/AccountList.js b/packages/popup/src/pages/Home/components/AccountList.js index d3c4daadb..f59de087a 100644 --- a/packages/popup/src/pages/Home/components/AccountList.js +++ b/packages/popup/src/pages/Home/components/AccountList.js @@ -15,34 +15,27 @@ import { StretchInput, } from '../../../components' import {useAccountList, useCurrentAddress} from '../../../hooks/useApi' -import {useDappIcon} from '../../../hooks' import {RPC_METHODS, ROUTES} from '../../../constants' const {WALLET_SET_CURRENT_ACCOUNT, ACCOUNT_GROUP_TYPE} = RPC_METHODS const {SELECT_CREATE_TYPE} = ROUTES function AccountItem({ + nickname, + accounts, + authorizedAccountIdIconObj, onClose, - authorizedAccountIdIconObj = {}, - nickname = '', - accountId, - selected, - nativeBalance = '0x0', - network, - mutateAllAccountGroups, - mutateCurrentAddress, + groupType = '', + index, }) { const {t} = useTranslation() - const dappIconUrl = useDappIcon(authorizedAccountIdIconObj[accountId]) - + const {mutate} = useCurrentAddress() const onChangeAccount = accountId => { request(WALLET_SET_CURRENT_ACCOUNT, [accountId]) .then(() => { - Promise.all([mutateAllAccountGroups(), mutateCurrentAddress()]).then( - () => { - onClose?.() - }, - ) + mutate().then(() => { + onClose?.() + }) }) .catch(e => { Message.error({ @@ -53,68 +46,7 @@ function AccountItem({ }) }) } - return ( - - ) -} -AccountItem.propTypes = { - onClose: PropTypes.func, - authorizedAccountIdIconObj: PropTypes.object, - nickname: PropTypes.string, - accountId: PropTypes.number, - selected: PropTypes.bool, - nativeBalance: PropTypes.string, - network: PropTypes.object, - mutateCurrentAddress: PropTypes.func, - mutateAllAccountGroups: PropTypes.func, -} -function GroupItem({ - nickname, - accounts, - authorizedAccountIdIconObj, - onClose, - groupType = '', - index, - mutateAllAccountGroups, - mutateCurrentAddress, -}) { return ( !!accounts.length && (
@@ -128,26 +60,55 @@ function GroupItem({

{nickname}

)} - {accounts.map( ({ nickname, - eid: accountId, + eid, selected, currentAddress: {nativeBalance, network}, }) => ( - + ), )}
@@ -155,35 +116,26 @@ function GroupItem({ ) } -GroupItem.propTypes = { +AccountItem.propTypes = { nickname: PropTypes.string, accounts: PropTypes.array, authorizedAccountIdIconObj: PropTypes.object.isRequired, onClose: PropTypes.func, groupType: PropTypes.string, index: PropTypes.number.isRequired, - mutateCurrentAddress: PropTypes.func, - mutateAllAccountGroups: PropTypes.func, } -function AccountCardContent({ - searchedAccountGroup, - accountGroupData, - onClose, - mutateAllAccountGroups, - mutateCurrentAddress, -}) { +function AccountCardContent({searchedAccountGroup, accountGroupData, onClose}) { const {t} = useTranslation() const authorizedAccountIdIconObj = useAuthorizedAccountIdIcon() + return (
{searchedAccountGroup && accountGroupData.length === 0 ? ( ) : ( accountGroupData.map(({nickname, account, vault, eid}, index) => ( - { @@ -269,8 +215,6 @@ function AccountList({onClose, open, accountsAnimate = true}) { searchedAccountGroup={searchedAccountGroup} accountGroupData={accountGroupData} onClose={onClose} - mutateAllAccountGroups={mutateAllAccountGroups} - mutateCurrentAddress={mutateCurrentAddress} /> } /> diff --git a/packages/popup/src/pages/Home/components/AddToken.js b/packages/popup/src/pages/Home/components/AddToken.js index c611c5010..9fa07ed54 100644 --- a/packages/popup/src/pages/Home/components/AddToken.js +++ b/packages/popup/src/pages/Home/components/AddToken.js @@ -27,6 +27,7 @@ import { useNetworkTypeIsCfx, useValidate20Token, } from '../../../hooks/useApi' +import useLoading from '../../../hooks/useLoading' import {request, validateAddress} from '../../../utils' const {WALLET_WATCH_ASSET, WALLET_UNWATCH_ASSET} = RPC_METHODS @@ -35,7 +36,9 @@ function AddToken({onClose, open}) { const {t} = useTranslation() const [searchContent, setSearchContent] = useState('') const [showDeleteButtonTokenId, setShowDeleteButtonTokenId] = useState('') + const [maskClosable, setMaskClosable] = useState(true) + const {setLoading} = useLoading() const [debouncedSearchContent, setDebouncedSearchContent] = useState(searchContent) const [mutateAddrTokenBalance] = useDbRefetchBalance() @@ -80,7 +83,7 @@ function AddToken({onClose, open}) { const tokenList = builtinTokens || (other20Token.valid && [[other20Token, false]]) || null - const onAddToken = token => { + const onAddToken = async token => { let params if (isNumber(token)) { params = {tokenId: token} @@ -96,41 +99,11 @@ function AddToken({onClose, open}) { }, } } - request(WALLET_WATCH_ASSET, params) - .then(() => { - mutateAddrTokenBalance().then(() => { - mutateNetworkTokens() - mutateAddressTokens() - }) - }) - .catch(e => { - Message.error({ - content: e?.message ?? t('unCaughtErrMsg'), - top: '10px', - duration: 1, - }) - }) + return request(WALLET_WATCH_ASSET, params) } - const onDeleteToken = token => { - if (!isNumber(token) || !addressId) { - return - } - - request(WALLET_UNWATCH_ASSET, {tokenId: token, addressId}) - .then(() => { - mutateAddrTokenBalance().then(() => { - mutateNetworkTokens() - mutateAddressTokens() - }) - }) - .catch(e => { - Message.error({ - content: e?.message ?? t('unCaughtErrMsg'), - top: '10px', - duration: 1, - }) - }) + const onDeleteToken = async token => { + return request(WALLET_UNWATCH_ASSET, {tokenId: token, addressId}) } const onCloseAddToken = () => { @@ -139,10 +112,34 @@ function AddToken({onClose, open}) { } const onRightIconClick = (token, added) => { - if (added) { - onDeleteToken(token) - } else { - onAddToken(token) + let clickMethod + if (!added) { + clickMethod = onAddToken + } else if (isNumber(token) && isNumber(addressId)) { + clickMethod = onDeleteToken + } + + if (clickMethod) { + setLoading(true) + setMaskClosable(false) + clickMethod(token) + .then(() => { + mutateAddrTokenBalance().then(() => { + mutateNetworkTokens() + mutateAddressTokens() + }) + }) + .catch(e => { + Message.error({ + content: e?.message ?? t('unCaughtErrMsg'), + top: '10px', + duration: 1, + }) + }) + .finally(() => { + setLoading(false) + setTimeout(() => setMaskClosable(true), 200) + }) } } @@ -156,6 +153,7 @@ function AddToken({onClose, open}) { } onClose={onCloseAddToken} open={open} + maskClosable={maskClosable} cardContent={ // 2.75rem = parent paddingBottom + current marginTop = 1.75rem + 1rem
diff --git a/packages/popup/src/pages/Home/components/useAuthorizedAccountIdIcon.js b/packages/popup/src/pages/Home/components/useAuthorizedAccountIdIcon.js index b7a78e356..25d23b129 100644 --- a/packages/popup/src/pages/Home/components/useAuthorizedAccountIdIcon.js +++ b/packages/popup/src/pages/Home/components/useAuthorizedAccountIdIcon.js @@ -1,5 +1,6 @@ import {useEffect, useState} from 'react' import {useCurrentDapp} from '../../../hooks/useApi' +import {useDappIcon} from '../../../hooks' const getAuthorizedAccountIdIcon = (accounts, icon) => { const accountIcons = {} @@ -12,17 +13,15 @@ const useAuthorizedAccountIdIcon = () => { const [authorizedAccountIdObj, setAuthorizedAccountIdObj] = useState({}) const {data: currentDappData} = useCurrentDapp() + const dappIconUrl = useDappIcon(currentDappData?.site?.icon) + useEffect(() => { if (currentDappData?.app?.account) { setAuthorizedAccountIdObj( - getAuthorizedAccountIdIcon( - currentDappData.app.account, - currentDappData.site.icon, - ), + getAuthorizedAccountIdIcon(currentDappData.app.account, dappIconUrl), ) } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentDappData?.app?.account]) + }, [currentDappData?.app?.account, dappIconUrl]) return authorizedAccountIdObj }