Torified webview in react-native

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/App.js

@@ -122,7 +122,7 @@ export default class App extends Component {
             >
               <SchoolIcon />
             </IconButton>
-            <UnsafeAlert className='unsafeAlert' />
+            {/* <UnsafeAlert className='unsafeAlert' /> */}
             <HomePage {...this.state} />
           </ThemeProvider>
         </I18nextProvider>

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,10 @@ class BottomBar extends Component {
 
   showProfileButton = () => {
     return (
-      this.props.avatarLoaded &&
-      (this.props.token ? getCookie('robot_token') == this.props.token : true) &&
-      getCookie('sessionid')
+      this.props.avatarLoaded
+      // FIXME: Cookies not available on local dev
+      // (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,8 +1,9 @@
-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;
@@ -27,7 +28,13 @@ const RobotAvatar: React.FC<DepthChartProps> = ({
 }) => {
   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' }}>

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,
@@ -102,7 +100,7 @@ class UserGenPage extends Component {
             : this.props.setAppState({
                 nickname: data.nickname,
                 token,
-                avatarLoaded: false,
+                avatarLoaded: true,
                 activeOrderId: data.active_order_id ? data.active_order_id : null,
                 lastOrderId: data.last_order_id ? data.last_order_id : null,
                 referralCode: data.referral_code,
@@ -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,13 @@ 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 }}
+                  smooth={true}
+                  avatarClass=""
+                  tooltip={t('This is your trading avatar')}
+                />
                 <br />
               </Grid>
             </div>
@@ -299,7 +290,9 @@ class UserGenPage extends Component {
                             <IconButton
                               color='primary'
                               disabled={
-                                !(getCookie('robot_token') == this.state.token) ||
+                                // FIXME: Cookies not available on local dev
+                                // https://github.com/react-native-webview/react-native-webview/issues/2643
+                                // !(getCookie('robot_token') == this.state.token) ||
                                 !this.props.avatarLoaded
                               }
                               onClick={() =>
@@ -318,7 +311,9 @@ class UserGenPage extends Component {
                           <IconButton
                             color={this.props.copiedToken ? 'inherit' : 'primary'}
                             disabled={
-                              !(getCookie('robot_token') == this.state.token) ||
+                              // FIXME: Cookies not available on local dev
+                              // https://github.com/react-native-webview/react-native-webview/issues/2643
+                              // !(getCookie('robot_token') == this.state.token) ||
                               !this.props.avatarLoaded
                             }
                             onClick={() =>
@@ -374,8 +369,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
+                // FIXME: Cookies not available on local dev
+                // https://github.com/react-native-webview/react-native-webview/issues/2643
+                // !(this.props.token ? getCookie('robot_token') == this.props.token : true)
               }
               color='primary'
               to='/make/'
@@ -393,8 +390,10 @@ class UserGenPage extends Component {
             />
             <Button
               disabled={
-                this.state.loadingRobot ||
-                !(this.props.token ? getCookie('robot_token') == this.props.token : true)
+                this.state.loadingRobot !== false
+                // FIXME: Cookies not available on local dev
+                // https://github.com/react-native-webview/react-native-webview/issues/2643
+                // !(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;

frontend/src/components/i18n.js

@@ -3,66 +3,36 @@ 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 translationZH from "../../static/locales/zh.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 = {
+  backend: {
+    loadPath: '/static/locales/{{lng}}.json',
+    allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading
+    crossDomain: false,
+    withCredentials: false,
+    overrideMimeType: false,
+    reloadInterval: false, // can be used to reload resources in a specific interval (useful in server environments)
+  },
+  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({
-    // resources: {
-    //   en: {translations: translationEN},
-    //   es: {translations: translationES},
-    //   ru: {translations: translationRU},
-    //   de: {translations: translationDE},
-    //   // zh: {translations: translationZH},
-    //   pl: {translations: translationPL},
-    //   fr: {translations: translationFR},
-    //   ca: {translations: translationCA},
-    //   it: {translations: translationIT},
-    //   pt: {translations: translationPT},
-    //   eu: {translations: translationEU},
-    //   sv: {translations: translationSV},
-    //   cs: {translations: translationCS},
-    //   th: {translations: translationCS},
-    // },
-
-    backend: {
-      loadPath: '/static/locales/{{lng}}.json',
-      allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading
-      crossDomain: false,
-      withCredentials: false,
-      overrideMimeType: false,
-      reloadInterval: false, // can be used to reload resources in a specific interval (useful in server environments)
-    },
-
-    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,
-    },
-  });
+  .init(config);
 
 export default i18n;

frontend/src/services/Native/index.d.ts

@@ -0,0 +1,28 @@
+import NativeRobosats from './index'
+
+declare global {
+  interface Window {
+    ReactNativeWebView?: ReactNativeWebView
+    NativeRobosats?: NativeRobosats
+  }
+}
+
+export interface ReactNativeWebView {
+  postMessage(message: string): void
+}
+
+export interface NativeWebViewMessageHttp {
+  id?: number
+  category: 'http'
+  type: 'post' | 'get' | 'put' | 'delete' | 'xhr'
+  path: string
+  headers?: object
+  body?: object
+}
+
+export declare type NativeWebViewMessage = NativeWebViewMessageHttp
+
+export interface NativeRobosatsPromise {
+  resolve: (value: object | PromiseLike<object>) => void, 
+  reject: (reason?: any) => void
+}