Add small fixes

frontend/src/basic/BookPage/index.tsx

@@ -163,6 +163,7 @@ const BookPage = ({
                 limits={limits.list}
                 maxWidth={chartWidthEm} // EM units
                 maxHeight={windowSize.height * 0.825 - 5} // EM units
+                onOrderClicked={onOrderClicked}
               />
             </Grid>
           </Grid>
@@ -174,6 +175,7 @@ const BookPage = ({
             limits={limits.list}
             maxWidth={windowSize.width * 0.8} // EM units
             maxHeight={windowSize.height * 0.825 - 5} // EM units
+            onOrderClicked={onOrderClicked}
           />
         ) : (
           <BookTable

frontend/src/basic/Main.tsx

@@ -69,7 +69,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   const basename = window.NativeRobosats === undefined ? '' : window.location.pathname;
   const entryPage: Page | '' =
     window.NativeRobosats === undefined ? window.location.pathname.split('/')[1] : '';
-  const [page, setPage] = useState<Page>(entryPage == '' ? 'offers' : entryPage);
+  const [page, setPage] = useState<Page>(entryPage == '' ? 'robot' : entryPage);
   const [slideDirection, setSlideDirection] = useState<SlideDirection>({
     in: undefined,
     out: undefined,
@@ -134,6 +134,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   };
 
   const fetchInfo = function () {
+    setInfo({ ...info, loading: true });
     apiClient.get('/api/info/').then((data: Info) => {
       const versionInfo: any = checkVer(data.version.major, data.version.minor, data.version.patch);
       setInfo({
@@ -141,23 +142,27 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         openUpdateClient: versionInfo.updateAvailable,
         coordinatorVersion: versionInfo.coordinatorVersion,
         clientVersion: versionInfo.clientVersion,
-      });
+        loading: false,
-      setSettings({
-        ...settings,
-        network: data.network,
       });
     });
   };
 
   useEffect(() => {
+    if (open.stats || open.coordinator) {
       fetchInfo();
+    }
   }, [open.stats, open.coordinator]);
 
-  const fetchRobot = function () {
+  const fetchRobot = function ({ keys = false }) {
     const requestBody = {
       token_sha256: sha256(robot.token),
     };
+    if (keys) {
+      requestBody.pub_key = robot.pubKey;
+      requestBody.enc_priv_key = robot.encPrivKey;
+    }
 
+    setRobot({ ...robot, loading: true });
     apiClient.post('/api/user/', requestBody).then((data: any) => {
       setOrder(
         data.active_order_id
@@ -171,7 +176,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         nickname: data.nickname,
         token: robot.token,
         loading: false,
-        avatarLoaded: false,
+        avatarLoaded: robot.nickname === data.nickname ? true : false,
         activeOrderId: data.active_order_id ? data.active_order_id : null,
         lastOrderId: data.last_order_id ? data.last_order_id : null,
         referralCode: data.referral_code,
@@ -182,18 +187,20 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         tgToken: data.tg_token,
         bitsEntropy: data.token_bits_entropy,
         shannonEntropy: data.token_shannon_entropy,
-        pub_key: data.public_key,
+        pubKey: data.public_key,
-        enc_priv_key: data.encrypted_private_key,
+        encPrivKey: data.encrypted_private_key,
         copiedToken: data.found ? true : robot.copiedToken,
       });
     });
   };
 
   useEffect(() => {
-    if (robot.token && robot.nickname === null) {
+    if (open.profile || (robot.token && robot.nickname === null)) {
-      fetchRobot();
+      fetchRobot({ keys: false }); // fetch existing robot
+    } else if (robot.token && robot.encPrivKey && robot.pubKey) {
+      fetchRobot({ keys: true }); // create new robot with existing token and keys (on network and coordinator change)
     }
-  }, []);
+  }, [open.profile, settings.network, settings.coordinator]);
 
   return (
     <Router basename={basename}>
@@ -213,7 +220,8 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
       >
         <Switch>
           <Route
-            path='/robot/:refCode?'
+            path={['/robot/:refCode?', '/']}
+            exact
             render={(props: any) => (
               <Slide
                 direction={page === 'robot' ? slideDirection.in : slideDirection.out}
@@ -235,7 +243,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
             )}
           />
 
-          <Route exact path={['/offers', '/']}>
+          <Route path={'/offers'}>
             <Slide
               direction={page === 'offers' ? slideDirection.in : slideDirection.out}
               in={page === 'offers'}

frontend/src/basic/MainDialogs/index.tsx

@@ -65,29 +65,12 @@ const MainDialogs = ({
       <CoordinatorSummaryDialog
         open={open.coordinator}
         onClose={() => setOpen({ ...open, coordinator: false })}
-        numPublicBuyOrders={info.num_public_buy_orders}
+        info={info}
-        numPublicSellOrders={info.num_public_sell_orders}
-        bookLiquidity={info.book_liquidity}
-        activeRobotsToday={info.active_robots_today}
-        lastDayNonkycBtcPremium={info.last_day_nonkyc_btc_premium}
-        makerFee={info.maker_fee}
-        takerFee={info.taker_fee}
-        swapFeeRate={info.current_swap_fee_rate}
       />
       <StatsDialog
         open={open.stats}
         onClose={() => setOpen({ ...open, stats: false })}
-        coordinatorVersion={info.coordinatorVersion}
+        info={info}
-        clientVersion={info.clientVersion}
-        lndVersion={info.lnd_version}
-        network={info.network}
-        nodeAlias={info.node_alias}
-        nodeId={info.node_id}
-        alternativeName={info.alternative_name}
-        alternativeSite={info.alternative_site}
-        commitHash={info.robosats_running_commit_hash}
-        lastDayVolume={info.last_day_volume}
-        lifetimeVolume={info.lifetime_volume}
       />
       <ProfileDialog
         open={open.profile}

frontend/src/basic/SettingsPage/index.tsx

@@ -25,7 +25,7 @@ const SettingsPage = ({ settings, setSettings, windowSize }: SettingsPageProps):
           <SettingsForm
             settings={settings}
             setSettings={setSettings}
-            networt={window.NativeRobosats}
+            showNetwork={!(window.NativeRobosats === undefined)}
           />
         </Grid>
       </Grid>

frontend/src/basic/UserGenPage.js

@@ -111,8 +111,8 @@ class UserGenPage extends Component {
               tgToken: data.tg_token,
               bitsEntropy: data.token_bits_entropy,
               shannonEntropy: data.token_shannon_entropy,
-              pub_key: data.public_key,
+              pubKey: data.public_key,
-              enc_priv_key: data.encrypted_private_key,
+              encPrivKey: data.encrypted_private_key,
               copiedToken: data.found ? true : this.props.robot.copiedToken,
             }) &
             systemClient.setCookie('robot_token', token) &

frontend/src/components/Charts/DepthChart/index.tsx

@@ -37,6 +37,7 @@ interface DepthChartProps {
   maxHeight: number;
   fillContainer?: boolean;
   elevation?: number;
+  onOrderClicked?: (id: number) => void;
 }
 
 const DepthChart: React.FC<DepthChartProps> = ({
@@ -48,6 +49,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
   maxHeight,
   fillContainer = false,
   elevation = 6,
+  onOrderClicked = () => null,
 }) => {
   const { t } = useTranslation();
   const history = useHistory();
@@ -278,7 +280,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
   };
   const formatAxisY = (value: number): string => `${value}BTC`;
   const handleOnClick: PointMouseHandler = (point: Point) => {
-    history.push('/order/' + point.data?.order?.id);
+    onOrderClicked(point.data?.order?.id);
   };
 
   const em = theme.typography.fontSize;

frontend/src/components/Dialogs/CoordinatorSummary.tsx

@@ -11,6 +11,7 @@ import {
   ListItem,
   ListItemIcon,
   Typography,
+  LinearProgress,
 } from '@mui/material';
 
 import InventoryIcon from '@mui/icons-material/Inventory';
@@ -22,39 +23,25 @@ import BookIcon from '@mui/icons-material/Book';
 import LinkIcon from '@mui/icons-material/Link';
 
 import { pn } from '../../utils';
+import { Info } from '../../models';
 
 interface Props {
   open: boolean;
   onClose: () => void;
-  numPublicBuyOrders: number;
+  info: Info;
-  numPublicSellOrders: number;
-  bookLiquidity: number;
-  activeRobotsToday: number;
-  lastDayNonkycBtcPremium: number;
-  makerFee: number;
-  takerFee: number;
-  swapFeeRate: number;
 }
 
-const CoordinatorSummaryDialog = ({
+const CoordinatorSummaryDialog = ({ open = false, onClose, info }: Props): JSX.Element => {
-  open = false,
-  onClose,
-  numPublicBuyOrders,
-  numPublicSellOrders,
-  bookLiquidity,
-  activeRobotsToday,
-  lastDayNonkycBtcPremium,
-  makerFee,
-  takerFee,
-  swapFeeRate,
-}: Props): JSX.Element => {
   const { t } = useTranslation();
-  if (swapFeeRate === null || swapFeeRate === undefined) {
+  if (info.current_swap_fee_rate === null || info.current_swap_fee_rate === undefined) {
-    swapFeeRate = 0;
+    info.current_swap_fee_rate = 0;
   }
 
   return (
     <Dialog open={open} onClose={onClose}>
+      <div style={info.loading ? {} : { display: 'none' }}>
+        <LinearProgress />
+      </div>
       <DialogContent>
         <Typography component='h5' variant='h5'>
           {t('Coordinator Summary')}
@@ -69,7 +56,7 @@ const CoordinatorSummaryDialog = ({
             <ListItemText
               primaryTypographyProps={{ fontSize: '14px' }}
               secondaryTypographyProps={{ fontSize: '12px' }}
-              primary={numPublicBuyOrders}
+              primary={info.num_public_buy_orders}
               secondary={t('Public buy orders')}
             />
           </ListItem>
@@ -84,7 +71,7 @@ const CoordinatorSummaryDialog = ({
             <ListItemText
               primaryTypographyProps={{ fontSize: '14px' }}
               secondaryTypographyProps={{ fontSize: '12px' }}
-              primary={numPublicSellOrders}
+              primary={info.num_public_sell_orders}
               secondary={t('Public sell orders')}
             />
           </ListItem>
@@ -99,7 +86,7 @@ const CoordinatorSummaryDialog = ({
             <ListItemText
               primaryTypographyProps={{ fontSize: '14px' }}
               secondaryTypographyProps={{ fontSize: '12px' }}
-              primary={`${pn(bookLiquidity)} Sats`}
+              primary={`${pn(info.book_liquidity)} Sats`}
               secondary={t('Book liquidity')}
             />
           </ListItem>
@@ -114,7 +101,7 @@ const CoordinatorSummaryDialog = ({
             <ListItemText
               primaryTypographyProps={{ fontSize: '14px' }}
               secondaryTypographyProps={{ fontSize: '12px' }}
-              primary={activeRobotsToday}
+              primary={info.active_robots_today}
               secondary={t('Today active robots')}
             />
           </ListItem>
@@ -129,7 +116,7 @@ const CoordinatorSummaryDialog = ({
             <ListItemText
               primaryTypographyProps={{ fontSize: '14px' }}
               secondaryTypographyProps={{ fontSize: '12px' }}
-              primary={`${lastDayNonkycBtcPremium}%`}
+              primary={`${info.last_day_nonkyc_btc_premium}%`}
               secondary={t('24h non-KYC bitcoin premium')}
             />
           </ListItem>
@@ -148,7 +135,7 @@ const CoordinatorSummaryDialog = ({
                   secondaryTypographyProps={{ fontSize: '12px' }}
                   secondary={t('Maker fee')}
                 >
-                  {(makerFee * 100).toFixed(3)}%
+                  {(info.maker_fee * 100).toFixed(3)}%
                 </ListItemText>
               </Grid>
 
@@ -158,7 +145,7 @@ const CoordinatorSummaryDialog = ({
                   secondaryTypographyProps={{ fontSize: '12px' }}
                   secondary={t('Taker fee')}
                 >
-                  {(takerFee * 100).toFixed(3)}%
+                  {(info.taker_fee * 100).toFixed(3)}%
                 </ListItemText>
               </Grid>
             </Grid>
@@ -174,7 +161,7 @@ const CoordinatorSummaryDialog = ({
             <ListItemText
               primaryTypographyProps={{ fontSize: '14px' }}
               secondaryTypographyProps={{ fontSize: '12px' }}
-              primary={`${swapFeeRate.toPrecision(3)}%`}
+              primary={`${info.current_swap_fee_rate.toPrecision(3)}%`}
               secondary={t('Current onchain payout fee')}
             />
           </ListItem>

frontend/src/components/Dialogs/Profile.tsx

@@ -23,6 +23,7 @@ import {
   TextField,
   Tooltip,
   Typography,
+  LinearProgress,
 } from '@mui/material';
 
 import { EnableTelegramDialog } from '.';
@@ -129,6 +130,9 @@ const ProfileDialog = ({ open = false, onClose, robot, setRobot }: Props): JSX.E
       aria-labelledby='profile-title'
       aria-describedby='profile-description'
     >
+      <div style={robot.loading ? {} : { display: 'none' }}>
+        <LinearProgress />
+      </div>
       <DialogContent>
         <Typography component='h5' variant='h5'>
           {t('Your Profile')}

frontend/src/components/Dialogs/Stats.tsx

@@ -11,6 +11,7 @@ import {
   ListItem,
   ListItemIcon,
   Typography,
+  LinearProgress,
 } from '@mui/material';
 
 import BoltIcon from '@mui/icons-material/Bolt';
@@ -24,47 +25,23 @@ import EqualizerIcon from '@mui/icons-material/Equalizer';
 import { AmbossIcon, BitcoinSignIcon, RoboSatsNoTextIcon } from '../Icons';
 
 import { pn } from '../../utils';
+import { Info } from '../../models';
 
 interface Props {
   open: boolean;
   onClose: () => void;
-  lndVersion: string;
+  info: Info;
-  coordinatorVersion: string;
-  clientVersion: string;
-  network: string | undefined;
-  nodeAlias: string;
-  nodeId: string;
-  alternativeName: string;
-  alternativeSite: string;
-  commitHash: string;
-  lastDayVolume: number;
-  lifetimeVolume: number;
 }
 
-const StatsDialog = ({
+const StatsDialog = ({ open = false, onClose, info }: Props): JSX.Element => {
-  open = false,
-  onClose,
-  lndVersion,
-  coordinatorVersion,
-  clientVersion,
-  network,
-  nodeAlias,
-  nodeId,
-  alternativeName,
-  alternativeSite,
-  commitHash,
-  lastDayVolume,
-  lifetimeVolume,
-}: Props): JSX.Element => {
   const { t } = useTranslation();
 
   return (
-    <Dialog
+    <Dialog open={open} onClose={onClose}>
-      open={open}
+      <div style={info.loading ? {} : { display: 'none' }}>
-      onClose={onClose}
+        <LinearProgress />
-      aria-labelledby='stats-for-nerds-dialog-title'
+      </div>
-      aria-describedby='stats-for-nerds-description'
+
-    >
       <DialogContent>
         <Typography component='h5' variant='h5'>
           {t('Stats For Nerds')}
@@ -80,9 +57,9 @@ const StatsDialog = ({
               />
             </ListItemIcon>
             <ListItemText
-              primary={`${t('Client')} ${clientVersion} - ${t(
+              primary={`${t('Client')} ${info.clientVersion} - ${t('Coordinator')} ${
-                'Coordinator',
+                info.coordinatorVersion
-              )} ${coordinatorVersion}`}
+              }`}
               secondary={t('RoboSats version')}
             />
           </ListItem>
@@ -93,23 +70,23 @@ const StatsDialog = ({
             <ListItemIcon>
               <BoltIcon />
             </ListItemIcon>
-            <ListItemText primary={lndVersion} secondary={t('LND version')} />
+            <ListItemText primary={info.lnd_version} secondary={t('LND version')} />
           </ListItem>
 
           <Divider />
 
-          {network === 'testnet' ? (
+          {info.network === 'testnet' ? (
             <ListItem>
               <ListItemIcon>
                 <DnsIcon />
               </ListItemIcon>
-              <ListItemText secondary={`${t('LN Node')}: ${nodeAlias}`}>
+              <ListItemText secondary={`${t('LN Node')}: ${info.node_alias}`}>
                 <Link
                   target='_blank'
-                  href={`https://1ml.com/testnet/node/${nodeId}`}
+                  href={`https://1ml.com/testnet/node/${info.node_id}`}
                   rel='noreferrer'
                 >
-                  {`${nodeId.slice(0, 12)}... (1ML)`}
+                  {`${info.node_id.slice(0, 12)}... (1ML)`}
                 </Link>
               </ListItemText>
             </ListItem>
@@ -118,9 +95,13 @@ const StatsDialog = ({
               <ListItemIcon>
                 <AmbossIcon />
               </ListItemIcon>
-              <ListItemText secondary={nodeAlias}>
+              <ListItemText secondary={info.node_alias}>
-                <Link target='_blank' href={`https://amboss.space/node/${nodeId}`} rel='noreferrer'>
+                <Link
-                  {`${nodeId.slice(0, 12)}... (AMBOSS)`}
+                  target='_blank'
+                  href={`https://amboss.space/node/${info.node_id}`}
+                  rel='noreferrer'
+                >
+                  {`${info.node_id.slice(0, 12)}... (AMBOSS)`}
                 </Link>
               </ListItemText>
             </ListItem>
@@ -132,9 +113,9 @@ const StatsDialog = ({
             <ListItemIcon>
               <WebIcon />
             </ListItemIcon>
-            <ListItemText secondary={alternativeName}>
+            <ListItemText secondary={info.alternative_name}>
-              <Link target='_blank' href={`http://${alternativeSite}`} rel='noreferrer'>
+              <Link target='_blank' href={`http://${info.alternative_site}`} rel='noreferrer'>
-                {`${alternativeSite.slice(0, 12)}...onion`}
+                {`${info.alternative_site.slice(0, 12)}...onion`}
               </Link>
             </ListItemText>
           </ListItem>
@@ -148,10 +129,10 @@ const StatsDialog = ({
             <ListItemText secondary={t('Coordinator commit hash')}>
               <Link
                 target='_blank'
-                href={`https://github.com/Reckless-Satoshi/robosats/tree/${commitHash}`}
+                href={`https://github.com/Reckless-Satoshi/robosats/tree/${info.robosats_running_commit_hash}`}
                 rel='noreferrer'
               >
-                {`${commitHash.slice(0, 12)}...`}
+                {`${info.robosats_running_commit_hash.slice(0, 12)}...`}
               </Link>
             </ListItemText>
           </ListItem>
@@ -171,7 +152,7 @@ const StatsDialog = ({
                   flexWrap: 'wrap',
                 }}
               >
-                {pn(lastDayVolume)}
+                {pn(info.last_day_volume)}
                 <BitcoinSignIcon sx={{ width: 14, height: 14 }} color={'text.secondary'} />
               </div>
             </ListItemText>
@@ -192,7 +173,7 @@ const StatsDialog = ({
                   flexWrap: 'wrap',
                 }}
               >
-                {pn(lifetimeVolume)}
+                {pn(info.lifetime_volume)}
                 <BitcoinSignIcon sx={{ width: 14, height: 14 }} color={'text.secondary'} />
               </div>
             </ListItemText>

frontend/src/components/SettingsForm/index.tsx

@@ -29,14 +29,14 @@ interface SettingsFormProps {
   dense?: boolean;
   settings: Settings;
   setSettings: (state: Settings) => void;
-  network?: boolean;
+  showNetwork?: boolean;
 }
 
 const SettingsForm = ({
   dense = false,
   settings,
   setSettings,
-  network = false,
+  showNetwork = false,
 }: SettingsFormProps): JSX.Element => {
   const theme = useTheme();
   const { t } = useTranslation();
@@ -129,7 +129,7 @@ const SettingsForm = ({
               track={false}
             />
           </ListItem>
-          {network ? (
+          {showNetwork ? (
             <ListItem>
               <ListItemIcon>
                 <Link />

frontend/src/models/Info.model.ts

@@ -21,6 +21,7 @@ export interface Info {
   coordinatorVersion: string;
   clientVersion: string;
   openUpdateClient: boolean;
+  loading: boolean;
 }
 
 import packageJson from '../../package.json';
@@ -49,6 +50,7 @@ export const defaultInfo: Info = {
   coordinatorVersion: 'v?.?.?',
   clientVersion: `v${semver[0]}.${semver[1]}.${semver[2]}`,
   openUpdateClient: false,
+  loading: true,
 };
 
 export default Info;

frontend/src/models/Robot.model.ts

@@ -3,8 +3,8 @@ import { systemClient } from '../services/System';
 export interface Robot {
   nickname: string | null;
   token: string | null;
-  pub_key: string | null;
+  pubKey: string | null;
-  enc_priv_key: string | null;
+  encPrivKey: string | null;
   bitsEntropy: number | null;
   shannonEntropy: number | null;
   stealthInvoices: boolean;
@@ -26,8 +26,8 @@ const privKeyCookie = systemClient.getCookie('enc_priv_key');
 export const defaultRobot: Robot = {
   nickname: null,
   token: systemClient.getCookie('robot_token') ?? null,
-  pub_key: pubKeyCookie ? pubKeyCookie.split('\\').join('\n') : null,
+  pubKey: pubKeyCookie ? pubKeyCookie.split('\\').join('\n') : null,
-  enc_priv_key: privKeyCookie ? privKeyCookie.split('\\').join('\n') : null,
+  encPrivKey: privKeyCookie ? privKeyCookie.split('\\').join('\n') : null,
   bitsEntropy: null,
   shannonEntropy: null,
   stealthInvoices: true,