diff --git a/electron-react/src/components/accordion/Accordion.tsx b/electron-react/src/components/accordion/Accordion.tsx index ea4b5c5d9b..3694d2ea23 100644 --- a/electron-react/src/components/accordion/Accordion.tsx +++ b/electron-react/src/components/accordion/Accordion.tsx @@ -1,30 +1,30 @@ -import React, { useState, useRef } from "react"; -import { Typography } from "@material-ui/core"; -import { ChevronRight as ChevronRightIcon } from "@material-ui/icons"; -import "./Accordion.css"; +import React, { useState, useRef } from 'react'; +import { Typography } from '@material-ui/core'; +import { ChevronRight as ChevronRightIcon } from '@material-ui/icons'; +import './Accordion.css'; type Props = { - content: string, + content: string; }; export default function Accordion(props: Props) { - const [setActive, setActiveState] = useState(""); - const [setHeight, setHeightState] = useState("0px"); - const [setRotate, setRotateState] = useState("accordion__icon"); - const [setTitle, setTitleState] = useState("View pending balances..."); + const [setActive, setActiveState] = useState(''); + const [setHeight, setHeightState] = useState('0px'); + const [setRotate, setRotateState] = useState('accordion__icon'); + const [setTitle, setTitleState] = useState('View pending balances...'); const content = useRef(null); function toggleAccordion() { - setActiveState(setActive === "" ? "active" : ""); + setActiveState(setActive === '' ? 'active' : ''); setHeightState( - setActive === "active" ? "0px" : `${content.current?.scrollHeight}px` + setActive === 'active' ? '0px' : `${content.current?.scrollHeight}px`, ); setRotateState( - setActive === "active" ? "accordion__icon" : "accordion__icon rotate" + setActive === 'active' ? 'accordion__icon' : 'accordion__icon rotate', ); setTitleState( - setActive === "active" - ? "View pending balances..." - : "Hide pending balances" + setActive === 'active' + ? 'View pending balances...' + : 'Hide pending balances', ); } return ( diff --git a/electron-react/src/components/app/App.tsx b/electron-react/src/components/app/App.tsx index 892c14f2bc..99a7fc45e8 100644 --- a/electron-react/src/components/app/App.tsx +++ b/electron-react/src/components/app/App.tsx @@ -1,15 +1,15 @@ import React from 'react'; -import { CssBaseline } from "@material-ui/core"; -import { Provider } from "react-redux"; +import { CssBaseline } from '@material-ui/core'; +import { Provider } from 'react-redux'; import { I18nProvider } from '@lingui/react'; import useDarkMode from 'use-dark-mode'; import { ModalDialog, Spinner } from '../../pages/ModalDialog'; import Router from '../router/Router'; import darkTheme from '../../theme/dark'; import lightTheme from '../../theme/light'; -import WebSocketConnection from "../../hocs/WebsocketConnection"; -import { daemon_rpc_ws } from "../../util/config"; -import store from "../../modules/store"; +import WebSocketConnection from '../../hocs/WebsocketConnection'; +import { daemon_rpc_ws } from '../../util/config'; +import store from '../../modules/store'; import ThemeProvider from '../theme/ThemeProvider'; import en from '../../locales/en/messages'; import sk from '../../locales/sk/messages'; diff --git a/electron-react/src/components/brand/Brand.tsx b/electron-react/src/components/brand/Brand.tsx index b6cec29125..eb0b7f2c40 100644 --- a/electron-react/src/components/brand/Brand.tsx +++ b/electron-react/src/components/brand/Brand.tsx @@ -8,8 +8,12 @@ const StyledImage = styled('img')` // animation: App-logo-spin infinite 20s linear; @keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } `; diff --git a/electron-react/src/components/button/Button.tsx b/electron-react/src/components/button/Button.tsx index 36a7aa0102..90644340ec 100644 --- a/electron-react/src/components/button/Button.tsx +++ b/electron-react/src/components/button/Button.tsx @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react'; import styled from 'styled-components'; import { darken } from 'polished'; -import { Button as BaseButton, ButtonProps } from "@material-ui/core"; +import { Button as BaseButton, ButtonProps } from '@material-ui/core'; const DangerButton = styled(BaseButton)` color: ${({ theme }) => theme.palette.danger.contrastText}; @@ -14,7 +14,7 @@ const DangerButton = styled(BaseButton)` `; type Props = Omit & { - color?: 'primary' | 'danger' | 'secondary', + color?: 'primary' | 'danger' | 'secondary'; }; export default function Button(props: Props) { @@ -24,16 +24,10 @@ export default function Button(props: Props) { case 'danger': return ; case 'primary': - return ( - - ); + return ; case 'secondary': - return ( - - ); + return ; default: - return ( - - ); + return ; } } diff --git a/electron-react/src/components/cssTextField.js b/electron-react/src/components/cssTextField.js index 6db94f42e8..979b765a31 100644 --- a/electron-react/src/components/cssTextField.js +++ b/electron-react/src/components/cssTextField.js @@ -1,48 +1,48 @@ -import { withStyles } from "@material-ui/styles"; -import TextField from "@material-ui/core/TextField"; +import { withStyles } from '@material-ui/styles'; +import TextField from '@material-ui/core/TextField'; const CssTextField = withStyles({ root: { - "& .MuiFormLabel-root": { - color: "#e3f2fd" + '& .MuiFormLabel-root': { + color: '#e3f2fd', }, - "& MuiInputLabel-root": { - color: "#e3f2fd" + '& MuiInputLabel-root': { + color: '#e3f2fd', }, - "& label.Mui-focused": { - color: "#e3f2fd" + '& label.Mui-focused': { + color: '#e3f2fd', }, - "& label.Mui-required": { - color: "#e3f2fd" + '& label.Mui-required': { + color: '#e3f2fd', }, - "& label.Mui-disabled": { - color: "#e3f2fd" + '& label.Mui-disabled': { + color: '#e3f2fd', }, - "& label.Mui-root": { - color: "#e3f2fd" + '& label.Mui-root': { + color: '#e3f2fd', }, - "& .MuiInput-underline:after": { - borderBottomColor: "#e3f2fd" + '& .MuiInput-underline:after': { + borderBottomColor: '#e3f2fd', }, - "& .MuiOutlinedInput-root": { - "& fieldset": { - borderColor: "#e3f2fd" + '& .MuiOutlinedInput-root': { + '& fieldset': { + borderColor: '#e3f2fd', }, - "&:hover fieldset": { - borderColor: "#e3f2fd" + '&:hover fieldset': { + borderColor: '#e3f2fd', }, - "&.Mui-focused fieldset": { - borderColor: "#e3f2fd" + '&.Mui-focused fieldset': { + borderColor: '#e3f2fd', + }, + '&.Mui-disabled fieldset': { + borderColor: '#e3f2fd', }, - "&.Mui-disabled fieldset": { - borderColor: "#e3f2fd" - } }, - color: "#ffffff", - "& .MuiOutlinedInput-input": { - color: "#ffffff" - } - } + color: '#ffffff', + '& .MuiOutlinedInput-input': { + color: '#ffffff', + }, + }, })(TextField); export default CssTextField; diff --git a/electron-react/src/components/darkMode/DarkModeToggle.tsx b/electron-react/src/components/darkMode/DarkModeToggle.tsx index e519cc4086..47d4dc95e4 100644 --- a/electron-react/src/components/darkMode/DarkModeToggle.tsx +++ b/electron-react/src/components/darkMode/DarkModeToggle.tsx @@ -1,6 +1,6 @@ import React from 'react'; import useDarkMode from 'use-dark-mode'; -import { IconButton } from "@material-ui/core"; +import { IconButton } from '@material-ui/core'; import { Brightness4, Brightness7 } from '@material-ui/icons'; export default function DarkModeToggle() { @@ -12,9 +12,7 @@ export default function DarkModeToggle() { return ( - {darkMode - ? - : } + {darkMode ? : } ); } diff --git a/electron-react/src/components/dashboard/Dashboard.tsx b/electron-react/src/components/dashboard/Dashboard.tsx index 229accf82c..2b6041cb76 100644 --- a/electron-react/src/components/dashboard/Dashboard.tsx +++ b/electron-react/src/components/dashboard/Dashboard.tsx @@ -1,8 +1,8 @@ -import React from "react"; +import React from 'react'; import styled from 'styled-components'; import { Route, Switch, useRouteMatch } from 'react-router'; -import { AppBar, Toolbar, Drawer, Divider } from "@material-ui/core"; -import Wallets from "../wallet/Wallets"; +import { AppBar, Toolbar, Drawer, Divider } from '@material-ui/core'; +import Wallets from '../wallet/Wallets'; import FullNode from '../fullNode/FullNode'; import Plotter from '../plotter/Plotter'; import Farmer from '../farmer/Farmer'; @@ -11,7 +11,7 @@ import Flex from '../flex/Flex'; import DashboardSideBar from './DashboardSideBar'; import { DashboardTitleTarget } from './DashboardTitle'; import ToolbarSpacing from '../toolbar/ToolbarSpacing'; -import TradeManager from "../trading/TradeManager"; +import TradeManager from '../trading/TradeManager'; import DarkModeToggle from '../darkMode/DarkModeToggle'; import LocaleToggle from '../locale/LocaleToggle'; @@ -23,7 +23,8 @@ const StyledRoot = styled(Flex)` `; const StyledAppBar = styled(AppBar)` - background-color: ${({ theme }) => theme.palette.type === 'dark' ? '#424242' : 'white' } ; + background-color: ${({ theme }) => + theme.palette.type === 'dark' ? '#424242' : 'white'}; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); width: ${({ theme }) => `calc(100% - ${theme.drawer.width})`}; margin-left: ${({ theme }) => theme.drawer.width}; @@ -58,11 +59,7 @@ export default function Dashboard() { return ( - + @@ -72,7 +69,7 @@ export default function Dashboard() { - + diff --git a/electron-react/src/components/dashboard/DashboardSideBar.tsx b/electron-react/src/components/dashboard/DashboardSideBar.tsx index 7416a8430b..0b86a1aabc 100644 --- a/electron-react/src/components/dashboard/DashboardSideBar.tsx +++ b/electron-react/src/components/dashboard/DashboardSideBar.tsx @@ -1,15 +1,15 @@ -import React from "react"; +import React from 'react'; import styled from 'styled-components'; import { Trans } from '@lingui/macro'; -import { useDispatch } from "react-redux"; -import { List } from "@material-ui/core"; -import { logOut } from "../../modules/message"; -import { ReactComponent as WalletsIcon} from "./images/wallet.svg"; -import { ReactComponent as FarmIcon } from "./images/farm.svg"; -import { ReactComponent as KeysIcon } from "./images/help.svg"; -import { ReactComponent as HomeIcon } from "./images/home.svg"; -import { ReactComponent as PlotIcon } from "./images/plot.svg"; -import { ReactComponent as TradeIcon } from "./images/pool.svg"; +import { useDispatch } from 'react-redux'; +import { List } from '@material-ui/core'; +import { logOut } from '../../modules/message'; +import { ReactComponent as WalletsIcon } from './images/wallet.svg'; +import { ReactComponent as FarmIcon } from './images/farm.svg'; +import { ReactComponent as KeysIcon } from './images/help.svg'; +import { ReactComponent as HomeIcon } from './images/home.svg'; +import { ReactComponent as PlotIcon } from './images/plot.svg'; +import { ReactComponent as TradeIcon } from './images/pool.svg'; import SideBarItem from '../sideBar/SideBarItem'; import Flex from '../flex/Flex'; @@ -26,7 +26,7 @@ export default function DashboardSideBar() { const dispatch = useDispatch(); function handleLogOut() { - dispatch(logOut("log_out", {})); + dispatch(logOut('log_out', {})); } return ( @@ -35,58 +35,34 @@ export default function DashboardSideBar() { } - title={( - - Full Node - - )} + title={Full Node} exact /> } - title={( - - Wallets - - )} + title={Wallets} /> } - title={( - - Plot - - )} + title={Plot} /> } - title={( - - Farm - - )} + title={Farm} /> } - title={( - - Trade - - )} + title={Trade} /> } onSelect={handleLogOut} - title={( - - Keys - - )} + title={Keys} exact /> diff --git a/electron-react/src/components/dashboard/DashboardTitle.tsx b/electron-react/src/components/dashboard/DashboardTitle.tsx index d92348e614..f102955574 100644 --- a/electron-react/src/components/dashboard/DashboardTitle.tsx +++ b/electron-react/src/components/dashboard/DashboardTitle.tsx @@ -1,23 +1,19 @@ import React, { ReactNode } from 'react'; -import { Typography } from "@material-ui/core"; +import { Typography } from '@material-ui/core'; import { createTeleporter } from 'react-teleporter'; const DashboardTitleTeleporter = createTeleporter(); export function DashboardTitleTarget() { return ( - + ); } type Props = { - children: ReactNode, + children: ReactNode; }; export default function DashboardTitle(props: Props) { diff --git a/electron-react/src/components/flex/Flex.tsx b/electron-react/src/components/flex/Flex.tsx index 5275fa1401..1671d3b9de 100644 --- a/electron-react/src/components/flex/Flex.tsx +++ b/electron-react/src/components/flex/Flex.tsx @@ -10,35 +10,39 @@ function getGap(gap: GAP_SIZE, theme: any): string { } switch (gap) { - case 'small': + case 'small': return '0.5rem'; - case 'normal': + case 'normal': return '1rem'; - case 'large': + case 'large': return '2rem'; default: return String(gap); } } -const StyledGapBox = styled(({ rowGap, columnGap, ...rest }) => )` - margin: ${({ rowGap, columnGap }) => `calc(${rowGap} / -2) calc(${columnGap} / -2)`}; +const StyledGapBox = styled(({ rowGap, columnGap, ...rest }) => ( + +))` + margin: ${({ rowGap, columnGap }) => + `calc(${rowGap} / -2) calc(${columnGap} / -2)`}; > * { - margin: ${({ rowGap, columnGap }) => `calc(${rowGap} / 2) calc(${columnGap} / 2)`}; + margin: ${({ rowGap, columnGap }) => + `calc(${rowGap} / 2) calc(${columnGap} / 2)`}; } `; type Props = BoxProps & { - gap?: GAP_SIZE, - rowGap?: GAP_SIZE, - columnGap?: GAP_SIZE, + gap?: GAP_SIZE; + rowGap?: GAP_SIZE; + columnGap?: GAP_SIZE; }; export default function Flex(props: Props) { - const { - gap = '0px', - flexDirection, + const { + gap = '0px', + flexDirection, rowGap = gap, columnGap = gap, ...rest @@ -46,13 +50,11 @@ export default function Flex(props: Props) { const theme = useTheme(); - const rowGapValue = flexDirection === 'column' - ? getGap(rowGap, theme) - : '0px'; + const rowGapValue = + flexDirection === 'column' ? getGap(rowGap, theme) : '0px'; - const columnGapValue = flexDirection !== 'column' - ? getGap(columnGap, theme) - : '0px'; + const columnGapValue = + flexDirection !== 'column' ? getGap(columnGap, theme) : '0px'; return ( ); -} \ No newline at end of file +} diff --git a/electron-react/src/components/form/TextField.tsx b/electron-react/src/components/form/TextField.tsx index 9974e7ab67..ac0d2590c7 100644 --- a/electron-react/src/components/form/TextField.tsx +++ b/electron-react/src/components/form/TextField.tsx @@ -1,5 +1,5 @@ -import styled from "styled-components"; -import { TextField } from "@material-ui/core"; +import styled from 'styled-components'; +import { TextField } from '@material-ui/core'; export default styled(TextField)` color: #ffffff; @@ -7,19 +7,19 @@ export default styled(TextField)` & .MuiFormLabel-root { color: #e3f2fd; } - + & .MuiInputLabel-root { color: #e3f2fd; } & label.Mui-focused { - color: #e3f2fd; + color: #e3f2fd; } & label.Mui-required { color: #e3f2fd; } - + & label.Mui-disabled { color: #e3f2fd; } @@ -31,7 +31,7 @@ export default styled(TextField)` & .MuiInput-underline:after { border-bottom-color: #e3f2fd; } - + & .MuiOutlinedInput-root { & fieldset { border-color: #e3f2fd; @@ -46,7 +46,7 @@ export default styled(TextField)` border-color: #e3f2fd; } } - + & .MuiOutlinedInput-input { color: #ffffff; } diff --git a/electron-react/src/components/layout/LayoutHero.tsx b/electron-react/src/components/layout/LayoutHero.tsx index 3784cd7d0d..f466cc9f9f 100644 --- a/electron-react/src/components/layout/LayoutHero.tsx +++ b/electron-react/src/components/layout/LayoutHero.tsx @@ -8,7 +8,7 @@ const StyledWrapper = styled(Box)` `; type Props = { - children: ReactNode, + children: ReactNode; }; export default function LayoutHero(props: Props) { diff --git a/electron-react/src/components/loading/LoadingScreen.tsx b/electron-react/src/components/loading/LoadingScreen.tsx index 97ad996ace..e58e9cfa18 100644 --- a/electron-react/src/components/loading/LoadingScreen.tsx +++ b/electron-react/src/components/loading/LoadingScreen.tsx @@ -9,7 +9,7 @@ const StyledTypography = styled(Typography)` `; type Props = { - children: ReactNode, + children: ReactNode; }; export default function LoadingScreen(props: Props) { @@ -17,9 +17,7 @@ export default function LoadingScreen(props: Props) { return ( - - {children} - + {children} ); diff --git a/electron-react/src/components/locale/LocaleToggle.tsx b/electron-react/src/components/locale/LocaleToggle.tsx index 1e1e5bd0c0..28df5f3a3b 100644 --- a/electron-react/src/components/locale/LocaleToggle.tsx +++ b/electron-react/src/components/locale/LocaleToggle.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useToggle } from 'react-use'; import { Button, Menu, MenuItem } from '@material-ui/core'; import { Translate, ExpandMore } from '@material-ui/icons'; -import useLocale from "../../hooks/useLocale"; +import useLocale from '../../hooks/useLocale'; const locales: { [char: string]: string } = { en: 'English', @@ -32,9 +32,9 @@ export default function LocaleToggle() { return ( <> - @@ -610,8 +611,8 @@ const SendCard = props => { ); }; -const HistoryCard = props => { - var id = props.wallet_id; +const HistoryCard = (props) => { + const id = props.wallet_id; const classes = useStyles(); return ( @@ -631,26 +632,25 @@ const HistoryCard = props => { ); }; -const TransactionTable = props => { +const TransactionTable = (props) => { const classes = useStyles(); - var id = props.wallet_id; + const id = props.wallet_id; const transactions = useSelector( - state => state.wallet_state.wallets[id].transactions + (state) => state.wallet_state.wallets[id].transactions, ); if (transactions.length === 0) { - return
No previous transactions
; + return
No previous transactions
; } - const incoming_string = incoming => { + const incoming_string = (incoming) => { if (incoming) { - return "Incoming"; - } else { - return "Outgoing"; + return 'Incoming'; } + return 'Outgoing'; }; - const confirmed_to_string = confirmed => { - return confirmed ? "Confirmed" : "Pending"; + const confirmed_to_string = (confirmed) => { + return confirmed ? 'Confirmed' : 'Pending'; }; return ( @@ -667,7 +667,7 @@ const TransactionTable = props => { - {transactions.map(tx => ( + {transactions.map((tx) => ( { {incoming_string(tx.incoming)} {tx.to_address} @@ -701,9 +701,11 @@ const TransactionTable = props => { ); }; -const AddressCard = props => { - var id = props.wallet_id; - const address = useSelector(state => state.wallet_state.wallets[id].address); +const AddressCard = (props) => { + const id = props.wallet_id; + const address = useSelector( + (state) => state.wallet_state.wallets[id].address, + ); const classes = useStyles(); const dispatch = useDispatch(); @@ -754,7 +756,7 @@ const AddressCard = props => {
- + - {connectionError === "" ? ( - "" + {connectionError === '' ? ( + '' ) : (

{connectionError}

)} diff --git a/electron-react/src/pages/CreateMnemonics.js b/electron-react/src/pages/CreateMnemonics.js index 109354a383..85921b4c4d 100644 --- a/electron-react/src/pages/CreateMnemonics.js +++ b/electron-react/src/pages/CreateMnemonics.js @@ -1,15 +1,15 @@ -import React, { Component } from "react"; -import Button from "@material-ui/core/Button"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import TextField from "@material-ui/core/TextField"; -import Grid from "@material-ui/core/Grid"; -import Typography from "@material-ui/core/Typography"; -import { withTheme, withStyles, makeStyles } from "@material-ui/styles"; -import Container from "@material-ui/core/Container"; -import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos"; -import { useSelector, useDispatch } from "react-redux"; -import { genereate_mnemonics } from "../modules/message"; -import { withRouter } from "react-router-dom"; +import React, { Component } from 'react'; +import Button from '@material-ui/core/Button'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import TextField from '@material-ui/core/TextField'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; +import { withTheme, withStyles, makeStyles } from '@material-ui/styles'; +import Container from '@material-ui/core/Container'; +import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; +import { useSelector, useDispatch } from 'react-redux'; +import { withRouter } from 'react-router-dom'; +import { genereate_mnemonics } from '../modules/message'; // function Copyright() { // return ( @@ -26,94 +26,94 @@ import { withRouter } from "react-router-dom"; const CssTextField = withStyles({ root: { - "& MuiFormLabel-root": { - color: "#e3f2fd" + '& MuiFormLabel-root': { + color: '#e3f2fd', }, - "& label.Mui-focused": { - color: "#e3f2fd" + '& label.Mui-focused': { + color: '#e3f2fd', }, - "& label.Mui-required": { - color: "#e3f2fd" + '& label.Mui-required': { + color: '#e3f2fd', }, - "& label.Mui-disabled": { - color: "#e3f2fd" + '& label.Mui-disabled': { + color: '#e3f2fd', }, - "& .MuiInput-underline:after": { - borderBottomColor: "#e3f2fd" + '& .MuiInput-underline:after': { + borderBottomColor: '#e3f2fd', }, - "& .MuiOutlinedInput-root": { - "& fieldset": { - borderColor: "#e3f2fd" + '& .MuiOutlinedInput-root': { + '& fieldset': { + borderColor: '#e3f2fd', }, - "&:hover fieldset": { - borderColor: "#e3f2fd" + '&:hover fieldset': { + borderColor: '#e3f2fd', }, - "&.Mui-focused fieldset": { - borderColor: "#e3f2fd" + '&.Mui-focused fieldset': { + borderColor: '#e3f2fd', + }, + '&.Mui-disabled fieldset': { + borderColor: '#e3f2fd', }, - "&.Mui-disabled fieldset": { - borderColor: "#e3f2fd" - } }, - color: "#ffffff", - "& .MuiOutlinedInput-input": { - color: "#ffffff" - } - } + color: '#ffffff', + '& .MuiOutlinedInput-input': { + color: '#ffffff', + }, + }, })(TextField); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { - background: "linear-gradient(45deg, #142229 30%, #112240 90%)", - height: "100%" + background: 'linear-gradient(45deg, #142229 30%, #112240 90%)', + height: '100%', }, paper: { - display: "flex", - flexDirection: "column", - alignItems: "center" + display: 'flex', + flexDirection: 'column', + alignItems: 'center', }, avatar: { marginTop: theme.spacing(8), - backgroundColor: theme.palette.secondary.main + backgroundColor: theme.palette.secondary.main, }, form: { - width: "100%", // Fix IE 11 issue. - marginTop: theme.spacing(5) + width: '100%', // Fix IE 11 issue. + marginTop: theme.spacing(5), }, textField: { - borderColor: "#ffffff" + borderColor: '#ffffff', }, submit: { marginTop: theme.spacing(8), - marginBottom: theme.spacing(3) + marginBottom: theme.spacing(3), }, grid: { - display: "flex", - flexDirection: "column", - alignItems: "center", - paddingTop: theme.spacing(5) + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + paddingTop: theme.spacing(5), }, grid_item: { paddingTop: 10, - display: "flex", - flexDirection: "column", - alignItems: "center", - backgroundColor: "#444444", - color: "#ffffff", + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + backgroundColor: '#444444', + color: '#ffffff', height: 50, - verticalAlign: "middle" + verticalAlign: 'middle', }, title: { - color: "#ffffff", + color: '#ffffff', marginTop: theme.spacing(4), - marginBottom: theme.spacing(8) + marginBottom: theme.spacing(8), }, navigator: { - color: "#ffffff", + color: '#ffffff', marginTop: theme.spacing(4), marginLeft: theme.spacing(4), - fontSize: 35 - } + fontSize: 35, + }, })); class MnemonicLabel extends Component { @@ -139,7 +139,7 @@ class MnemonicLabel extends Component { } const UIPart = () => { - const words = useSelector(state => state.wallet_state.mnemonic); + const words = useSelector((state) => state.wallet_state.mnemonic); const classes = useStyles(); return (
@@ -174,7 +174,7 @@ const UIPart = () => { }; const CreateMnemonics = () => { - var get_mnemonics = genereate_mnemonics(); + const get_mnemonics = genereate_mnemonics(); const dispatch = useDispatch(); dispatch(get_mnemonics); diff --git a/electron-react/src/pages/CreateWallet.js b/electron-react/src/pages/CreateWallet.js index 10917ed692..688cc65136 100644 --- a/electron-react/src/pages/CreateWallet.js +++ b/electron-react/src/pages/CreateWallet.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; import { makeStyles, Typography, @@ -6,12 +6,15 @@ import { Grid, List, Button, - Box -} from "@material-ui/core"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemIcon from "@material-ui/core/ListItemIcon"; -import ListItemText from "@material-ui/core/ListItemText"; + Box, +} from '@material-ui/core'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import { useDispatch, useSelector } from 'react-redux'; +import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; +import InvertColorsIcon from '@material-ui/icons/InvertColors'; import { changeCreateWallet, ALL_OPTIONS, @@ -20,62 +23,59 @@ import { CREATE_NEW_CC, CREATE_RL_WALLET_OPTIONS, CREATE_RL_ADMIN, - CREATE_RL_USER -} from "../modules/createWallet"; -import { useDispatch, useSelector } from "react-redux"; -import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos"; -import { CreateNewCCWallet } from "./createNewColouredCoin"; -import { CreateExistingCCWallet } from "./createExistingColouredCoin"; -import { CreateRLAdminWallet } from "./createRLAdmin"; -import { CreateRLUserWallet } from "./createRLUser"; -import InvertColorsIcon from "@material-ui/icons/InvertColors"; + CREATE_RL_USER, +} from '../modules/createWallet'; +import { CreateNewCCWallet } from './createNewColouredCoin'; +import { CreateExistingCCWallet } from './createExistingColouredCoin'; +import { CreateRLAdminWallet } from './createRLAdmin'; +import { CreateRLUserWallet } from './createRLUser'; -export const useStyles = makeStyles(theme => ({ +export const useStyles = makeStyles((theme) => ({ walletContainer: { - marginBottom: theme.spacing(5) + marginBottom: theme.spacing(5), }, root: { - display: "flex", - paddingLeft: "0px", - color: "#000000" + display: 'flex', + paddingLeft: '0px', + color: '#000000', }, appBarSpacer: theme.mixins.toolbar, content: { flexGrow: 1, - height: "100vh", - overflow: "auto" + height: '100vh', + overflow: 'auto', }, container: { paddingTop: theme.spacing(0), paddingBottom: theme.spacing(0), - paddingRight: theme.spacing(0) + paddingRight: theme.spacing(0), }, paper: { marginTop: theme.spacing(2), padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - minWidth: "100%" + display: 'flex', + overflow: 'auto', + flexDirection: 'column', + minWidth: '100%', }, cardTitle: { paddingLeft: theme.spacing(1), paddingTop: theme.spacing(1), - marginBottom: theme.spacing(1) + marginBottom: theme.spacing(1), }, title: { - paddingTop: 6 + paddingTop: 6, }, sendButton: { marginTop: theme.spacing(2), marginBottom: theme.spacing(2), width: 150, - height: 50 + height: 50, }, backdrop: { zIndex: 3000, - color: "#fff" - } + color: '#fff', + }, })); export const MainWalletList = () => { @@ -226,22 +226,28 @@ export const RLListItems = () => { }; const CreateViewSwitch = () => { - const view = useSelector(state => state.create_options.view); + const view = useSelector((state) => state.create_options.view); if (view === ALL_OPTIONS) { - return ; - } else if (view === CREATE_CC_WALLET_OPTIONS) { - return ; - } else if (view === CREATE_NEW_CC) { - return ; - } else if (view === CREATE_EXISTING_CC) { - return ; - } else if (view === CREATE_RL_WALLET_OPTIONS) { - return ; - } else if (view === CREATE_RL_ADMIN) { - return ; - } else if (view === CREATE_RL_USER) { - return ; + return ; + } + if (view === CREATE_CC_WALLET_OPTIONS) { + return ; + } + if (view === CREATE_NEW_CC) { + return ; + } + if (view === CREATE_EXISTING_CC) { + return ; + } + if (view === CREATE_RL_WALLET_OPTIONS) { + return ; + } + if (view === CREATE_RL_ADMIN) { + return ; + } + if (view === CREATE_RL_USER) { + return ; } }; @@ -251,7 +257,7 @@ export const CreateWalletView = () => { return ( - + ); diff --git a/electron-react/src/pages/Dashboard.js b/electron-react/src/pages/Dashboard.js index 822a8daa11..6a1a921814 100644 --- a/electron-react/src/pages/Dashboard.js +++ b/electron-react/src/pages/Dashboard.js @@ -1,150 +1,154 @@ -import React from "react"; -import clsx from "clsx"; -import { makeStyles } from "@material-ui/core/styles"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import Drawer from "@material-ui/core/Drawer"; -import AppBar from "@material-ui/core/AppBar"; -import Toolbar from "@material-ui/core/Toolbar"; -import Typography from "@material-ui/core/Typography"; -import Divider from "@material-ui/core/Divider"; -import Container from "@material-ui/core/Container"; -import logo from "../assets/img/chia_logo.svg"; // Tell webpack this JS file uses this image -import Wallets from "./Wallets"; -import { SideBar } from "./sidebar"; -import { useSelector } from "react-redux"; -import Plotter from "./Plotter"; +import React from 'react'; +import clsx from 'clsx'; +import { makeStyles } from '@material-ui/core/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Drawer from '@material-ui/core/Drawer'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Divider from '@material-ui/core/Divider'; +import Container from '@material-ui/core/Container'; +import { useSelector } from 'react-redux'; +import logo from '../assets/img/chia_logo.svg'; // Tell webpack this JS file uses this image +import Wallets from './Wallets'; +import { SideBar } from './sidebar'; +import Plotter from './Plotter'; import { presentWallet, presentNode, presentFarmer, presentTrading, - presentPlotter -} from "../modules/mainMenu"; -import FullNode from "./FullNode"; -import Farmer from "./Farmer"; -import { TradeManger } from "./trading/TradeManager"; -import { CreateBackup } from "./backup/createBackup"; + presentPlotter, +} from '../modules/mainMenu'; +import FullNode from './FullNode'; +import Farmer from './Farmer'; +import { TradeManger } from './trading/TradeManager'; +import { CreateBackup } from './backup/createBackup'; const drawerWidth = 100; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { - display: "flex" + display: 'flex', }, toolbar: { - paddingRight: 24 // keep right padding when drawer closed + paddingRight: 24, // keep right padding when drawer closed }, toolbarIcon: { - display: "flex", - alignItems: "center", - justifyContent: "flex-end", - padding: "0 8px", - ...theme.mixins.toolbar + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + padding: '0 8px', + ...theme.mixins.toolbar, }, appBar: { zIndex: theme.zIndex.drawer + 1, - transition: theme.transitions.create(["width", "margin"], { + transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen - }) + duration: theme.transitions.duration.leavingScreen, + }), }, appBarShift: { marginLeft: drawerWidth, width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(["width", "margin"], { + transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) + duration: theme.transitions.duration.enteringScreen, + }), }, menuButton: { - marginRight: 36 + marginRight: 36, }, menuButtonHidden: { - display: "none" + display: 'none', }, title: { - flexGrow: 1 + flexGrow: 1, }, drawerPaper: { - position: "relative", - whiteSpace: "nowrap", + position: 'relative', + whiteSpace: 'nowrap', width: drawerWidth, - transition: theme.transitions.create("width", { + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) + duration: theme.transitions.duration.enteringScreen, + }), }, appBarSpacer: theme.mixins.toolbar, content: { flexGrow: 1, - height: "100vh", - overflowX: "hidden", - overflowY: "scroll" + height: '100vh', + overflowX: 'hidden', + overflowY: 'scroll', }, container: { - padding: "0px", - marginLeft: "0px" + padding: '0px', + marginLeft: '0px', }, paper: { padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column" + display: 'flex', + overflow: 'auto', + flexDirection: 'column', }, fixedHeight: { - height: 240 + height: 240, }, drawerWallet: { - position: "relative", - whiteSpace: "nowrap", + position: 'relative', + whiteSpace: 'nowrap', width: drawerWidth, - height: "100%", - transition: theme.transitions.create("width", { + height: '100%', + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) + duration: theme.transitions.duration.enteringScreen, + }), }, logo: { marginTop: theme.spacing(2), marginBottom: theme.spacing(2), marginLeft: theme.spacing(2), marginRight: theme.spacing(2), - width: "62px" - } + width: '62px', + }, })); const ComopnentSwitch = () => { - const toPresent = useSelector(state => state.main_menu.view); + const toPresent = useSelector((state) => state.main_menu.view); if (toPresent === presentWallet) { - return ; - } else if (toPresent === presentNode) { - return ; - } else if (toPresent === presentFarmer) { - return ; - } else if (toPresent === presentPlotter) { - return ; - } else if (toPresent === presentTrading) { - return ; + return ; } - return
; + if (toPresent === presentNode) { + return ; + } + if (toPresent === presentFarmer) { + return ; + } + if (toPresent === presentPlotter) { + return ; + } + if (toPresent === presentTrading) { + return ; + } + return
; }; export default function Dashboard() { const classes = useStyles(); const [open] = React.useState(true); - const toPresent = useSelector(state => state.main_menu.view); + const toPresent = useSelector((state) => state.main_menu.view); let title; if (toPresent === presentWallet) { - title = "Wallets"; + title = 'Wallets'; } else if (toPresent === presentNode) { - title = "Full Node"; + title = 'Full Node'; } else if (toPresent === presentFarmer) { - title = "Farming"; + title = 'Farming'; } else if (toPresent === presentPlotter) { - title = "Plotting"; + title = 'Plotting'; } else if (toPresent === presentTrading) { - title = "Trading"; + title = 'Trading'; } return ( @@ -169,21 +173,21 @@ export default function Dashboard() {
Logo
- +
- + - +
); diff --git a/electron-react/src/pages/Farmer.js b/electron-react/src/pages/Farmer.js index 11e1b73a81..5cbec8d14b 100644 --- a/electron-react/src/pages/Farmer.js +++ b/electron-react/src/pages/Farmer.js @@ -1,112 +1,112 @@ -import React, { useEffect, useState, useCallback } from "react"; -import Grid from "@material-ui/core/Grid"; -import { makeStyles, withStyles } from "@material-ui/core/styles"; -import Container from "@material-ui/core/Container"; -import { useSelector, useDispatch } from "react-redux"; -import Typography from "@material-ui/core/Typography"; -import Box from "@material-ui/core/Box"; +import React, { useEffect, useState, useCallback } from 'react'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; +import Container from '@material-ui/core/Container'; +import { useSelector, useDispatch } from 'react-redux'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; import { Paper, TableRow, List, ListItem, ListItemText, - Tooltip -} from "@material-ui/core"; -import Button from "@material-ui/core/Button"; -import Table from "@material-ui/core/Table"; -import TableBody from "@material-ui/core/TableBody"; -import TableCell from "@material-ui/core/TableCell"; -import TableContainer from "@material-ui/core/TableContainer"; -import TableHead from "@material-ui/core/TableHead"; -import DeleteForeverIcon from "@material-ui/icons/DeleteForever"; -import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"; -import IconButton from "@material-ui/core/IconButton"; -import Dialog from "@material-ui/core/Dialog"; -import DialogActions from "@material-ui/core/DialogActions"; -import DialogContent from "@material-ui/core/DialogContent"; -import DialogContentText from "@material-ui/core/DialogContentText"; -import DialogTitle from "@material-ui/core/DialogTitle"; + Tooltip, +} from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import DeleteForeverIcon from '@material-ui/icons/DeleteForever'; +import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +import IconButton from '@material-ui/core/IconButton'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import DialogTitle from '@material-ui/core/DialogTitle'; -import { closeConnection, openConnection } from "../modules/farmerMessages"; +import TablePagination from '@material-ui/core/TablePagination'; +import RefreshIcon from '@material-ui/icons/Refresh'; +import HelpIcon from '@material-ui/icons/Help'; +import { closeConnection, openConnection } from '../modules/farmerMessages'; import { refreshPlots, deletePlot, - getPlotDirectories -} from "../modules/harvesterMessages"; + getPlotDirectories, +} from '../modules/harvesterMessages'; -import TablePagination from "@material-ui/core/TablePagination"; -import RefreshIcon from "@material-ui/icons/Refresh"; -import Connections from "./Connections"; +import Connections from './Connections'; -import { big_int_to_array, arr_to_hex, sha256 } from "../util/utils"; -import { mojo_to_chia_string } from "../util/chia"; -import HelpIcon from "@material-ui/icons/Help"; -import { clearSend } from "../modules/message"; -import AddPlotDialog from "./AddPlotDialog"; +import { big_int_to_array, arr_to_hex, sha256 } from '../util/utils'; +import { mojo_to_chia_string } from '../util/chia'; +import { clearSend } from '../modules/message'; +import AddPlotDialog from './AddPlotDialog'; /* global BigInt */ const drawerWidth = 180; -const styles = theme => ({ +const styles = (theme) => ({ root: { - display: "flex", - paddingLeft: "0px" + display: 'flex', + paddingLeft: '0px', }, tabs: { flexGrow: 1, - marginTop: 40 + marginTop: 40, }, clickable: { - cursor: "pointer" + cursor: 'pointer', }, refreshButton: { - marginLeft: "20px" + marginLeft: '20px', }, content: { - height: "calc(100vh - 64px)", - overflowX: "hidden", - padding: "0px" + height: 'calc(100vh - 64px)', + overflowX: 'hidden', + padding: '0px', }, noPadding: { - padding: "0px" + padding: '0px', }, container: { paddingTop: theme.spacing(3), paddingRight: theme.spacing(6), paddingLeft: theme.spacing(6), - paddingBottom: theme.spacing(3) + paddingBottom: theme.spacing(3), }, balancePaper: { padding: theme.spacing(2), - marginTop: theme.spacing(2) + marginTop: theme.spacing(2), }, cardTitle: { paddingLeft: theme.spacing(1), paddingTop: theme.spacing(1), - marginBottom: theme.spacing(1) + marginBottom: theme.spacing(1), }, cardSubSection: { paddingLeft: theme.spacing(3), paddingRight: theme.spacing(3), - paddingTop: theme.spacing(1) + paddingTop: theme.spacing(1), }, table: { - minWidth: 650 + minWidth: 650, }, drawerPaper: { - position: "relative", - whiteSpace: "nowrap", + position: 'relative', + whiteSpace: 'nowrap', width: drawerWidth, - transition: theme.transitions.create("width", { + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) + duration: theme.transitions.duration.enteringScreen, + }), }, addPlotButton: { - marginLeft: theme.spacing(2) - } + marginLeft: theme.spacing(2), + }, }); const useStyles = makeStyles(styles); @@ -116,22 +116,22 @@ const getStatusItems = ( farmerSpace, totalChia, biggestHeight, - totalNetworkSpace + totalNetworkSpace, ) => { - var status_items = []; + const status_items = []; if (connected) { const item = { - label: "Connection Status ", - value: "Connected", - colour: "green" + label: 'Connection Status ', + value: 'Connected', + colour: 'green', }; status_items.push(item); } else { const item = { - label: "Connection Status ", - value: "Not connected", - colour: "red" + label: 'Connection Status ', + value: 'Not connected', + colour: 'red', }; status_items.push(item); } @@ -139,42 +139,41 @@ const getStatusItems = ( const totalHours = 5.0 / proportion / 60; status_items.push({ - label: "Total size of local plots", - value: Math.floor(farmerSpace / Math.pow(1024, 3)).toString() + " GiB", - tooltip: - "You have " + - (proportion * 100).toFixed(6) + - "% of the space on the network, so farming a block will take " + - totalHours.toFixed(3) + - " hours in expectation" + label: 'Total size of local plots', + value: `${Math.floor(farmerSpace / Math.pow(1024, 3)).toString()} GiB`, + tooltip: `You have ${(proportion * 100).toFixed( + 6, + )}% of the space on the network, so farming a block will take ${totalHours.toFixed( + 3, + )} hours in expectation`, }); status_items.push({ - label: "Total chia farmed", - value: mojo_to_chia_string(totalChia) + label: 'Total chia farmed', + value: mojo_to_chia_string(totalChia), }); if (biggestHeight === 0) { status_items.push({ - label: "Last height farmed", - value: "No blocks farmed yet" + label: 'Last height farmed', + value: 'No blocks farmed yet', }); } else { status_items.push({ - label: "Last height farmed", - value: biggestHeight + label: 'Last height farmed', + value: biggestHeight, }); } return status_items; }; -const StatusCell = props => { +const StatusCell = (props) => { const classes = useStyles(); - const item = props.item; - const label = item.label; - const value = item.value; - const colour = item.colour; - const tooltip = item.tooltip; + const { item } = props; + const { label } = item; + const { value } = item; + const { colour } = item; + const { tooltip } = item; return (
@@ -188,10 +187,10 @@ const StatusCell = props => { {tooltip ? ( - + ) : ( - "" + '' )} @@ -200,24 +199,24 @@ const StatusCell = props => { ); }; -const FarmerStatus = props => { - const plots = useSelector(state => state.farming_state.harvester.plots); +const FarmerStatus = (props) => { + const plots = useSelector((state) => state.farming_state.harvester.plots); const totalNetworkSpace = useSelector( - state => state.full_node_state.blockchain_state.space + (state) => state.full_node_state.blockchain_state.space, ); - var farmerSpace = 0; + let farmerSpace = 0; if (plots !== undefined) { - farmerSpace = plots.map(p => p.file_size).reduce((a, b) => a + b, 0); + farmerSpace = plots.map((p) => p.file_size).reduce((a, b) => a + b, 0); } - const connected = useSelector(state => state.daemon_state.farmer_connected); + const connected = useSelector((state) => state.daemon_state.farmer_connected); const statusItems = getStatusItems( connected, farmerSpace, props.totalChiaFarmed, props.biggestHeight, - totalNetworkSpace + totalNetworkSpace, ); const classes = useStyles(); @@ -231,18 +230,18 @@ const FarmerStatus = props => {
- {statusItems.map(item => ( - + {statusItems.map((item) => ( + ))} ); }; -const Challenges = props => { +const Challenges = (props) => { const classes = useStyles(); - var latest_challenges = useSelector( - state => state.farming_state.farmer.latest_challenges + let latest_challenges = useSelector( + (state) => state.farming_state.farmer.latest_challenges, ); if (!latest_challenges) { @@ -272,7 +271,7 @@ const Challenges = props => { - {latest_challenges.map(item => ( + {latest_challenges.map((item) => ( {item.challenge.substring(0, 10)}... @@ -281,10 +280,10 @@ const Challenges = props => { {item.estimates.length} {item.estimates.length > 0 - ? Math.floor( - Math.min.apply(Math, item.estimates) / 60 - ).toString() + " minutes" - : ""} + ? `${Math.floor( + Math.min.apply(Math, item.estimates) / 60, + ).toString()} minutes` + : ''} ))} @@ -297,28 +296,28 @@ const Challenges = props => { ); }; -const Plots = props => { +const Plots = (props) => { const classes = useStyles(); const dispatch = useDispatch(); - const plots = useSelector(state => state.farming_state.harvester.plots); + const plots = useSelector((state) => state.farming_state.harvester.plots); const not_found_filenames = useSelector( - state => state.farming_state.harvester.not_found_filenames + (state) => state.farming_state.harvester.not_found_filenames, ); const failed_to_open_filenames = useSelector( - state => state.farming_state.harvester.failed_to_open_filenames + (state) => state.farming_state.harvester.failed_to_open_filenames, ); plots.sort((a, b) => b.size - a.size); const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(10); const [addDirectoryOpen, addDirectorySetOpen] = React.useState(false); - const [deletePlotName, deletePlotSetName] = React.useState(""); + const [deletePlotName, deletePlotSetName] = React.useState(''); const [deletePlotOpen, deletePlotSetOpen] = React.useState(false); const handleChangePage = (event, newPage) => { setPage(newPage); }; - const handleChangeRowsPerPage = event => { + const handleChangeRowsPerPage = (event) => { setRowsPerPage(+event.target.value); setPage(0); }; @@ -368,7 +367,7 @@ const Plots = props => { { {plots .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map(item => ( + .map((item) => ( @@ -407,13 +406,13 @@ const Plots = props => { {item.size} ( {Math.round( - (item.file_size * 1000) / (1024 * 1024 * 1024) + (item.file_size * 1000) / (1024 * 1024 * 1024), ) / 1000} GiB) - - {item["plot-seed"].substring(0, 10)} + + {item['plot-seed'].substring(0, 10)} @@ -438,7 +437,7 @@ const Plots = props => { }} align="right" > - + ))} @@ -467,7 +466,7 @@ const Plots = props => { that the storage devices are properly connected.

- {not_found_filenames.map(filename => ( + {not_found_filenames.map((filename) => ( @@ -484,10 +483,10 @@ const Plots = props => { ))} - {" "} + {' '} ) : ( - "" + '' )} {failed_to_open_filenames.length > 0 ? ( @@ -500,7 +499,7 @@ const Plots = props => { These plots are invalid, you might want to delete them forever.

- {failed_to_open_filenames.map(filename => ( + {failed_to_open_filenames.map((filename) => ( @@ -520,7 +519,7 @@ const Plots = props => { ) : ( - "" + '' )} @@ -530,7 +529,7 @@ const Plots = props => { aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" > - {"Delete all keys"} + Delete all keys Are you sure you want to delete the plot? The plot cannot be @@ -554,22 +553,22 @@ const Plots = props => { ); }; -const FarmerContent = props => { +const FarmerContent = (props) => { const classes = useStyles(); const dispatch = useDispatch(); const connections = useSelector( - state => state.farming_state.farmer.connections + (state) => state.farming_state.farmer.connections, ); const connectionError = useSelector( - state => state.farming_state.farmer.open_connection_error + (state) => state.farming_state.farmer.open_connection_error, ); const openConnectionCallback = (host, port) => { dispatch(openConnection(host, port)); }; - const closeConnectionCallback = node_id => { + const closeConnectionCallback = (node_id) => { dispatch(closeConnection(node_id)); }; return ( @@ -580,13 +579,13 @@ const FarmerContent = props => { + /> - + - + { connectionError={connectionError} openConnection={openConnectionCallback} closeConnection={closeConnectionCallback} - > + /> ); }; -const Farmer = props => { +const Farmer = (props) => { const dispatch = useDispatch(); const [totalChiaFarmed, setTotalChiaFarmed] = useState(BigInt(0)); const [biggestHeight, setBiggestHeight] = useState(0); const [didMount, setDidMount] = useState(false); - const wallets = useSelector(state => state.wallet_state.wallets); + const wallets = useSelector((state) => state.wallet_state.wallets); - const classes = props.classes; + const { classes } = props; const checkRewards = useCallback(async () => { let totalChia = BigInt(0); let biggestHeight = 0; - for (let wallet of wallets) { + for (const wallet of wallets) { if (!wallet) { continue; } - for (let tx of wallet.transactions) { + for (const tx of wallet.transactions) { if (!didMount) return; if (tx.additions.length < 1) { continue; } - console.log("Checking tx", tx); + console.log('Checking tx', tx); // Height here is filled into the whole 256 bits (32 bytes) of the parent - let hexHeight = arr_to_hex( - big_int_to_array(BigInt(tx.confirmed_at_index), 32) + const hexHeight = arr_to_hex( + big_int_to_array(BigInt(tx.confirmed_at_index), 32), ); // Height is a 32 bit int so hashing it requires serializing it to 4 bytes - let hexHeightHashBytes = await sha256( - big_int_to_array(BigInt(tx.confirmed_at_index), 4) + const hexHeightHashBytes = await sha256( + big_int_to_array(BigInt(tx.confirmed_at_index), 4), ); - let hexHeightDoubleHashBytes = await sha256(hexHeightHashBytes); - let hexHeightDoubleHash = arr_to_hex(hexHeightDoubleHashBytes); + const hexHeightDoubleHashBytes = await sha256(hexHeightHashBytes); + const hexHeightDoubleHash = arr_to_hex(hexHeightDoubleHashBytes); if ( hexHeight === tx.additions[0].parent_coin_info || @@ -673,7 +672,7 @@ const Farmer = props => { + />
diff --git a/electron-react/src/pages/FullNode.js b/electron-react/src/pages/FullNode.js index 7e3cee1766..4009842bb4 100644 --- a/electron-react/src/pages/FullNode.js +++ b/electron-react/src/pages/FullNode.js @@ -1,210 +1,210 @@ -import React from "react"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import Grid from "@material-ui/core/Grid"; -import { makeStyles } from "@material-ui/core/styles"; -import Container from "@material-ui/core/Container"; -import { withRouter } from "react-router-dom"; -import { useSelector, useDispatch } from "react-redux"; -import Typography from "@material-ui/core/Typography"; -import Box from "@material-ui/core/Box"; -import { Paper, Tooltip } from "@material-ui/core"; -import { unix_to_short_date } from "../util/utils"; -import Connections from "./Connections"; -import Block from "./Block"; -import Button from "@material-ui/core/Button"; -import TextField from "@material-ui/core/TextField"; -import HelpIcon from "@material-ui/icons/Help"; +import React from 'react'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles } from '@material-ui/core/styles'; +import Container from '@material-ui/core/Container'; +import { withRouter } from 'react-router-dom'; +import { useSelector, useDispatch } from 'react-redux'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; +import { Paper, Tooltip } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import TextField from '@material-ui/core/TextField'; +import HelpIcon from '@material-ui/icons/Help'; +import { unix_to_short_date } from '../util/utils'; +import Connections from './Connections'; +import Block from './Block'; import { closeConnection, openConnection, getBlock, - getHeader -} from "../modules/fullnodeMessages"; + getHeader, +} from '../modules/fullnodeMessages'; /* global BigInt */ const drawerWidth = 180; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { - display: "flex", - paddingLeft: "0px", - paddingRight: "0px" + display: 'flex', + paddingLeft: '0px', + paddingRight: '0px', }, menuButton: { - marginRight: 36 + marginRight: 36, }, searchHashButton: { - marginLeft: "10px", - height: "100%" + marginLeft: '10px', + height: '100%', }, menuButtonHidden: { - display: "none" + display: 'none', }, title: { - flexGrow: 1 + flexGrow: 1, }, drawerPaper: { - position: "relative", - whiteSpace: "nowrap", + position: 'relative', + whiteSpace: 'nowrap', width: drawerWidth, - transition: theme.transitions.create("width", { + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) + duration: theme.transitions.duration.enteringScreen, + }), }, drawerPaperClose: { - overflowX: "hidden", - transition: theme.transitions.create("width", { + overflowX: 'hidden', + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen + duration: theme.transitions.duration.leavingScreen, }), width: theme.spacing(7), - [theme.breakpoints.up("sm")]: { - width: theme.spacing(9) - } + [theme.breakpoints.up('sm')]: { + width: theme.spacing(9), + }, }, content: { flexGrow: 1, - height: "calc(100vh - 64px)", - overflowX: "hidden" + height: 'calc(100vh - 64px)', + overflowX: 'hidden', }, container: { paddingTop: theme.spacing(3), paddingLeft: theme.spacing(6), paddingRight: theme.spacing(6), - paddingBottom: theme.spacing(3) + paddingBottom: theme.spacing(3), }, paper: { padding: theme.spacing(0), - display: "flex", - overflow: "auto", - flexDirection: "column" + display: 'flex', + overflow: 'auto', + flexDirection: 'column', }, fixedHeight: { - height: 240 + height: 240, }, drawerWallet: { - position: "relative", - whiteSpace: "nowrap", + position: 'relative', + whiteSpace: 'nowrap', width: drawerWidth, - height: "100%", - transition: theme.transitions.create("width", { + height: '100%', + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) + duration: theme.transitions.duration.enteringScreen, + }), }, balancePaper: { padding: theme.spacing(2), - marginTop: theme.spacing(2) + marginTop: theme.spacing(2), }, bottomOptions: { - position: "absolute", + position: 'absolute', bottom: 0, - width: "100%" + width: '100%', }, cardTitle: { paddingLeft: theme.spacing(1), paddingTop: theme.spacing(1), - marginBottom: theme.spacing(1) + marginBottom: theme.spacing(1), }, cardSubSection: { paddingLeft: theme.spacing(3), paddingRight: theme.spacing(3), - paddingTop: theme.spacing(1) + paddingTop: theme.spacing(1), }, left_block_cell: { marginLeft: 10, - width: "25%", - textAlign: "left", - overflowWrap: "break-word" + width: '25%', + textAlign: 'left', + overflowWrap: 'break-word', }, center_block_cell: { - width: "25%", - textAlign: "center", - overflowWrap: "break-word" + width: '25%', + textAlign: 'center', + overflowWrap: 'break-word', }, center_block_cell_small: { - width: "15%", - textAlign: "center", - overflowWrap: "break-word" + width: '15%', + textAlign: 'center', + overflowWrap: 'break-word', }, right_block_cell: { marginLeft: 30, marginRight: 10, - width: "25%", - textAlign: "right", - overflowWrap: "break-word" + width: '25%', + textAlign: 'right', + overflowWrap: 'break-word', }, block_row: { - height: "30px", - cursor: "pointer", - borderBottom: "1px solid #eeeeee", + height: '30px', + cursor: 'pointer', + borderBottom: '1px solid #eeeeee', /* mouse over link */ - "&:hover": { - backgroundColor: "#eeeeee" - } + '&:hover': { + backgroundColor: '#eeeeee', + }, }, block_row_unfinished: { - height: "30px", - borderBottom: "1px solid #eeeeee", - color: "orange" + height: '30px', + borderBottom: '1px solid #eeeeee', + color: 'orange', }, block_header: { - marginBottom: 10 - } + marginBottom: 10, + }, })); const getStatusItems = (state, connected) => { - var status_items = []; + const status_items = []; if (state.sync && state.sync.sync_mode) { const progress = state.sync.sync_progress_height; const tip = state.sync.sync_tip_height; const item = { - label: "Status", - value: "Syncing " + progress + "/" + tip, - colour: "orange", + label: 'Status', + value: `Syncing ${progress}/${tip}`, + colour: 'orange', tooltip: - "The node is syncing, which means it is downloading blocks from other nodes, to reach the latest block in the chain" + 'The node is syncing, which means it is downloading blocks from other nodes, to reach the latest block in the chain', }; status_items.push(item); } else if (connected) { const item = { - label: "Status", - value: "Synced", - colour: "green", - tooltip: "This node is fully caught up and validating the network" + label: 'Status', + value: 'Synced', + colour: 'green', + tooltip: 'This node is fully caught up and validating the network', }; status_items.push(item); } else { const item = { - label: "Status", - value: "Not connected", - colour: "black" + label: 'Status', + value: 'Not connected', + colour: 'black', }; status_items.push(item); } if (state.lca) { const lca_height = state.lca.data.height; - const item = { label: "LCA Block Height", value: "" + lca_height }; + const item = { label: 'LCA Block Height', value: `${lca_height}` }; status_items.push(item); } else { - const item = { label: "LCA Block Height", value: "0" }; + const item = { label: 'LCA Block Height', value: '0' }; status_items.push(item); } if (state.tips) { - var max_height = 0; - for (let tip of state.tips) { + let max_height = 0; + for (const tip of state.tips) { if (parseInt(tip.data.height) > max_height) { max_height = parseInt(tip.data.height); } } - const item = { label: "Max Tip Block Height", value: "" + max_height }; + const item = { label: 'Max Tip Block Height', value: `${max_height}` }; status_items.push(item); } else { - const item = { label: "Max Tip Block Height", value: "0" }; + const item = { label: 'Max Tip Block Height', value: '0' }; status_items.push(item); } @@ -212,69 +212,70 @@ const getStatusItems = (state, connected) => { const lca_time = state.lca.data.timestamp; const date_string = unix_to_short_date(parseInt(lca_time)); const item = { - label: "LCA Time", + label: 'LCA Time', value: date_string, tooltip: - "This is the time of the latest common ancestor, which is a block ancestor of all tip blocks. Note that the full node keeps track of up to three tips at each height." + 'This is the time of the latest common ancestor, which is a block ancestor of all tip blocks. Note that the full node keeps track of up to three tips at each height.', }; status_items.push(item); } else { - const item = { label: "LCA Time", value: "" }; + const item = { label: 'LCA Time', value: '' }; status_items.push(item); } if (connected) { const item = { - label: "Connection Status ", - value: "Connected", - colour: "green" + label: 'Connection Status ', + value: 'Connected', + colour: 'green', }; status_items.push(item); } else { const item = { - label: "Connection Status ", - value: "Not connected", - colour: "red" + label: 'Connection Status ', + value: 'Not connected', + colour: 'red', }; status_items.push(item); } - const difficulty = state.difficulty; - const diff_item = { label: "Difficulty", value: difficulty }; + const { difficulty } = state; + const diff_item = { label: 'Difficulty', value: difficulty }; status_items.push(diff_item); - const ips = state.ips; + const { ips } = state; const ips_item = { - label: "Iterations per Second", + label: 'Iterations per Second', value: ips, tooltip: - "The estimated proof of time speed of the fastest timelord in the network." + 'The estimated proof of time speed of the fastest timelord in the network.', }; status_items.push(ips_item); const iters = state.min_iters; - const min_item = { label: "Min Iterations", value: iters }; + const min_item = { label: 'Min Iterations', value: iters }; status_items.push(min_item); - const space = - (BigInt(state.space) / BigInt(Math.pow(1024, 4))).toString() + "TiB"; + const space = `${( + BigInt(state.space) / BigInt(Math.pow(1024, 4)) + ).toString()}TiB`; const space_item = { - label: "Estimated network space", + label: 'Estimated network space', value: space, tooltip: - "Estimated sum of all the plotted disk space of all farmers in the network" + 'Estimated sum of all the plotted disk space of all farmers in the network', }; status_items.push(space_item); return status_items; }; -const StatusCell = props => { +const StatusCell = (props) => { const classes = useStyles(); - const item = props.item; - const label = item.label; - const value = item.value; - const tooltip = item.tooltip; - const colour = item.colour; + const { item } = props; + const { label } = item; + const { value } = item; + const { tooltip } = item; + const { colour } = item; return (
@@ -283,10 +284,10 @@ const StatusCell = props => { {label} {tooltip ? ( - + ) : ( - "" + '' )} @@ -300,12 +301,12 @@ const StatusCell = props => { ); }; -const FullNodeStatus = props => { +const FullNodeStatus = (props) => { const blockchain_state = useSelector( - state => state.full_node_state.blockchain_state + (state) => state.full_node_state.blockchain_state, ); const connected = useSelector( - state => state.daemon_state.full_node_connected + (state) => state.daemon_state.full_node_connected, ); const statusItems = getStatusItems(blockchain_state, connected); @@ -320,8 +321,8 @@ const FullNodeStatus = props => {
- {statusItems.map(item => ( - + {statusItems.map((item) => ( + ))} @@ -329,7 +330,7 @@ const FullNodeStatus = props => { }; const BlocksCard = () => { - const headers = useSelector(state => state.full_node_state.headers); + const headers = useSelector((state) => state.full_node_state.headers); const dispatch = useDispatch(); function clickedBlock(height, header_hash, prev_header_hash) { @@ -354,8 +355,8 @@ const BlocksCard = () => { Header Hash Height @@ -364,7 +365,7 @@ const BlocksCard = () => { Expected finish time - {headers.map(header => ( + {headers.map((header) => ( { ? clickedBlock( header.data.height, header.data.header_hash, - header.data.prev_header_hash + header.data.prev_header_hash, ) : () => {} } display="flex" key={header.data.header_hash} - style={{ minWidth: "100%" }} + style={{ minWidth: '100%' }} > - {header.data.header_hash.substring(0, 12) + "..."} - {header.data.finished ? "" : " (unfinished)"} + {`${header.data.header_hash.substring(0, 12)}...`} + {header.data.finished ? '' : ' (unfinished)'} {header.data.height} @@ -396,7 +397,7 @@ const BlocksCard = () => { {header.data.finished - ? "finished" + ? 'finished' : unix_to_short_date(parseInt(header.data.finish_time))} @@ -406,15 +407,15 @@ const BlocksCard = () => { ); }; -const SearchBlock = props => { +const SearchBlock = (props) => { const classes = useStyles(); const dispatch = useDispatch(); - const [searchHash, setSearchHash] = React.useState(""); - const handleChangeSearchHash = event => { + const [searchHash, setSearchHash] = React.useState(''); + const handleChangeSearchHash = (event) => { setSearchHash(event.target.value); }; const clickSearch = () => { - setSearchHash(""); + setSearchHash(''); dispatch(getBlock(searchHash)); }; return ( @@ -461,17 +462,17 @@ const FullNode = () => { const classes = useStyles(); const dispatch = useDispatch(); - const connections = useSelector(state => state.full_node_state.connections); + const connections = useSelector((state) => state.full_node_state.connections); const connectionError = useSelector( - state => state.full_node_state.open_connection_error + (state) => state.full_node_state.open_connection_error, ); - const block = useSelector(state => state.full_node_state.block); - const header = useSelector(state => state.full_node_state.header); + const block = useSelector((state) => state.full_node_state.block); + const header = useSelector((state) => state.full_node_state.header); const openConnectionCallback = (host, port) => { dispatch(openConnection(host, port)); }; - const closeConnectionCallback = node_id => { + const closeConnectionCallback = (node_id) => { dispatch(closeConnection(node_id)); }; @@ -482,14 +483,14 @@ const FullNode = () => { {block != null ? ( - + ) : ( - + - + { connectionError={connectionError} openConnection={openConnectionCallback} closeConnection={closeConnectionCallback} - > + /> - + )} diff --git a/electron-react/src/pages/ModalDialog.js b/electron-react/src/pages/ModalDialog.js index 72b4b2b848..746cc06ec3 100644 --- a/electron-react/src/pages/ModalDialog.js +++ b/electron-react/src/pages/ModalDialog.js @@ -1,21 +1,21 @@ -import React from "react"; -import Button from "@material-ui/core/Button"; -import Dialog from "@material-ui/core/Dialog"; -import DialogActions from "@material-ui/core/DialogActions"; -import DialogContent from "@material-ui/core/DialogContent"; -import DialogContentText from "@material-ui/core/DialogContentText"; -import DialogTitle from "@material-ui/core/DialogTitle"; -import { closeDialog } from "../modules/dialog"; -import { useDispatch, useSelector } from "react-redux"; -import { Backdrop } from "@material-ui/core"; -import { CircularProgress } from "@material-ui/core"; -import { useStyles } from "./CreateWallet"; +import React from 'react'; +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import { useDispatch, useSelector } from 'react-redux'; +import { Backdrop, CircularProgress } from '@material-ui/core'; -export const DialogItem = props => { - const dialog = props.dialog; +import { closeDialog } from '../modules/dialog'; +import { useStyles } from './CreateWallet'; + +export const DialogItem = (props) => { + const { dialog } = props; const text = dialog.label; - const title = dialog.title; - const id = dialog.id; + const { title } = dialog; + const { id } = dialog; const dispatch = useDispatch(); const open = true; @@ -47,19 +47,19 @@ export const DialogItem = props => { }; export const ModalDialog = () => { - const dialogs = useSelector(state => state.dialog_state.dialogs); + const dialogs = useSelector((state) => state.dialog_state.dialogs); return (
- {dialogs.map(dialog => ( - + {dialogs.map((dialog) => ( + ))}
); }; export const Spinner = () => { - const show = useSelector(state => state.progress.progress_indicator); + const show = useSelector((state) => state.progress.progress_indicator); const classes = useStyles(); return ( diff --git a/electron-react/src/pages/NewWallet.js b/electron-react/src/pages/NewWallet.js index 4a1c251bf1..f58dc40fae 100644 --- a/electron-react/src/pages/NewWallet.js +++ b/electron-react/src/pages/NewWallet.js @@ -1,19 +1,19 @@ -import React, { useEffect, useState } from "react"; -import Button from "@material-ui/core/Button"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import Grid from "@material-ui/core/Grid"; -import { withTheme } from "@material-ui/styles"; -import Container from "@material-ui/core/Container"; -import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos"; -import { useSelector, useDispatch } from "react-redux"; -import { genereate_mnemonics, add_new_key_action } from "../modules/message"; -import { withRouter } from "react-router-dom"; -import CssTextField from "../components/cssTextField"; -import { changeEntranceMenu, presentSelectKeys } from "../modules/entranceMenu"; -import logo from "../assets/img/chia_logo.svg"; -import myStyle from "./style"; +import React, { useEffect, useState } from 'react'; +import Button from '@material-ui/core/Button'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Grid from '@material-ui/core/Grid'; +import { withTheme } from '@material-ui/styles'; +import Container from '@material-ui/core/Container'; +import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; +import { useSelector, useDispatch } from 'react-redux'; +import { withRouter } from 'react-router-dom'; +import { genereate_mnemonics, add_new_key_action } from '../modules/message'; +import CssTextField from '../components/cssTextField'; +import { changeEntranceMenu, presentSelectKeys } from '../modules/entranceMenu'; +import logo from '../assets/img/chia_logo.svg'; +import myStyle from './style'; -const MnemonicField = props => { +const MnemonicField = (props) => { return ( { ); }; -const Iterator = props => { +const Iterator = (props) => { return props.mnemonic.map((word, i) => ( - + )); }; -const UIPart = props => { - var words = useSelector(state => state.wallet_state.mnemonic); +const UIPart = (props) => { + let words = useSelector((state) => state.wallet_state.mnemonic); const dispatch = useDispatch(); const classes = myStyle(); if (!words) { @@ -58,7 +58,7 @@ const UIPart = props => { return (
- {" "} + {' '}
Logo @@ -71,7 +71,7 @@ const UIPart = props => { (Order is important)

- +
@@ -94,7 +94,7 @@ const UIPart = props => { ); }; -const NewWallet = props => { +const NewWallet = (props) => { const [didMount, setDidMount] = useState(false); const dispatch = useDispatch(); @@ -107,7 +107,7 @@ const NewWallet = props => { } }, [didMount, setDidMount, dispatch]); - return ; + return ; }; export default withTheme(withRouter(NewWallet)); diff --git a/electron-react/src/pages/OldWallet.js b/electron-react/src/pages/OldWallet.js index 7051adbb84..7540c69a01 100644 --- a/electron-react/src/pages/OldWallet.js +++ b/electron-react/src/pages/OldWallet.js @@ -1,26 +1,26 @@ -import React from "react"; -import Button from "@material-ui/core/Button"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import Link from "@material-ui/core/Link"; -import Grid from "@material-ui/core/Grid"; -import { withTheme } from "@material-ui/styles"; -import Container from "@material-ui/core/Container"; -import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos"; -import { useSelector } from "react-redux"; -import { withRouter } from "react-router-dom"; -import CssTextField from "../components/cssTextField"; -import { useDispatch } from "react-redux"; -import { mnemonic_word_added, resetMnemonic } from "../modules/mnemonic"; -import { unselectFingerprint } from "../modules/message"; +import React from 'react'; +import Button from '@material-ui/core/Button'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Link from '@material-ui/core/Link'; +import Grid from '@material-ui/core/Grid'; +import { withTheme } from '@material-ui/styles'; +import Container from '@material-ui/core/Container'; +import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'; +import { useSelector, useDispatch } from 'react-redux'; +import { withRouter } from 'react-router-dom'; +import CssTextField from '../components/cssTextField'; + +import { mnemonic_word_added, resetMnemonic } from '../modules/mnemonic'; +import { unselectFingerprint } from '../modules/message'; import { changeEntranceMenu, presentSelectKeys, - presentRestoreBackup -} from "../modules/entranceMenu"; -import logo from "../assets/img/chia_logo.svg"; -import myStyle from "./style"; + presentRestoreBackup, +} from '../modules/entranceMenu'; +import logo from '../assets/img/chia_logo.svg'; +import myStyle from './style'; -const MnemonicField = props => { +const MnemonicField = (props) => { return ( { ); }; -const Iterator = props => { +const Iterator = (props) => { const dispatch = useDispatch(); - const mnemonic_state = useSelector(state => state.mnemonic_state); + const mnemonic_state = useSelector((state) => state.mnemonic_state); const incorrect_word = useSelector( - state => state.mnemonic_state.incorrect_word + (state) => state.mnemonic_state.incorrect_word, ); function handleTextFieldChange(e) { - var id = e.target.id + ""; - var clean_id = id.replace("id_", ""); - var int_val = parseInt(clean_id) - 1; - var data = { word: e.target.value, id: int_val }; + const id = `${e.target.id}`; + const clean_id = id.replace('id_', ''); + const int_val = parseInt(clean_id) - 1; + const data = { word: e.target.value, id: int_val }; dispatch(mnemonic_word_added(data)); } - var indents = []; - for (var i = 0; i < 24; i++) { - var focus = i === 0; + const indents = []; + for (let i = 0; i < 24; i++) { + const focus = i === 0; indents.push( + />, ); } return indents; @@ -82,13 +82,13 @@ const UIPart = () => { } const dispatch = useDispatch(); const [submitted, setSubmitted] = React.useState(false); - const mnemonic = useSelector(state => state.mnemonic_state.mnemonic_input); + const mnemonic = useSelector((state) => state.mnemonic_state.mnemonic_input); const classes = myStyle(); function enterMnemonic() { setSubmitted(true); - for (var i = 0; i < mnemonic.length; i++) { - if (mnemonic[i] === "") { + for (let i = 0; i < mnemonic.length; i++) { + if (mnemonic[i] === '') { return; } } @@ -112,7 +112,7 @@ const UIPart = () => { your Chia wallet.

- +
@@ -135,8 +135,8 @@ const UIPart = () => { ); }; -const OldWallet = props => { - return ; +const OldWallet = (props) => { + return ; }; export default withTheme(withRouter(OldWallet)); diff --git a/electron-react/src/pages/Plotter.js b/electron-react/src/pages/Plotter.js index 96eba1bfbb..aea2f3f020 100644 --- a/electron-react/src/pages/Plotter.js +++ b/electron-react/src/pages/Plotter.js @@ -1,195 +1,195 @@ -import React from "react"; -import Grid from "@material-ui/core/Grid"; -import { makeStyles } from "@material-ui/core/styles"; -import { withRouter } from "react-router-dom"; -import { useSelector, useDispatch } from "react-redux"; -import Typography from "@material-ui/core/Typography"; -import Box from "@material-ui/core/Box"; +import React from 'react'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles } from '@material-ui/core/styles'; +import { withRouter } from 'react-router-dom'; +import { useSelector, useDispatch } from 'react-redux'; +import Typography from '@material-ui/core/Typography'; +import Box from '@material-ui/core/Box'; import { Paper, FormControl, InputLabel, Select, - MenuItem -} from "@material-ui/core"; -import Button from "@material-ui/core/Button"; -import TextField from "@material-ui/core/TextField"; -import InputAdornment from "@material-ui/core/InputAdornment"; -import FormHelperText from "@material-ui/core/FormHelperText"; -import { openDialog } from "../modules/dialog"; -import isElectron from "is-electron"; + MenuItem, +} from '@material-ui/core'; +import Button from '@material-ui/core/Button'; +import TextField from '@material-ui/core/TextField'; +import InputAdornment from '@material-ui/core/InputAdornment'; +import FormHelperText from '@material-ui/core/FormHelperText'; +import isElectron from 'is-electron'; +import Input from '@material-ui/core/Input'; +import { openDialog } from '../modules/dialog'; import { workspaceSelected, finalSelected, startPlotting, - resetProgress -} from "../modules/plotter_messages"; -import { stopService } from "../modules/daemon_messages"; -import { service_plotter } from "../util/service_names"; -import Input from "@material-ui/core/Input"; + resetProgress, +} from '../modules/plotter_messages'; +import { stopService } from '../modules/daemon_messages'; +import { service_plotter } from '../util/service_names'; const drawerWidth = 180; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { - display: "flex", - paddingLeft: "0px" + display: 'flex', + paddingLeft: '0px', }, tabs: { - flexGrow: 1 + flexGrow: 1, }, form: { - margin: theme.spacing(1) + margin: theme.spacing(1), }, clickable: { - cursor: "pointer" + cursor: 'pointer', }, error: { - color: "red" + color: 'red', }, refreshButton: { - marginLeft: "20px" + marginLeft: '20px', }, menuButton: { - marginRight: 36 + marginRight: 36, }, menuButtonHidden: { - display: "none" + display: 'none', }, title: { - flexGrow: 1 + flexGrow: 1, }, drawerPaper: { - position: "relative", - whiteSpace: "nowrap", + position: 'relative', + whiteSpace: 'nowrap', width: drawerWidth, - transition: theme.transitions.create("width", { + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) + duration: theme.transitions.duration.enteringScreen, + }), }, drawerPaperClose: { - overflowX: "hidden", - transition: theme.transitions.create("width", { + overflowX: 'hidden', + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen + duration: theme.transitions.duration.leavingScreen, }), width: theme.spacing(7), - [theme.breakpoints.up("sm")]: { - width: theme.spacing(9) - } + [theme.breakpoints.up('sm')]: { + width: theme.spacing(9), + }, }, content: { marginTop: theme.spacing(3), paddingBottom: theme.spacing(6), - height: "calc(100vh - 64px)", - overflowX: "hidden" + height: 'calc(100vh - 64px)', + overflowX: 'hidden', }, container: { paddingTop: theme.spacing(0), paddingBottom: theme.spacing(0), - paddingRight: theme.spacing(0) + paddingRight: theme.spacing(0), }, paper: { padding: theme.spacing(0), - display: "flex", - overflow: "auto", - flexDirection: "column" + display: 'flex', + overflow: 'auto', + flexDirection: 'column', }, fixedHeight: { - height: 240 + height: 240, }, drawerWallet: { - position: "relative", - whiteSpace: "nowrap", + position: 'relative', + whiteSpace: 'nowrap', width: drawerWidth, - height: "100%", - transition: theme.transitions.create("width", { + height: '100%', + transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) + duration: theme.transitions.duration.enteringScreen, + }), }, balancePaper: { marginTop: theme.spacing(2), marginLeft: theme.spacing(2), - marginRight: theme.spacing(2) + marginRight: theme.spacing(2), }, bottomOptions: { - position: "absolute", + position: 'absolute', bottom: 0, - width: "100%" + width: '100%', }, cardTitle: { paddingLeft: theme.spacing(3), paddingTop: theme.spacing(2), - marginBottom: theme.spacing(1) + marginBottom: theme.spacing(1), }, cardSubSection: { paddingLeft: theme.spacing(3), paddingRight: theme.spacing(3), - paddingTop: theme.spacing(1) + paddingTop: theme.spacing(1), }, table: { - minWidth: 650 + minWidth: 650, }, selectButton: { width: 80, paddingLeft: theme.spacing(2), - height: 56 + height: 56, }, input: { paddingRight: theme.spacing(2), - cursor: "pointer" + cursor: 'pointer', }, createButton: { - float: "right", + float: 'right', width: 150, paddingLeft: theme.spacing(2), height: 56, marginTop: theme.spacing(4), marginBottom: theme.spacing(2), - background: "linear-gradient(45deg, #0a6b19 30%, #6ff196 90%)", - boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)", - color: "white" + background: 'linear-gradient(45deg, #0a6b19 30%, #6ff196 90%)', + boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', + color: 'white', }, logContainer: { marginLeft: theme.spacing(3), marginRight: theme.spacing(3), minHeight: 400, maxHeight: 400, - maxWidth: "100%", - backgroundColor: "#f1f1f1", - border: "1px solid #888888", - whiteSpace: "pre-wrap", + maxWidth: '100%', + backgroundColor: '#f1f1f1', + border: '1px solid #888888', + whiteSpace: 'pre-wrap', paddingTop: theme.spacing(1), paddingLeft: theme.spacing(3), paddingRight: theme.spacing(3), paddingBottom: theme.spacing(3), - overflowY: "auto", - overflowWrap: "break-word", - lineHeight: 1.8 + overflowY: 'auto', + overflowWrap: 'break-word', + lineHeight: 1.8, }, logPaper: { - maxWidth: "100%", + maxWidth: '100%', marginBottom: theme.spacing(3), - marginTop: theme.spacing(3) + marginTop: theme.spacing(3), }, cancelButton: { - float: "right", + float: 'right', width: 150, paddingLeft: theme.spacing(2), height: 56, marginTop: theme.spacing(4), - marginBottom: theme.spacing(2) + marginBottom: theme.spacing(2), }, clearButton: { - float: "right", + float: 'right', width: 150, marginRight: theme.spacing(2), height: 56, marginTop: theme.spacing(4), - marginBottom: theme.spacing(2) - } + marginBottom: theme.spacing(2), + }, })); const plot_size_options = [ @@ -211,21 +211,21 @@ const WorkLocation = () => { const classes = useStyles(); const dispatch = useDispatch(); const work_location = useSelector( - state => state.plot_control.workspace_location + (state) => state.plot_control.workspace_location, ); async function select() { if (isElectron()) { const dialogOptions = { - properties: ["openDirectory", "showHiddenFiles"] + properties: ['openDirectory', 'showHiddenFiles'], }; const result = await window.remote.dialog.showOpenDialog(dialogOptions); - const filePath = result["filePaths"][0]; + const filePath = result.filePaths[0]; if (filePath) { dispatch(workspaceSelected(filePath)); } } else { dispatch( - openDialog("", "This feature is available only from electron app") + openDialog('', 'This feature is available only from electron app'), ); } } @@ -242,8 +242,8 @@ const WorkLocation = () => { fullWidth onClick={select} label={ - work_location === "" - ? "Temporary folder location" + work_location === '' + ? 'Temporary folder location' : work_location } /> @@ -268,21 +268,21 @@ const FinalLocation = () => { const classes = useStyles(); const dispatch = useDispatch(); const final_location = useSelector( - state => state.plot_control.final_location + (state) => state.plot_control.final_location, ); async function select() { if (isElectron()) { const dialogOptions = { - properties: ["openDirectory", "showHiddenFiles"] + properties: ['openDirectory', 'showHiddenFiles'], }; const result = await window.remote.dialog.showOpenDialog(dialogOptions); - const filePath = result["filePaths"][0]; + const filePath = result.filePaths[0]; if (filePath) { dispatch(finalSelected(filePath)); } } else { dispatch( - openDialog("", "This feature is available only from electron app") + openDialog('', 'This feature is available only from electron app'), ); } } @@ -298,7 +298,7 @@ const FinalLocation = () => { onClick={select} fullWidth label={ - final_location === "" ? "Final folder location" : final_location + final_location === '' ? 'Final folder location' : final_location } variant="outlined" /> @@ -323,20 +323,17 @@ const CreatePlot = () => { const dispatch = useDispatch(); const classes = useStyles(); const work_location = useSelector( - state => state.plot_control.workspace_location + (state) => state.plot_control.workspace_location, ); - let t2 = useSelector(state => state.plot_control.t2); + let t2 = useSelector((state) => state.plot_control.t2); const final_location = useSelector( - state => state.plot_control.final_location + (state) => state.plot_control.final_location, ); const [plotSize, setPlotSize] = React.useState(32); const [plotCount, setPlotCount] = React.useState(1); - const [maxRam, setMaxRam] = React.useState(3072); - const [numThreads, setNumThreads] = React.useState(2); - const [numBuckets, setNumBuckets] = React.useState(0); - const [stripeSize, setStripeSize] = React.useState(65536); + const [maxRam, setMaxRam] = React.useState(2000); - const changePlotSize = event => { + const changePlotSize = (event) => { setPlotSize(event.target.value); for (let pso of plot_size_options) { if (pso.value === event.target.value) { @@ -344,25 +341,16 @@ const CreatePlot = () => { } } }; - const changePlotCount = event => { + const changePlotCount = (event) => { setPlotCount(event.target.value); }; - const handleSetMaxRam = event => { + const handleSetMaxRam = (event) => { setMaxRam(event.target.value); }; - const handleSetNumBuckets = event => { - setNumBuckets(event.target.value); - }; - const handleSetNumThreads = event => { - setNumThreads(event.target.value); - }; - const handleSetStripeSize = event => { - setStripeSize(event.target.value); - }; function create() { if (!work_location || !final_location) { - dispatch(openDialog("Please specify a temporary and final directory")); + dispatch(openDialog('Please specify a temporary and final directory')); return; } const N = plotCount; @@ -370,11 +358,11 @@ const CreatePlot = () => { if (!t2 || t2 === "") { t2 = work_location; } - dispatch(startPlotting(K, N, work_location, t2, final_location, maxRam, numBuckets, numThreads, stripeSize)); + dispatch(startPlotting(K, N, work_location, t2, final_location, maxRam)); } - var plot_count_options = []; - for (var i = 1; i < 30; i++) { + const plot_count_options = []; + for (let i = 1; i < 30; i++) { plot_count_options.push(i); } @@ -390,7 +378,7 @@ const CreatePlot = () => {

- {" "} + {' '} Using this tool, you can create plots, which are allocated space on your hard drive used to farm and earn Chia. Also, temporary files are created during the plotting process, which exceed the size of @@ -414,12 +402,12 @@ const CreatePlot = () => { onChange={changePlotSize} label="Plot Size" > - {plot_size_options.map(option => ( + {plot_size_options.map((option) => ( - {option.label} (k={option.value}, temporary space:{" "} + {option.label} (k={option.value}, temporary space:{' '} {option.workspace}) ))} @@ -438,8 +426,8 @@ const CreatePlot = () => { onChange={changePlotCount} label="Colour" > - {plot_count_options.map(option => ( - + {plot_count_options.map((option) => ( + {option} ))} @@ -468,60 +456,10 @@ const CreatePlot = () => { - - - - Number of threads - - - - - - Number of buckets - - - 0 automatically chooses bucket count - - - - - - Stripe Size - - - -

- - + +
@@ -544,7 +482,7 @@ const CreatePlot = () => { }; const Proggress = () => { - const progress = useSelector(state => state.plot_control.progress); + const progress = useSelector((state) => state.plot_control.progress); const classes = useStyles(); const dispatch = useDispatch(); function clearLog() { @@ -554,7 +492,7 @@ const Proggress = () => { dispatch(stopService(service_plotter)); } const plotting_stopped = useSelector( - state => state.plot_control.plotting_stopped + (state) => state.plot_control.plotting_stopped, ); return (
@@ -570,7 +508,7 @@ const Proggress = () => {
- {plotting_stopped ?

Plotting stopped succesfully.

: ""} + {plotting_stopped ?

Plotting stopped succesfully.

: ''} {!plotting_stopped ? ( @@ -583,7 +521,7 @@ const Proggress = () => { Cancel ) : ( - "" + '' )}