Make Soapbox component an FC, move console.log

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;
 

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,
+};