diff --git a/packages/apps/src/overlays/Connecting.tsx b/packages/apps/src/overlays/Connecting.tsx
index bef559209acf..a7f132be65cd 100644
--- a/packages/apps/src/overlays/Connecting.tsx
+++ b/packages/apps/src/overlays/Connecting.tsx
@@ -2,24 +2,27 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
 import React from 'react';
 import styled from 'styled-components';
 import { useApi } from '@polkadot/react-hooks';
 import settings from '@polkadot/ui-settings';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import BaseOverlay from './Base';
 
-const isFirefox = typeof (window as any).InstallTrigger !== 'undefined';
 const wsUrl = settings.apiUrl;
 const isWs = wsUrl.startsWith('ws://');
 const isWsLocal = wsUrl.includes('127.0.0.1');
 const isHttps = window.location.protocol.startsWith('https:');
 
-function ExtensionOverlay ({ className, isWaitingInjected, t }: ApiProps & Props): React.ReactElement<Props> | null {
+interface Props {
+  className?: string;
+}
+
+function ExtensionOverlay ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { isWaitingInjected } = useApi();
+
   if (!isWaitingInjected) {
     return null;
   }
@@ -34,7 +37,10 @@ function ExtensionOverlay ({ className, isWaitingInjected, t }: ApiProps & Props
   );
 }
 
-function ConnectOverlay ({ className, isApiConnected, t }: ApiProps & Props): React.ReactElement<Props> | null {
+function ConnectOverlay ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const { isApiConnected } = useApi();
+
   if (isApiConnected) {
     return null;
   }
@@ -45,11 +51,6 @@ function ConnectOverlay ({ className, isApiConnected, t }: ApiProps & Props): Re
       icon='globe'
     >
       <div>{t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}</div>
-      {
-        isFirefox && isWs
-          ? <div>{t('With the Firefox browser connecting to insecure WebSockets ({{wsUrl}}) will fail due to the browser not allowing localhost access from a secure site.', { replace: { wsUrl } })}</div>
-          : undefined
-      }
       {
         isWs && !isWsLocal && isHttps
           ? <div>{t('You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure \'wss\' endpoint.', { replace: { wsUrl } })}</div>
@@ -60,15 +61,11 @@ function ConnectOverlay ({ className, isApiConnected, t }: ApiProps & Props): Re
 }
 
 function Connecting (props: Props): React.ReactElement<Props> | null {
-  const api = useApi();
-
-  return ExtensionOverlay({ ...props, ...api }) || ConnectOverlay({ ...props, ...api });
+  return ExtensionOverlay(props) || ConnectOverlay(props);
 }
 
-export default translate(
-  styled(Connecting)`
-    background: #ffe6e6;
-    border-color: #c00;
-    color: #4d0000;
-  `
-);
+export default styled(Connecting)`
+  background: #ffe6e6;
+  border-color: #c00;
+  color: #4d0000;
+`;