diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index e5f0de6fd..413160092 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -16,7 +16,6 @@ import { loadSoapboxConfig } from 'soapbox/actions/soapbox';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import { fetchVerificationConfig } from 'soapbox/actions/verification';
import { FE_SUBDIRECTORY } from 'soapbox/build_config';
-import { NODE_ENV } from 'soapbox/build_config';
import Helmet from 'soapbox/components/helmet';
import AuthLayout from 'soapbox/features/auth_layout';
import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
@@ -237,40 +236,12 @@ class SoapboxMount extends React.PureComponent {
}
-export default class Soapbox extends React.PureComponent {
+const Soapbox = () => {
+ return (
+
+
+
+ );
+};
- printConsoleWarning = () => {
- /* eslint-disable no-console */
- console.log('%cStop!', [
- 'color: #ff0000',
- 'display: block',
- 'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif',
- 'font-size: 50px',
- 'font-weight: 800',
- 'padding: 4px 0',
- ].join(';'));
- console.log('%cThis is a browser feature intended for developers. If someone told you to copy-paste something here it is a scam and will give them access to your account.', [
- 'color: #111111',
- 'display: block',
- 'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif',
- 'font-size: 18px',
- 'padding: 4px 0 16px',
- ].join(';'));
- /* eslint-enable no-console */
- }
-
- componentDidMount() {
- if (NODE_ENV === 'production') {
- this.printConsoleWarning();
- }
- }
-
- render() {
- return (
-
-
-
- );
- }
-
-}
+export default Soapbox;
diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx
index 0a9bbdb75..9505ae07a 100644
--- a/app/soapbox/main.tsx
+++ b/app/soapbox/main.tsx
@@ -6,6 +6,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import * as BuildConfig from 'soapbox/build_config';
+import { printConsoleWarning } from 'soapbox/utils/console';
import { default as Soapbox } from './containers/soapbox';
import * as monitoring from './monitoring';
@@ -18,6 +19,11 @@ function main() {
// Sentry
monitoring.start();
+ // Print console warning
+ if (BuildConfig.NODE_ENV === 'production') {
+ printConsoleWarning();
+ }
+
ready(() => {
const mountNode = document.getElementById('soapbox') as HTMLElement;
diff --git a/app/soapbox/utils/console.ts b/app/soapbox/utils/console.ts
new file mode 100644
index 000000000..96f8b6b5e
--- /dev/null
+++ b/app/soapbox/utils/console.ts
@@ -0,0 +1,24 @@
+/** Print a warning to users not to copy-paste into the console */
+const printConsoleWarning = () => {
+ /* eslint-disable no-console */
+ console.log('%cStop!', [
+ 'color: #ff0000',
+ 'display: block',
+ 'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif',
+ 'font-size: 50px',
+ 'font-weight: 800',
+ 'padding: 4px 0',
+ ].join(';'));
+ console.log('%cThis is a browser feature intended for developers. If someone told you to copy-paste something here it is a scam and will give them access to your account.', [
+ 'color: #111111',
+ 'display: block',
+ 'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif',
+ 'font-size: 18px',
+ 'padding: 4px 0 16px',
+ ].join(';'));
+ /* eslint-enable no-console */
+};
+
+export {
+ printConsoleWarning,
+};