Skip to content

Commit

Permalink
feat: taribot and ui updates (#344)
Browse files Browse the repository at this point in the history
Description
---
Adds improvements to the taribot component and messages depending on the
states of the miners / base node.
Fixed a bug that caused the settings dialog to rerender while mining is
on.
Various other small ui improvements.

Motivation and Context
---
Taribot & ui improvements

How Has This Been Tested?
---
Manually
  • Loading branch information
NovaT82 authored Jun 24, 2024
1 parent 26e254a commit 1c92106
Show file tree
Hide file tree
Showing 29 changed files with 533 additions and 332 deletions.
29 changes: 27 additions & 2 deletions ui/frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import { useEffect } from 'react';
// import { invoke } from "@tauri-apps/api/tauri";
// import './App.css';
import { emit, listen } from '@tauri-apps/api/event';
import MainLayout from './MainLayout';
import MainLayout from './theme/MainLayout';
import useAppStateStore from './store/appStateStore';
import useConfigStore from './store/configStore';
import MainTabs from './containers/Dashboard/DashboardContainer/MainTabs';
import SettingsDialog from './containers/SettingsContainer/SettingsDialog';
import DockerWarning from './containers/DockerWarning/DockerWarning';
import MiningScheduleDialog from './containers/MiningContainer/MiningSchedule/MiningScheduleDialog';
import { useShallow } from 'zustand/react/shallow';

function App() {
const {
Expand All @@ -33,7 +34,30 @@ function App() {
openSchedule,
startBaseNode,
startMining,
} = useAppStateStore();
} = useAppStateStore(
useShallow((state) => ({
appState: state.appState,
setAppState: state.setAppState,
containers: state.containers,
setContainers: state.setContainers,
setIsMining: state.setIsMining,
setIsChangingMining: state.setIsChangingMining,
openDockerWarning: state.openDockerWarning,
setOpenDockerWarning: state.setOpenDockerWarning,
setTariAddress: state.setTariAddress,
setNetwork: state.setNetwork,
openSettings: state.openSettings,
shaTime: state.shaTime,
setShaTime: state.setShaTime,
shaTimerOn: state.shaTimerOn,
mergeTime: state.mergeTime,
setMergeTime: state.setMergeTime,
mergeTimerOn: state.mergeTimerOn,
openSchedule: state.openSchedule,
startBaseNode: state.startBaseNode,
startMining: state.startMining,
}))
);
const { startupConfig } = useConfigStore();

// async function connect() {
Expand Down Expand Up @@ -105,6 +129,7 @@ function App() {
payload?.State?.config?.session?.merge_layer_active ||
payload?.State?.config?.session?.sha3x_layer_active
);

setIsChangingMining(false);
setTariAddress(
appState?.config?.settings?.saved_settings?.mm_proxy
Expand Down
5 changes: 5 additions & 0 deletions ui/frontend/src/components/StyledComponents.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,14 @@ import {
Typography,
Chip,
Button,
CircularProgress,
} from '@mui/material';
import colors from '../styles/styles/colors';

export const CircularProgressLight = styled(CircularProgress)(({}) => ({
color: colors.light.textSecondary,
}));

export const TabInnerBox = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import SvgSetting2 from '../../styles/Icons/Setting2';
import useAppStateStore from '../../store/appStateStore';
import { Typography, Chip } from '@mui/material';
import t from '../../locales';
import typography from '../../styles/styles/typography';
import { FooterBox, InfoBox } from './styles';
import { FooterBox } from './styles';
import { TextButton } from '../../components/StyledComponents';
import { SettingsTabs } from '../../store/types';

Expand All @@ -13,7 +11,7 @@ function BaseNodeFooter() {
}));
return (
<FooterBox>
<InfoBox>
{/* <InfoBox>
<Chip label={t.common.adjectives.recommended} color="info" />
<Typography variant="body1" sx={typography.defaultMedium}>
<span style={typography.defaultUnder}>
Expand All @@ -24,7 +22,7 @@ function BaseNodeFooter() {
<Typography variant="body2" sx={typography.smallMedium}>
{t.baseNode.aurora.description}
</Typography>
</InfoBox>
</InfoBox> */}
<TextButton
variant="text"
startIcon={<SvgSetting2 />}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { useEffect, useState } from 'react';
import { Typography } from '@mui/material';
import SvgStar from '../../../styles/Icons/Star';
import typography from '../../../styles/styles/typography';
import { useTheme } from '@mui/material/styles';
import t from '../../../locales';
import { BaseNodeHelpMessage } from './Messages';
import { HelpTextBox } from '../styles';
import useAppStateStore from '../../../store/appStateStore';
import { BaseNodeStatus } from '../../../store/types';

function BaseNodeHelp() {
const theme = useTheme();
const [message, setMessage] = useState<string>('');
const { containers } = useAppStateStore((state) => ({
containers: state.containers,
}));

useEffect(() => {
switch (true) {
case containers.baseNode?.status === BaseNodeStatus.ACTIVE:
setMessage(t.baseNode.helpMessages.alreadyRunning);
break;
default:
setMessage(t.baseNode.helpMessages.howItWorks.tip.text);
break;
}
}, [containers?.baseNode?.status]);

return (
<HelpTextBox>
<SvgStar
style={{
height: '24px',
width: '24px',
marginRight: theme.spacing(1),
}}
/>
<Typography
style={{ marginTop: theme.spacing(0.5) }}
variant="h3"
sx={typography.defaultHeavy}
>
{message}{' '}
<span style={typography.defaultUnder}>
{t.baseNode.helpMessages.howItWorks.tip.cta}
</span>
</Typography>
<BaseNodeHelpMessage />
</HelpTextBox>
);
}

export default BaseNodeHelp;
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { MessageBox } from '../../TBotContainer/styles';
import { useSnackbar } from 'notistack';
import { Button, Typography, List, ListItem } from '@mui/material';
import { StyledIconButton } from '../../../components/StyledComponents';
import SvgQuestion from '../../../styles/Icons/Question';
import typography from '../../../styles/styles/typography';
import t from '../../../locales';

export const BaseNodeHelpMessage = () => {
const { closeSnackbar, enqueueSnackbar } = useSnackbar();
const key = 'basenode-start-help';
const handleClick = () => {
enqueueSnackbar(
<MessageBox>
<Typography sx={typography.defaultMedium}>
{t.baseNode.helpMessages.howItWorks.allowsYou}
</Typography>
<List>
<ListItem>
{t.baseNode.helpMessages.howItWorks.affordances[0]}
</ListItem>
<ListItem>
{t.baseNode.helpMessages.howItWorks.affordances[1]}
</ListItem>
<ListItem>
{t.baseNode.helpMessages.howItWorks.affordances[2]}
</ListItem>
</List>
<Typography sx={typography.defaultMedium}>
<span style={typography.defaultHeavy}>
{t.baseNode.helpMessages.howItWorks.thankYou}
</span>{' '}
{t.baseNode.helpMessages.howItWorks.yourContribution}
</Typography>
<Button variant="contained" onClick={() => closeSnackbar(key)}>
{t.common.phrases.gotIt}
</Button>
</MessageBox>,
{
key: key,
persist: false,
}
);
};

return (
<StyledIconButton onClick={handleClick}>
<SvgQuestion />
</StyledIconButton>
);
};
88 changes: 9 additions & 79 deletions ui/frontend/src/containers/BaseNodeContainer/BaseNodeTab.tsx
Original file line number Diff line number Diff line change
@@ -1,87 +1,17 @@
import { Typography, Box } from '@mui/material';
import BaseNodeWidget from './BaseNodeWidget';
import {
StyledIconButton,
TabInnerBox,
} from '../../components/StyledComponents';
import SvgQuestion from '../../styles/Icons/Question';
import SvgStar from '../../styles/Icons/Star';
import typography from '../../styles/styles/typography';
import { useTheme } from '@mui/material/styles';
import { useSnackbar } from 'notistack';
import t from '../../locales';
import BaseNodeFooter from './BaseNodeFooter';
import { TabContainer, ItemsContainer } from './styles';
import BaseNodeHelp from './BaseNodeHelp/BaseNodeHelp';

function BaseNodeTab() {
const theme = useTheme();
const { enqueueSnackbar } = useSnackbar();
return (
<TabInnerBox>
<Box
style={{
width: '100%',
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(3),
alignItems: 'center',
}}
>
<Box
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}}
>
<SvgStar
style={{
height: '24px',
width: '24px',
marginRight: theme.spacing(1),
}}
/>
<Typography
style={{ marginTop: theme.spacing(0.5) }}
variant="h3"
sx={typography.defaultHeavy}
>
{t.baseNode.helpMessages.howItWorks.tip.text}{' '}
<span style={typography.defaultUnder}>
{t.baseNode.helpMessages.howItWorks.tip.cta}
</span>
</Typography>
<StyledIconButton
onClick={() =>
enqueueSnackbar(
`${t.baseNode.helpMessages.howItWorks.allowsYou}:
${t.baseNode.helpMessages.howItWorks.affordances[0]},
${t.baseNode.helpMessages.howItWorks.affordances[1]},
${t.baseNode.helpMessages.howItWorks.affordances[2]}.
${t.baseNode.helpMessages.howItWorks.thankYou}
${t.baseNode.helpMessages.howItWorks.yourContribution}
`,
{
key: 'baseNode.helpMessages.howItWorks.allowsYou',
persist: true,
}
)
}
>
<SvgQuestion />
</StyledIconButton>
</Box>
<Box
style={{
display: 'grid',
gap: theme.spacing(3),
gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))',
}}
>
<BaseNodeWidget />
<BaseNodeFooter />
</Box>
</Box>
</TabInnerBox>
<TabContainer>
<BaseNodeHelp />
<ItemsContainer>
<BaseNodeWidget />
<BaseNodeFooter />
</ItemsContainer>
</TabContainer>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ function BaseNodeWidget() {
containers.baseNode?.status === BaseNodeStatus.SHUTTINGDOWN ||
containers.baseNode?.status === BaseNodeStatus.STARTING ||
containers.baseNode?.status === BaseNodeStatus.PENDING ||
containers.baseNode?.status === BaseNodeStatus.SYNCING
containers.baseNode?.status === BaseNodeStatus.SYNCING ||
containers.baseNode?.status === BaseNodeStatus.HEADERSYNC
) {
setBaseNodeStatus('pending');
} else if (containers.baseNode?.status === BaseNodeStatus.ACTIVE) {
Expand Down
27 changes: 21 additions & 6 deletions ui/frontend/src/containers/BaseNodeContainer/styles.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import { styled } from '@mui/material/styles';
import { Box, CircularProgress } from '@mui/material';
import { Box } from '@mui/material';
import gradients from '../../styles/styles/gradients';
import colors from '../../styles/styles/colors';

const minHeight = 350;

export const CircularProgressLight = styled(CircularProgress)(({}) => ({
color: colors.light.textSecondary,
}));

export const FooterBox = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
Expand Down Expand Up @@ -74,3 +69,23 @@ export const ContentBox = styled(Box)(({ theme }) => ({
alignItems: 'flex-start',
width: '100%',
}));

export const HelpTextBox = styled(Box)(() => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}));

export const TabContainer = styled(Box)(({ theme }) => ({
width: '100%',
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(3),
alignItems: 'center',
}));

export const ItemsContainer = styled(Box)(({ theme }) => ({
display: 'grid',
gap: theme.spacing(3),
gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))',
}));
Loading

0 comments on commit 1c92106

Please sign in to comment.