packages/components/containers/compatibilityCheck/CompatibilityCheckView.tsx

   1 import { useEffect } from 'react';
   2
   3 import { Href } from '@proton/atoms';
   4 import type { CompatibilityItem } from '@proton/components/containers/compatibilityCheck/compatibilityCheckHelper';
   5 import { isWebCryptoRsaSigningSupported } from '@proton/crypto/lib/compatibilityChecks';
   6 import { getAppName } from '@proton/shared/lib/apps/helper';
   7 import type { APP_NAMES } from '@proton/shared/lib/constants';
   8 import { APPS } from '@proton/shared/lib/constants';
   9 import { getBrowser } from '@proton/shared/lib/helpers/browser';
  10 import { captureMessage } from '@proton/shared/lib/helpers/sentry';
  11 import { getItem, setItem } from '@proton/shared/lib/helpers/storage';
  12 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
  13 import unsupportedBrowserSettings from '@proton/styles/assets/img/errors/unsupported-browser.svg';
  14
  15 import useAppTitle from '../../hooks/useAppTitle';
  16
  17 interface Props {
  18     appName: APP_NAMES;
  19     incompatibilities: CompatibilityItem[];
  20 }
  21
  22 const key = 'compatibility-check.notified';
  23
  24 // Note: This is not translated because locales are not loaded at this point
  25 const CompatibilityCheckView = ({ appName = APPS.PROTONMAIL, incompatibilities }: Props) => {
  26     const isVPN = appName === APPS.PROTONVPN_SETTINGS;
  27     const kbUrl = isVPN
  28         ? 'https://protonvpn.com/support/browsers-supported/'
  29         : getKnowledgeBaseUrl('/recommended-browsers');
  30
  31     useAppTitle('Compatibility check');
  32
  33     useEffect(() => {
  34         const notified = getItem(key);
  35         if (!notified) {
  36             captureMessage('Compatibility check failed', {
  37                 level: 'warning',
  38                 extra: { reason: incompatibilities.map(({ name }) => name).join(',') },
  39             });
  40             // the following check is just for informational purposes for now, to understand how many browsers require fallback code for RSA signatures
  41             void isWebCryptoRsaSigningSupported().then((isSupported) => {
  42                 if (!isSupported) {
  43                     captureMessage('Crypto compatibility report: RSA signing not supported by WebCrypto API', {
  44                         level: 'info',
  45                     });
  46                 }
  47             });
  48             setItem(key, '1');
  49         }
  50     }, []);
  51
  52     const app = getAppName(appName);
  53     const incompatibilitiesWithText = incompatibilities.filter((incompat) => !!incompat.text);
  54     const browser = getBrowser();
  55
  56     return (
  57         <div className="h-full flex items-center overflow-auto">
  58             <div className="m-auto text-center max-w-custom" style={{ '--max-w-custom': '30em' }}>
  59                 <div className="mb-8 text-center">
  60                     <img src={unsupportedBrowserSettings} alt="" />
  61                 </div>
  62                 <h1 className="text-bold text-4xl">Compatibility check</h1>
  63                 <p>
  64                     {app} requires a modern web browser with cutting edge support for{' '}
  65                     <Href className="primary-link" href="http://caniuse.com/#feat=cryptography">
  66                         WebCrypto (PRNG)
  67                     </Href>{' '}
  68                     and{' '}
  69                     <Href className="primary-link" href="http://caniuse.com/#feat=namevalue-storage">
  70                         Web Storage
  71                     </Href>
  72                     .
  73                 </p>
  74                 <p>Your browser: {`${browser.name} - ${browser.version}`}</p>
  75                 {incompatibilitiesWithText.length > 0 && (
  76                     <ul className="text-left">
  77                         {incompatibilitiesWithText.map(({ name, text }) => {
  78                             return (
  79                                 <li key={name}>
  80                                     {name}: {text}
  81                                 </li>
  82                             );
  83                         })}
  84                     </ul>
  85                 )}
  86                 <Href href={kbUrl} target="_self">
  87                     More info
  88                 </Href>
  89             </div>
  90         </div>
  91     );
  92 };
  93
  94 export default CompatibilityCheckView;