Add small fixes

2025-01-31 10:31:35 +00:00 · 2022-10-31 11:03:34 -07:00 · 2022-10-31 11:03:34 -07:00 · 2706703382
commit 2706703382
parent c9749bde24
12 changed files with 94 additions and 125 deletions
--- a/frontend/src/basic/BookPage/index.tsx
+++ b/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
--- a/frontend/src/basic/Main.tsx
+++ b/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,
-      });
-      setSettings({
-        ...settings,
-        network: data.network,
+        loading: false,
      });
    });
  };

  useEffect(() => {
-    fetchInfo();
+    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,
-        enc_priv_key: data.encrypted_private_key,
+        pubKey: data.public_key,
+        encPrivKey: data.encrypted_private_key,
        copiedToken: data.found ? true : robot.copiedToken,
      });
    });
  };

  useEffect(() => {
-    if (robot.token && robot.nickname === null) {
-      fetchRobot();
+    if (open.profile || (robot.token && robot.nickname === null)) {
+      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'}
--- a/frontend/src/basic/MainDialogs/index.tsx
+++ b/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}
-        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}
+        info={info}
      />
      <StatsDialog
        open={open.stats}
        onClose={() => setOpen({ ...open, stats: false })}
-        coordinatorVersion={info.coordinatorVersion}
-        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}
+        info={info}
      />
      <ProfileDialog
        open={open.profile}
--- a/frontend/src/basic/SettingsPage/index.tsx
+++ b/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>
--- a/frontend/src/basic/UserGenPage.js
+++ b/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,
-              enc_priv_key: data.encrypted_private_key,
+              pubKey: data.public_key,
+              encPrivKey: data.encrypted_private_key,
              copiedToken: data.found ? true : this.props.robot.copiedToken,
            }) &
            systemClient.setCookie('robot_token', token) &
--- a/frontend/src/components/Charts/DepthChart/index.tsx
+++ b/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;
--- a/frontend/src/components/Dialogs/CoordinatorSummary.tsx
+++ b/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;
-  numPublicSellOrders: number;
-  bookLiquidity: number;
-  activeRobotsToday: number;
-  lastDayNonkycBtcPremium: number;
-  makerFee: number;
-  takerFee: number;
-  swapFeeRate: number;
+  info: Info;
 }

-const CoordinatorSummaryDialog = ({
-  open = false,
-  onClose,
-  numPublicBuyOrders,
-  numPublicSellOrders,
-  bookLiquidity,
-  activeRobotsToday,
-  lastDayNonkycBtcPremium,
-  makerFee,
-  takerFee,
-  swapFeeRate,
-}: Props): JSX.Element => {
+const CoordinatorSummaryDialog = ({ open = false, onClose, info }: Props): JSX.Element => {
  const { t } = useTranslation();
-  if (swapFeeRate === null || swapFeeRate === undefined) {
-    swapFeeRate = 0;
+  if (info.current_swap_fee_rate === null || info.current_swap_fee_rate === undefined) {
+    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>
--- a/frontend/src/components/Dialogs/Profile.tsx
+++ b/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')}
--- a/frontend/src/components/Dialogs/Stats.tsx
+++ b/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;
-  coordinatorVersion: string;
-  clientVersion: string;
-  network: string | undefined;
-  nodeAlias: string;
-  nodeId: string;
-  alternativeName: string;
-  alternativeSite: string;
-  commitHash: string;
-  lastDayVolume: number;
-  lifetimeVolume: number;
+  info: Info;
 }

-const StatsDialog = ({
-  open = false,
-  onClose,
-  lndVersion,
-  coordinatorVersion,
-  clientVersion,
-  network,
-  nodeAlias,
-  nodeId,
-  alternativeName,
-  alternativeSite,
-  commitHash,
-  lastDayVolume,
-  lifetimeVolume,
-}: Props): JSX.Element => {
+const StatsDialog = ({ open = false, onClose, info }: Props): JSX.Element => {
  const { t } = useTranslation();

  return (
-    <Dialog
-      open={open}
-      onClose={onClose}
-      aria-labelledby='stats-for-nerds-dialog-title'
-      aria-describedby='stats-for-nerds-description'
-    >
+    <Dialog open={open} onClose={onClose}>
+      <div style={info.loading ? {} : { display: 'none' }}>
+        <LinearProgress />
+      </div>
+
      <DialogContent>
        <Typography component='h5' variant='h5'>
          {t('Stats For Nerds')}
@ -80,9 +57,9 @@ const StatsDialog = ({
              />
            </ListItemIcon>
            <ListItemText
-              primary={`${t('Client')} ${clientVersion} - ${t(
-                'Coordinator',
-              )} ${coordinatorVersion}`}
+              primary={`${t('Client')} ${info.clientVersion} - ${t('Coordinator')} ${
+                info.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}>
-                <Link target='_blank' href={`https://amboss.space/node/${nodeId}`} rel='noreferrer'>
-                  {`${nodeId.slice(0, 12)}... (AMBOSS)`}
+              <ListItemText secondary={info.node_alias}>
+                <Link
+                  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}>
-              <Link target='_blank' href={`http://${alternativeSite}`} rel='noreferrer'>
-                {`${alternativeSite.slice(0, 12)}...onion`}
+            <ListItemText secondary={info.alternative_name}>
+              <Link target='_blank' href={`http://${info.alternative_site}`} rel='noreferrer'>
+                {`${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>
--- a/frontend/src/components/SettingsForm/index.tsx
+++ b/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 />
--- a/frontend/src/models/Info.model.ts
+++ b/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;
--- a/frontend/src/models/Robot.model.ts
+++ b/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;
-  enc_priv_key: string | null;
+  pubKey: 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,
-  enc_priv_key: privKeyCookie ? privKeyCookie.split('\\').join('\n') : null,
+  pubKey: pubKeyCookie ? pubKeyCookie.split('\\').join('\n') : null,
+  encPrivKey: privKeyCookie ? privKeyCookie.split('\\').join('\n') : null,
  bitsEntropy: null,
  shannonEntropy: null,
  stealthInvoices: true,