Refactor frontend

.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

@@ -1,20 +1,20 @@
 import React, { Suspense, useState } from 'react';
 import ReactDOM from 'react-dom/client';
-import Main from './Main';
+import Main from './basic/Main';
 import { CssBaseline, IconButton } from '@mui/material';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import UnsafeAlert from './UnsafeAlert';
-import { LearnDialog } from './Dialogs';
-import TorConnection from './TorConnection';
+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';
+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';
+import { systemClient } from './services/System';
 
 const defaultTheme = createTheme({
   palette: {

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/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';
@@ -245,7 +245,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
                     {currencyDict[order.currency]}
                   </Grid>
                   <Grid item xs={12}>
-                    <PaymentText
+                    <PaymentStringAsIcons
                       othersText={t('Others')}
                       verbose={true}
                       size={20}

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';