chore(yttrex): removed outdated create-react-class dep

extension/package.json

@@ -55,7 +55,6 @@
     "bs58": "^3.1.0",
     "cheerio": "^0.22.0",
     "classnames": "^2.3.1",
-    "create-react-class": "^15.7.0",
     "html2canvas": "^1.4.0",
     "immutability-helper": "^2.9.1",
     "jquery": "^3.6.0",

extension/src/chrome/popup/components/InfoBox.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import config from '../../../config';
+
+import { Card } from '@material-ui/core';
+import CardActions from '@material-ui/core/CardActions';
+import Button from '@material-ui/core/Button';
+
+const imgstyle = {
+  width: '100%',
+};
+const lessStandardHref = {
+  color: 'black',
+  textDecoration: 'none',
+};
+
+const InfoBox = () => {
+  const about = config.WEB_ROOT + '/about';
+  const privacy = config.WEB_ROOT + '/privacy';
+  const guardonihref = config.WEB_ROOT + '/guardoni';
+
+  return (
+    <Card style={{ textAlign: 'center' }}>
+      <a target="_blank" href={config.WEB_ROOT} style={lessStandardHref}>
+        <img style={imgstyle} src="/yttrex-logo.png" />
+      </a>
+      <CardActions>
+        <Button size="small" color="secondary" href={about} target="_blank">
+          Project
+        </Button>
+        <Button size="small" color="primary" href={privacy} target="_blank">
+          Privacy
+        </Button>
+        <Button
+          size="small"
+          color="secondary"
+          href="https://tracking.exposed/manifesto"
+          target="_blank"
+        >
+          Manifesto
+        </Button>
+        <Button
+          size="small"
+          color="primary"
+          href="https://github.com/tracking-exposed/yttrex/"
+          target="_blank"
+        >
+          Software
+        </Button>
+        <Button
+          size="small"
+          color="secondary"
+          href={guardonihref}
+          target="_blank"
+        >
+          Guardoni
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default InfoBox;

extension/src/chrome/popup/components/popup.js

@@ -5,7 +5,7 @@ import { Card } from '@material-ui/core';
 import { Alert, AlertTitle } from '@material-ui/lab';
 import FormHelperText from '@material-ui/core/FormHelperText';
 
-import InfoBox from './infoBox';
+import InfoBox from './InfoBox';
 import Settings from './settings';
 import GetCSV from './getCSV';
 
@@ -15,66 +15,74 @@ import config from '../../../config';
 const bo = chrome || browser;
 
 const styles = {
-    width: '400px',
+  width: '400px',
 };
 
-class Popup extends React.Component{
-
-  constructor (props) {
-      super(props);
-      this.state = { status: 'fetching' };
-      try {
-        bo.runtime.sendMessage({ type: 'localLookup' }, (userSettings) => {
-          console.log("here got", userSettings);
-          if(userSettings && userSettings.publicKey)
-            this.setState({ status: 'done', data: userSettings });
-          else
-            this.setState({ status: 'error', data: userSettings });
-        });
-      } catch(e) {
-        console.log("catch error", e.message, runtime.lastError);
-        this.state = { status: 'error', data: ''};
-      }
+class Popup extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { status: 'fetching' };
+    try {
+      bo.runtime.sendMessage({ type: 'localLookup' }, (userSettings) => {
+        console.log('here got', userSettings);
+        if (userSettings && userSettings.publicKey)
+          this.setState({ status: 'done', data: userSettings });
+        else this.setState({ status: 'error', data: userSettings });
+      });
+    } catch (e) {
+      console.log('catch error', e.message, runtime.lastError);
+      this.state = { status: 'error', data: '' };
     }
+  }
 
-  render () {
-      const version = config.VERSION;
-      const timeago = moment.duration(moment() - moment(config.BUILDISODATE)).humanize() + ' ago';
-
-      if(!this.state)
-        return (<div>Loading...</div>)
+  render() {
+    const version = config.VERSION;
+    const timeago =
+      moment.duration(moment() - moment(config.BUILDISODATE)).humanize() +
+      ' ago';
 
-      console.log('popup props status', this.props, this.state);
+    if (!this.state) return <div>Loading...</div>;
 
-      if(this.state.status !== 'done') {
-        console.log("Incomplete info before render");
-        return (
-          <div style={styles}>
-            <Card>
-                <Alert severity="error">
-                    <AlertTitle>Error</AlertTitle>
-                    Extension isn't initialized yet — <strong>Access <a href="https://www.youtube.com" target="_blank">yutube.com</a>.</strong>
-                </Alert>
-                <InfoBox />
-            </Card>
-          </div>
-        );
-      }
+    console.log('popup props status', this.props, this.state);
 
+    if (this.state.status !== 'done') {
+      console.log('Incomplete info before render');
       return (
         <div style={styles}>
           <Card>
-              <FormHelperText>ytTREX main switch</FormHelperText>
-              <Settings {...this.state.data} />
-              <FormHelperText>Access to your data</FormHelperText>
-              <GetCSV publicKey={this.state.data.publicKey } />
-              <FormHelperText>About</FormHelperText>
-              <InfoBox />
+            <Alert severity="error">
+              <AlertTitle>Error</AlertTitle>
+              Extension isn't initialized yet —{' '}
+              <strong>
+                Access{' '}
+                <a href="https://www.youtube.com" target="_blank">
+                  yutube.com
+                </a>
+                .
+              </strong>
+            </Alert>
+            <InfoBox />
           </Card>
-          <small>version {version}, released {timeago}</small>
         </div>
       );
     }
+
+    return (
+      <div style={styles}>
+        <Card>
+          <FormHelperText>ytTREX main switch</FormHelperText>
+          <Settings {...this.state.data} />
+          <FormHelperText>Access to your data</FormHelperText>
+          <GetCSV publicKey={this.state.data.publicKey} />
+          <FormHelperText>About</FormHelperText>
+          <InfoBox />
+        </Card>
+        <small>
+          version {version}, released {timeago}
+        </small>
+      </div>
+    );
+  }
 }
 
 export default Popup;

yarn.lock

@@ -23569,7 +23569,6 @@ __metadata:
     cheerio: ^0.22.0
     classnames: ^2.3.1
     copy-webpack-plugin: ^9.1.0
-    create-react-class: ^15.7.0
     cross-env: ^2.0.1
     css-loader: ^6.5.1
     dotenv: ^14.3.0