From 3aa03f0d76dff2df68bd2f4d8df729a6707478bd Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Thu, 10 Aug 2023 05:28:00 -0700 Subject: [PATCH] Fix more linting issues --- frontend/.eslintrc.json | 1 + frontend/src/basic/NavBar/NavBar.tsx | 6 +- frontend/src/basic/OrderPage/index.tsx | 27 +++--- .../components/Charts/DepthChart/index.tsx | 18 ++-- .../MakerForm/AutocompletePayments.tsx | 37 ++++++-- .../src/components/MakerForm/MakerForm.tsx | 36 +++++--- .../src/components/Notifications/index.tsx | 56 ++++++------ .../OrderDetails/LinearDeterminate.tsx | 6 +- .../components/OrderDetails/TakeButton.tsx | 55 +++++++----- .../PaymentMethods/StringAsIcons.tsx | 12 +-- frontend/src/components/RobotAvatar/index.tsx | 14 +-- frontend/src/components/RobotInfo/index.tsx | 87 ++++++++++--------- 12 files changed, 203 insertions(+), 152 deletions(-) diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index ca31c5905..b0a3f7d2b 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -19,6 +19,7 @@ "sourceType": "module", "project": "./tsconfig.json" }, + "ignorePatterns": ["**/PaymentMethods/Icons/code/code.js"], "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"], "rules": { "react-hooks/rules-of-hooks": "error", diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx index 583b57b86..7db93d264 100644 --- a/frontend/src/basic/NavBar/NavBar.tsx +++ b/frontend/src/basic/NavBar/NavBar.tsx @@ -170,8 +170,10 @@ const NavBar = (): JSX.Element => { sx={tabSx} label={smallBar ? undefined : t('More')} value='none' - onClick={(e) => { - open.more ? null : setOpen({ ...open, more: true }); + onClick={() => { + setOpen((open) => { + return { ...open, more: !open.more }; + }); }} icon={ diff --git a/frontend/src/basic/OrderPage/index.tsx b/frontend/src/basic/OrderPage/index.tsx index f419563fd..c8bdc77c4 100644 --- a/frontend/src/basic/OrderPage/index.tsx +++ b/frontend/src/basic/OrderPage/index.tsx @@ -35,14 +35,14 @@ const OrderPage = (): JSX.Element => { useEffect(() => { const newOrder = { shortAlias: params.shortAlias, id: Number(params.orderId) }; - if (currentOrder != newOrder) { + if (currentOrder !== newOrder) { clearOrder(); setCurrentOrder(newOrder); } }, [params.orderId]); - const renewOrder = function () { - if (order != undefined) { + const renewOrder = function (): void { + if (order !== undefined) { const body = { type: order.type, currency: order.currency, @@ -61,28 +61,31 @@ const OrderPage = (): JSX.Element => { apiClient .post(hostUrl, '/api/make/', body, { tokenSHA256: robot.tokenSHA256 }) .then((data: any) => { - if (data.bad_request) { + if (data.bad_request !== undefined) { setBadOrder(data.bad_request); - } else if (data.id) { - navigate('/order/' + data.id); + } else if (data.id !== undefined) { + navigate(`/order/${String(data.id)}`); } + }) + .catch(() => { + setBadOrder('Request error'); }); } }; - const startAgain = () => { + const startAgain = (): void => { navigate('/robot'); }; return ( - {order == undefined && badOrder == undefined ? : null} - {badOrder != undefined ? ( + {order === undefined && badOrder === undefined && } + {badOrder !== undefined ? ( {t(badOrder)} ) : null} - {order != undefined && badOrder == undefined ? ( + {order !== undefined && badOrder === undefined ? ( order.is_participant ? ( windowSize.width > doublePageWidth ? ( // DOUBLE PAPER VIEW @@ -160,7 +163,7 @@ const OrderPage = (): JSX.Element => { overflow: 'auto', }} > -
+
{ }} />
-
+
= ({ }; const generateSerie = (orders: PublicOrder[]): Datum[] => { - if (center == undefined) { + if (center === undefined) { return []; } @@ -146,7 +146,7 @@ const DepthChart: React.FC = ({ let serie: Datum[] = []; orders.forEach((order) => { const lastSumOrders = sumOrders; - sumOrders += (order.satoshis_now || 0) / 100000000; + sumOrders += (order.satoshis_now ?? 0) / 100000000; const datum: Datum[] = [ { // Vertical Line @@ -171,7 +171,7 @@ const DepthChart: React.FC = ({ }; const closeSerie = (serie: Datum[], limitBottom: number, limitTop: number): Datum[] => { - if (serie.length == 0) { + if (serie.length === 0) { return []; } @@ -199,11 +199,11 @@ const DepthChart: React.FC = ({ d={props.lineGenerator([ { y: 0, - x: props.xScale(center || 0), + x: props.xScale(center ?? 0), }, { y: props.innerHeight, - x: props.xScale(center || 0), + x: props.xScale(center ?? 0), }, ])} fill='none' @@ -215,8 +215,8 @@ const DepthChart: React.FC = ({ const generateTooltip: React.FunctionComponent = ( pointTooltip: PointTooltipProps, ) => { - const order: PublicOrder = pointTooltip.point.data.order; - return order ? ( + const order: PublicOrder | undefined = pointTooltip.point.data.order; + return order !== undefined ? ( @@ -291,7 +291,7 @@ const DepthChart: React.FC = ({ } > - {center == undefined || enrichedOrders.length < 1 ? ( + {center === undefined || enrichedOrders.length < 1 ? (
= ({ {xType === 'base_amount' - ? `${center} ${currencyDict[currencyCode]}` + ? `${center} ${String(currencyDict[currencyCode])}` : `${center}%`} diff --git a/frontend/src/components/MakerForm/AutocompletePayments.tsx b/frontend/src/components/MakerForm/AutocompletePayments.tsx index 063cb3651..41114ff67 100644 --- a/frontend/src/components/MakerForm/AutocompletePayments.tsx +++ b/frontend/src/components/MakerForm/AutocompletePayments.tsx @@ -30,12 +30,12 @@ const Label = styled('label')( ({ theme, error, sx }) => ` color: ${ theme.palette.mode === 'dark' - ? (error === true + ? error === true ? '#f44336' - : '#cfcfcf') - : (error === true + : '#cfcfcf' + : error === true ? '#dd0000' - : '#717171') + : '#717171' }; pointer-events: none; position: relative; @@ -53,7 +53,13 @@ const InputWrapper = styled('div')( min-height: ${String(sx.minHeight)}; max-height: ${String(sx.maxHeight)}; border: 1px solid ${ - theme.palette.mode === 'dark' ? (error === '' ? '#f44336' : '#434343') : error === '' ? '#dd0000' : '#c4c4c4' + theme.palette.mode === 'dark' + ? error === '' + ? '#f44336' + : '#434343' + : error === '' + ? '#dd0000' + : '#c4c4c4' }; background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; border-radius: 4px; @@ -127,7 +133,7 @@ const Tag: React.FC = ({ label, icon, onDelete, ...other }) => { }; const StyledTag = styled(Tag)( - ({ theme, sx}) => ` + ({ theme, sx }) => ` display: flex; align-items: center; height: ${String(sx?.height ?? '2.1em')}; @@ -261,7 +267,9 @@ const AutocompletePayments: React.FC = (props) => { onInputChange: (e) => { setVal(e.target.value ?? ''); }, - onChange: (event, value) => { props.onAutocompleteChange(value) }, + onChange: (event, value) => { + props.onAutocompleteChange(value); + }, onClose: () => { setVal(() => ''); }, @@ -369,7 +377,13 @@ const AutocompletePayments: React.FC = (props) => { ))} {val != null || !props.isFilter ? ( val.length > 2 ? ( - @@ -381,7 +395,12 @@ const AutocompletePayments: React.FC = (props) => { {/* Here goes what happens if there is no fewerOptions */} 0 && !props.isFilter && fewerOptions.length === 0}> - diff --git a/frontend/src/components/MakerForm/MakerForm.tsx b/frontend/src/components/MakerForm/MakerForm.tsx index d013afa41..57db9bc32 100644 --- a/frontend/src/components/MakerForm/MakerForm.tsx +++ b/frontend/src/components/MakerForm/MakerForm.tsx @@ -100,7 +100,11 @@ const MakerForm = ({ } }, []); - const updateAmountLimits = function (limitList: LimitList, currency: number, premium: number): void { + const updateAmountLimits = function ( + limitList: LimitList, + currency: number, + premium: number, + ): void { const index = currency === 0 ? 1 : currency; let minAmountLimit: number = limitList[index].min_amount * (1 + premium / 100); let maxAmountLimit: number = limitList[index].max_amount * (1 + premium / 100); @@ -117,7 +121,11 @@ const MakerForm = ({ setSatoshisLimits([minAmount, maxAmount]); }; - const updateCurrentPrice = function (limitsList: LimitList, currency: number, premium: number): void { + const updateCurrentPrice = function ( + limitsList: LimitList, + currency: number, + premium: number, + ): void { const index = currency === 0 ? 1 : currency; let price = '...'; if (maker.isExplicit && maker.amount > 0 && maker.satoshis > 0) { @@ -161,7 +169,9 @@ const MakerForm = ({ return maker.advancedOptions && amountRangeEnabled; }, [maker.advancedOptions, amountRangeEnabled]); - const handlePaymentMethodChange = function (paymentArray: Array<{name: string, icon: string}>): void { + const handlePaymentMethodChange = function ( + paymentArray: Array<{ name: string; icon: string }>, + ): void { let str = ''; const arrayLength = paymentArray.length; for (let i = 0; i < arrayLength; i++) { @@ -277,7 +287,9 @@ const MakerForm = ({ } setSubmittingRequest(false); }) - .catch(()=>{ setBadRequest("Request error")} ); + .catch(() => { + setBadRequest('Request error'); + }); } setOpenDialogs(false); }; @@ -339,12 +351,14 @@ const MakerForm = ({ const resetRange = function (advancedOptions: boolean): void { const index = fav.currency === 0 ? 1 : fav.currency; - const minAmount = maker.amount !== '' - ? parseFloat((maker.amount / 2).toPrecision(2)) - : parseFloat(Number(limits.list[index].max_amount * 0.25).toPrecision(2)); - const maxAmount = maker.amount !== '' - ? parseFloat(maker.amount) - : parseFloat(Number(limits.list[index].max_amount * 0.75).toPrecision(2)); + const minAmount = + maker.amount !== '' + ? parseFloat((maker.amount / 2).toPrecision(2)) + : parseFloat(Number(limits.list[index].max_amount * 0.25).toPrecision(2)); + const maxAmount = + maker.amount !== '' + ? parseFloat(maker.amount) + : parseFloat(Number(limits.list[index].max_amount * 0.75).toPrecision(2)); setMaker({ ...maker, @@ -442,7 +456,7 @@ const MakerForm = ({ ); }, [maker, amountLimits, limits, fav.type, makerHasAmountRange]); - const clearMaker = function ():void { + const clearMaker = function (): void { setFav({ ...fav, type: null }); setMaker(defaultMaker); }; diff --git a/frontend/src/components/Notifications/index.tsx b/frontend/src/components/Notifications/index.tsx index a435f6183..cecba6e38 100644 --- a/frontend/src/components/Notifications/index.tsx +++ b/frontend/src/components/Notifications/index.tsx @@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'; import { Tooltip, Alert, - useTheme, IconButton, type TooltipProps, styled, @@ -86,8 +85,8 @@ const Notifications = ({ const position = windowWidth > 60 ? { top: '4em', right: '0em' } : { top: '0.5em', left: '50%' }; const basePageTitle = t('RoboSats - Simple and Private Bitcoin Exchange'); - const moveToOrderPage = function () { - navigate(`/order/${order?.id}`); + const moveToOrderPage = function (): void { + navigate(`/order/${String(order?.id)}`); setShow(false); }; @@ -108,7 +107,7 @@ const Notifications = ({ const Messages: MessagesProps = { bondLocked: { - title: t(`${order?.is_maker ? 'Maker' : 'Taker'} bond locked`), + title: t(`${order?.is_maker === true ? 'Maker' : 'Taker'} bond locked`), severity: 'info', onClick: moveToOrderPage, sound: audio.ding, @@ -208,28 +207,31 @@ const Notifications = ({ }, }; - const notify = function (message: NotificationMessage) { - if (message.title != '') { + const notify = function (message: NotificationMessage): void { + if (message.title !== '') { setMessage(message); setShow(true); setTimeout(() => { setShow(false); }, message.timeout); if (message.sound != null) { - message.sound.play(); + void message.sound.play(); } if (!inFocus) { setTitleAnimation( setInterval(function () { const title = document.title; - document.title = title == basePageTitle ? message.pageTitle : basePageTitle; + document.title = title === basePageTitle ? message.pageTitle : basePageTitle; }, 1000), ); } } }; - const handleStatusChange = function (oldStatus: number | undefined, status: number) { + const handleStatusChange = function (oldStatus: number | undefined, status: number): void { + if (order === undefined) { + return; + } let message = emptyNotificationMessage; // Order status descriptions: @@ -252,37 +254,35 @@ const Notifications = ({ // 17: 'Maker lost dispute' // 18: 'Taker lost dispute' - if (status == 5 && oldStatus != 5) { + if (status === 5 && oldStatus !== 5) { message = Messages.expired; - } else if (oldStatus == undefined) { + } else if (oldStatus === undefined) { message = emptyNotificationMessage; - } else if (order?.is_maker && status > 0 && oldStatus == 0) { + } else if (order.is_maker && status > 0 && oldStatus === 0) { message = Messages.bondLocked; - } else if (order?.is_taker && status > 5 && oldStatus <= 5) { + } else if (order.is_taker && status > 5 && oldStatus <= 5) { message = Messages.bondLocked; - } else if (order?.is_maker && status > 5 && oldStatus <= 5) { + } else if (order.is_maker && status > 5 && oldStatus <= 5) { message = Messages.taken; - } else if (order?.is_seller && status > 7 && oldStatus < 7) { + } else if (order.is_seller && status > 7 && oldStatus < 7) { message = Messages.escrowLocked; } else if ([9, 10].includes(status) && oldStatus < 9) { message = Messages.chat; - } else if (order?.is_seller && [13, 14, 15].includes(status) && oldStatus < 13) { + } else if (order.is_seller && [13, 14, 15].includes(status) && oldStatus < 13) { message = Messages.successful; - } else if (order?.is_buyer && status == 14 && oldStatus != 14) { + } else if (order.is_buyer && status === 14 && oldStatus !== 14) { message = Messages.successful; - } else if (order?.is_buyer && status == 15 && oldStatus < 14) { + } else if (order.is_buyer && status === 15 && oldStatus < 14) { message = Messages.routingFailed; - } else if (status == 11 && oldStatus < 11) { - message = Messages.dispute; - } else if (status == 11 && oldStatus < 11) { + } else if (status === 11 && oldStatus < 11) { message = Messages.dispute; } else if ( - ((order?.is_maker && status == 18) || (order?.is_taker && status == 17)) && + ((order.is_maker && status === 18) || (order.is_taker && status === 17)) && oldStatus < 17 ) { message = Messages.disputeWinner; } else if ( - ((order?.is_maker && status == 17) || (order?.is_taker && status == 18)) && + ((order.is_maker && status === 17) || (order.is_taker && status === 18)) && oldStatus < 17 ) { message = Messages.disputeLoser; @@ -293,11 +293,11 @@ const Notifications = ({ // Notify on order status change useEffect(() => { - if (order != undefined && order.status != oldOrderStatus) { + if (order !== undefined && order.status !== oldOrderStatus) { handleStatusChange(oldOrderStatus, order.status); setOldOrderStatus(order.status); - } else if (order != undefined && order.chat_last_index > oldChatIndex) { - if (page != 'order') { + } else if (order !== undefined && order.chat_last_index > oldChatIndex) { + if (page !== 'order') { notify(Messages.chatMessage); } setOldChatIndex(order.chat_last_index); @@ -306,7 +306,7 @@ const Notifications = ({ // Notify on rewards change useEffect(() => { - if (rewards != undefined) { + if (rewards !== undefined) { if (rewards > oldRewards) { notify(Messages.rewards); } @@ -316,7 +316,7 @@ const Notifications = ({ // Set blinking page title and clear on visibility change > infocus useEffect(() => { - if (titleAnimation != undefined && inFocus) { + if (titleAnimation !== undefined && inFocus) { clearInterval(titleAnimation); } }, [inFocus]); diff --git a/frontend/src/components/OrderDetails/LinearDeterminate.tsx b/frontend/src/components/OrderDetails/LinearDeterminate.tsx index 62c0f5118..3dbec0f5c 100644 --- a/frontend/src/components/OrderDetails/LinearDeterminate.tsx +++ b/frontend/src/components/OrderDetails/LinearDeterminate.tsx @@ -7,9 +7,9 @@ interface Props { totalSecsExp: number; } -const LinearDeterminate = ({ expiresAt, totalSecsExp }: Props): JSX.Element => { - const timePercentLeft = function () { - if (expiresAt && totalSecsExp) { +const LinearDeterminate: React.FC = ({ expiresAt, totalSecsExp }) => { + const timePercentLeft = function (): number { + if (Boolean(expiresAt) && Boolean(totalSecsExp)) { const lapseTime = calcTimeDelta(new Date(expiresAt)).total / 1000; return (lapseTime / totalSecsExp) * 100; } else { diff --git a/frontend/src/components/OrderDetails/TakeButton.tsx b/frontend/src/components/OrderDetails/TakeButton.tsx index f006d463e..cd3c8fec3 100644 --- a/frontend/src/components/OrderDetails/TakeButton.tsx +++ b/frontend/src/components/OrderDetails/TakeButton.tsx @@ -58,11 +58,11 @@ const TakeButton = ({ const [open, setOpen] = useState(closeAll); const [satoshis, setSatoshis] = useState(''); - const satoshisNow = () => { + const satoshisNow = (): string | undefined => { const tradeFee = info?.taker_fee ?? 0; const defaultRoutingBudget = 0.001; - const btc_now = order.satoshis_now / 100000000; - const rate = order.amount ? order.amount / btc_now : order.max_amount / btc_now; + const btcNow = order.satoshis_now / 100000000; + const rate = order.amount != null ? order.amount / btcNow : order.max_amount / btcNow; const amount = order.currency === 1000 ? Number(takeAmount) / 100000000 : Number(takeAmount); const satoshis = computeSats({ amount, @@ -77,9 +77,9 @@ const TakeButton = ({ setSatoshis(satoshisNow()); }, [order.satoshis_now, takeAmount, info]); - const currencyCode: string = order.currency == 1000 ? 'Sats' : currencies[`${order.currency}`]; + const currencyCode: string = order.currency === 1000 ? 'Sats' : currencies[`${order.currency}`]; - const InactiveMakerDialog = function () { + const InactiveMakerDialog = function (): JSX.Element { return ( ): void { + if (e.target.value !== '' && e.target.value != null) { setTakeAmount(`${parseFloat(e.target.value)}`); } else { setTakeAmount(e.target.value); @@ -141,18 +149,18 @@ const TakeButton = ({ }; const amountHelperText = useMemo(() => { - const amount = order.currency == 1000 ? Number(takeAmount) / 100000000 : Number(takeAmount); - if (amount < Number(order.min_amount) && takeAmount != '') { + const amount = order.currency === 1000 ? Number(takeAmount) / 100000000 : Number(takeAmount); + if (amount < Number(order.min_amount) && takeAmount !== '') { return t('Too low'); - } else if (amount > Number(order.max_amount) && takeAmount != '') { + } else if (amount > Number(order.max_amount) && takeAmount !== '') { return t('Too high'); } else { return null; } }, [order, takeAmount]); - const onTakeOrderClicked = function () { - if (order.maker_status == 'Inactive') { + const onTakeOrderClicked = function (): void { + if (order.maker_status === 'Inactive') { setOpen({ inactiveMaker: true, confirmation: false }); } else { setOpen({ inactiveMaker: false, confirmation: true }); @@ -160,16 +168,16 @@ const TakeButton = ({ }; const invalidTakeAmount = useMemo(() => { - const amount = order.currency == 1000 ? Number(takeAmount) / 100000000 : Number(takeAmount); + const amount = order.currency === 1000 ? Number(takeAmount) / 100000000 : Number(takeAmount); return ( amount < Number(order.min_amount) || amount > Number(order.max_amount) || - takeAmount == '' || + takeAmount === '' || takeAmount == null ); }, [takeAmount, order]); - const takeOrderButton = function () { + const takeOrderButton = function (): JSX.Element { if (order.has_range) { return ( - {satoshis != '0' && satoshis != '' && !invalidTakeAmount ? ( + {satoshis !== '0' && satoshis !== '' && !invalidTakeAmount ? ( {order.type === 1 @@ -296,33 +304,36 @@ const TakeButton = ({ } }; - const takeOrder = function () { + const takeOrder = function (): void { setLoadingTake(true); apiClient .post( baseUrl, - '/api/order/?order_id=' + order.id, + `/api/order/?order_id=${String(order.id)}`, { action: 'take', - amount: order.currency == 1000 ? takeAmount / 100000000 : takeAmount, + amount: order.currency === 1000 ? takeAmount / 100000000 : takeAmount, }, { tokenSHA256: robot.tokenSHA256 }, ) .then((data) => { setLoadingTake(false); - if (data.bad_request) { + if (data?.bad_request !== undefined) { setBadRequest(data.bad_request); } else { setOrder(data); setBadRequest(''); } + }) + .catch(() => { + setBadRequest('Request error'); }); }; return ( - {badRequest != '' ? ( + {badRequest !== '' ? ( {t(badRequest)} diff --git a/frontend/src/components/PaymentMethods/StringAsIcons.tsx b/frontend/src/components/PaymentMethods/StringAsIcons.tsx index 975d8133e..2fcf5592b 100644 --- a/frontend/src/components/PaymentMethods/StringAsIcons.tsx +++ b/frontend/src/components/PaymentMethods/StringAsIcons.tsx @@ -19,11 +19,11 @@ const StringAsIcons: React.FC = ({ othersText, verbose, size, text = '' }: Props const parsedText = useMemo(() => { const rows = []; - let custom_methods = text; + let customMethods = text; // Adds icons for each PaymentMethod that matches methods.forEach((method, i) => { if (text.includes(method.name)) { - custom_methods = custom_methods.replace(method.name, ''); + customMethods = customMethods.replace(method.name, ''); rows.push( 0) { + if (charsLeft.length > 0) { rows.push(
{' '} - {custom_methods} + {customMethods}
); diff --git a/frontend/src/components/RobotAvatar/index.tsx b/frontend/src/components/RobotAvatar/index.tsx index a91e2acfe..0ec55bca9 100644 --- a/frontend/src/components/RobotAvatar/index.tsx +++ b/frontend/src/components/RobotAvatar/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import SmoothImage from 'react-smooth-image'; -import { Avatar, Badge, Tooltip, useTheme } from '@mui/material'; +import { Avatar, Badge, Tooltip } from '@mui/material'; import { SendReceiveIcon } from '../Icons'; import { apiClient } from '../../services/api'; import placeholder from './placeholder.json'; @@ -51,19 +51,19 @@ const RobotAvatar: React.FC = ({ const path = coordinator ? '/static/federation/' : '/static/assets/avatars/'; const [backgroundData] = useState( - placeholderType == 'generating' ? placeholder.generating : placeholder.loading, + placeholderType === 'generating' ? placeholder.generating : placeholder.loading, ); const backgroundImage = `url(data:${backgroundData.mime};base64,${backgroundData.data})`; - const className = placeholderType == 'loading' ? 'loadingAvatar' : 'generatingAvatar'; + const className = placeholderType === 'loading' ? 'loadingAvatar' : 'generatingAvatar'; useEffect(() => { - if (nickname != undefined) { + if (nickname !== undefined) { if (window.NativeRobosats === undefined) { setAvatarSrc(`${baseUrl}${path}${nickname}${small ? '.small' : ''}.webp`); setNicknameReady(true); } else { setNicknameReady(true); - apiClient + void apiClient .fileImageUrl(baseUrl, `${path}${nickname}${small ? '.small' : ''}.webp`) .then(setAvatarSrc); } @@ -136,7 +136,7 @@ const RobotAvatar: React.FC = ({ const getAvatarWithBadges = useCallback(() => { let component = avatar; - if (statusColor) { + if (statusColor !== undefined) { component = ( {component} @@ -156,7 +156,7 @@ const RobotAvatar: React.FC = ({ ); } - if (tooltip) { + if (tooltip !== undefined) { component = ( {component} diff --git a/frontend/src/components/RobotInfo/index.tsx b/frontend/src/components/RobotInfo/index.tsx index d58f83221..08bcd745d 100644 --- a/frontend/src/components/RobotInfo/index.tsx +++ b/frontend/src/components/RobotInfo/index.tsx @@ -55,8 +55,8 @@ const RobotInfo: React.FC = ({ robot, coordinator, onClose }: Props) => { const [weblnEnabled, setWeblnEnabled] = useState(false); const [openEnableTelegram, setOpenEnableTelegram] = useState(false); - const handleWebln = async () => { - const webln = await getWebln() + const handleWebln = async (): void => { + void getWebln() .then(() => { setWeblnEnabled(true); }) @@ -64,58 +64,59 @@ const RobotInfo: React.FC = ({ robot, coordinator, onClose }: Props) => { setWeblnEnabled(false); console.log('WebLN not available'); }); - return webln; }; useEffect(() => { handleWebln(); }, []); - const handleWeblnInvoiceClicked = async (e: any) => { + const handleWeblnInvoiceClicked = async (e: MouseEvent): void => { e.preventDefault(); - if (robot.earnedRewards) { + if (robot.earnedRewards > 0) { const webln = await getWebln(); const invoice = webln.makeInvoice(robot.earnedRewards).then(() => { - if (invoice) { + if (invoice != null) { handleSubmitInvoiceClicked(e, invoice.paymentRequest); } }); } }; - const handleSubmitInvoiceClicked = (e: any, rewardInvoice: string) => { + const handleSubmitInvoiceClicked = (e: any, rewardInvoice: string): void => { setBadInvoice(''); setShowRewardsSpinner(true); - signCleartextMessage(rewardInvoice, robot.encPrivKey, robot.token).then((signedInvoice) => { - apiClient - .post( - url, - '/api/reward/', - { - invoice: signedInvoice, - }, - { tokenSHA256: robot.tokenSHA256 }, - ) - .then((data: any) => { - setBadInvoice(data.bad_invoice ?? ''); - setShowRewardsSpinner(false); - setWithdrawn(data.successful_withdrawal); - setOpenClaimRewards(!data.successful_withdrawal); - const newRobot = { - ...robot, - earnedRewards: data.successful_withdrawal ? 0 : robot.earnedRewards, - }; - dispatchFederation({ - type: 'updateRobot', - payload: { shortAlias: coordinator.shortAlias, robot: newRobot }, + void signCleartextMessage(rewardInvoice, robot.encPrivKey, robot.token).then( + (signedInvoice) => { + void apiClient + .post( + url, + '/api/reward/', + { + invoice: signedInvoice, + }, + { tokenSHA256: robot.tokenSHA256 }, + ) + .then((data: any) => { + setBadInvoice(data.bad_invoice ?? ''); + setShowRewardsSpinner(false); + setWithdrawn(data.successful_withdrawal); + setOpenClaimRewards(!(data.successful_withdrawal !== undefined)); + const newRobot = { + ...robot, + earnedRewards: data.successful_withdrawal !== undefined ? 0 : robot.earnedRewards, + }; + dispatchFederation({ + type: 'updateRobot', + payload: { shortAlias: coordinator.shortAlias, robot: newRobot }, + }); }); - }); - }); + }, + ); e.preventDefault(); }; - const setStealthInvoice = (wantsStealth: boolean) => { - apiClient + const setStealthInvoice = (wantsStealth: boolean): void => { + void apiClient .post(url, '/api/stealth/', { wantsStealth }, { tokenSHA256: robot.tokenSHA256 }) .then((data) => { const newRobot = { ...robot, stealthInvoices: data?.wantsStealth }; @@ -133,21 +134,21 @@ const RobotInfo: React.FC = ({ robot, coordinator, onClose }: Props) => { {robot.earnedRewards > 0 && (  {t('Claim Sats!')} )} - {robot.activeOrderId && ( + {robot.activeOrderId > 0 && (  {t('Active order!')} )} - {robot.lastOrderId && !robot.activeOrderId && ( + {robot.lastOrderId > 0 && robot.activeOrderId === undefined && (  {t('finished order')} )} - {robot.activeOrderId ? ( + {robot.activeOrderId > 0 ? ( { - navigate(`/order/${robot.activeOrderId}`); + navigate(`/order/${String(robot.activeOrderId)}`); onClose(); }} > @@ -161,10 +162,10 @@ const RobotInfo: React.FC = ({ robot, coordinator, onClose }: Props) => { secondary={t('Your current order')} /> - ) : robot.lastOrderId ? ( + ) : robot.lastOrderId > 0 ? ( { - navigate(`/order/${robot.lastOrderId}`); + navigate(`/order/${String(robot.lastOrderId)}`); onClose(); }} > @@ -284,8 +285,8 @@ const RobotInfo: React.FC = ({ robot, coordinator, onClose }: Props) => { = ({ robot, coordinator, onClose }: Props) => {