tari-project · brianp · Feb 28, 2025 · Jan 30, 2025 · Jan 31, 2025 · Jan 31, 2025
diff --git a/.license.ignore b/.license.ignore
@@ -1 +0,0 @@
-./public/assets/glApp.js

diff --git a/index.html b/index.html
@@ -57,7 +57,6 @@
             crossorigin
         />
 
-        <script type="module" crossorigin src="/assets/glApp.js"></script>
         <title>Tari Universe | Testnet</title>
         <style>
             /* Poppins Font Faces */
@@ -190,78 +189,14 @@
                 padding: 0;
                 margin: 0;
             }
-
-            #canvas {
+            #tower-canvas {
                 position: absolute;
                 pointer-events: auto;
             }
         </style>
     </head>
     <body>
-        <main id="main">
-            <div id="root"></div>
-            <canvas id="canvas" style="opacity: 0"></canvas>
-            <script type="module" src="src/main.tsx"></script>
-            <script>
-                let time;
-                let lastRender;
-                let targetFPS = 40;
-                let frameInterval = 1 / targetFPS;
-
-                function preload() {
-                    glApp.preload(
-                        {
-                            canvas: document.getElementById('canvas'),
-                            orbitTarget: document.getElementById('canvas'),
-                            ASSETS_PATH: '/assets/',
-                        },
-                        () => {
-                            init();
-                        }
-                    );
-                }
-
-                function init() {
-                    glApp.init();
-                    time = performance.now() / 1000;
-                    lastRender = time;
-                    window.addEventListener('resize', onResize);
-
-                    onResize();
-                    animate();
-                }
-
-                function animate() {
-                    let newTime = performance.now() / 1000;
-                    let dt = newTime - time;
-                    if (newTime - lastRender >= frameInterval) {
-                        lastRender = newTime;
-                        update(dt);
-                        time = newTime;
-                    }
-
-                    requestAnimationFrame(animate);
-                }
-
-                function update(dt) {
-                    glApp.render(dt);
-                }
-
-                function onResize() {
-                    const sidebarOffset = 348 + 20; // sidebar + padding
-                    glApp.properties.cameraOffsetX = sidebarOffset / window.innerWidth;
-                    glApp.setSize(window.innerWidth, window.innerHeight);
-                }
-
-                document.addEventListener('DOMContentLoaded', () => {
-                    if (!window.WebGL2RenderingContext && !window.WebGLRenderingContext) {
-                        console.error('WebGL not supported!');
-                        return;
-                    }
-
-                    preload();
-                });
-            </script>
-        </main>
+        <div id="root"></div>
+        <script type="module" src="src/main.tsx"></script>
     </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
         "@floating-ui/react": "^0.27.4",
         "@lottiefiles/dotlottie-react": "^0.13.0",
         "@sentry/react": "^8.48.0",
+        "@tari-project/tari-tower": "^0.0.16",
         "@tauri-apps/api": "^2.2.0",
         "@tauri-apps/plugin-clipboard-manager": "^2.2.0",
         "@tauri-apps/plugin-os": "^2.2.0",

diff --git a/public/assets/glApp.js b/public/assets/glApp.js
diff --git a/public/assets/models/BASE.buf b/public/assets/models/BASE.buf
diff --git a/public/assets/models/BOX.buf b/public/assets/models/BOX.buf
diff --git a/public/assets/models/COIN.buf b/public/assets/models/COIN.buf
diff --git a/public/assets/models/COIN_PLACEMENT.buf b/public/assets/models/COIN_PLACEMENT.buf
diff --git a/public/assets/models/lose_animation.buf b/public/assets/models/lose_animation.buf
diff --git a/public/assets/textures/LDR_RGB1_0.png b/public/assets/textures/LDR_RGB1_0.png
diff --git a/public/assets/textures/LICENSES.txt b/public/assets/textures/LICENSES.txt
diff --git a/public/assets/textures/gobo.jpg b/public/assets/textures/gobo.jpg
diff --git a/public/assets/textures/matcap_gold.jpg b/public/assets/textures/matcap_gold.jpg
diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/react';
 import { memo, useMemo } from 'react';
 import { AppContentContainer } from '@app/App/App.styles';
 import { useShuttingDown } from '@app/hooks';
@@ -63,20 +62,22 @@ const CurrentAppSection = memo(function CurrentAppSection() {
 });
 
 export default function App() {
+    const isAppReady = useIsAppReady();
+    const isShuttingDown = useShuttingDown();
     const setError = useAppStateStore((s) => s.setError);
     const setIsWebglNotSupported = useUIStore((s) => s.setIsWebglNotSupported);
 
     const { t } = useTranslation('common', { useSuspense: false });
 
     if (!window.WebGL2RenderingContext && !window.WebGLRenderingContext) {
-        Sentry.captureMessage('WebGL not supported by the browser', { extra: { userAgent: navigator.userAgent } });
+        console.error(`WebGL not supported by the browser - userAgent: ${navigator.userAgent}`);
         setIsWebglNotSupported(true);
         setError(t('webgl-not-supported'));
     }
     return (
         <ThemeProvider>
             <GlobalReset />
-            <GlobalStyle />
+            <GlobalStyle $hideCanvas={!isAppReady || isShuttingDown} />
             <LazyMotion features={domAnimation} strict>
                 <FloatingElements />
                 <CurrentAppSection />

diff --git a/src/components/elements/ToggleSwitch.tsx b/src/components/elements/ToggleSwitch.tsx
@@ -10,6 +10,7 @@ const Wrapper = styled.label<{ $disabled?: boolean }>`
     ${({ $disabled }) =>
         $disabled &&
         css`
+            cursor: auto;
             pointer-events: none;
             opacity: 0.8;
         `}

diff --git a/src/containers/main/Dashboard/components/VisualMode.tsx b/src/containers/main/Dashboard/components/VisualMode.tsx
@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { ToggleSwitch } from '@app/components/elements/ToggleSwitch.tsx';
-import { useAppConfigStore } from '@app/store/useAppConfigStore';
-import { useUIStore } from '@app/store/useUIStore';
+import { setVisualMode, useAppConfigStore } from '@app/store/useAppConfigStore';
+import { sidebarTowerOffset, TOWER_CANVAS_ID, useUIStore } from '@app/store/useUIStore';
 import { Typography } from '@app/components/elements/Typography';
 import {
     SettingsGroup,
@@ -13,23 +13,51 @@ import {
     SettingsGroupWrapper,
 } from '@app/containers/floating/Settings/components/SettingsGroup.styles';
 
+import { loadTowerAnimation, removeTowerAnimation, setAnimationState } from '@tari-project/tari-tower';
+
 export const ErrorTypography = styled(Typography)(({ theme }) => ({
     color: theme.palette.error.main,
 }));
 
 function VisualMode() {
     const visualMode = useAppConfigStore((s) => s.visual_mode);
-    const setVisualMode = useAppConfigStore((s) => s.setVisualMode);
+    const visualModeToggleLoading = useAppConfigStore((s) => s.visualModeToggleLoading);
     const isWebglNotSupported = useUIStore((s) => s.isWebglNotSupported);
     const { t } = useTranslation('settings', { useSuspense: false });
 
+    const handleDisable = useCallback(() => {
+        setVisualMode(false);
+        removeTowerAnimation({ canvasId: TOWER_CANVAS_ID })
+            .then(() => {
+                // Force garbage collection to clean up WebGL context
+                if (window.gc) {
+                    window.gc();
+                }
+            })
+            .catch((e) => {
+                console.error('Could not disable visual mode. Error at loadTowerAnimation:', e);
+                setVisualMode(true);
+            });
+    }, []);
+    const handleEnable = useCallback(() => {
+        loadTowerAnimation({ canvasId: TOWER_CANVAS_ID, offset: sidebarTowerOffset })
+            .then(() => {
+                setVisualMode(true);
+                setAnimationState('showVisual');
+            })
+            .catch((e) => {
+                console.error('Could not enable visual mode. Error at loadTowerAnimation:', e);
+                setVisualMode(false);
+            });
+    }, []);
-    const handleEnable = useCallback(() => {
-        loadTowerAnimation({ canvasId: TOWER_CANVAS_ID, offset: sidebarTowerOffset })
-            .then(() => {
-                setVisualMode(true);
-                setAnimationState('showVisual');
-            })
-            .catch((e) => {
-                console.error('Could not enable visual mode. Error at loadTowerAnimation:', e);
-                setVisualMode(false);
-            });
-    }, []);
+    const handleEnable = useCallback(() => {
+        const initialMemory = window.performance.memory?.usedJSHeapSize;
+        
+        loadTowerAnimation({ canvasId: TOWER_CANVAS_ID, offset: sidebarTowerOffset })
+            .then(() => {
+                setVisualMode(true);
+                setAnimationState('showVisual');
+                
+                // Monitor memory usage
+                const currentMemory = window.performance.memory?.usedJSHeapSize;
+                if (currentMemory && initialMemory && currentMemory - initialMemory > 500 * 1024 * 1024) {
+                    console.warn('High memory usage detected after enabling visual mode');
+                }
+            })
+            .catch((e) => {
+                console.error('Could not enable visual mode. Error at loadTowerAnimation:', e);
+                setVisualMode(false);
+            });
+    }, []);
-    const handleEnable = useCallback(() => {
-        loadTowerAnimation({ canvasId: TOWER_CANVAS_ID, offset: sidebarTowerOffset })
-            .then(() => {
-                setVisualMode(true);
-                setAnimationState('showVisual');
-            })
-            .catch((e) => {
-                console.error('Could not enable visual mode. Error at loadTowerAnimation:', e);
-                setVisualMode(false);
-            });
-    }, []);
+    const handleEnable = useCallback(() => {
+        const initialMemory = window.performance.memory?.usedJSHeapSize;
+        
+        loadTowerAnimation({ canvasId: TOWER_CANVAS_ID, offset: sidebarTowerOffset })
+            .then(() => {
+                setVisualMode(true);
+                setAnimationState('showVisual');
+                
+                // Monitor memory usage
+                const currentMemory = window.performance.memory?.usedJSHeapSize;
+                if (currentMemory && initialMemory && currentMemory - initialMemory > 500 * 1024 * 1024) {
+                    console.warn('High memory usage detected after enabling visual mode');
+                }
+            })
+            .catch((e) => {
+                console.error('Could not enable visual mode. Error at loadTowerAnimation:', e);
+                setVisualMode(false);
+            });
+    }, []);
+
     const handleSwitch = useCallback(() => {
-        const canvasElement = document.getElementById('canvas');
-        if (canvasElement) {
-            canvasElement.style.display = visualMode ? 'none' : 'block';
+        if (visualMode) {
+            handleDisable();
+        } else {
+            handleEnable();
         }
-        setVisualMode(!visualMode);
-    }, [setVisualMode, visualMode]);
+    }, [handleDisable, handleEnable, visualMode]);
-    const handleSwitch = useCallback(() => {
-        const canvasElement = document.getElementById('canvas');
-        if (canvasElement) {
-            canvasElement.style.display = visualMode ? 'none' : 'block';
-        if (visualMode) {
-            handleDisable();
-        } else {
-            handleEnable();
-        }
-        setVisualMode(!visualMode);
-    }, [setVisualMode, visualMode]);
-    }, [handleDisable, handleEnable, visualMode]);
+import { debounce } from 'lodash';
+
+    const handleSwitch = useCallback(
+        debounce(() => {
+            if (visualMode) {
+                handleDisable();
+            } else {
+                handleEnable();
+            }
+        }, 1000),
+        [handleDisable, handleEnable, visualMode],
+    );
-    const handleSwitch = useCallback(() => {
-        const canvasElement = document.getElementById('canvas');
-        if (canvasElement) {
-            canvasElement.style.display = visualMode ? 'none' : 'block';
-        if (visualMode) {
-            handleDisable();
-        } else {
-            handleEnable();
-        }
-        setVisualMode(!visualMode);
-    }, [setVisualMode, visualMode]);
-    }, [handleDisable, handleEnable, visualMode]);
+import { debounce } from 'lodash';
+
+    const handleSwitch = useCallback(
+        debounce(() => {
+            if (visualMode) {
+                handleDisable();
+            } else {
+                handleEnable();
+            }
+        }, 1000),
+        [handleDisable, handleEnable, visualMode],
+    );
 
     return (
         <SettingsGroupWrapper>
@@ -41,11 +69,14 @@ function VisualMode() {
                     {isWebglNotSupported && <ErrorTypography color="error">{t('webgl-not-supported')}</ErrorTypography>}
                 </SettingsGroupContent>
                 <SettingsGroupAction style={{ alignItems: 'center' }}>
-                    <ToggleSwitch disabled={isWebglNotSupported} checked={visualMode} onChange={handleSwitch} />
+                    <ToggleSwitch
+                        disabled={visualModeToggleLoading || isWebglNotSupported}
+                        checked={visualMode}
+                        onChange={() => handleSwitch()}
+                    />
                 </SettingsGroupAction>
             </SettingsGroup>
         </SettingsGroupWrapper>
     );
 }
-
 export default VisualMode;
diff --git a/src/glApp.d.ts b/src/glApp.d.ts
diff --git a/src/global.d.ts b/src/global.d.ts
diff --git a/src/hooks/mining/useMiningUiStateMachine.ts b/src/hooks/mining/useMiningUiStateMachine.ts
@@ -1,33 +1,57 @@
 import { useAppStateStore } from '@app/store/appStateStore';
 import { useMiningStore } from '@app/store/useMiningStore';
-import { setAnimationState } from '@app/visuals';
 import { useEffect } from 'react';
+import { setAnimationState, animationStatus } from '@tari-project/tari-tower';
 import { useMiningMetricsStore } from '@app/store/useMiningMetricsStore.ts';
+import { useAppConfigStore } from '@app/store/useAppConfigStore.ts';
 
 export const useUiMiningStateMachine = () => {
     const isMiningInitiated = useMiningStore((s) => s.miningInitiated);
     const isChangingMode = useMiningStore((s) => s.isChangingMode);
     const cpuIsMining = useMiningMetricsStore((s) => s.cpu_mining_status.is_mining);
     const gpuIsMining = useMiningMetricsStore((s) => s.gpu_mining_status.is_mining);
     const setupComplete = useAppStateStore((s) => s.setupComplete);
+    const visualMode = useAppConfigStore((s) => s.visual_mode);
+    const visualModeToggleLoading = useAppConfigStore((s) => s.visualModeToggleLoading);
     const isMining = cpuIsMining || gpuIsMining;
 
-    const statusIndex = window?.glApp?.stateManager?.statusIndex;
+    const indexTrigger = animationStatus;
 
     useEffect(() => {
-        const status = window?.glApp?.stateManager?.status;
-        const notStarted = !status || status == 'not-started' || status == 'stop';
+        let isLatestEffect = true;
+        if (!visualMode || visualModeToggleLoading) return;
+        const notStarted = !animationStatus || animationStatus == 'not-started';
         if (isMining && notStarted) {
-            setAnimationState('start');
+            // Debounce animation state changes
+            const timer = setTimeout(() => {
+                if (isLatestEffect) {
+                    setAnimationState('start');
+                }
+            }, 300);
+            return () => {
+                clearTimeout(timer);
+                isLatestEffect = false;
+            };
         }
-    }, [statusIndex, isMining]);
+    }, [indexTrigger, isMining, visualMode, visualModeToggleLoading]);
 
     useEffect(() => {
-        const notStopped = window?.glApp?.stateManager?.status !== 'not-started';
+        let isLatestEffect = true;
+        if (!visualMode || visualModeToggleLoading) return;
+        const notStopped = animationStatus !== 'not-started';
         const preventStop = !setupComplete || isMiningInitiated || isChangingMode;
         const shouldStop = !isMining && notStopped && !preventStop;
         if (shouldStop) {
-            setAnimationState('stop');
+            // Debounce animation state changes
+            const timer = setTimeout(() => {
+                if (isLatestEffect) {
+                    setAnimationState('stop');
+                }
+            }, 300);
+            return () => {
+                clearTimeout(timer);
+                isLatestEffect = false;
+            };
         }
-    }, [statusIndex, setupComplete, isMiningInitiated, isMining, isChangingMode]);
+    }, [indexTrigger, setupComplete, isMiningInitiated, isMining, isChangingMode, visualMode, visualModeToggleLoading]);
 };
diff --git a/src/main.tsx b/src/main.tsx
@@ -3,8 +3,13 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import AppWrapper from './App/AppWrapper.tsx';
 
-const root = createRoot(document.getElementById('root') as HTMLElement);
+document.addEventListener('DOMContentLoaded', () => {
+    if (!window.WebGL2RenderingContext && !window.WebGLRenderingContext) {
+        console.error('WebGL not supported!');
+    }
+});
 
+const root = createRoot(document.getElementById('root') as HTMLElement);
 root.render(
     <StrictMode>
         <AppWrapper />