Add baseUrl to apiClient on pro frontend

frontend/src/pro/Main.tsx

@@ -26,6 +26,9 @@ import {
 import ToolBar from '../pro/ToolBar';
 import LandingDialog from '../pro/LandingDialog';
 
+import defaultCoordinators from '../../static/federation.json';
+import { getHost } from '../utils';
+
 const getWindowSize = function (fontSize: number) {
   // returns window size in EM units
   return {
@@ -80,7 +83,9 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   const [robot, setRobot] = useState<Robot>(new Robot());
   const [maker, setMaker] = useState<Maker>(defaultMaker);
   const [info, setInfo] = useState<Info>(defaultInfo);
+  const [coordinators, setCoordinators] = useState<Coordinator[]>(defaultCoordinators);
   const [fav, setFav] = useState<Favorites>({ type: null, currency: 0 });
+  const [baseUrl, setBaseUrl] = useState<string>('');
   const [layout, setLayout] = useState<Layout>(defaultLayout);
 
   const [openLanding, setOpenLanding] = useState<boolean>(true);
@@ -92,15 +97,34 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     if (typeof window !== undefined) {
       window.addEventListener('resize', onResize);
     }
-    fetchLimits();
-    fetchBook();
-    fetchInfo();
+
+    if (baseUrl != '') {
+      fetchBook();
+      fetchLimits();
+    }
     return () => {
       if (typeof window !== undefined) {
         window.removeEventListener('resize', onResize);
       }
     };
-  }, []);
+  }, [baseUrl]);
+
+  useEffect(() => {
+    let host = '';
+    if (window.NativeRobosats === undefined) {
+      host = getHost();
+    } else {
+      host =
+        settings.network === 'mainnet'
+          ? coordinators[0].mainnetOnion
+          : coordinators[0].testnetOnion;
+    }
+    setBaseUrl(`http://${host}`);
+  }, [settings.network]);
+
+  useEffect(() => {
+    setWindowSize(getWindowSize(theme.typography.fontSize));
+  }, [theme.typography.fontSize]);
 
   const onResize = function () {
     setWindowSize(getWindowSize(em));
@@ -112,7 +136,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;
     });
@@ -121,7 +145,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,
@@ -130,7 +154,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   };
 
   const fetchInfo = function () {
-    apiClient.get('/api/info/').then((data: any) => {
+    apiClient.get(baseUrl, '/api/info/').then((data: any) => {
       const versionInfo: any = checkVer(data.version.major, data.version.minor, data.version.patch);
       setInfo({
         ...data,
@@ -168,6 +192,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         >
           <div key='Maker'>
             <MakerWidget
+              baseUrl={baseUrl}
               limits={limits}
               fetchLimits={fetchLimits}
               fav={fav}
@@ -178,6 +203,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
           </div>
           <div key='Book'>
             <BookWidget
+              baseUrl={baseUrl}
               book={book}
               layout={layout[1]}
               gridCellSize={gridCellSize}
@@ -189,6 +215,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
           </div>
           <div key='DepthChart'>
             <DepthChartWidget
+              baseUrl={baseUrl}
               orders={book.orders}
               gridCellSize={gridCellSize}
               limitList={limits.list}

frontend/src/pro/Widgets/Book.tsx

@@ -5,6 +5,7 @@ import { Paper, useTheme } from '@mui/material';
 import BookTable from '../../components/BookTable';
 
 interface BookWidgetProps {
+  baseUrl: string;
   layout: any;
   gridCellSize?: number;
   book: Book;
@@ -23,6 +24,7 @@ const BookWidget = React.forwardRef(
   (
     {
       layout,
+      baseUrl,
       gridCellSize = 2,
       book,
       fetchBook,
@@ -42,6 +44,7 @@ const BookWidget = React.forwardRef(
       return (
         <Paper elevation={3} style={{ width: '100%', height: '100%' }}>
           <BookTable
+            baseUrl={baseUrl}
             elevation={0}
             clickRefresh={() => fetchBook()}
             book={book}

frontend/src/pro/Widgets/Depth.tsx

@@ -7,7 +7,7 @@ import DepthChart from '../../components/Charts/DepthChart';
 interface DepthChartWidgetProps {
   layout: any;
   gridCellSize: number;
-  orders: Order[];
+  orders: PublicOrder[];
   currency: number;
   limitList: LimitList;
   windowSize: { width: number; height: number };
@@ -16,6 +16,7 @@ interface DepthChartWidgetProps {
   onMouseDown?: () => void;
   onMouseUp?: () => void;
   onTouchEnd?: () => void;
+  baseUrl: string;
 }
 
 const DepthChartWidget = React.forwardRef(
@@ -25,6 +26,7 @@ const DepthChartWidget = React.forwardRef(
       gridCellSize,
       limitList,
       orders,
+      baseUrl,
       currency,
       windowSize,
       style,
@@ -40,6 +42,7 @@ const DepthChartWidget = React.forwardRef(
       return (
         <Paper elevation={3} style={{ width: '100%', height: '100%' }}>
           <DepthChart
+            baseUrl={baseUrl}
             elevation={0}
             orders={orders}
             currency={currency}

frontend/src/pro/Widgets/Maker.tsx

@@ -11,6 +11,7 @@ interface MakerWidgetProps {
   maker: Maker;
   setFav: (state: Favorites) => void;
   setMaker: (state: Maker) => void;
+  baseUrl: string;
   style?: Object;
   className?: string;
   onMouseDown?: () => void;
@@ -27,6 +28,7 @@ const MakerWidget = React.forwardRef(
       fetchLimits,
       fav,
       setFav,
+      baseUrl,
       style,
       className,
       onMouseDown,
@@ -42,6 +44,7 @@ const MakerWidget = React.forwardRef(
           style={{ padding: 8, overflow: 'auto', width: '100%', height: '100%' }}
         >
           <MakerForm
+            baseUrl={baseUrl}
             limits={limits}
             fetchLimits={fetchLimits}
             maker={maker}