Run npm run lint:fix

Still many linting errors to fix manually

.github/workflows/linter.yml

@@ -36,4 +36,7 @@ jobs:
         uses: wearerequired/lint-action@v2
         with:
           prettier: true
-          prettier_dir: frontend
+          prettier_dir: frontend
+          # Many linting errors
+          # eslint: true
+          # eslint_dir: frontend

frontend/package.json

@@ -83,4 +83,4 @@
     "webln": "^0.3.0",
     "websocket": "^1.0.34"
   }
-}
+}

frontend/src/components/App.js

@@ -9,7 +9,7 @@ import { LearnDialog } from './Dialogs';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n';
 
-//Icons
+// Icons
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import SchoolIcon from '@mui/icons-material/School';

frontend/src/components/AutocompletePayments.js

@@ -232,9 +232,9 @@ export default function AutocompletePayments(props) {
   const [val, setVal] = useState();
 
   function optionsToString(newValue) {
-    var str = '';
+    let str = '';
-    var arrayLength = newValue.length;
+    const arrayLength = newValue.length;
-    for (var i = 0; i < arrayLength; i++) {
+    for (let i = 0; i < arrayLength; i++) {
       str += newValue[i].name + ' ';
     }
     return str.slice(0, -1);
@@ -242,7 +242,7 @@ export default function AutocompletePayments(props) {
 
   function handleAddNew(inputProps) {
     paymentMethods.push({ name: inputProps.value, icon: 'custom' });
-    var a = value.push({ name: inputProps.value, icon: 'custom' });
+    const a = value.push({ name: inputProps.value, icon: 'custom' });
     setVal(() => '');
 
     if (a || a == null) {
@@ -274,7 +274,7 @@ export default function AutocompletePayments(props) {
             {value.map((option, index) => (
               <StyledTag label={t(option.name)} icon={option.icon} {...getTagProps({ index })} />
             ))}
-            <input {...getInputProps()} value={val ? val : ''} />
+            <input {...getInputProps()} value={val || ''} />
           </InputWrapper>
         </div>
       </Tooltip>
@@ -320,7 +320,7 @@ export default function AutocompletePayments(props) {
             ) : null
           ) : null}
         </Listbox>
-      ) : //Here goes what happens if there is no groupedOptions
+      ) : // Here goes what happens if there is no groupedOptions
       getInputProps().value.length > 0 ? (
         <Listbox {...getListboxProps()}>
           <Button fullWidth={true} onClick={() => handleAddNew(getInputProps())}>

frontend/src/components/BookPage.js

@@ -67,9 +67,9 @@ class BookPage extends Component {
   };
 
   handleCurrencyChange = (e) => {
-    var currency = e.target.value;
+    const currency = e.target.value;
     this.props.setAppState({
-      currency: currency,
+      currency,
       bookCurrencyCode: this.getCurrencyCode(currency),
     });
   };
@@ -437,7 +437,7 @@ class BookPage extends Component {
   };
 
   handleTypeChange = (buyChecked, sellChecked) => {
-    this.props.setAppState({ buyChecked: buyChecked, sellChecked: sellChecked });
+    this.props.setAppState({ buyChecked, sellChecked });
 
     if (buyChecked & sellChecked || !buyChecked & !sellChecked) {
       var type = 2;
@@ -446,12 +446,12 @@ class BookPage extends Component {
     } else if (sellChecked) {
       var type = 0;
     }
-    this.props.setAppState({ type: type });
+    this.props.setAppState({ type });
   };
 
   handleClickBuy = (e) => {
-    var buyChecked = e.target.checked;
+    const buyChecked = e.target.checked;
-    var sellChecked = this.props.sellChecked;
+    const sellChecked = this.props.sellChecked;
     this.handleTypeChange(buyChecked, sellChecked);
   };
 
@@ -460,8 +460,8 @@ class BookPage extends Component {
   };
 
   handleClickSell = (e) => {
-    var buyChecked = this.props.buyChecked;
+    const buyChecked = this.props.buyChecked;
-    var sellChecked = e.target.checked;
+    const sellChecked = e.target.checked;
     this.handleTypeChange(buyChecked, sellChecked);
   };
 
@@ -659,7 +659,7 @@ class BookPage extends Component {
                 : t('and use')}
             </FormHelperText>
             <Select
-              //autoWidth={true}
+              // autoWidth={true}
               sx={{ width: 120 }}
               label={t('Select Payment Currency')}
               required={true}

frontend/src/components/BottomBar.js

@@ -99,6 +99,7 @@ class BottomBar extends Component {
   handleClickOpenCommunity = () => {
     this.setState({ openCommuniy: true });
   };
+
   handleClickCloseCommunity = () => {
     this.setState({ openCommuniy: false });
   };
@@ -107,6 +108,7 @@ class BottomBar extends Component {
     this.getInfo();
     this.setState({ openProfile: true, profileShown: true });
   };
+
   handleClickCloseProfile = () => {
     this.setState({ openProfile: false });
   };
@@ -130,8 +132,8 @@ class BottomBar extends Component {
         (data) =>
           this.setState({
             badInvoice: data.bad_invoice,
-            openClaimRewards: data.successful_withdrawal ? false : true,
+            openClaimRewards: !data.successful_withdrawal,
-            withdrawn: data.successful_withdrawal ? true : false,
+            withdrawn: !!data.successful_withdrawal,
             showRewardsSpinner: false,
           }) &
           this.props.setAppState({
@@ -145,7 +147,7 @@ class BottomBar extends Component {
     const requestOptions = {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
-      body: JSON.stringify({ wantsStealth: wantsStealth }),
+      body: JSON.stringify({ wantsStealth }),
     };
     fetch('/api/stealth/', requestOptions)
       .then((response) => response.json())
@@ -153,7 +155,7 @@ class BottomBar extends Component {
   };
 
   getHost() {
-    var url =
+    const url =
       window.location != window.parent.location
         ? this.getHost(document.referrer)
         : document.location.href;
@@ -170,15 +172,13 @@ class BottomBar extends Component {
 
   bottomBarDesktop = () => {
     const { t } = this.props;
-    var hasRewards = this.props.earnedRewards > 0 ? true : false;
+    const hasRewards = this.props.earnedRewards > 0;
-    var hasOrder =
+    const hasOrder =
-      (this.props.activeOrderId > 0) & !this.state.profileShown & this.props.avatarLoaded
+      !!((this.props.activeOrderId > 0) & !this.state.profileShown & this.props.avatarLoaded);
-        ? true
-        : false;
     const fontSize = this.props.theme.typography.fontSize;
     const fontSizeFactor = fontSize / 14; // default fontSize is 14
     const typographyProps = {
-      primaryTypographyProps: { fontSize: fontSize },
+      primaryTypographyProps: { fontSize },
       secondaryTypographyProps: { fontSize: (fontSize * 12) / 14 },
     };
     return (
@@ -355,6 +355,7 @@ class BottomBar extends Component {
       </Paper>
     );
   };
+
   handleChangeLang = (e) => {
     const { i18n } = this.props;
     i18n.changeLanguage(e.target.value);
@@ -473,17 +474,16 @@ class BottomBar extends Component {
     }
     this.setState({ openExchangeSummary: true });
   };
+
   handleClickCloseExchangeSummary = () => {
     this.setState({ openExchangeSummary: false });
   };
 
   bottomBarPhone = () => {
     const { t } = this.props;
-    var hasRewards = this.props.earnedRewards > 0 ? true : false;
+    const hasRewards = this.props.earnedRewards > 0;
-    var hasOrder =
+    const hasOrder =
-      (this.state.active_order_id > 0) & !this.state.profileShown & this.props.avatarLoaded
+      !!((this.state.active_order_id > 0) & !this.state.profileShown & this.props.avatarLoaded);
-        ? true
-        : false;
     return (
       <Paper elevation={6} style={{ height: 40 }}>
         <Grid container>

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

@@ -62,7 +62,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
   useEffect(() => {
     if (Object.keys(limits).length === 0) {
       fetch('/api/limits/')
-        .then((response) => response.json())
+        .then(async (response) => await response.json())
         .then((data) => {
           setAppState({ limits: data });
         });
@@ -110,7 +110,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
   };
 
   const generateSeries: () => void = () => {
-    let sortedOrders: Order[] =
+    const sortedOrders: Order[] =
       xType === 'base_amount'
         ? enrichedOrders.sort(
             (order1, order2) => (order1?.base_amount || 0) - (order2?.base_amount || 0),
@@ -158,7 +158,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
           // Order Point
           x: xType === 'base_amount' ? order.base_amount : order.premium,
           y: sumOrders,
-          order: order,
+          order,
         },
       ];
 

frontend/src/components/Dialogs/AuditPGP.tsx

@@ -37,7 +37,7 @@ function CredentialTextfield(props) {
           InputProps={{
             endAdornment: (
               <Tooltip disableHoverListener enterTouchDelay={0} title={props.copiedTitle}>
-                <IconButton onClick={() => copyToClipboard(props.value)}>
+                <IconButton onClick={async () => await copyToClipboard(props.value)}>
                   <ContentCopy />
                 </IconButton>
               </Tooltip>
@@ -49,7 +49,7 @@ function CredentialTextfield(props) {
   );
 }
 
-type Props = {
+interface Props {
   open: boolean;
   onClose: () => void;
   orderId: number;
@@ -59,7 +59,7 @@ type Props = {
   peer_pub_key: string;
   passphrase: string;
   onClickBack: () => void;
-};
+}
 
 const AuditPGPDialog = ({
   open,
@@ -149,7 +149,7 @@ const AuditPGPDialog = ({
                     own_public_key: own_pub_key,
                     peer_public_key: peer_pub_key,
                     encrypted_private_key: own_enc_priv_key,
-                    passphrase: passphrase,
+                    passphrase,
                   })
                 }
               >

frontend/src/components/Dialogs/Community.tsx

@@ -19,10 +19,10 @@ import TwitterIcon from '@mui/icons-material/Twitter';
 import RedditIcon from '@mui/icons-material/Reddit';
 import Flags from 'country-flag-icons/react/3x2';
 
-type Props = {
+interface Props {
   isOpen: boolean;
   handleClickCloseCommunity: () => void;
-};
+}
 
 const CommunityDialog = ({ isOpen, handleClickCloseCommunity }: Props): JSX.Element => {
   const { t } = useTranslation();

frontend/src/components/Dialogs/ExchangeSummary.tsx

@@ -23,7 +23,7 @@ import LinkIcon from '@mui/icons-material/Link';
 
 import { pn } from '../../utils/prettyNumbers';
 
-type Props = {
+interface Props {
   isOpen: boolean;
   handleClickCloseExchangeSummary: () => void;
   numPublicBuyOrders: number;
@@ -34,7 +34,7 @@ type Props = {
   makerFee: number;
   takerFee: number;
   swapFeeRate: number;
-};
+}
 
 const ExchangeSummaryDialog = ({
   isOpen,

frontend/src/components/Dialogs/Info.tsx

@@ -18,11 +18,11 @@ import MediaQuery from 'react-responsive';
 // Icons
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
-type Props = {
+interface Props {
   maxAmount: string;
   open: boolean;
   onClose: () => void;
-};
+}
 
 const InfoDialog = ({ maxAmount, open, onClose }: Props): JSX.Element => {
   const { t } = useTranslation();
@@ -148,7 +148,7 @@ const InfoDialog = ({ maxAmount, open, onClose }: Props): JSX.Element => {
               <p>
                 {t(
                   'Maximum single trade size is {{maxAmount}} Satoshis to minimize lightning routing failure. There is no limits to the number of trades per day. A robot can only have one order at a time. However, you can use multiple robots simultaneously in different browsers (remember to back up your robot tokens!).',
-                  { maxAmount: maxAmount },
+                  { maxAmount },
                 )}{' '}
               </p>
             </Typography>

frontend/src/components/Dialogs/Learn.tsx

@@ -10,10 +10,10 @@ import {
   Link,
 } from '@mui/material';
 
-type Props = {
+interface Props {
   open: boolean;
   onClose: () => void;
-};
+}
 
 const LearnDialog = ({ open, onClose }: Props): JSX.Element => {
   const { t } = useTranslation();

frontend/src/components/Dialogs/NoRobot.tsx

@@ -10,10 +10,10 @@ import {
 } from '@mui/material';
 import { Link } from 'react-router-dom';
 
-type Props = {
+interface Props {
   open: boolean;
   onClose: () => void;
-};
+}
 
 const NoRobotDialog = ({ open, onClose }: Props): JSX.Element => {
   const { t } = useTranslation();

frontend/src/components/Dialogs/Profile.tsx

@@ -37,7 +37,7 @@ import { getCookie } from '../../utils/cookies';
 import { copyToClipboard } from '../../utils/clipboard';
 import { getWebln } from '../../utils/webln';
 
-type Props = {
+interface Props {
   isOpen: boolean;
   handleClickCloseProfile: () => void;
   nickname: string;
@@ -53,7 +53,7 @@ type Props = {
   stealthInvoices: boolean;
   handleSetStealthInvoice: (stealth: boolean) => void;
   setAppState: (state: any) => void; // TODO: move to a ContextProvider
-};
+}
 
 const ProfileDialog = ({
   isOpen,
@@ -330,7 +330,7 @@ const ProfileDialog = ({
 
                       <Grid item xs={3}>
                         <Button
-                          disabled={earnedRewards === 0 ? true : false}
+                          disabled={earnedRewards === 0}
                           onClick={() => setOpenClaimRewards(true)}
                           variant='contained'
                           size='small'
@@ -345,8 +345,8 @@ const ProfileDialog = ({
                     <Grid container style={{ display: 'flex', alignItems: 'stretch' }}>
                       <Grid item style={{ display: 'flex', maxWidth: 160 }}>
                         <TextField
-                          error={badInvoice ? true : false}
+                          error={!!badInvoice}
-                          helperText={badInvoice ? badInvoice : ''}
+                          helperText={badInvoice || ''}
                           label={t('Invoice for {{amountSats}} Sats', {
                             amountSats: earnedRewards,
                           })}
@@ -375,7 +375,7 @@ const ProfileDialog = ({
                         <Grid item alignItems='stretch' style={{ display: 'flex', maxWidth: 240 }}>
                           <Button
                             sx={{ maxHeight: 38, minWidth: 230 }}
-                            onClick={(e) => handleWeblnInvoiceClicked(e)}
+                            onClick={async (e) => await handleWeblnInvoiceClicked(e)}
                             variant='contained'
                             color='primary'
                             size='small'

frontend/src/components/Dialogs/Stats.tsx

@@ -25,7 +25,7 @@ import { AmbossIcon, BitcoinSignIcon } from '../Icons';
 
 import { pn } from '../../utils/prettyNumbers';
 
-type Props = {
+interface Props {
   isOpen: boolean;
   handleClickCloseStatsForNerds: () => void;
   lndVersion: string;
@@ -37,7 +37,7 @@ type Props = {
   robosatsRunningCommitHash: string;
   lastDayVolume: number;
   lifetimeVolume: number;
-};
+}
 
 const StatsDialog = ({
   isOpen,

frontend/src/components/Dialogs/StoreToken.tsx

@@ -15,14 +15,14 @@ import {
 import { getCookie } from '../../utils/cookies';
 import ContentCopy from '@mui/icons-material/ContentCopy';
 
-type Props = {
+interface Props {
   open: boolean;
   onClose: () => void;
   copyIconColor: string;
   onClickCopy: () => void;
   onClickBack: () => void;
   onClickDone: () => void;
-};
+}
 
 const StoreTokenDialog = ({
   open,

frontend/src/components/EncryptedChat.js

@@ -132,9 +132,7 @@ class Chat extends Component {
               scrollNow: true,
               waitingEcho:
                 this.state.waitingEcho == true
-                  ? decryptedData.decryptedMessage == this.state.lastSent
+                  ? decryptedData.decryptedMessage != this.state.lastSent
-                    ? false
-                    : true
                   : false,
               lastSent:
                 decryptedData.decryptedMessage == this.state.lastSent

frontend/src/components/FlagWithProps/FlagWithProps.tsx

@@ -3,9 +3,9 @@ import Flags from 'country-flag-icons/react/3x2';
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 import { GoldIcon, EarthIcon } from '../Icons';
 
-type Props = {
+interface Props {
   code: string;
-};
+}
 
 const FlagWithProps = ({ code }: Props): JSX.Element => {
   const defaultProps = {

frontend/src/components/LinearDeterminate/LinearDeterminate.tsx

@@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { Box, LinearProgress } from '@mui/material';
 import { calcTimeDelta } from 'react-countdown';
 
-type Props = {
+interface Props {
   expiresAt: string;
   totalSecsExp: number;
-};
+}
 
 const LinearDeterminate = ({ expiresAt, totalSecsExp }: Props): JSX.Element => {
   const [progress, setProgress] = useState<number>(0);

frontend/src/components/MakerPage.js

@@ -42,7 +42,7 @@ import FlagWithProps from './FlagWithProps';
 import AutocompletePayments from './AutocompletePayments';
 import currencyDict from '../../static/assets/currencies.json';
 
-//icons
+// icons
 import LockIcon from '@mui/icons-material/Lock';
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -112,13 +112,13 @@ class MakerPage extends Component {
           loadingLimits: false,
           minAmount: this.state.amount
             ? parseFloat((this.state.amount / 2).toPrecision(2))
-            : parseFloat(Number(data[this.state.currency]['max_amount'] * 0.25).toPrecision(2)),
+            : parseFloat(Number(data[this.state.currency].max_amount * 0.25).toPrecision(2)),
           maxAmount: this.state.amount
             ? this.state.amount
-            : parseFloat(Number(data[this.state.currency]['max_amount'] * 0.75).toPrecision(2)),
+            : parseFloat(Number(data[this.state.currency].max_amount * 0.75).toPrecision(2)),
-          minTradeSats: data['1000']['min_amount'] * 100000000,
+          minTradeSats: data['1000'].min_amount * 100000000,
-          maxTradeSats: data['1000']['max_amount'] * 100000000,
+          maxTradeSats: data['1000'].max_amount * 100000000,
-          maxBondlessSats: data['1000']['max_bondless_amount'] * 100000000,
+          maxBondlessSats: data['1000'].max_bondless_amount * 100000000,
         }),
       );
   }
@@ -128,12 +128,12 @@ class MakerPage extends Component {
       minAmount: this.state.amount
         ? parseFloat((this.state.amount / 2).toPrecision(2))
         : parseFloat(
-            Number(this.state.limits[this.state.currency]['max_amount'] * 0.25).toPrecision(2),
+            Number(this.state.limits[this.state.currency].max_amount * 0.25).toPrecision(2),
           ),
       maxAmount: this.state.amount
         ? this.state.amount
         : parseFloat(
-            Number(this.state.limits[this.state.currency]['max_amount'] * 0.75).toPrecision(2),
+            Number(this.state.limits[this.state.currency].max_amount * 0.75).toPrecision(2),
           ),
     });
   };
@@ -153,15 +153,16 @@ class MakerPage extends Component {
     this.props.setAppState({
       // maker and book page type values 0:1 are reversed
       type: e.target.value == 1 ? 0 : 1,
-      buyChecked: e.target.value == 0 ? true : false,
+      buyChecked: e.target.value == 0,
-      sellChecked: e.target.value == 1 ? true : false,
+      sellChecked: e.target.value == 1,
     });
   };
+
   handleCurrencyChange = (e) => {
-    var currencyCode = this.getCurrencyCode(e.target.value);
+    const currencyCode = this.getCurrencyCode(e.target.value);
     this.setState({
       currency: e.target.value,
-      currencyCode: currencyCode,
+      currencyCode,
     });
     this.props.setAppState({
       type: e.target.value,
@@ -171,24 +172,27 @@ class MakerPage extends Component {
     if (this.state.enableAmountRange) {
       this.setState({
         minAmount: parseFloat(
-          Number(this.state.limits[e.target.value]['max_amount'] * 0.25).toPrecision(2),
+          Number(this.state.limits[e.target.value].max_amount * 0.25).toPrecision(2),
         ),
         maxAmount: parseFloat(
-          Number(this.state.limits[e.target.value]['max_amount'] * 0.75).toPrecision(2),
+          Number(this.state.limits[e.target.value].max_amount * 0.75).toPrecision(2),
         ),
       });
     }
   };
+
   handleAmountChange = (e) => {
     this.setState({
       amount: e.target.value,
     });
   };
+
   handleMinAmountChange = (e) => {
     this.setState({
       minAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),
     });
   };
+
   handleMaxAmountChange = (e) => {
     this.setState({
       maxAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),
@@ -196,12 +200,12 @@ class MakerPage extends Component {
   };
 
   handleRangeAmountChange = (e, newValue, activeThumb) => {
-    var maxAmount = this.getMaxAmount();
+    const maxAmount = this.getMaxAmount();
-    var minAmount = this.getMinAmount();
+    const minAmount = this.getMinAmount();
-    var lowerValue = e.target.value[0];
+    let lowerValue = e.target.value[0];
-    var upperValue = e.target.value[1];
+    let upperValue = e.target.value[1];
-    var minRange = this.minRangeAmountMultiple;
+    const minRange = this.minRangeAmountMultiple;
-    var maxRange = this.maxRangeAmountMultiple;
+    const maxRange = this.maxRangeAmountMultiple;
 
     if (lowerValue > maxAmount / minRange) {
       lowerValue = maxAmount / minRange;
@@ -245,14 +249,14 @@ class MakerPage extends Component {
 
   handlePremiumChange = (e) => {
     const { t } = this.props;
-    var max = 999;
+    const max = 999;
-    var min = -100;
+    const min = -100;
-    var premium = e.target.value;
+    let premium = e.target.value;
     if (e.target.value > 999) {
-      var bad_premium = t('Must be less than {{max}}%', { max: max });
+      var bad_premium = t('Must be less than {{max}}%', { max });
     }
     if (e.target.value <= -100) {
-      var bad_premium = t('Must be more than {{min}}%', { min: min });
+      var bad_premium = t('Must be more than {{min}}%', { min });
     }
 
     if (premium == '') {
@@ -261,7 +265,7 @@ class MakerPage extends Component {
       premium = Number(Math.round(premium + 'e' + 2) + 'e-' + 2);
     }
     this.setState({
-      premium: premium,
+      premium,
       badPremium: bad_premium,
     });
   };
@@ -280,6 +284,7 @@ class MakerPage extends Component {
       badSatoshis: bad_sats,
     });
   };
+
   handleClickRelative = (e) => {
     this.setState({
       is_explicit: false,
@@ -345,7 +350,7 @@ class MakerPage extends Component {
         Number(this.state.amount / (this.state.satoshis / 100000000)).toPrecision(5),
       );
     } else if (!this.state.is_explicit) {
-      var price = this.state.limits[this.state.currency]['price'];
+      const price = this.state.limits[this.state.currency].price;
       return parseFloat(Number(price * (1 + this.state.premium / 100)).toPrecision(5));
     }
     return '...';
@@ -440,11 +445,9 @@ class MakerPage extends Component {
                 disabled={this.state.enableAmountRange}
                 variant={this.state.enableAmountRange ? 'filled' : 'outlined'}
                 error={
-                  (this.state.amount < this.getMinAmount() ||
+                  !!((this.state.amount < this.getMinAmount() ||
                     this.state.amount > this.getMaxAmount()) &
-                  (this.state.amount != '')
+                  (this.state.amount != ''))
-                    ? true
-                    : false
                 }
                 helperText={
                   (this.state.amount < this.getMinAmount()) & (this.state.amount != '')
@@ -549,7 +552,7 @@ class MakerPage extends Component {
             <TextField
               sx={{ width: `${240 / 16}em` }}
               label={t('Satoshis')}
-              error={this.state.badSatoshis ? true : false}
+              error={!!this.state.badSatoshis}
               helperText={this.state.badSatoshis}
               type='number'
               required={true}
@@ -611,11 +614,11 @@ class MakerPage extends Component {
   };
 
   handleChangePublicDuration = (date) => {
-    let d = new Date(date),
+    const d = new Date(date);
-      hours = d.getHours(),
+      const hours = d.getHours();
-      minutes = d.getMinutes();
+      const minutes = d.getMinutes();
 
-    var total_secs = hours * 60 * 60 + minutes * 60;
+    const total_secs = hours * 60 * 60 + minutes * 60;
 
     this.setState({
       publicExpiryTime: date,
@@ -624,11 +627,11 @@ class MakerPage extends Component {
   };
 
   handleChangeEscrowDuration = (date) => {
-    let d = new Date(date),
+    const d = new Date(date);
-      hours = d.getHours(),
+      const hours = d.getHours();
-      minutes = d.getMinutes();
+      const minutes = d.getMinutes();
 
-    var total_secs = hours * 60 * 60 + minutes * 60;
+    const total_secs = hours * 60 * 60 + minutes * 60;
 
     this.setState({
       escrowExpiryTime: date,
@@ -641,7 +644,7 @@ class MakerPage extends Component {
       var max_amount = null;
     } else {
       var max_amount =
-        this.state.limits[this.state.currency]['max_amount'] * (1 + this.state.premium / 100);
+        this.state.limits[this.state.currency].max_amount * (1 + this.state.premium / 100);
     }
     // times 0.98 to allow a bit of margin with respect to the backend minimum
     return parseFloat(Number(max_amount * 0.98).toPrecision(2));
@@ -652,7 +655,7 @@ class MakerPage extends Component {
       var min_amount = null;
     } else {
       var min_amount =
-        this.state.limits[this.state.currency]['min_amount'] * (1 + this.state.premium / 100);
+        this.state.limits[this.state.currency].min_amount * (1 + this.state.premium / 100);
     }
     // times 1.1 to allow a bit of margin with respect to the backend minimum
     return parseFloat(Number(min_amount * 1.1).toPrecision(2));
@@ -678,6 +681,7 @@ class MakerPage extends Component {
       this.state.minAmount * (this.minRangeAmountMultiple - 0.1) > this.state.maxAmount
     );
   };
+
   maxAmountError = () => {
     return (
       this.state.maxAmount > this.getMaxAmount() ||
@@ -915,7 +919,7 @@ class MakerPage extends Component {
                 control={
                   <Checkbox
                     disabled
-                    //disabled={this.state.type==0 || this.state.type === null}
+                    // disabled={this.state.type==0 || this.state.type === null}
                     color='secondary'
                     checked={this.state.allowBondless}
                     onChange={() => this.setState({ allowBondless: !this.state.allowBondless })}

frontend/src/components/OrderPage.js

@@ -75,25 +75,25 @@ class OrderPage extends Component {
 
     // Refresh delays according to Order status
     this.statusToDelay = {
-      0: 2000, //'Waiting for maker bond'
+      0: 2000, // 'Waiting for maker bond'
-      1: 25000, //'Public'
+      1: 25000, // 'Public'
-      2: 90000, //'Paused'
+      2: 90000, // 'Paused'
-      3: 2000, //'Waiting for taker bond'
+      3: 2000, // 'Waiting for taker bond'
-      4: 999999, //'Cancelled'
+      4: 999999, // 'Cancelled'
-      5: 999999, //'Expired'
+      5: 999999, // 'Expired'
-      6: 6000, //'Waiting for trade collateral and buyer invoice'
+      6: 6000, // 'Waiting for trade collateral and buyer invoice'
-      7: 8000, //'Waiting only for seller trade collateral'
+      7: 8000, // 'Waiting only for seller trade collateral'
-      8: 8000, //'Waiting only for buyer invoice'
+      8: 8000, // 'Waiting only for buyer invoice'
-      9: 10000, //'Sending fiat - In chatroom'
+      9: 10000, // 'Sending fiat - In chatroom'
-      10: 10000, //'Fiat sent - In chatroom'
+      10: 10000, // 'Fiat sent - In chatroom'
-      11: 30000, //'In dispute'
+      11: 30000, // 'In dispute'
-      12: 999999, //'Collaboratively cancelled'
+      12: 999999, // 'Collaboratively cancelled'
-      13: 3000, //'Sending satoshis to buyer'
+      13: 3000, // 'Sending satoshis to buyer'
-      14: 999999, //'Sucessful trade'
+      14: 999999, // 'Sucessful trade'
-      15: 10000, //'Failed lightning network routing'
+      15: 10000, // 'Failed lightning network routing'
-      16: 180000, //'Wait for dispute resolution'
+      16: 180000, // 'Wait for dispute resolution'
-      17: 180000, //'Maker lost dispute'
+      17: 180000, // 'Maker lost dispute'
-      18: 180000, //'Taker lost dispute'
+      18: 180000, // 'Taker lost dispute'
     };
   }
 
@@ -107,7 +107,7 @@ class OrderPage extends Component {
       newStateVars.status = this.state.status;
     }
 
-    var otherStateVars = {
+    const otherStateVars = {
       amount: newStateVars.amount ? newStateVars.amount : null,
       loading: false,
       delay: this.setDelay(newStateVars.status),
@@ -116,7 +116,7 @@ class OrderPage extends Component {
       invoice_expired: newStateVars.invoice_expired, // in case invoice had expired, it goes back to null when it is valid again
     };
 
-    var completeStateVars = Object.assign({}, newStateVars, otherStateVars);
+    const completeStateVars = Object.assign({}, newStateVars, otherStateVars);
     this.setState(completeStateVars);
   };
 
@@ -149,6 +149,7 @@ class OrderPage extends Component {
   componentWillUnmount() {
     clearInterval(this.interval);
   }
+
   tick = () => {
     this.getOrderDetails(this.state.orderId);
   };
@@ -189,7 +190,7 @@ class OrderPage extends Component {
       headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
       body: JSON.stringify({
         action: 'update_invoice',
-        invoice: invoice,
+        invoice,
       }),
     };
     fetch('/api/order/' + '?order_id=' + this.state.orderId, requestOptions)
@@ -204,8 +205,8 @@ class OrderPage extends Component {
       // Render a completed state
       return <span> {t('The order has expired')}</span>;
     } else {
-      var col = 'inherit';
+      let col = 'inherit';
-      var fraction_left = total / 1000 / this.state.total_secs_exp;
+      const fraction_left = total / 1000 / this.state.total_secs_exp;
       // Make orange at 25% of time left
       if (fraction_left < 0.25) {
         col = 'orange';
@@ -230,8 +231,8 @@ class OrderPage extends Component {
   };
 
   timerRenderer(seconds) {
-    var hours = parseInt(seconds / 3600);
+    const hours = parseInt(seconds / 3600);
-    var minutes = parseInt((seconds - hours * 3600) / 60);
+    const minutes = parseInt((seconds - hours * 3600) / 60);
     return (
       <span>
         {hours > 0 ? hours + 'h' : ''} {minutes > 0 ? zeroPad(minutes) + 'm' : ''}{' '}
@@ -447,7 +448,7 @@ class OrderPage extends Component {
   };
 
   getCurrencyCode(val) {
-    let code = val ? currencyDict[val.toString()] : '';
+    const code = val ? currencyDict[val.toString()] : '';
     return code;
   }
 
@@ -469,6 +470,7 @@ class OrderPage extends Component {
   handleClickOpenConfirmCancelDialog = () => {
     this.setState({ openCancel: true });
   };
+
   handleClickCloseConfirmCancelDialog = () => {
     this.setState({ openCancel: false });
   };
@@ -501,6 +503,7 @@ class OrderPage extends Component {
   handleClickOpenInactiveMakerDialog = () => {
     this.setState({ openInactiveMaker: true });
   };
+
   handleClickCloseInactiveMakerDialog = () => {
     this.setState({ openInactiveMaker: false });
   };
@@ -574,6 +577,7 @@ class OrderPage extends Component {
   handleClickOpenCollaborativeCancelDialog = () => {
     this.setState({ openCollaborativeCancel: true });
   };
+
   handleClickCloseCollaborativeCancelDialog = () => {
     this.setState({ openCollaborativeCancel: false });
   };

frontend/src/components/PaymentText.js

@@ -14,8 +14,8 @@ class PaymentText extends Component {
 
   parseText() {
     const { t } = this.props;
-    var rows = [];
+    const rows = [];
-    var custom_methods = this.props.text;
+    let custom_methods = this.props.text;
     // Adds icons for each PaymentMethod that matches
     methods.forEach((method, i) => {
       if (this.props.text.includes(method.name)) {
@@ -42,7 +42,7 @@ class PaymentText extends Component {
     });
 
     // Adds a Custom icon if there are words that do not match
-    var chars_left = custom_methods
+    const chars_left = custom_methods
       .replace('   ', '')
       .replace('  ', '')
       .replace(' ', '')

frontend/src/components/TradeBox.js

@@ -80,9 +80,9 @@ class TradeBox extends Component {
 
   stepXofY = () => {
     // set y value
-    var x = null;
+    let x = null;
-    var y = null;
+    let y = null;
-    var status = this.props.data.status;
+    const status = this.props.data.status;
 
     if (this.props.data.is_maker) {
       y = 5;
@@ -128,6 +128,7 @@ class TradeBox extends Component {
   handleClickOpenConfirmDispute = () => {
     this.setState({ openConfirmDispute: true });
   };
+
   handleClickCloseConfirmDispute = () => {
     this.setState({ openConfirmDispute: false });
   };
@@ -186,6 +187,7 @@ class TradeBox extends Component {
   handleClickOpenConfirmFiatReceived = () => {
     this.setState({ openConfirmFiatReceived: true });
   };
+
   handleClickCloseConfirmFiatReceived = () => {
     this.setState({ openConfirmFiatReceived: false });
   };
@@ -482,6 +484,7 @@ class TradeBox extends Component {
   handleClickOpenTelegramDialog = () => {
     this.setState({ openEnableTelegram: true });
   };
+
   handleClickCloseEnableTelegramDialog = () => {
     this.setState({ openEnableTelegram: false });
   };
@@ -534,10 +537,11 @@ class TradeBox extends Component {
       </Dialog>
     );
   };
+
   depositHoursMinutes = () => {
-    var hours = parseInt(this.props.data.escrow_duration / 3600);
+    const hours = parseInt(this.props.data.escrow_duration / 3600);
-    var minutes = parseInt((this.props.data.escrow_duration - hours * 3600) / 60);
+    const minutes = parseInt((this.props.data.escrow_duration - hours * 3600) / 60);
-    var dict = { deposit_timer_hours: hours, deposit_timer_minutes: minutes };
+    const dict = { deposit_timer_hours: hours, deposit_timer_minutes: minutes };
     return dict;
   };
 
@@ -733,7 +737,7 @@ class TradeBox extends Component {
   };
 
   handleMiningFeeChanged = (e) => {
-    var fee = e.target.value;
+    let fee = e.target.value;
     if (fee > 50) {
       fee = 50;
     }
@@ -796,6 +800,7 @@ class TradeBox extends Component {
       });
     }
   };
+
   handleError = (err) => {
     console.error(err);
   };
@@ -1389,8 +1394,8 @@ class TradeBox extends Component {
 
   showOpenDisputeButton() {
     const { t } = this.props;
-    let now = Date.now();
+    const now = Date.now();
-    var expires_at = new Date(this.props.data.expires_at);
+    const expires_at = new Date(this.props.data.expires_at);
     // open dispute button enables 12h before expiry
     expires_at.setHours(expires_at.getHours() - 12);
     return (
@@ -1457,7 +1462,7 @@ class TradeBox extends Component {
 
   showOrderExpired = () => {
     const { t } = this.props;
-    var show_renew = this.props.data.is_maker;
+    const show_renew = this.props.data.is_maker;
 
     return (
       <Grid container spacing={1}>
@@ -1491,7 +1496,7 @@ class TradeBox extends Component {
 
   showChat = () => {
     const { t } = this.props;
-    //In Chatroom - No fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton)
+    // In Chatroom - No fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton)
     if (this.props.data.is_buyer & (this.props.data.status == 9)) {
       var showSendButton = true;
       var showReveiceButton = false;
@@ -1503,7 +1508,7 @@ class TradeBox extends Component {
       var showDisputeButton = true;
     }
 
-    //In Chatroom - Fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton)
+    // In Chatroom - Fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton)
     if (this.props.data.is_buyer & (this.props.data.status == 10)) {
       var showSendButton = false;
       var showReveiceButton = false;
@@ -1571,7 +1576,7 @@ class TradeBox extends Component {
 
   showRateSelect() {
     const { t } = this.props;
-    var show_renew = this.props.data.is_maker;
+    const show_renew = this.props.data.is_maker;
 
     return (
       <Grid container spacing={1}>

frontend/src/components/TradeSummary.tsx

@@ -39,7 +39,7 @@ interface Item {
   name: string;
 }
 
-type Props = {
+interface Props {
   isMaker: boolean;
   makerNick: string;
   takerNick: string;
@@ -48,7 +48,7 @@ type Props = {
   takerSummary: Record<string, Item>;
   platformSummary: Record<string, Item>;
   orderId: number;
-};
+}
 
 const TradeSummary = ({
   isMaker,
@@ -62,7 +62,7 @@ const TradeSummary = ({
 }: Props): JSX.Element => {
   const { t, i18n } = useTranslation();
   const [buttonValue, setButtonValue] = useState<number>(isMaker ? 0 : 2);
-  var userSummary = buttonValue == 0 ? makerSummary : takerSummary;
+  const userSummary = buttonValue == 0 ? makerSummary : takerSummary;
   const contractTimestamp = new Date(platformSummary.contract_timestamp);
   const total_time = platformSummary.contract_total_time;
   const hours = parseInt(total_time / 3600);

frontend/src/components/UnsafeAlert.js

@@ -13,7 +13,7 @@ class UnsafeAlert extends Component {
   }
 
   getHost() {
-    var url =
+    const url =
       window.location != window.parent.location
         ? this.getHost(document.referrer)
         : document.location.href;
@@ -21,7 +21,7 @@ class UnsafeAlert extends Component {
   }
 
   isSelfhosted() {
-    var http = new XMLHttpRequest();
+    const http = new XMLHttpRequest();
     http.open('HEAD', `${location.protocol}//${this.getHost()}/selfhosted`, false);
     http.send();
     return http.status != 404;

frontend/src/components/UserGenPage.js

@@ -51,7 +51,7 @@ class UserGenPage extends Component {
         loadingRobot: false,
       });
     } else {
-      var newToken = genBase62Token(36);
+      const newToken = genBase62Token(36);
       this.setState({
         token: newToken,
       });
@@ -109,7 +109,7 @@ class UserGenPage extends Component {
                 })
               : this.props.setAppState({
                   nickname: data.nickname,
-                  token: token,
+                  token,
                   avatarLoaded: false,
                   activeOrderId: data.active_order_id ? data.active_order_id : null,
                   lastOrderId: data.last_order_id ? data.last_order_id : null,
@@ -140,9 +140,9 @@ class UserGenPage extends Component {
   }
 
   handleClickNewRandomToken = () => {
-    var token = genBase62Token(36);
+    const token = genBase62Token(36);
     this.setState({
-      token: token,
+      token,
       tokenHasChanged: true,
     });
     this.props.setAppState({ copiedToken: true });
@@ -275,7 +275,7 @@ class UserGenPage extends Component {
           <Grid item xs={12} align='center'>
             <TextField
               sx={{ maxWidth: 280 * fontSizeFactor }}
-              error={this.state.bad_request ? true : false}
+              error={!!this.state.bad_request}
               label={t('Store your token safely')}
               required={true}
               value={this.state.token}

frontend/src/components/payment-methods/Icons.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
 
-let icons = {
+const icons = {
   airtel: {
     title: 'airtel',
     image:

frontend/src/utils/clipboard.js

@@ -7,7 +7,7 @@ export function copyToClipboard(textToCopy) {
     return navigator.clipboard.writeText(textToCopy);
   } else {
     // text area method
-    let textArea = document.createElement('textarea');
+    const textArea = document.createElement('textarea');
     textArea.value = textToCopy;
     // make the textarea out of viewport
     textArea.style.position = 'fixed';

frontend/src/utils/match.ts

@@ -1,6 +1,6 @@
 export const median = (arr: number[]) => {
-  const mid = Math.floor(arr.length / 2),
+  const mid = Math.floor(arr.length / 2);
-    nums = [...arr].sort((a, b) => a - b);
+    const nums = [...arr].sort((a, b) => a - b);
   return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
 };
 

frontend/src/utils/pgp.js

@@ -16,7 +16,7 @@ export async function genKey(highEntropyToken) {
   const keyPair = await generateKey({
     type: 'ecc', // Type of the key, defaults to ECC
     curve: 'curve25519', // ECC curve name, defaults to curve25519
-    userIDs: [{ name: 'RoboSats ID ' + sha256(sha256(highEntropyToken)) }], //Ideally it would be the avatar nickname, but the nickname is generated only after submission. The second SHA256 can be converted into the Nickname using nick_generator package.
+    userIDs: [{ name: 'RoboSats ID ' + sha256(sha256(highEntropyToken)) }], // Ideally it would be the avatar nickname, but the nickname is generated only after submission. The second SHA256 can be converted into the Nickname using nick_generator package.
     passphrase: highEntropyToken,
     format: 'armored',
     date: d.setDate(d.getDate() - 1), // One day of offset. Helps reducing errors due to client's system time being in the future.

frontend/src/utils/prettyNumbers.test.ts

@@ -37,7 +37,7 @@ describe('amountToString', () => {
       { input: ['100.00', true, 50, undefined], output: '50-NaN' },
       { input: ['100.00', true, 50, 150], output: '50-150' },
     ].forEach((it) => {
-      const params: any[] = it.input || [];
+      const params: any[] = (it.input != null) || [];
       const response = amountToString(params[0], params[1], params[2], params[3]);
       expect(response).toBe(it.output);
     });

frontend/src/utils/webln.ts

@@ -14,5 +14,5 @@ export const getWebln = async (): Promise<WeblnProvider> => {
     }
   });
 
-  return resultPromise;
+  return await resultPromise;
 };