Refactor and Init RoboSats PRO (#296)

commit 9c6d55cfc7
Author: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date:   Thu Oct 20 10:35:49 2022 -0700

    Small fixes

commit 23d6c00ccb
Author: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date:   Thu Oct 20 06:12:42 2022 -0700

    Refactor frontend

commit b2c21d4a98
Author: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date:   Wed Oct 19 07:26:00 2022 -0700

    Small fixes (more)

commit 78a8ab799d
Author: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date:   Wed Oct 19 02:11:03 2022 -0700

    Try out to revert depth chart

commit ef73c980a8
Author: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date:   Tue Oct 18 11:43:37 2022 -0700

    Small fixes

commit fa3e60208f
Author: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date:   Tue Oct 18 09:43:03 2022 -0700

    Add old UserGen and BottomBar to new main.tsx

commit 1e257d1924
Author: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date:   Tue Oct 18 04:01:53 2022 -0700

    Add Maker and Book page to new main.tsx

commit 037d46ceef
Author: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date:   Mon Oct 17 08:54:55 2022 -0700

    Add Main component WIP

commit e43b274c33
Author: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date:   Mon Oct 17 04:32:43 2022 -0700

    App as functional component

.github/workflows/client-image.yml

@@ -26,22 +26,38 @@ jobs:
         rm nodeapp/static
         cp -r frontend/static nodeapp/static
 
-    - name: 'Download main.js Artifact'
+    - name: 'Download basic.js Artifact'
       if: inputs.semver == ''  # Only if workflow fired from frontend-build.yml
       uses: dawidd6/action-download-artifact@v2
       with:
         workflow: frontend-build.yml
         workflow_conclusion: success
-        name: web-main-js
+        name: web-basic-js
         path: nodeapp/static/frontend/
     
-    - name: 'Download main.js Artifact for a release'
+    - name: 'Download basic.js Artifact for a release'
       if: inputs.semver != ''  # Only if fired as job in release.yml
       uses: actions/download-artifact@v3
       with:
-        name: web-main-js
+        name: web-basic-js
         path: nodeapp/static/frontend/
-        
+
+    - name: 'Download pro.js Artifact'
+      if: inputs.semver == ''  # Only if workflow fired from frontend-build.yml
+      uses: dawidd6/action-download-artifact@v2
+      with:
+        workflow: frontend-build.yml
+        workflow_conclusion: success
+        name: web-pro-js
+        path: nodeapp/static/frontend/
+    
+    - name: 'Download pro.js Artifact for a release'
+      if: inputs.semver != ''  # Only if fired as job in release.yml
+      uses: actions/download-artifact@v3
+      with:
+        name: web-pro-js
+        path: nodeapp/static/frontend/
+
     - name: 'Log in to Docker Hub'
       uses: docker/login-action@v2
       with:

.github/workflows/coordinator-image.yml

@@ -15,20 +15,36 @@ jobs:
     steps:
     - uses: actions/checkout@v3
 
-    - name: 'Download main.js Artifact'
+    - name: 'Download basic.js Artifact'
       if: inputs.semver == ''  # Only if workflow fired from frontend-build.yml
       uses: dawidd6/action-download-artifact@v2
       with:
         workflow: frontend-build.yml
         workflow_conclusion: success
-        name: web-main-js
+        name: web-basic-js
         path: nodeapp/static/frontend/
     
-    - name: 'Download main.js Artifact for a release'
+    - name: 'Download basic.js Artifact for a release'
       if: inputs.semver != ''  # Only if fired as job in release.yml
       uses: actions/download-artifact@v3
       with:
-        name: web-main-js
+        name: web-basic-js
+        path: nodeapp/static/frontend/
+
+    - name: 'Download pro.js Artifact'
+      if: inputs.semver == ''  # Only if workflow fired from frontend-build.yml
+      uses: dawidd6/action-download-artifact@v2
+      with:
+        workflow: frontend-build.yml
+        workflow_conclusion: success
+        name: web-pro-js
+        path: nodeapp/static/frontend/
+    
+    - name: 'Download pro.js Artifact for a release'
+      if: inputs.semver != ''  # Only if fired as job in release.yml
+      uses: actions/download-artifact@v3
+      with:
+        name: web-pro-js
         path: nodeapp/static/frontend/
 
     - name: 'Log in to Docker Hub'

.github/workflows/frontend-build.yml

@@ -48,11 +48,16 @@ jobs:
       run: |
         cd frontend
         npm run build
-    - name: 'Archive Web Build Results'
+    - name: 'Archive Web Basic Build Results'
       uses: actions/upload-artifact@v3
       with:
-        name: web-main-js
-        path: frontend/static/frontend/main.js
+        name: web-basic-js
+        path: frontend/static/frontend/basic.js
+    - name: 'Archive Web PRO Build Results'
+      uses: actions/upload-artifact@v3
+      with:
+        name: web-pro-js
+        path: frontend/static/frontend/pro.js
     - name: 'Archive Mobile Build Results'
       uses: actions/upload-artifact@v3
       with:

.gitignore

@@ -656,9 +656,8 @@ api/lightning/googleapis*
 frontend/static/admin*
 frontend/static/rest_framework*
 frontend/static/import_export*
-frontend/src/components/payment-methods/code*
-frontend/src/components/payment-methods/code/*
-frontend/src/components/payment-methods/webp*
+frontend/src/components/PaymentMethods/Icons/code*
+frontend/src/components/PaymentMethods/Icons/webp*
 frontend/static/frontend/**
 docs/.jekyll-cache*
 docs/_site*
@@ -666,4 +665,4 @@ commit_sha.txt
 node
 
 # mobile frontend js
-mobile/html/Web.bundle/js*
+mobile/html/Web.bundle/js*

frontend/src/App.tsx

@@ -0,0 +1,102 @@
+import React, { Suspense, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import Main from './basic/Main';
+import { CssBaseline, IconButton } from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import UnsafeAlert from './components/UnsafeAlert';
+import { LearnDialog } from './components/Dialogs';
+import TorConnection from './components/TorConnection';
+
+import { I18nextProvider } from 'react-i18next';
+import i18n from './i18n/Web';
+
+// Icons
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import SchoolIcon from '@mui/icons-material/School';
+import { systemClient } from './services/System';
+
+const defaultTheme = createTheme({
+  palette: {
+    mode:
+      window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light',
+    background: {
+      default:
+        window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? '#070707'
+          : '#fff',
+    },
+  },
+});
+
+const App = (): JSX.Element => {
+  const [openLearn, setOpenLearn] = useState<boolean>(false);
+  const [theme, setTheme] = useState(defaultTheme);
+
+  const handleModeChange = function () {
+    if (theme.palette.mode === 'light') {
+      setTheme(
+        createTheme({
+          palette: {
+            mode: 'dark',
+            background: {
+              default: '#070707',
+            },
+          },
+        }),
+      );
+    } else if (theme.palette.mode === 'dark') {
+      setTheme(
+        createTheme({
+          palette: {
+            mode: 'light',
+            background: {
+              default: '#fff',
+            },
+          },
+        }),
+      );
+    }
+  };
+
+  return (
+    <Suspense fallback='loading language'>
+      <I18nextProvider i18n={i18n}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <LearnDialog open={openLearn} onClose={() => setOpenLearn(false)} />
+          <TorConnection />
+          <IconButton
+            color='inherit'
+            sx={{ position: 'fixed', right: '34px', color: 'text.secondary' }}
+            onClick={() => setOpenLearn(true)}
+          >
+            <SchoolIcon />
+          </IconButton>
+          <IconButton
+            color='inherit'
+            sx={{ position: 'fixed', right: '0px', color: 'text.secondary' }}
+            onClick={() => handleModeChange()}
+          >
+            {theme.palette.mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
+          </IconButton>
+          <UnsafeAlert className='unsafeAlert' />
+          <Main />
+        </ThemeProvider>
+      </I18nextProvider>
+    </Suspense>
+  );
+};
+
+const loadApp = () => {
+  if (systemClient.loading) {
+    setTimeout(loadApp, 200);
+  } else {
+    const root = ReactDOM.createRoot(document.getElementById('app') ?? new HTMLElement());
+    root.render(<App />);
+  }
+};
+
+loadApp();

frontend/src/basic/BookPage/index.tsx

@@ -3,14 +3,14 @@ import { useTranslation } from 'react-i18next';
 import { Button, Typography, Grid, ButtonGroup, Dialog, Box } from '@mui/material';
 import { useHistory } from 'react-router-dom';
 import currencyDict from '../../../static/assets/currencies.json';
-import DepthChart from '../Charts/DepthChart';
+import DepthChart from '../../components/Charts/DepthChart';
 
 import { Book, Favorites, LimitList, Maker } from '../../models';
 
 // Icons
 import { BarChart, FormatListBulleted } from '@mui/icons-material';
-import BookTable from './BookTable';
-import { MakerForm } from '../MakerPage';
+import MakerForm from '../../components/MakerForm';
+import BookTable from '../../components/BookTable';
 
 interface BookPageProps {
   book: Book;

frontend/src/basic/BottomBar.js

@@ -19,7 +19,7 @@ import Flags from 'country-flag-icons/react/3x2';
 import { Link as LinkRouter } from 'react-router-dom';
 import { apiClient } from '../services/api';
 import { systemClient } from '../services/System';
-import RobotAvatar from './Robots/RobotAvatar';
+import RobotAvatar from '../components/RobotAvatar';
 
 // Icons
 import BarChartIcon from '@mui/icons-material/BarChart';
@@ -31,7 +31,7 @@ import PercentIcon from '@mui/icons-material/Percent';
 import PriceChangeIcon from '@mui/icons-material/PriceChange';
 
 // Missing flags
-import { CataloniaFlag, BasqueCountryFlag } from './Icons';
+import { CataloniaFlag, BasqueCountryFlag } from '../components/Icons';
 
 import {
   CommunityDialog,
@@ -39,7 +39,7 @@ import {
   ProfileDialog,
   StatsDialog,
   UpdateClientDialog,
-} from './Dialogs';
+} from '../components/Dialogs';
 
 class BottomBar extends Component {
   constructor(props) {

frontend/src/basic/Main.tsx

@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from 'react';
+import { HashRouter, BrowserRouter, Switch, Route, useHistory } from 'react-router-dom';
+import { useTheme } from '@mui/material';
+
+import UserGenPage from './UserGenPage';
+import MakerPage from './MakerPage';
+import BookPage from './BookPage';
+import OrderPage from './OrderPage';
+import BottomBar from './BottomBar';
+
+import { apiClient } from '../services/api';
+import checkVer from '../utils/checkVer';
+
+import {
+  Book,
+  LimitList,
+  Maker,
+  Robot,
+  Info,
+  Settings,
+  Favorites,
+  defaultMaker,
+  defaultRobot,
+  defaultInfo,
+  defaultSettings,
+} from '../models';
+
+const getWindowSize = function (fontSize: number) {
+  // returns window size in EM units
+  return {
+    width: window.innerWidth / fontSize,
+    height: window.innerHeight / fontSize,
+  };
+};
+
+const Main = (): JSX.Element => {
+  const theme = useTheme();
+  const history = useHistory();
+  const Router = window.NativeRobosats != null ? HashRouter : BrowserRouter;
+  const basename = window.NativeRobosats != null ? window.location.pathname : '';
+
+  // All app data structured
+  const [book, setBook] = useState<Book>({ orders: [], loading: true });
+  const [limits, setLimits] = useState<{ list: LimitList; loading: boolean }>({
+    list: [],
+    loading: true,
+  });
+  const [robot, setRobot] = useState<Robot>(defaultRobot);
+  const [maker, setMaker] = useState<Maker>(defaultMaker);
+  const [info, setInfo] = useState<Info>(defaultInfo);
+  const [fav, setFav] = useState<Favorites>({ type: null, currency: 0 });
+  const [settings, setSettings] = useState<Settings>(defaultSettings);
+
+  const [windowSize, setWindowSize] = useState<{ width: number; height: number }>(
+    getWindowSize(theme.typography.fontSize),
+  );
+
+  useEffect(() => {
+    if (typeof window !== undefined) {
+      window.addEventListener('resize', onResize);
+    }
+    fetchBook();
+    fetchLimits();
+    fetchInfo();
+    return () => {
+      if (typeof window !== undefined) {
+        window.removeEventListener('resize', onResize);
+      }
+    };
+  }, []);
+
+  const onResize = function () {
+    setWindowSize(getWindowSize(theme.typography.fontSize));
+  };
+
+  const fetchBook = function () {
+    setBook({ ...book, loading: true });
+    apiClient.get('/api/book/').then((data: any) =>
+      setBook({
+        loading: false,
+        orders: data.not_found ? [] : data,
+      }),
+    );
+  };
+
+  const fetchLimits = async () => {
+    setLimits({ ...limits, loading: true });
+    const data = apiClient.get('/api/limits/').then((data) => {
+      setLimits({ list: data ?? [], loading: false });
+      return data;
+    });
+    return await data;
+  };
+
+  const fetchInfo = function () {
+    apiClient.get('/api/info/').then((data: any) => {
+      const versionInfo: any = checkVer(data.version.major, data.version.minor, data.version.patch);
+      setInfo({
+        ...data,
+        openUpdateClient: versionInfo.updateAvailable,
+        coordinatorVersion: versionInfo.coordinatorVersion,
+        clientVersion: versionInfo.clientVersion,
+      });
+      setRobot({
+        ...robot,
+        nickname: data.nickname,
+        loading: false,
+        activeOrderId: data.active_order_id ?? null,
+        lastOrderId: data.last_order_id ?? null,
+        referralCode: data.referral_code,
+        tgEnabled: data.tg_enabled,
+        tgBotName: data.tg_bot_name,
+        tgToken: data.tg_token,
+        earnedRewards: data.earned_rewards ?? 0,
+        stealthInvoices: data.wants_stealth,
+      });
+    });
+  };
+
+  return (
+    <Router basename={basename}>
+      <div className='appCenter'>
+        <Switch>
+          <Route
+            exact
+            path='/'
+            render={(props: any) => (
+              <UserGenPage match={props.match} theme={theme} robot={robot} setRobot={setRobot} />
+            )}
+          />
+          <Route
+            path='/ref/:refCode'
+            render={(props: any) => (
+              <UserGenPage match={props.match} theme={theme} robot={robot} setRobot={setRobot} />
+            )}
+          />
+          <Route
+            path='/make'
+            render={() => (
+              <MakerPage
+                orders={book.orders}
+                limits={limits}
+                fetchLimits={fetchLimits}
+                maker={maker}
+                setMaker={setMaker}
+                fav={fav}
+                setFav={setFav}
+                windowSize={windowSize}
+              />
+            )}
+          />
+          <Route
+            path='/book'
+            render={() => (
+              <BookPage
+                book={book}
+                fetchBook={fetchBook}
+                limits={limits}
+                fetchLimits={fetchLimits}
+                fav={fav}
+                setFav={setFav}
+                maker={maker}
+                setMaker={setMaker}
+                lastDayPremium={info.last_day_nonkyc_btc_premium}
+                windowSize={windowSize}
+              />
+            )}
+          />
+          <Route
+            path='/order/:orderId'
+            render={(props: any) => <OrderPage theme={theme} history={history} {...props} />}
+          />
+        </Switch>
+      </div>
+      <div
+        style={{
+          height: '2.5em',
+          position: 'fixed',
+          bottom: 0,
+        }}
+      >
+        <BottomBar
+          theme={theme}
+          windowSize={windowSize}
+          redirectTo={(location: string) => history.push(location)}
+          robot={robot}
+          setRobot={setRobot}
+          info={info}
+          setInfo={setInfo}
+          fetchInfo={fetchInfo}
+        />
+      </div>
+    </Router>
+  );
+};
+
+export default Main;

frontend/src/basic/MakerPage/index.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
 import { Button, Grid, Paper, Collapse, Typography } from '@mui/material';
 
-import { LimitList, Maker, Order, Favorites, defaultMaker } from '../../models';
-import MakerForm from './MakerForm';
-import BookTable from '../BookPage/BookTable';
+import { LimitList, Maker, Order, Favorites } from '../../models';
 
-import { useHistory } from 'react-router-dom';
 import filterOrders from '../../utils/filterOrders';
 
+import MakerForm from '../../components/MakerForm';
+import BookTable from '../../components/BookTable';
+
 interface MakerPageProps {
   limits: { list: LimitList; loading: boolean };
   fetchLimits: () => void;

frontend/src/basic/OrderPage/index.js

@@ -4,8 +4,6 @@ import {
   TextField,
   Chip,
   Tooltip,
-  IconButton,
-  Badge,
   Tab,
   Tabs,
   Alert,
@@ -19,10 +17,8 @@ import {
   ListItemIcon,
   ListItemText,
   ListItemAvatar,
-  Avatar,
   Divider,
   Box,
-  LinearProgress,
   Dialog,
   DialogActions,
   DialogContent,
@@ -30,12 +26,11 @@ import {
   DialogTitle,
 } from '@mui/material';
 import Countdown, { zeroPad } from 'react-countdown';
-import { StoreTokenDialog, NoRobotDialog } from './Dialogs';
+import { StoreTokenDialog, NoRobotDialog } from '../../components/Dialogs';
 
-import currencyDict from '../../static/assets/currencies.json';
-import PaymentText from './PaymentText';
-import TradeBox from './TradeBox';
-import FlagWithProps from './FlagWithProps';
+import currencyDict from '../../../static/assets/currencies.json';
+import TradeBox from '../../components/TradeBox';
+import { FlagWithProps } from '../../components/Icons';
 import LinearDeterminate from './LinearDeterminate';
 import MediaQuery from 'react-responsive';
 import { t } from 'i18next';
@@ -48,14 +43,14 @@ import PaymentsIcon from '@mui/icons-material/Payments';
 import ArticleIcon from '@mui/icons-material/Article';
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
 import CheckIcon from '@mui/icons-material/Check';
-import { SendReceiveIcon } from './Icons';
 
-import { pn } from '../utils/prettyNumbers';
-import { systemClient } from '../services/System';
-import { getWebln } from '../utils/webln';
-import { apiClient } from '../services/api';
-import RobotAvatar from './Robots/RobotAvatar';
-import statusBadgeColor from '../utils/statusBadgeColor';
+import { pn } from '../../utils/prettyNumbers';
+import { systemClient } from '../../services/System';
+import { getWebln } from '../../utils/webln';
+import { apiClient } from '../../services/api';
+import RobotAvatar from '../../components/RobotAvatar';
+import statusBadgeColor from '../../utils/statusBadgeColor';
+import { PaymentStringAsIcons } from '../../components/PaymentMethods';
 
 class OrderPage extends Component {
   constructor(props) {
@@ -793,7 +788,7 @@ class OrderPage extends Component {
                 </ListItemIcon>
                 <ListItemText
                   primary={
-                    <PaymentText
+                    <PaymentStringAsIcons
                       size={20}
                       othersText={t('Others')}
                       verbose={true}

frontend/src/basic/UserGenPage.js

@@ -11,14 +11,14 @@ import {
   IconButton,
 } from '@mui/material';
 import { Link } from 'react-router-dom';
-import { InfoDialog } from './Dialogs';
+import { InfoDialog } from '../components/Dialogs';
 
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import CasinoIcon from '@mui/icons-material/Casino';
 import ContentCopy from '@mui/icons-material/ContentCopy';
 import BoltIcon from '@mui/icons-material/Bolt';
 import DownloadIcon from '@mui/icons-material/Download';
-import { RoboSatsNoTextIcon } from './Icons';
+import { RoboSatsNoTextIcon } from '../components/Icons';
 
 import { sha256 } from 'js-sha256';
 import { genBase62Token, tokenStrength } from '../utils/token';
@@ -26,7 +26,7 @@ import { genKey } from '../utils/pgp';
 import { saveAsJson } from '../utils/saveFile';
 import { systemClient } from '../services/System';
 import { apiClient } from '../services/api/index';
-import RobotAvatar from './Robots/RobotAvatar';
+import RobotAvatar from '../components/RobotAvatar';
 
 class UserGenPage extends Component {
   constructor(props) {

frontend/src/components/BookPage/index.ts

@@ -1,4 +0,0 @@
-import BookPage from './BookPage';
-export default BookPage;
-
-export { default as BookTable } from './BookTable';

frontend/src/components/BookTable/BookControl.tsx

@@ -12,10 +12,9 @@ import {
 } from '@mui/material';
 import currencyDict from '../../../static/assets/currencies.json';
 import { useTheme } from '@mui/system';
-import { AutocompletePayments } from '../MakerPage';
-import { paymentMethods, swapDestinations } from '../payment-methods/Methods';
-import FlagWithProps from '../FlagWithProps';
-import PaymentIcon from '../payment-methods/Icons';
+import { AutocompletePayments } from '../MakerForm';
+import { fiatMethods, swapMethods, PaymentIcon } from '../PaymentMethods';
+import { FlagWithProps } from '../Icons';
 
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 
@@ -218,7 +217,7 @@ const BookControl = ({
                 </div>
               </MenuItem>
               {currency === 1000
-                ? swapDestinations.map((method, index) => (
+                ? swapMethods.map((method, index) => (
                     <MenuItem
                       style={{ width: '10em' }}
                       key={index}
@@ -234,7 +233,7 @@ const BookControl = ({
                       </div>
                     </MenuItem>
                   ))
-                : paymentMethods.map((method, index) => (
+                : fiatMethods.map((method, index) => (
                     <MenuItem
                       style={{ width: '14em' }}
                       key={index}

frontend/src/components/BookTable/index.tsx

@@ -22,10 +22,10 @@ import { Book, Favorites } from '../../models';
 import filterOrders from '../../utils/filterOrders';
 import BookControl from './BookControl';
 
-import FlagWithProps from '../FlagWithProps';
+import { FlagWithProps } from '../Icons';
 import { pn, amountToString } from '../../utils/prettyNumbers';
-import PaymentText from '../PaymentText';
-import RobotAvatar from '../Robots/RobotAvatar';
+import { PaymentStringAsIcons } from '../PaymentMethods';
+import RobotAvatar from '../RobotAvatar';
 import hexToRgb from '../../utils/hexToRgb';
 import statusBadgeColor from '../../utils/statusBadgeColor';
 
@@ -272,7 +272,7 @@ const BookTable = ({
       renderCell: (params: any) => {
         return (
           <div style={{ cursor: 'pointer' }}>
-            <PaymentText
+            <PaymentStringAsIcons
               othersText={t('Others')}
               verbose={true}
               size={1.7 * fontSize}
@@ -299,7 +299,7 @@ const BookTable = ({
               cursor: 'pointer',
             }}
           >
-            <PaymentText
+            <PaymentStringAsIcons
               othersText={t('Others')}
               size={1.3 * fontSize}
               text={params.row.payment_method}

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

@@ -22,10 +22,10 @@ import { AddCircleOutline, RemoveCircleOutline } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { Order, LimitList } from '../../../models';
-import RobotAvatar from '../../Robots/RobotAvatar';
+import RobotAvatar from '../../RobotAvatar';
 import { amountToString } from '../../../utils/prettyNumbers';
 import currencyDict from '../../../../static/assets/currencies.json';
-import PaymentText from '../../PaymentText';
+import { PaymentStringAsIcons } from '../../PaymentMethods';
 import getNivoScheme from '../NivoScheme';
 import median from '../../../utils/match';
 import statusBadgeColor from '../../../utils/statusBadgeColor';
@@ -208,60 +208,62 @@ const DepthChart: React.FC<DepthChartProps> = ({
     />
   );
 
-  const generateTooltip: React.FunctionComponent<PointTooltipProps> = (
-    pointTooltip: PointTooltipProps,
-  ) => {
-    const order: Order = pointTooltip.point.data.order;
-    return order ? (
-      <Paper elevation={12} style={{ padding: 10, width: 250 }}>
-        <Grid container justifyContent='space-between'>
-          <Grid item xs={3}>
-            <Grid container justifyContent='center' alignItems='center'>
-              <RobotAvatar
-                nickname={order.maker_nick}
-                orderType={order.type}
-                statusColor={statusBadgeColor(order.maker_status)}
-                tooltip={t(order.maker_status)}
-              />
-            </Grid>
-          </Grid>
-          <Grid item xs={8}>
-            <Grid container direction='column' justifyContent='center' alignItems='flex-start'>
-              <Box>{order.maker_nick}</Box>
-              <Box>
-                <Grid
-                  container
-                  direction='column'
-                  justifyContent='flex-start'
-                  alignItems='flex-start'
-                >
-                  <Grid item xs={12}>
-                    {amountToString(
-                      order.amount,
-                      order.has_range,
-                      order.min_amount,
-                      order.max_amount,
-                    )}{' '}
-                    {currencyDict[order.currency]}
-                  </Grid>
-                  <Grid item xs={12}>
-                    <PaymentText
-                      othersText={t('Others')}
-                      verbose={true}
-                      size={20}
-                      text={order.payment_method}
-                    />
-                  </Grid>
-                </Grid>
-              </Box>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Paper>
-    ) : (
-      <></>
-    );
-  };
+  // Unkown Bug. Temporarily silenced until cause is found.
+
+  // const generateTooltip: React.FunctionComponent<PointTooltipProps> = (
+  //   pointTooltip: PointTooltipProps,
+  // ) => {
+  //   const order: Order = pointTooltip.point.data.order;
+  //   return order ? (
+  //     <Paper elevation={12} style={{ padding: 10, width: 250 }}>
+  //       <Grid container justifyContent='space-between'>
+  //         <Grid item xs={3}>
+  //           <Grid container justifyContent='center' alignItems='center'>
+  //             <RobotAvatar
+  //               nickname={order.maker_nick}
+  //               orderType={order.type}
+  //               statusColor={statusBadgeColor(order.maker_status)}
+  //               tooltip={t(order.maker_status)}
+  //             />
+  //           </Grid>
+  //         </Grid>
+  //         <Grid item xs={8}>
+  //           <Grid container direction='column' justifyContent='center' alignItems='flex-start'>
+  //             <Box>{order.maker_nick}</Box>
+  //             <Box>
+  //               <Grid
+  //                 container
+  //                 direction='column'
+  //                 justifyContent='flex-start'
+  //                 alignItems='flex-start'
+  //               >
+  //                 <Grid item xs={12}>
+  //                   {amountToString(
+  //                     order.amount,
+  //                     order.has_range,
+  //                     order.min_amount,
+  //                     order.max_amount,
+  //                   )}{' '}
+  //                   {currencyDict[order.currency]}
+  //                 </Grid>
+  //                 <Grid item xs={12}>
+  //                   <PaymentStringAsIcons
+  //                     othersText={t('Others')}
+  //                     verbose={true}
+  //                     size={20}
+  //                     text={order.payment_method}
+  //                   />
+  //                 </Grid>
+  //               </Grid>
+  //             </Box>
+  //           </Grid>
+  //         </Grid>
+  //       </Grid>
+  //     </Paper>
+  //   ) : (
+  //     <></>
+  //   );
+  // };
 
   const formatAxisX = (value: number): string => {
     if (xType === 'base_amount') {
@@ -345,7 +347,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
                 useMesh={true}
                 animate={false}
                 crosshairType='cross'
-                tooltip={generateTooltip}
+                // tooltip={generateTooltip}
                 onClick={handleOnClick}
                 axisRight={{
                   tickSize: 5,

frontend/src/components/Dialogs/Profile.tsx

@@ -38,7 +38,7 @@ import { UserNinjaIcon, BitcoinIcon } from '../Icons';
 
 import { systemClient } from '../../services/System';
 import { getWebln } from '../../utils/webln';
-import RobotAvatar from '../Robots/RobotAvatar';
+import RobotAvatar from '../RobotAvatar';
 
 interface Props {
   open: boolean;

frontend/src/components/FlagWithProps/index.ts

@@ -1 +0,0 @@
-export { default } from './FlagWithProps';

frontend/src/components/Icons/index.ts

@@ -16,6 +16,8 @@ export { default as ExportIcon } from './Export';
 export { default as UserNinjaIcon } from './UserNinja';
 export { default as TorIcon } from './Tor';
 
+// Flags with props
+export { default as FlagWithProps } from './WorldFlags';
 // Some Flags missing on react-flags
 export { default as BasqueCountryFlag } from './BasqueCountryFlag';
 export { default as CataloniaFlag } from './CataloniaFlag';

frontend/src/components/LinearDeterminate/index.ts

@@ -1 +0,0 @@
-export { default } from './LinearDeterminate';

frontend/src/components/MakerForm/AmountRange.tsx

@@ -11,7 +11,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import FlagWithProps from '../FlagWithProps';
+import { FlagWithProps } from '../Icons';
 import RangeSlider from './RangeSlider';
 import currencyDict from '../../../static/assets/currencies.json';
 import { pn } from '../../utils/prettyNumbers';

frontend/src/components/MakerForm/AutocompletePayments.js

@@ -4,11 +4,10 @@ import { useTranslation } from 'react-i18next';
 import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
 import { styled } from '@mui/material/styles';
 import { Button, Fade, Tooltip, Typography, Grow } from '@mui/material';
-import { paymentMethods, swapDestinations } from '../payment-methods/Methods';
+import { fiatMethods, swapMethods, PaymentIcon } from '../PaymentMethods';
 
 // Icons
 import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
-import PaymentIcon from '../payment-methods/Icons';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 
@@ -226,7 +225,7 @@ export default function AutocompletePayments(props) {
     id: 'payment-methods',
     multiple: true,
     value: props.value,
-    options: props.optionsType == 'fiat' ? paymentMethods : swapDestinations,
+    options: props.optionsType == 'fiat' ? fiatMethods : swapMethods,
     getOptionLabel: (option) => option.name,
     onInputChange: (e) => setVal(e ? (e.target.value ? e.target.value : '') : ''),
     onChange: (event, value) => props.onAutocompleteChange(value),
@@ -237,7 +236,7 @@ export default function AutocompletePayments(props) {
   const fewerOptions = groupedOptions.length > 8 ? groupedOptions.slice(0, 8) : groupedOptions;
 
   function handleAddNew(inputProps) {
-    paymentMethods.push({ name: inputProps.value, icon: 'custom' });
+    fiatMethods.push({ name: inputProps.value, icon: 'custom' });
     const a = value.push({ name: inputProps.value, icon: 'custom' });
     setVal(() => '');
 

frontend/src/components/MakerForm/MakerForm.tsx

@@ -33,7 +33,7 @@ import { StoreTokenDialog, NoRobotDialog } from '../Dialogs';
 import { apiClient } from '../../services/api';
 import { systemClient } from '../../services/System';
 
-import FlagWithProps from '../FlagWithProps';
+import { FlagWithProps } from '../Icons';
 import AutocompletePayments from './AutocompletePayments';
 import AmountRange from './AmountRange';
 import currencyDict from '../../../static/assets/currencies.json';

frontend/src/components/MakerForm/index.ts

@@ -0,0 +1,4 @@
+import MakerForm from './MakerForm';
+export default MakerForm;
+
+export { default as AutocompletePayments } from './AutocompletePayments';

frontend/src/components/MakerPage/index.ts

@@ -1,5 +0,0 @@
-import MakerPage from './MakerPage';
-export default MakerPage;
-
-export { default as MakerForm } from './MakerForm';
-export { default as AutocompletePayments } from './AutocompletePayments';