Fix for 0 accounts on access (#1109)

packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx

@@ -31,14 +31,14 @@ function AccountManagement ({ className }: Props): React.ReactElement<Props> {
 
         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]
   );

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<Props> {
+function WebsiteEntry ({ className = '', info: { authorizedAccounts }, removeAuth, url }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const _removeAuth = useCallback(() => {
-    removeAuth(url);
-  }, [removeAuth, url]);
+
+  const _removeAuth = useCallback(
+    () => removeAuth(url),
+    [removeAuth, url]
+  );
 
   return (
     <div className={className}>
@@ -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')
         }</Link>
     </div>
   );

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<Props> {
       .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<Props> {
           withReset
         />
         {
-          !authList || !Object.entries(authList)?.length
+          !authList || !hasAuthList
             ? <div className='empty-list'>{t<string>('No website request yet!')}</div>
-            : <>
-              <div className='website-list'>
-                {Object.entries(authList)
-                  .filter(([url]: [string, AuthUrlInfo]) => url.includes(filter))
-                  .map(
-                    ([url, info]: [string, AuthUrlInfo]) =>
+            : (
+              <>
+                <div className='website-list'>
+                  {Object
+                    .entries<AuthUrlInfo>(authList)
+                    .filter(([url]) => url.includes(filter))
+                    .map(([url, info]) =>
                       <WebsiteEntry
                         info={info}
                         key={url}
                         removeAuth={removeAuth}
                         url={url}
                       />
-                  )}
-              </div>
-            </>
+                    )}
+                </div>
+              </>
+            )
         }
       </div>
     </>

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": ""
 }