feat: new ui

tari-project · May 6, 2024 · 1dd8c50 · 1dd8c50
1 parent cb3c738
commit 1dd8c50
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 84 deletions.
diff --git a/ui/frontend/src/containers/Dashboard/DashboardContainer/MainTabs.tsx b/ui/frontend/src/containers/Dashboard/DashboardContainer/MainTabs.tsx
@@ -46,7 +46,7 @@ function a11yProps(index: number) {
 export default function MainTabs() {
   const [value, setValue] = useState(0);
   const theme = useTheme();
-  const { isMining, isMergeMining } = useAppStateStore();
+  const { isShaMining, isMergeMining, appState } = useAppStateStore();
 
   const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -67,7 +67,8 @@ export default function MainTabs() {
             <Chip
               label={
                 <span>
-                  <strong>Running</strong> Mainnet
+                  <strong>Running</strong>{' '}
+                  {appState?.config?.settings?.saved_settings?.tari_network}
                 </span>
               }
               color="success"
@@ -89,7 +90,7 @@ export default function MainTabs() {
       >
         <CustomTab
           label="Mining"
-          isActive={isMining || isMergeMining}
+          isActive={isShaMining || isMergeMining}
           {...a11yProps(0)}
         />
         <Tab label="Base Node" {...a11yProps(1)} />

diff --git a/ui/frontend/src/containers/MiningContainer/MiningBox/MiningWidget.tsx b/ui/frontend/src/containers/MiningContainer/MiningBox/MiningWidget.tsx
@@ -14,11 +14,11 @@ function MiningWidget() {
   const {
     tariAddress,
     setTariAddress,
-    startMining,
-    stopMining,
     appState,
     saveTariAddress,
-    isMining,
+    startMining,
+    stopMining,
+    isShaMining,
   } = useAppStateStore();
 
   function handleTariAddressChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -61,7 +61,7 @@ function MiningWidget() {
   }
 
   return (
-    <GradientBox isActive={isMining} gradient={gradients.tari}>
+    <GradientBox isActive={isShaMining} gradient={gradients.tari}>
       <Box
         style={{
           display: 'flex',
@@ -122,7 +122,7 @@ function MiningWidget() {
           Cancel
         </Button>
       </Box>
-      {isMining ? (
+      {isShaMining ? (
         <Button variant="contained" onClick={stop}>
           Pause
         </Button>

diff --git a/...er/MiningBoxMerged/MergedMiningWidget.tsx → ...ner/MiningBoxMerged/MergeMiningWidget.tsx b/...er/MiningBoxMerged/MergedMiningWidget.tsx → ...ner/MiningBoxMerged/MergeMiningWidget.tsx
@@ -19,10 +19,11 @@ function MergedMiningWidget() {
     appState,
     moneroAddress,
     setMoneroAddress,
+    saveMoneroAddress,
     startMining,
     stopMining,
-    saveMoneroAddress,
     isMergeMining,
+    setIsMergeMining,
   } = useAppStateStore();
   const { enqueueSnackbar } = useSnackbar();
 
@@ -61,10 +62,12 @@ function MergedMiningWidget() {
 
   function start() {
     startMining('Merge');
+    setIsMergeMining(true);
   }
 
   function stop() {
     stopMining('Merge');
+    setIsMergeMining(false);
   }
 
   return (

diff --git a/ui/frontend/src/containers/MiningContainer/MiningTab.tsx b/ui/frontend/src/containers/MiningContainer/MiningTab.tsx
@@ -1,6 +1,6 @@
 import { Typography, Box } from '@mui/material';
 import MiningWidget from './MiningBox/MiningWidget';
-import MergedMiningWidget from './MiningBoxMerged/MergedMiningWidget';
+import MergeMiningWidget from './MiningBoxMerged/MergeMiningWidget';
 import {
   StyledIconButton,
   TabInnerBox,
@@ -68,7 +68,7 @@ function MiningTab() {
           }}
         >
           <MiningWidget />
-          <MergedMiningWidget />
+          <MergeMiningWidget />
         </Box>
       </Box>
     </TabInnerBox>

diff --git a/ui/frontend/src/containers/SettingsContainer/SettingsDialog.tsx b/ui/frontend/src/containers/SettingsContainer/SettingsDialog.tsx
@@ -5,7 +5,6 @@ import ThemeSwitch from '../../components/ThemeSwitch';
 import MiningSettings from './MiningSettings/MiningSettings';
 import BaseNodeSettings from './BaseNodeSettings/BaseNodeSettings';
 import DockerSettings from './DockerSettings/DockerSettings';
-import SecuritySettings from './SecuritySettings/SecuritySettings';
 import GeneralSettings from './GeneralSettings/GeneralSettings';
 import WalletSettings from './WalletSettings/WalletSettings';
 import ResetSettings from './ResetSettings/ResetSettings';
@@ -129,47 +128,42 @@ function a11yProps(index: number) {
   };
 }
 
-function SettingsForm() {
+function SettingsDialog() {
   const [openSettings, setOpenSettings, appState] = useAppStateStore(
     (state) => [state.openSettings, state.setOpenSettings, state.appState]
   );
   const [isValid, setIsValid] = useState(false);
+  console.log('isValid', isValid);
+
+  const settings = appState?.config?.settings?.saved_settings || {};
 
   const initialFormData = {
     miningSettings: {
-      shaThreads:
-        appState?.config?.settings?.saved_settings?.sha3_miner
-          ?.num_mining_threads || 0,
-      moneroAddress:
-        appState?.config?.settings?.saved_settings?.xmrig
-          ?.monero_mining_address || '',
-      randomXThreads:
-        appState?.config?.settings?.saved_settings?.sha3_miner
-          ?.num_mining_threads || 0,
-      moneroNodeUrl:
-        appState?.config?.settings?.saved_settings?.mm_proxy?.monerod_url || '',
+      shaThreads: settings.sha3_miner?.num_mining_threads || 0,
+      moneroAddress: settings.xmrig?.monero_mining_address || '',
+      randomXThreads: settings.xmrig?.num_mining_threads || 0,
+      moneroNodeUrl: settings.mm_proxy?.monerod_url || '',
       // walletPaymentAddress:
-      //   appState?.config?.settings?.saved_settings?.mm_proxy
+      //   settings.mm_proxy
       //     ?.wallet_payment_address ||
-      //   appState?.config?.settings?.saved_settings?.sha3_miner
+      //   settings.sha3_miner
       //     ?.wallet_payment_address ||
       //   '',
     },
     baseNodeSettings: {
-      network: appState?.config?.settings?.saved_settings?.tari_network || '',
+      network: settings.tari_network || '',
       rootFolder: appState?.config?.settings?.data_directory || '',
     },
     walletSettings: {
       tariAddress:
-        appState?.config?.settings?.saved_settings?.mm_proxy
-          ?.wallet_payment_address ||
-        appState?.config?.settings?.saved_settings?.sha3_miner
-          ?.wallet_payment_address ||
+        settings.mm_proxy?.wallet_payment_address ||
+        settings.sha3_miner?.wallet_payment_address ||
         '',
     },
     dockerSettings: {
-      dockerTag: 'dockerTag',
-      dockerRegistry: 'dockerRegistry',
+      dockerTag: appState?.config?.settings?.saved_settings?.tag || '',
+      dockerRegistry:
+        appState?.config?.settings?.saved_settings?.registry || '',
     },
     // generalSettings: {
     //   runOnStartup: false,
@@ -234,10 +228,6 @@ function SettingsForm() {
         />
       ),
     },
-    {
-      label: 'Security',
-      component: <SecuritySettings />,
-    },
     {
       label: 'General',
       component: <GeneralSettings />,
@@ -279,8 +269,6 @@ function SettingsForm() {
     setFormData(initialFormData);
   }, [appState]);
 
-  console.log('isValid', isValid);
-
   async function saveSettings(formData: FormData) {
     console.log('Save Form', FormDataSchema.safeParse(formData));
     const validatedData = FormDataSchema.safeParse(formData);
@@ -300,8 +288,7 @@ function SettingsForm() {
     settings.xmrig.monero_mining_address =
       formData.miningSettings.moneroAddress;
     // randomXThreads
-    settings.sha3_miner.num_mining_threads =
-      formData.miningSettings.randomXThreads;
+    settings.xmrig.num_mining_threads = formData.miningSettings.randomXThreads;
     // moneroNodeUrl
     settings.mm_proxy.monerod_url = formData.miningSettings.moneroNodeUrl;
     // walletPaymentAddress
@@ -323,6 +310,12 @@ function SettingsForm() {
     settings.mm_proxy.wallet_payment_address =
       formData.walletSettings.tariAddress;
 
+    // DOCKER SETTINGS
+    // dockerTag
+    settings.tag = formData.dockerSettings.dockerTag;
+    // dockerRegistry
+    settings.registry = formData.dockerSettings.dockerRegistry;
+
     emit('tari://actions', {
       Action: { type: 'SaveSettings', payload: settings },
     });
@@ -421,4 +414,4 @@ function SettingsForm() {
   );
 }
 
-export default SettingsForm;
+export default SettingsDialog;
diff --git a/ui/frontend/src/containers/SettingsContainer/index.tsx b/ui/frontend/src/containers/SettingsContainer/index.tsx
diff --git a/ui/frontend/src/store/appStateStore.ts b/ui/frontend/src/store/appStateStore.ts
@@ -2,24 +2,11 @@ import { create } from 'zustand';
 import { emit } from '@tauri-apps/api/event';
 import { AppState, ContainerState, MiningType } from './types';
 
-interface Settings {
-  miningSettings: {
-    shaThreads: string;
-    moneroAddress: string;
-  };
-  baseNodeSettings: {
-    network: string;
-    rootFolder: string;
-  };
-  walletSettings: {
-    tariAddress: string;
-  };
-}
-
 interface AppStateStore {
   appState: AppState;
   containers: ContainerState;
   isMining: boolean;
+  isShaMining: boolean;
   isMergeMining: boolean;
   shaMiningEnabled: boolean;
   mergeMiningEnabled: boolean;
@@ -28,10 +15,11 @@ interface AppStateStore {
   openSettings: boolean;
   tariAddress: string;
   moneroAddress: string;
-  settings: () => Promise<Settings>;
   setAppState: (newState: AppState) => void;
   setContainers: (newContainers: ContainerState) => void;
   setIsMining: (value: boolean) => void;
+  setIsShaMining: (value: boolean) => void;
+  setIsMergeMining: (value: boolean) => void;
   setShaMiningEnabled: (value: boolean) => void;
   setMergeMiningEnabled: (value: boolean) => void;
   setIsChangingMining: (value: boolean) => void;
@@ -79,8 +67,11 @@ const useAppStateStore = create<AppStateStore>((set, get) => ({
             wallet_payment_address: '',
           },
           xmrig: {
+            num_mining_threads: 0,
             monero_mining_address: '',
           },
+          registry: '',
+          tag: '',
           tari_network: '',
         },
         tor_control_password: '',
@@ -123,6 +114,7 @@ const useAppStateStore = create<AppStateStore>((set, get) => ({
   },
   containers: {},
   isMining: false,
+  isShaMining: false,
   isMergeMining: false,
   shaMiningEnabled: true,
   mergeMiningEnabled: true,
@@ -131,33 +123,12 @@ const useAppStateStore = create<AppStateStore>((set, get) => ({
   openSettings: false,
   tariAddress: '',
   moneroAddress: '',
-  settings: async () => {
-    let state = get().appState;
-    return {
-      miningSettings: {
-        shaThreads: '',
-        moneroAddress:
-          state.config?.settings?.saved_settings?.xmrig
-            ?.monero_mining_address || '',
-      },
-      baseNodeSettings: {
-        network: '',
-        rootFolder: '',
-      },
-      walletSettings: {
-        tariAddress:
-          state.config?.settings?.saved_settings?.mm_proxy
-            ?.wallet_payment_address ||
-          state.config?.settings?.saved_settings?.sha3_miner
-            ?.wallet_payment_address ||
-          '',
-      },
-    };
-  },
   setAppState: (newState) => set({ appState: newState }),
   setContainers: (newContainers) =>
     set((state) => ({ ...state, containers: newContainers })),
   setIsMining: (value) => set(() => ({ isMining: value })),
+  setIsShaMining: (value) => set(() => ({ isShaMining: value })),
+  setIsMergeMining: (value) => set(() => ({ isMergeMining: value })),
   setShaMiningEnabled: (value) => set(() => ({ shaMiningEnabled: value })),
   setMergeMiningEnabled: (value) => set(() => ({ mergeMiningEnabled: value })),
   setIsChangingMining: (value) => set(() => ({ isChangingMining: value })),
@@ -171,7 +142,7 @@ const useAppStateStore = create<AppStateStore>((set, get) => ({
     switch (miningType) {
       case 'Sha3':
         stateSession.sha3x_layer_active = true;
-        set({ isMining: true });
+        set({ isShaMining: true });
         break;
       case 'Merge':
         stateSession.merge_layer_active = true;
@@ -180,7 +151,7 @@ const useAppStateStore = create<AppStateStore>((set, get) => ({
       case 'All':
         stateSession.sha3x_layer_active = true;
         stateSession.merge_layer_active = true;
-        set({ isMining: true });
+        set({ isShaMining: true });
         set({ isMergeMining: true });
         break;
     }
@@ -194,7 +165,7 @@ const useAppStateStore = create<AppStateStore>((set, get) => ({
     switch (miningType) {
       case 'Sha3':
         stateSession.sha3x_layer_active = false;
-        set({ isMining: false });
+        set({ isShaMining: false });
         break;
       case 'Merge':
         stateSession.merge_layer_active = false;
@@ -203,7 +174,7 @@ const useAppStateStore = create<AppStateStore>((set, get) => ({
       case 'All':
         stateSession.sha3x_layer_active = false;
         stateSession.merge_layer_active = false;
-        set({ isMining: false });
+        set({ isShaMining: false });
         set({ isMergeMining: false });
         break;
     }

diff --git a/ui/frontend/src/store/types.ts b/ui/frontend/src/store/types.ts
@@ -22,8 +22,11 @@ export interface ConfigState {
         wallet_payment_address: string;
       };
       xmrig: {
+        num_mining_threads: number;
         monero_mining_address: string;
       };
+      registry: string;
+      tag: string;
       tari_network: string;
     };
     tor_control_password: string;