diff --git a/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx b/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx index 2e19b9f8..126d2281 100644 --- a/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx +++ b/packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx @@ -31,14 +31,14 @@ function AccountManagement ({ className }: Props): React.ReactElement { setSelectedAccounts && setSelectedAccounts(list[url].authorizedAccounts); }) - .catch((e) => console.error(e)); + .catch(console.error); }, [setSelectedAccounts, url]); const _onApprove = useCallback( (): void => { updateAuthorization(selectedAccounts, url) .then(() => onAction('/auth-list')) - .catch((error: Error) => console.error(error)); + .catch(console.error); }, [onAction, selectedAccounts, url] ); diff --git a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx index f96e4b9c..1e5c264d 100644 --- a/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx +++ b/packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx @@ -18,11 +18,13 @@ interface Props extends ThemeProps { url: string; } -function WebsiteEntry ({ className = '', info, removeAuth, url }: Props): React.ReactElement { +function WebsiteEntry ({ className = '', info: { authorizedAccounts }, removeAuth, url }: Props): React.ReactElement { const { t } = useTranslation(); - const _removeAuth = useCallback(() => { - removeAuth(url); - }, [removeAuth, url]); + + const _removeAuth = useCallback( + () => removeAuth(url), + [removeAuth, url] + ); return (
@@ -34,11 +36,13 @@ function WebsiteEntry ({ className = '', info, removeAuth, url }: Props): React. className='connectedAccounts' to={`/url/manage/${url}`} >{ - t('{{total}} accounts', { - replace: { - total: info.authorizedAccounts.length - } - }) + authorizedAccounts && authorizedAccounts.length + ? t('{{total}} accounts', { + replace: { + total: authorizedAccounts.length + } + }) + : t('no accounts') }
); diff --git a/packages/extension-ui/src/Popup/AuthManagement/index.tsx b/packages/extension-ui/src/Popup/AuthManagement/index.tsx index de301957..1f9da3fc 100644 --- a/packages/extension-ui/src/Popup/AuthManagement/index.tsx +++ b/packages/extension-ui/src/Popup/AuthManagement/index.tsx @@ -3,7 +3,7 @@ import type { ThemeProps } from '../../types'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; import { AuthUrlInfo, AuthUrls } from '@polkadot/extension-base/background/handlers/State'; @@ -29,6 +29,11 @@ function AuthManagement ({ className }: Props): React.ReactElement { .catch((e) => console.error(e)); }, []); + const hasAuthList = useMemo( + () => !!authList && !!Object.keys(authList).length, + [authList] + ); + const _onChangeFilter = useCallback((filter: string) => { setFilter(filter); }, []); @@ -55,23 +60,25 @@ function AuthManagement ({ className }: Props): React.ReactElement { withReset /> { - !authList || !Object.entries(authList)?.length + !authList || !hasAuthList ?
{t('No website request yet!')}
- : <> -
- {Object.entries(authList) - .filter(([url]: [string, AuthUrlInfo]) => url.includes(filter)) - .map( - ([url, info]: [string, AuthUrlInfo]) => + : ( + <> +
+ {Object + .entries(authList) + .filter(([url]) => url.includes(filter)) + .map(([url, info]) => - )} -
- + )} +
+ + ) } diff --git a/packages/extension/public/locales/en/translation.json b/packages/extension/public/locales/en/translation.json index 67be3559..4b355e80 100644 --- a/packages/extension/public/locales/en/translation.json +++ b/packages/extension/public/locales/en/translation.json @@ -171,5 +171,6 @@ "{{total}} accounts": "", "Account connection request": "", "Understood": "", - "Ask again later": "" + "Ask again later": "", + "no accounts": "" }