tari-project · stringhandler · Aug 14, 2024 · Aug 14, 2024 · Aug 14, 2024 · Aug 14, 2024
diff --git a/glApp.d.ts b/glApp.d.ts
@@ -0,0 +1,40 @@
+// glApp.d.ts
+
+export interface Status {
+    NOT_STARTED: 'not-started';
+    STARTED: 'started';
+    FREE: 'free';
+    RESULT: 'result';
+    RESULT_ANIMATION: 'result_animation';
+    RESTART_ANIMATION: 'restart_animation';
+    RESTART: 'restart';
+}
+
+export interface Result {
+    NONE: 'none';
+    PAUSE: 'pause';
+    COMPLETED: 'completed';
+    FAILED: 'failed';
+}
+
+export interface GlApp {
+    status?: Status;
+    preload(
+        e: {
+            canvas: Element;
+            orbitTarget: Element;
+            ASSETS_PATH: string;
+        },
+        t: () => void
+    ): void;
+    init(): void;
+    setSize(e: number, t: number): void;
+    render(e: number): void;
+    setResult(e): void;
+}
+
+export interface Properties extends Record<string, unknown> {
+    stateSignal: unknown;
+    resultSignal: unknown;
+    endCycleSignal: unknown;
+}
diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,13 @@
+// global.d.ts
+import { GlApp, Properties, Result, Status } from './glApp';
+
+export {};
+
+declare global {
+    interface Window {
+        properties: Properties;
+        STATUS: Status;
+        RESULT: Result;
+        glApp: GlApp;
+    }
+}
diff --git a/index.html b/index.html
@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <script type="module" crossorigin src="/assets/vis-index.js"></script>
     <title>Tari Universe</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" crossorigin src="/assets/index-CcNHoC10.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/public/assets/index-CcNHoC10.js → public/assets/vis-index.js b/public/assets/index-CcNHoC10.js → public/assets/vis-index.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,19 +18,24 @@ import useAppStateStore from './store/appStateStore.ts';
 import { useMining } from './hooks/useMining.ts';
 
 import { useGetApplicatonsVersions } from './hooks/useGetApplicatonsVersions.ts';
-import { preload } from './visuals';
 import { appBorderRadius } from './theme/tokens.ts';
 
+import { preload } from './visuals.js';
+import { useAppStatusStore } from './store/useAppStatusStore.ts';
+import { useVisualisation } from './hooks/useVisualisation.ts';
+
 function App() {
     const background = useUIStore((s) => s.background);
     const view = useUIStore((s) => s.view);
     const setView = useUIStore((s) => s.setView);
     const setBackground = useUIStore((s) => s.setBackground);
     const startupInitiated = useRef(false);
     const setSetupDetails = useAppStateStore((s) => s.setSetupDetails);
+    const isMining = useAppStatusStore((s) => s.cpu?.is_mining);
     const settingUpFinished = useAppStateStore((s) => s.settingUpFinished);
-    const { startMining, stopMining } = useMining();
+    const { startMining, stopMining, hasMiningBeenStopped } = useMining();
     const visualMode = useUIStore((s) => s.visualMode);
+    const { handleStart, handlePause } = useVisualisation();
 
     useEffect(() => {
         const unlistenPromise = listen(
@@ -39,7 +44,7 @@ function App() {
                 console.debug('Event:', event, payload);
                 switch (payload.event_type) {
                     case 'setup_status':
-                        console.log(
+                        console.debug(
                             'Setup status:',
                             payload.title,
                             payload.progress
@@ -57,13 +62,17 @@ function App() {
                         }
                         break;
                     case 'user_idle':
+                        if (isMining) return;
                         startMining().then(() => {
-                            console.log('Mining started');
+                            console.debug('Mining started');
+                            handleStart(hasMiningBeenStopped);
                         });
                         break;
                     case 'user_active':
+                        if (!isMining) return;
                         stopMining().then(() => {
-                            console.log('Mining stopped');
+                            console.debug('Mining stopped');
+                            handlePause();
                         });
                         break;
                     default:
@@ -77,7 +86,7 @@ function App() {
         );
         if (!startupInitiated.current) {
             startupInitiated.current = true;
-            preload();
+            preload?.();
             invoke('setup_application').catch((e) => {
                 console.error('Failed to setup application:', e);
             });
@@ -86,7 +95,14 @@ function App() {
         return () => {
             unlistenPromise.then((unlisten) => unlisten());
         };
-    }, []);
+    }, [
+        hasMiningBeenStopped,
+        stopMining,
+        startMining,
+        handleStart,
+        handlePause,
+        isMining,
+    ]);
 
     useGetStatus();
     useGetApplicatonsVersions();

diff --git a/src/containers/Dashboard/MiningView/MiningView.tsx b/src/containers/Dashboard/MiningView/MiningView.tsx
@@ -5,16 +5,16 @@ import MiningButton from './components/MiningButton';
 import { InfoContainer } from '../styles';
 
 function MiningView() {
-  return (
-    <>
-      <InfoContainer>
-        <TopStatus />
-        <BlockInfo />
-      </InfoContainer>
-      <VisualMode />
-      <MiningButton />
-    </>
-  );
+    return (
+        <>
+            <InfoContainer>
+                <TopStatus />
+                <BlockInfo />
+            </InfoContainer>
+            <VisualMode />
+            <MiningButton />
+        </>
+    );
 }
 
 export default MiningView;
diff --git a/src/containers/Dashboard/MiningView/components/MiningButton.tsx b/src/containers/Dashboard/MiningView/components/MiningButton.tsx
@@ -4,9 +4,12 @@ import { AiOutlineLoading } from 'react-icons/ai';
 import { useMining } from '../../../../hooks/useMining.ts';
 import { styled } from '@mui/material/styles';
 import { keyframes } from '@emotion/react';
+import { useVisualisation } from '../../../../hooks/useVisualisation.ts';
+import { useCallback, useEffect } from 'react';
+import { useAppStatusStore } from '../../../../store/useAppStatusStore.ts';
 
 const selectButtonText = (isMining: boolean, hasMiningBeenStopped: boolean) => {
-    if (hasMiningBeenStopped) return 'Resume Mining';
+    if (!isMining && hasMiningBeenStopped) return 'Resume Mining';
     if (isMining) return 'Stop Mining';
     if (!isMining) return 'Start Mining';
 };
@@ -48,22 +51,30 @@ const StyledIcon = styled(AiOutlineLoading)(() => ({
 }));
 
 function MiningButton() {
+    const { handleStart, handlePause } = useVisualisation();
+    const isMining = useAppStatusStore((s) => s.cpu?.is_mining);
     const {
         startMining,
         stopMining,
-        isMining,
         shouldDisplayLoading,
         hasMiningBeenStopped,
     } = useMining();
 
-    const handleMining = () => {
-        if (shouldDisplayLoading) return;
-        if (isMining) {
-            stopMining();
-        } else {
-            startMining();
+    const handleStartMining = useCallback(async () => {
+        await startMining();
+    }, [startMining]);
+
+    useEffect(() => {
+        if (!shouldDisplayLoading && isMining) {
+            handleStart(hasMiningBeenStopped);
         }
-    };
+    }, [shouldDisplayLoading, hasMiningBeenStopped, isMining]);
+
+    const handleStopMining = useCallback(async () => {
+        stopMining().then(() => {
+            handlePause();
+        });
+    }, [shouldDisplayLoading, stopMining, handlePause]);
 
     const buttonStyle = isMining ? StopStyle : StartStyle;
     const buttonIcon = isMining ? (
@@ -76,13 +87,14 @@ function MiningButton() {
         <StyledButton
             variant="contained"
             color="primary"
+            disabled={shouldDisplayLoading}
             size="large"
             style={
                 shouldDisplayLoading
                     ? { ...buttonStyle, ...LoadingStyle }
                     : buttonStyle
             }
-            onClick={() => handleMining()}
+            onClick={isMining ? handleStopMining : handleStartMining}
             endIcon={shouldDisplayLoading ? <StyledIcon /> : buttonIcon}
             sx={{
                 display: 'flex',

diff --git a/src/containers/SideBar/SideBar.tsx b/src/containers/SideBar/SideBar.tsx
@@ -8,26 +8,27 @@ import {
     HeadingContainer,
     BottomContainer,
 } from './styles';
-import TestButtons from './TestButtons';
-import {useTheme} from '@mui/material/styles';
 
-import {useUIStore} from '../../store/useUIStore.ts';
+import { useTheme } from '@mui/material/styles';
+
+import { useUIStore } from '../../store/useUIStore.ts';
+// import TestButtons from './TestButtons.tsx';
 
 function SideBar() {
     const theme = useTheme();
     const sidebarOpen = useUIStore((state) => state.sidebarOpen);
     return (
         <SideBarContainer theme={theme} sidebaropen={sidebarOpen}>
             <HeadingContainer>
-                <Heading/>
+                <Heading />
             </HeadingContainer>
             <SideBarInner>
-                <Miner/>
-                <Milestones/>
+                <Miner />
+                <Milestones />
                 {/*<TestButtons />*/}
             </SideBarInner>
             <BottomContainer>
-                <Wallet/>
+                <Wallet />
             </BottomContainer>
         </SideBarContainer>
     );

diff --git a/src/hooks/useMining.ts b/src/hooks/useMining.ts
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { invoke } from '@tauri-apps/api/tauri';
 import { useUIStore } from '../store/useUIStore';
-import { setStart, setStop, setRestart } from '../visuals';
 import { useAppStatusStore } from '../store/useAppStatusStore';
 
 export function useMining() {
@@ -14,30 +13,20 @@ export function useMining() {
     );
     const setBackground = useUIStore((s) => s.setBackground);
 
-    const isMiningAnimationRunning = useRef(false);
     const hasMiningStartedAtLeastOnce = useRef(false);
 
     useEffect(() => {
         if (isMiningSwitchingState) return;
 
         if (isMiningEnabled && isMining) {
-            if (!isMiningAnimationRunning.current) {
-                setStart();
-                isMiningAnimationRunning.current = true;
-                hasMiningStartedAtLeastOnce.current = true;
-            } else {
-                setRestart();
-            }
+            hasMiningStartedAtLeastOnce.current = true;
             setBackground('mining');
             return;
         }
 
         if (!isMiningEnabled) {
-            if (isMiningAnimationRunning.current) {
-                setBackground('idle');
-                setStop();
-                isMiningAnimationRunning.current = false;
-            }
+            setBackground('idle');
+
             return;
         }
     }, [isMiningEnabled, isMining, isMiningSwitchingState]);
@@ -51,7 +40,7 @@ export function useMining() {
         } finally {
             setIsMiningSwitchingState(false);
         }
-    }, []);
+    }, [setIsMiningSwitchingState, isMining]);
 
     const stopMining = useCallback(async () => {
         setIsMiningSwitchingState(true);
@@ -62,19 +51,14 @@ export function useMining() {
         } finally {
             setIsMiningSwitchingState(false);
         }
-    }, []);
+    }, [setIsMiningSwitchingState]);
 
     const shouldDisplayLoading =
         isMiningSwitchingState || (!isMining && isMiningEnabled);
-
-    const hasMiningBeenStopped =
-        hasMiningStartedAtLeastOnce.current && !isMiningEnabled;
-
     return {
         startMining,
         stopMining,
         shouldDisplayLoading,
-        isMining,
-        hasMiningBeenStopped,
+        hasMiningBeenStopped: hasMiningStartedAtLeastOnce.current,
     };
 }
diff --git a/src/hooks/useVisualisation.ts b/src/hooks/useVisualisation.ts
@@ -0,0 +1,18 @@
+import { setStart, setStop, setRestart } from '../visuals';
+import { useCallback } from 'react';
+
+export function useVisualisation() {
+    const handleStart = useCallback(async (hasMiningBeenStopped = false) => {
+        if (!hasMiningBeenStopped) {
+            return await setStart();
+        } else {
+            return await setRestart();
+        }
+    }, []);
+
+    const handlePause = useCallback(async () => {
+        return await setStop();
+    }, []);
+
+    return { handleStart, handlePause };
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
-        <App />
+        <Suspense fallback={<div />}>
+            <App />
+        </Suspense>
     </React.StrictMode>
 );