Phishing protected message for extensions (#4741)

* Phishing protected message for extensions

* Update packages/page-accounts/src/Accounts/BannerExtension.tsx

* Adjust naming

packages/page-accounts/src/Accounts/BannerExtension.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { detect } from 'detect-browser';
-import React from 'react';
+import React, { useRef } from 'react';
 import { Trans } from 'react-i18next';
 
 import useExtensionCounter from '@polkadot/app-settings/useCounter';
@@ -26,6 +26,7 @@ function BannerExtension (): React.ReactElement | null {
   const { t } = useTranslation();
   const { hasInjectedAccounts } = useApi();
   const upgradableCount = useExtensionCounter();
+  const phishing = useRef<string>(t<string>('Since some extensions, such as the polkadot-js extension, protects you against all community reported phishing sites, there are valid reasons to use them for additional protection, even if you are not storing accounts in it.'));
 
   if (!isSupported || !browserName) {
     return null;
@@ -49,6 +50,7 @@ function BannerExtension (): React.ReactElement | null {
       <Banner type='warning'>
         <p>{t<string>('One or more extensions are detected in your browser, however no accounts has been injected.')}</p>
         <p>{t<string>('Ensure that the extension has accounts, some accounts are visible globally and available for this chain and that you gave the application permission to access accounts from the extension to use them.')}</p>
+        <p>{phishing.current}</p>
       </Banner>
     );
   }
@@ -77,6 +79,7 @@ function BannerExtension (): React.ReactElement | null {
         rel='noopener noreferrer'
         target='_blank'
       >{t<string>('Learn more...')}</a></p>
+      <p>{phishing.current}</p>
     </Banner>
   );
 }