Add success alert to selfhosted client apps

docker-compose.yml

@@ -51,7 +51,7 @@ services:
     restart: always
     environment:
       TOR_PROXY_IP: 127.0.0.1
-      TOP_PROXY_PORT: 9050
+      TOR_PROXY_PORT: 9050
       ROBOSATS_ONION: robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion
     network_mode: service:tor
 

frontend/src/components/UnsafeAlert.js

@@ -6,16 +6,25 @@ import MediaQuery from 'react-responsive'
 class UnsafeAlert extends Component {
   constructor(props) {
     super(props);
-  }
+    this.state = {
-  state = {
       show: true,
+      isSelfhosted: this.isSelfhosted(),
     };
+  }
+  
 
   getHost(){ 
     var url = (window.location != window.parent.location) ? this.getHost(document.referrer) : document.location.href;
     return url.split('/')[2]
   }
 
+  isSelfhosted(){
+    var http = new XMLHttpRequest();
+    http.open('HEAD', '/selfhosted', false);
+    http.send();
+    return http.status!=404;
+  }
+    
   safe_urls = [
     'robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion',
     'robotestagw3dcxmd66r4rgksb4nmmr43fh77bzn2ia2eucduyeafnyd.onion',
@@ -25,9 +34,28 @@ class UnsafeAlert extends Component {
   ]
 
   render() {
+    console.log('1111')
     const { t, i18n} = this.props;
+    
+    // Show selfhosted notice
+    if (this.state.isSelfhosted){
+      return(
+        <div>
+          <Paper elevation={6} className="alertUnsafe">
+            <Alert severity="success"  sx={{maxHeight:"100px"}} 
+              action={<Button onClick={() => this.setState({show:false})}>{t("Hide")}</Button>}
+              >
+              <AlertTitle>{t("You are self-hosting RoboSats")}</AlertTitle>
+              {t("RoboSats is served from your own node granting you the strongest security and privacy.")} 
+            </Alert>
+          </Paper>
+        </div>
+      )
+    }
+
+    // Show unsafe alert
+    if (!this.safe_urls.includes(this.getHost()) & this.state.show & !this.state.isSelfhosted){
       return(
-      (!this.safe_urls.includes(this.getHost()) & this.state.show) ? 
         <div>
           <MediaQuery minWidth={800}>
             <Paper elevation={6} className="alertUnsafe">
@@ -60,10 +88,9 @@ class UnsafeAlert extends Component {
             </Paper>
           </MediaQuery>
         </div>
-      : 
-        null
       )
     }
   }
+}
 
 export default withTranslation()(UnsafeAlert);

nodeapp/Dockerfile

@@ -9,6 +9,8 @@ RUN apt-get update
 RUN apt-get install -y socat
 RUN npm install http-server
 
+RUN echo 'true' > static/selfhosted
+
 EXPOSE 12596
 
 CMD npm exec http-server -- . -p 12596 -P http://127.0.0.1:81 -i false -d false & nohup socat tcp4-LISTEN:81,reuseaddr,fork,keepalive,bind=127.0.0.1 SOCKS4A:${TOR_PROXY_IP:-127.0.0.1}:${ROBOSATS_ONION:-robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion}:80,socksport=${TOR_PROXY_PORT:-9050}