Add swappable baseurls (network and coordinators)

RoboSats · Nov 7, 2022 · d7e464e · d7e464e
1 parent 8cf6b3b
commit d7e464e
Show file tree

Hide file tree

Showing 19 changed files with 182 additions and 93 deletions.
diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx
@@ -27,6 +27,7 @@ interface BookPageProps {
   hasRobot: boolean;
   setPage: (state: Page) => void;
   setCurrentOrder: (state: number) => void;
+  baseUrl: string;
 }
 
 const BookPage = ({
@@ -43,6 +44,7 @@ const BookPage = ({
   hasRobot = false,
   setPage = () => null,
   setCurrentOrder = () => null,
+  baseUrl,
 }: BookPageProps): JSX.Element => {
   const { t } = useTranslation();
   const history = useHistory();
@@ -158,6 +160,7 @@ const BookPage = ({
                 onCurrencyChange={handleCurrencyChange}
                 onTypeChange={handleTypeChange}
                 onOrderClicked={onOrderClicked}
+                baseUrl={baseUrl}
               />
             </Grid>
             <Grid item>
@@ -169,6 +172,7 @@ const BookPage = ({
                 maxWidth={chartWidthEm} // EM units
                 maxHeight={windowSize.height * 0.825 - 5} // EM units
                 onOrderClicked={onOrderClicked}
+                baseUrl={baseUrl}
               />
             </Grid>
           </Grid>
@@ -181,6 +185,7 @@ const BookPage = ({
             maxWidth={windowSize.width * 0.8} // EM units
             maxHeight={windowSize.height * 0.825 - 5} // EM units
             onOrderClicked={onOrderClicked}
+            baseUrl={baseUrl}
           />
         ) : (
           <BookTable
@@ -195,6 +200,7 @@ const BookPage = ({
             onCurrencyChange={handleCurrencyChange}
             onTypeChange={handleTypeChange}
             onOrderClicked={onOrderClicked}
+            baseUrl={baseUrl}
           />
         )}
       </Grid>

diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx
@@ -25,7 +25,7 @@ import {
 } from '../models';
 
 import { apiClient } from '../services/api';
-import { checkVer } from '../utils';
+import { checkVer, getHost } from '../utils';
 import { sha256 } from 'js-sha256';
 
 import defaultCoordinators from '../../static/federation.json';
@@ -59,6 +59,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   const [maker, setMaker] = useState<Maker>(defaultMaker);
   const [info, setInfo] = useState<Info>(defaultInfo);
   const [coordinators, setCoordinators] = useState<Coordinator[]>(defaultCoordinators);
+  const [baseUrl, setBaseUrl] = useState<string>('');
   const [fav, setFav] = useState<Favorites>({ type: null, currency: 0 });
 
   const theme = useTheme();
@@ -105,6 +106,20 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     };
   }, []);
 
+  useEffect(() => {
+    let host = '';
+    if (window.NativeRobosats === undefined) {
+      host = getHost();
+    } else {
+      host =
+        settings.network === 'mainnet'
+          ? coordinators[0].mainnetOnion
+          : coordinators[0].testnetOnion;
+    }
+    setBaseUrl(`http://${host}`);
+    console.log(`http://${host}`);
+  }, [settings.network]);
+
   useEffect(() => {
     setWindowSize(getWindowSize(theme.typography.fontSize));
   }, [theme.typography.fontSize]);
@@ -115,7 +130,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
 
   const fetchBook = function () {
     setBook({ ...book, loading: true });
-    apiClient.get('/api/book/').then((data: any) =>
+    apiClient.get(baseUrl, '/api/book/').then((data: any) =>
       setBook({
         loading: false,
         orders: data.not_found ? [] : data,
@@ -125,7 +140,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
 
   const fetchLimits = async () => {
     setLimits({ ...limits, loading: true });
-    const data = apiClient.get('/api/limits/').then((data) => {
+    const data = apiClient.get(baseUrl, '/api/limits/').then((data) => {
       setLimits({ list: data ?? [], loading: false });
       return data;
     });
@@ -134,7 +149,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
 
   const fetchInfo = function () {
     setInfo({ ...info, loading: true });
-    apiClient.get('/api/info/').then((data: Info) => {
+    apiClient.get(baseUrl, '/api/info/').then((data: Info) => {
       const versionInfo: any = checkVer(data.version.major, data.version.minor, data.version.patch);
       setInfo({
         ...data,
@@ -162,7 +177,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     }
 
     setRobot({ ...robot, loading: true });
-    apiClient.post('/api/user/', requestBody).then((data: any) => {
+    apiClient.post(baseUrl, '/api/user/', requestBody).then((data: any) => {
       setCurrentOrder(
         data.active_order_id
           ? data.active_order_id
@@ -207,6 +222,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
       <RobotAvatar
         style={{ display: 'none' }}
         nickname={robot.nickname}
+        baseUrl={baseUrl}
         onLoad={() => setRobot({ ...robot, avatarLoaded: true })}
       />
       <Box
@@ -235,6 +251,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
                     theme={theme}
                     robot={robot}
                     setRobot={setRobot}
+                    baseUrl={baseUrl}
                   />
                 </div>
               </Slide>
@@ -262,6 +279,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
                   hasRobot={robot.avatarLoaded}
                   setPage={setPage}
                   setCurrentOrder={setCurrentOrder}
+                  baseUrl={baseUrl}
                 />
               </div>
             </Slide>
@@ -300,7 +318,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
                 appear={slideDirection.in != undefined}
               >
                 <div>
-                  <OrderPage theme={theme} history={history} {...props} />
+                  <OrderPage theme={theme} history={history} {...props} baseUrl={baseUrl} />
                 </div>
               </Slide>
             )}
@@ -335,6 +353,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         setSlideDirection={setSlideDirection}
         currentOrder={currentOrder}
         hasRobot={robot.avatarLoaded}
+        baseUrl={baseUrl}
       />
       <MainDialogs
         open={open}
@@ -345,6 +364,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         info={info}
         robot={robot}
         closeAll={closeAll}
+        baseUrl={baseUrl}
       />
     </Router>
   );

diff --git a/frontend/src/basic/MainDialogs/index.tsx b/frontend/src/basic/MainDialogs/index.tsx
@@ -31,6 +31,7 @@ interface MainDialogsProps {
   setPage: (state: Page) => void;
   setCurrentOrder: (state: number) => void;
   closeAll: OpenDialogs;
+  baseUrl: string;
 }
 
 const MainDialogs = ({
@@ -42,6 +43,7 @@ const MainDialogs = ({
   setRobot,
   setPage,
   setCurrentOrder,
+  baseUrl,
 }: MainDialogsProps): JSX.Element => {
   useEffect(() => {
     if (info.openUpdateClient) {
@@ -79,6 +81,7 @@ const MainDialogs = ({
       />
       <ProfileDialog
         open={open.profile}
+        baseUrl={baseUrl}
         onClose={() => setOpen({ ...open, profile: false })}
         robot={robot}
         setRobot={setRobot}

diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx
@@ -32,6 +32,7 @@ interface NavBarProps {
   closeAll: OpenDialogs;
   currentOrder: number | null;
   hasRobot: boolean;
+  baseUrl: string;
 }
 
 const NavBar = ({
@@ -46,6 +47,7 @@ const NavBar = ({
   height,
   currentOrder,
   hasRobot = false,
+  baseUrl,
 }: NavBarProps): JSX.Element => {
   const theme = useTheme();
   const { t } = useTranslation();
@@ -111,6 +113,7 @@ const NavBar = ({
                 style={{ width: '2.3em', height: '2.3em', position: 'relative', top: '0.2em' }}
                 avatarClass={theme.palette.mode === 'dark' ? 'navBarAvatarDark' : 'navBarAvatar'}
                 nickname={nickname}
+                baseUrl={baseUrl}
               />
             ) : (
               <></>

diff --git a/frontend/src/basic/OrderPage/index.js b/frontend/src/basic/OrderPage/index.js
@@ -117,7 +117,7 @@ class OrderPage extends Component {
 
   getOrderDetails = (id) => {
     this.setState({ orderId: id });
-    apiClient.get('/api/order/?order_id=' + id).then(this.orderDetailsReceived);
+    apiClient.get(this.props.baseUrl, '/api/order/?order_id=' + id).then(this.orderDetailsReceived);
   };
 
   orderDetailsReceived = (data) => {
@@ -179,7 +179,7 @@ class OrderPage extends Component {
 
   sendWeblnInvoice = (invoice) => {
     apiClient
-      .post('/api/order/?order_id=' + this.state.orderId, {
+      .post(this.props.baseUrl, '/api/order/?order_id=' + this.state.orderId, {
         action: 'update_invoice',
         invoice,
       })
@@ -418,7 +418,7 @@ class OrderPage extends Component {
   takeOrder = () => {
     this.setState({ loading: true });
     apiClient
-      .post('/api/order/?order_id=' + this.state.orderId, {
+      .post(this.props.baseUrl, '/api/order/?order_id=' + this.state.orderId, {
         action: 'take',
         amount: this.state.takeAmount,
       })
@@ -438,7 +438,7 @@ class OrderPage extends Component {
   handleClickConfirmCancelButton = () => {
     this.setState({ loading: true });
     apiClient
-      .post('/api/order/?order_id=' + this.state.orderId, {
+      .post(this.props.baseUrl, '/api/order/?order_id=' + this.state.orderId, {
         action: 'cancel',
       })
       .then(() => this.getOrderDetails(this.state.orderId) & this.setState({ status: 4 }));
@@ -538,7 +538,7 @@ class OrderPage extends Component {
 
   handleClickConfirmCollaborativeCancelButton = () => {
     apiClient
-      .post('/api/order/?order_id=' + this.state.orderId, {
+      .post(this.props.baseUrl, '/api/order/?order_id=' + this.state.orderId, {
         action: 'cancel',
       })
       .then(() => this.getOrderDetails(this.state.orderId) & this.setState({ status: 4 }));
@@ -965,6 +965,7 @@ class OrderPage extends Component {
             width={330}
             data={this.state}
             completeSetState={this.completeSetState}
+            baseUrl={this.props.baseUrl}
           />
         </Grid>
       </Grid>
@@ -1011,6 +1012,7 @@ class OrderPage extends Component {
                 width={330}
                 data={this.state}
                 completeSetState={this.completeSetState}
+                baseUrl={this.props.baseUrl}
               />
             </div>
           </Grid>

diff --git a/frontend/src/basic/UserGenPage.js b/frontend/src/basic/UserGenPage.js
@@ -71,7 +71,7 @@ class UserGenPage extends Component {
       };
     });
     requestBody.then((body) =>
-      apiClient.post('/api/user/', body).then((data) => {
+      apiClient.post(this.props.baseUrl, '/api/user/', body).then((data) => {
         this.setState({ found: data.found, bad_request: data.bad_request });
         this.props.setCurrentOrder(
           data.active_order_id
@@ -126,7 +126,7 @@ class UserGenPage extends Component {
   };
 
   delGeneratedUser() {
-    apiClient.delete('/api/user');
+    apiClient.delete(this.props.baseUrl, '/api/user');
 
     systemClient.deleteCookie('sessionid');
     systemClient.deleteCookie('robot_token');
@@ -241,6 +241,7 @@ class UserGenPage extends Component {
                   }}
                   tooltip={t('This is your trading avatar')}
                   tooltipPosition='top'
+                  baseUrl={this.props.baseUrl}
                 />
                 <br />
               </Grid>

diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx
@@ -46,6 +46,7 @@ interface BookTableProps {
   onCurrencyChange?: (e: any) => void;
   onTypeChange?: (mouseEvent: any, val: number) => void;
   onOrderClicked?: (id: number) => void;
+  baseUrl: string;
 }
 
 const BookTable = ({
@@ -65,6 +66,7 @@ const BookTable = ({
   onCurrencyChange,
   onTypeChange,
   onOrderClicked = () => null,
+  baseUrl,
 }: BookTableProps): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -173,6 +175,7 @@ const BookTable = ({
                 orderType={params.row.type}
                 statusColor={statusBadgeColor(params.row.maker_status)}
                 tooltip={t(params.row.maker_status)}
+                baseUrl={baseUrl}
               />
             </ListItemAvatar>
             <ListItemText primary={params.row.maker_nick} />
@@ -200,6 +203,7 @@ const BookTable = ({
                 orderType={params.row.type}
                 statusColor={statusBadgeColor(params.row.maker_status)}
                 tooltip={t(params.row.maker_status)}
+                baseUrl={baseUrl}
               />
             </ListItemButton>
           </div>

diff --git a/frontend/src/components/Charts/DepthChart/index.tsx b/frontend/src/components/Charts/DepthChart/index.tsx
@@ -20,8 +20,7 @@ import {
 } from '@mui/material';
 import { AddCircleOutline, RemoveCircleOutline } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
-import { PublicOrder, LimitList } from '../../../models';
+import { PublicOrder, LimitList, Order } from '../../../models';
 import RobotAvatar from '../../RobotAvatar';
 import { amountToString, matchMedian, statusBadgeColor } from '../../../utils';
 import currencyDict from '../../../../static/assets/currencies.json';
@@ -38,6 +37,7 @@ interface DepthChartProps {
   fillContainer?: boolean;
   elevation?: number;
   onOrderClicked?: (id: number) => void;
+  baseUrl: string;
 }
 
 const DepthChart: React.FC<DepthChartProps> = ({
@@ -50,9 +50,9 @@ const DepthChart: React.FC<DepthChartProps> = ({
   fillContainer = false,
   elevation = 6,
   onOrderClicked = () => null,
+  baseUrl,
 }) => {
   const { t } = useTranslation();
-  const history = useHistory();
   const theme = useTheme();
   const [enrichedOrders, setEnrichedOrders] = useState<Order[]>([]);
   const [series, setSeries] = useState<Serie[]>([]);
@@ -233,6 +233,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
                 orderType={order.type}
                 statusColor={statusBadgeColor(order.maker_status)}
                 tooltip={t(order.maker_status)}
+                baseUrl={baseUrl}
               />
             </Grid>
           </Grid>