Torified webview in react-native

docker-compose.yml

@@ -44,6 +44,7 @@ services:
     command: npm run dev
     volumes:
       - ./frontend:/usr/src/frontend
+      - ./mobile:/usr/src/mobile
 
   nodeapp: # Umbrel / Citadel app
     build: ./nodeapp

frontend/package.json

@@ -61,6 +61,7 @@
     "@nivo/line": "^0.80.0",
     "country-flag-icons": "^1.4.25",
     "date-fns": "^2.28.0",
+    "file-replace-loader": "^1.4.0",
     "i18next": "^21.6.14",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-http-backend": "^1.4.0",

frontend/src/components/BottomBar.js

@@ -158,7 +158,7 @@ class BottomBar extends Component {
   handleSetStealthInvoice = (wantsStealth) => {
     apiClient
       .put('/api/stealth/', { wantsStealth })
-      .then((data) => this.props.setAppState({ stealthInvoices: data.wantsStealth }));
+      .then((data) => this.props.setAppState({ stealthInvoices: data?.wantsStealth }));
   };
 
   getHost() {
@@ -171,9 +171,12 @@ class BottomBar extends Component {
 
   showProfileButton = () => {
     return (
-      this.props.avatarLoaded &&
-      (this.props.token ? getCookie('robot_token') == this.props.token : true) &&
-      getCookie('sessionid')
+      this.props.avatarLoaded && (
+        window.NativeRobosats || (
+          (this.props.token ? getCookie('robot_token') === this.props.token : true) &&
+          getCookie('sessionid')
+        )
+      )
     );
   };
 

frontend/src/components/HomePage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { HashRouter, BrowserRouter , Switch, Route } from 'react-router-dom';
 
 import UserGenPage from './UserGenPage';
 import MakerPage from './MakerPage';
@@ -39,11 +39,22 @@ export default class HomePage extends Component {
     this.props.history.push(location);
   }
 
+  getBasename() {
+    if (window.NativeRobosats) {
+      // Only for Android
+      return window.location.pathname
+    }
+
+    return ""
+  }
+
   render() {
     const fontSize = this.props.theme.typography.fontSize;
     const fontSizeFactor = fontSize / 14; // default fontSize is 14
+    const Router = window.NativeRobosats ? HashRouter : BrowserRouter
+
     return (
-      <Router>
+      <Router basename={this.getBasename()}>
         <div className='appCenter'>
           <Switch>
             <Route

frontend/src/components/Robots/RobotAvatar/index.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import SmoothImage from 'react-smooth-image';
 import { Avatar, Badge, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { SendReceiveIcon } from '../../Icons';
+import { apiClient } from '../../../services/api';
 
 interface DepthChartProps {
   nickname: string;
   smooth?: boolean;
   style?: object;
+  imageStyle?: object;
   statusColor?: 'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning';
   orderType?: number;
   tooltip?: string;
@@ -22,12 +24,19 @@ const RobotAvatar: React.FC<DepthChartProps> = ({
   tooltip,
   smooth = false,
   style = {},
+  imageStyle = {},
   avatarClass = 'flippedSmallAvatar',
   onLoad = () => {},
 }) => {
   const { t } = useTranslation();
 
-  const avatarSrc: string = window.location.origin + '/static/assets/avatars/' + nickname + '.png';
+  const [avatarSrc, setAvatarSrc] = useState<string>()
+
+  useEffect(() => {
+    if (nickname) {
+      apiClient.fileImageUrl('/static/assets/avatars/' + nickname + '.png').then(setAvatarSrc)
+    }
+  }, [nickname])
 
   const statusBadge = (
     <div style={{ position: 'relative', left: '6px', top: '1px' }}>
@@ -47,13 +56,13 @@ const RobotAvatar: React.FC<DepthChartProps> = ({
       return (
         <div style={style}>
           <SmoothImage
-            className={avatarClass}
             src={avatarSrc}
             imageStyles={{
               borderRadius: '50%',
               transform: 'scaleX(-1)',
               border: '0.3px solid #555',
               filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
+              ...imageStyle,
             }}
           />
         </div>

frontend/src/components/UnsafeAlert.js

@@ -14,17 +14,21 @@ class UnsafeAlert extends Component {
 
   getHost() {
     const url =
-      window.location != window.parent.location
+      window.location !== window.parent.location
         ? this.getHost(document.referrer)
         : document.location.href;
     return url.split('/')[2];
   }
 
   isSelfhosted() {
     const http = new XMLHttpRequest();
-    http.open('HEAD', `${location.protocol}//${this.getHost()}/selfhosted`, false);
-    http.send();
-    return http.status == 200;
+    try {
+      http.open('HEAD', `${location.protocol}//${this.getHost()}/selfhosted`, false);
+      http.send();
+      return http.status === 200;
+    } catch {
+      return false;
+    }
   }
 
   safe_urls = [
@@ -36,7 +40,7 @@ class UnsafeAlert extends Component {
   ];
 
   render() {
-    const { t, i18n } = this.props;
+    const { t } = this.props;
 
     // If alert is hidden return null
     if (!this.state.show) {
@@ -68,7 +72,7 @@ class UnsafeAlert extends Component {
     }
 
     // Show unsafe alert
-    if (!this.safe_urls.includes(this.getHost())) {
+    if (!window.NativeRobosats && !this.safe_urls.includes(this.getHost())) {
       return (
         <div>
           <MediaQuery minWidth={800}>

frontend/src/components/UserGenPage.js

@@ -28,6 +28,7 @@ import { getCookie, writeCookie, deleteCookie } from '../utils/cookies';
 import { saveAsJson } from '../utils/saveFile';
 import { copyToClipboard } from '../utils/clipboard';
 import { apiClient } from '../services/api/index';
+import RobotAvatar from './Robots/RobotAvatar';
 
 class UserGenPage extends Component {
   constructor(props) {
@@ -48,7 +49,6 @@ class UserGenPage extends Component {
       this.setState({
         nickname: this.props.nickname,
         token: this.props.token ? this.props.token : '',
-        avatarUrl: '/static/assets/avatars/' + this.props.nickname + '.png',
         loadingRobot: false,
       });
     } else {
@@ -75,13 +75,11 @@ class UserGenPage extends Component {
         ref_code: refCode,
       };
     });
-
     requestBody.then((body) =>
       apiClient.post('/api/user/', body).then((data) => {
         this.setState({
           nickname: data.nickname,
           bit_entropy: data.token_bits_entropy,
-          avatarUrl: '/static/assets/avatars/' + data.nickname + '.png',
           shannon_entropy: data.token_shannon_entropy,
           bad_request: data.bad_request,
           found: data.found,
@@ -193,7 +191,7 @@ class UserGenPage extends Component {
           align='center'
           sx={{ width: 370 * fontSizeFactor, height: 260 * fontSizeFactor }}
         >
-          {this.props.avatarLoaded && this.state.avatarUrl ? (
+          {this.props.avatarLoaded && this.state.nickname ? (
             <div>
               <Grid item xs={12} align='center'>
                 <Typography component='h5' variant='h5'>
@@ -231,20 +229,19 @@ class UserGenPage extends Component {
                 </Typography>
               </Grid>
               <Grid item xs={12} align='center'>
-                <Tooltip enterTouchDelay={0} title={t('This is your trading avatar')}>
-                  <div style={{ maxWidth: 200 * fontSizeFactor, maxHeight: 200 * fontSizeFactor }}>
-                    <SmoothImage
-                      src={this.state.avatarUrl}
-                      imageStyles={{
-                        borderRadius: '50%',
-                        border: '2px solid #555',
-                        filter: 'drop-shadow(1px 1px 1px #000000)',
-                        height: `${195 * fontSizeFactor}px`,
-                        width: `${200 * fontSizeFactor}px`,
-                      }}
-                    />
-                  </div>
-                </Tooltip>
+                <RobotAvatar
+                  nickname={this.state.nickname}
+                  style={{ maxWidth: 200 * fontSizeFactor, maxHeight: 200 * fontSizeFactor }}
+                  imageStyle={{
+                    transform: '',
+                    border: '2px solid #555',
+                    filter: 'drop-shadow(1px 1px 1px #000000)',
+                    height: `${195 * fontSizeFactor}px`,
+                    width: `${200 * fontSizeFactor}px`,
+                  }}
+                  smooth={true}
+                  tooltip={t('This is your trading avatar')}
+                />
                 <br />
               </Grid>
             </div>
@@ -299,8 +296,10 @@ class UserGenPage extends Component {
                             <IconButton
                               color='primary'
                               disabled={
-                                !(getCookie('robot_token') == this.state.token) ||
-                                !this.props.avatarLoaded
+                                !this.props.avatarLoaded || (
+                                  !window.NativeRobosats && 
+                                  !(getCookie('robot_token') === this.state.token)
+                                )
                               }
                               onClick={() =>
                                 saveAsJson(this.state.nickname + '.json', this.createJsonFile())
@@ -318,8 +317,10 @@ class UserGenPage extends Component {
                           <IconButton
                             color={this.props.copiedToken ? 'inherit' : 'primary'}
                             disabled={
-                              !(getCookie('robot_token') == this.state.token) ||
-                              !this.props.avatarLoaded
+                              !this.props.avatarLoaded || (
+                                !window.NativeRobosats && 
+                                !(getCookie('robot_token') === this.state.token)
+                              )
                             }
                             onClick={() =>
                               copyToClipboard(getCookie('robot_token')) &
@@ -374,8 +375,10 @@ class UserGenPage extends Component {
           <ButtonGroup variant='contained' aria-label='outlined primary button group'>
             <Button
               disabled={
-                this.state.loadingRobot ||
-                !(this.props.token ? getCookie('robot_token') == this.props.token : true)
+                this.state.loadingRobot !== false || (
+                  !window.NativeRobosats &&
+                  !(this.props.token ? getCookie('robot_token') === this.props.token : true)
+                )
               }
               color='primary'
               to='/make/'
@@ -393,8 +396,10 @@ class UserGenPage extends Component {
             />
             <Button
               disabled={
-                this.state.loadingRobot ||
-                !(this.props.token ? getCookie('robot_token') == this.props.token : true)
+                this.state.loadingRobot !== false || (
+                  !window.NativeRobosats &&
+                  !(this.props.token ? getCookie('robot_token') === this.props.token : true)
+                )
               }
               color='secondary'
               to='/book/'

frontend/src/components/i18n.Native.js

@@ -0,0 +1,52 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import HttpApi from 'i18next-http-backend';
+
+import translationEN from "../../static/locales/en.json";
+import translationES from "../../static/locales/es.json";
+import translationDE from "../../static/locales/de.json";
+import translationRU from "../../static/locales/ru.json";
+import translationPL from "../../static/locales/pl.json";
+import translationFR from "../../static/locales/fr.json";
+import translationCA from "../../static/locales/ca.json";
+import translationIT from "../../static/locales/it.json";
+import translationPT from "../../static/locales/pt.json";
+import translationEU from "../../static/locales/th.json";
+
+const config = {
+  resources: {
+    en: {translations: translationEN},
+    es: {translations: translationES},
+    ru: {translations: translationRU},
+    de: {translations: translationDE},
+    pl: {translations: translationPL},
+    fr: {translations: translationFR},
+    ca: {translations: translationCA},
+    it: {translations: translationIT},
+    pt: {translations: translationPT},
+    eu: {translations: translationEU},
+  },
+  fallbackLng: 'en',
+  debug: false,
+  // have a common namespace used around the full app
+  ns: ['translations'],
+  defaultNS: 'translations',
+  keySeparator: false, // we use content as keys
+  interpolation: {
+    escapeValue: false,
+    formatSeparator: ',',
+  },
+  react: {
+    useSuspense: false,
+  },
+}
+
+
+i18n
+  .use(HttpApi)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init(config);
+
+export default i18n;