diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 7f5ae5097514..0be2eda90045 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -25,5 +25,6 @@ module.exports = { // this seems very broken atm, false positives '@typescript-eslint/unbound-method': 'off', 'header/header' : 'off', + 'react/jsx-newline': 'off', } }; diff --git a/packages/page-accounts/src/Accounts/BannerExtension.tsx b/packages/page-accounts/src/Accounts/BannerExtension.tsx index 3cee0a6db24f..9e6f9e2c58bb 100644 --- a/packages/page-accounts/src/Accounts/BannerExtension.tsx +++ b/packages/page-accounts/src/Accounts/BannerExtension.tsx @@ -2,13 +2,14 @@ // SPDX-License-Identifier: Apache-2.0 import { detect } from 'detect-browser'; -import React, { useRef } from 'react'; +import React from 'react'; import { Trans } from 'react-i18next'; import useExtensionCounter from '@polkadot/app-settings/useCounter'; import { availableExtensions } from '@polkadot/apps-config'; import { isWeb3Injected } from '@polkadot/extension-dapp'; import { onlyOnWeb } from '@polkadot/react-api/hoc'; +import { styled } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; import { useTranslation } from '../translate.js'; @@ -21,11 +22,10 @@ const browserInfo = detect(); const browserName: Browser | null = (browserInfo && (browserInfo.name as Browser)) || null; const isSupported = browserName && Object.keys(availableExtensions).includes(browserName); -function BannerExtension (): React.ReactElement | null { +function ExtensionWarning (): React.ReactElement | null { const { t } = useTranslation(); const { hasInjectedAccounts } = useApi(); const upgradableCount = useExtensionCounter(); - const phishing = useRef(t('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 || !isWeb3Injected) { return null; @@ -53,10 +53,48 @@ function BannerExtension (): React.ReactElement | null { return (

{t('One or more extensions are detected in your browser, however no accounts have been injected.')}

-

{t('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.')}

-

{phishing.current}

+

+ {t('Ensure that:')} + +

  • {t('the extension has accounts,')}
  • +
  • {t('at least one account is available for this chain,')}
  • +
  • {t('the extension allows azero.dev to access accounts')}
  • + +

    ); } +function BannerExtension () { + const { t } = useTranslation(); + + return ( + <> + + +

    + {t('For extra protection, consider using the')} +   + + Threat Slayer + +   + {t('extension which protects you from dangerous websites in real-time.')} +

    + +
    + + ); +} + export default onlyOnWeb(React.memo(BannerExtension)); + +const SafetyInfoList = styled.ul` + margin-block: 0; + padding-left: 20px; + list-style-type: '- '; +`;