wip: views

tari-project · Feb 27, 2025 · 883bae8 · 883bae8
1 parent aa11bc2
commit 883bae8
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 19 deletions.
diff --git a/src/containers/main/Dashboard/Dashboard.tsx b/src/containers/main/Dashboard/Dashboard.tsx
@@ -1,10 +1,18 @@
 import MiningView from './MiningView/MiningView';
 import { DashboardContentContainer } from './styles';
+import { useUIStore } from '@app/store/useUIStore.ts';
 
 export default function Dashboard() {
+    const view = useUIStore((s) => s.view);
     return (
         <DashboardContentContainer>
-            <MiningView />
+            {view === 'mining' ? (
+                <MiningView />
+            ) : (
+                <div>
+                    <h1>{`hello i am a wallet view`}</h1>
+                </div>
+            )}
         </DashboardContentContainer>
     );
 }
diff --git a/src/containers/main/MainView.tsx b/src/containers/main/MainView.tsx
@@ -2,14 +2,22 @@ import { useAppConfigStore } from '@app/store/useAppConfigStore';
 import { Dashboard } from '@app/containers/main/Dashboard';
 import SidebarNavigation from '@app/containers/main/SidebarNavigation/SidebarNavigation.tsx';
 import { DashboardContainer } from '@app/theme/styles.ts';
+import { useUIStore } from '@app/store/useUIStore.ts';
 
 export default function MainView() {
     const visualMode = useAppConfigStore((s) => s.visual_mode);
+    const view = useUIStore((s) => s.view);
 
     return (
         <DashboardContainer $visualModeOff={!visualMode}>
             <SidebarNavigation />
-            <Dashboard />
+            {view === 'mining' ? (
+                <Dashboard />
+            ) : (
+                <div>
+                    <h1>{`hello i am a wallet view`}</h1>
+                </div>
+            )}
         </DashboardContainer>
     );
 }
diff --git a/src/containers/main/SidebarNavigation/Sidebars/SidebarMini.tsx b/src/containers/main/SidebarNavigation/Sidebars/SidebarMini.tsx
@@ -1,4 +1,5 @@
 import { memo, useState } from 'react';
+import * as m from 'motion/react-m';
 
 import OpenSettingsButton from '@app/containers/floating/Settings/components/OpenSettingsButton.tsx';
 import { CubeOutlineSVG } from '@app/assets/icons/cube-outline.tsx';
@@ -10,36 +11,56 @@ import { useUIStore } from '@app/store/useUIStore.ts';
 import { setAnimationProperties } from '@app/visuals.ts';
 import { IconButton } from '@app/components/elements/buttons/IconButton.tsx';
 import { TariOutlineSVG } from '@app/assets/icons/tari-outline.tsx';
+import { IoChevronForwardOutline } from 'react-icons/io5';
 
 const SidebarMini = memo(function SidebarMini() {
     const setSidebarOpen = useUIStore((s) => s.setSidebarOpen);
     const sidebarOpen = useUIStore((s) => s.sidebarOpen);
-    const [activesection, setActiveSection] = useState<'main' | 'wallet'>('main');
+    const setView = useUIStore((s) => s.setView);
+    const view = useUIStore((s) => s.view);
+
+    const miningActive = view === 'mining';
+
+    const [minerHovered, setMinerHovered] = useState(false);
 
     function handleMiningClick() {
-        if (activesection !== 'main') {
-            setActiveSection('main');
+        if (!miningActive) {
+            setView('mining');
         } else {
             setSidebarOpen(!sidebarOpen);
             const offset = ((sidebarOpen ? SB_MINI_WIDTH : SB_WIDTH) + SB_SPACING) / window.innerWidth;
             setAnimationProperties([{ property: 'cameraOffsetX', value: offset }]);
         }
     }
+    const rotate = sidebarOpen ? '180deg' : '0deg';
+    const minerIcon =
+        minerHovered && miningActive ? (
+            <m.div
+                animate={{ rotate, transition: { type: 'spring' } }}
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', rotate }}
+            >
+                <IoChevronForwardOutline size={28} />
+            </m.div>
+        ) : (
+            <CubeOutlineSVG />
+        );
     return (
         <SidebarWrapper style={{ width: SB_MINI_WIDTH }}>
             <MinimizedWrapper>
                 <LogoWwrapper>
                     <TariOutlineSVG />
                 </LogoWwrapper>
                 <CTAWrapper>
-                    <IconButton variant="secondary" active={activesection === 'main'} onClick={handleMiningClick}>
-                        <CubeOutlineSVG />
-                    </IconButton>
                     <IconButton
                         variant="secondary"
-                        active={activesection === 'wallet'}
-                        onClick={() => setActiveSection('wallet')}
+                        active={view === 'mining'}
+                        onClick={handleMiningClick}
+                        onMouseEnter={() => setMinerHovered(true)}
+                        onMouseLeave={() => setMinerHovered(false)}
                     >
+                        {minerIcon}
+                    </IconButton>
+                    <IconButton variant="secondary" active={view === 'wallet'} onClick={() => setView('wallet')}>
                         <WalletOutlineSVG />
                     </IconButton>
                 </CTAWrapper>

diff --git a/src/store/types.ts b/src/store/types.ts
@@ -1,4 +1,3 @@
-export type viewType = 'setup' | 'tribes' | 'mining';
-export type backgroundType = 'onboarding' | 'idle' | 'determining' | 'loading' | 'mining' | 'loser' | 'winner';
+export type ViewType = 'mining' | 'wallet';
 export type modeType = 'Eco' | 'Ludicrous' | 'Custom';
 export type displayMode = 'system' | 'dark' | 'light';
diff --git a/src/store/useUIStore.ts b/src/store/useUIStore.ts
@@ -1,5 +1,5 @@
 import { create } from './create';
-import { backgroundType, viewType } from './types.ts';
+import { ViewType } from './types.ts';
 import { Theme } from '@app/theme/types.ts';
 import { setAnimationProperties } from '@app/visuals.ts';
 import { useAppConfigStore } from './useAppConfigStore.ts';
@@ -10,8 +10,7 @@ type DialogType = DialogTypeTuple[number];
 
 interface State {
     theme: Theme;
-    background: backgroundType;
-    view: viewType;
+    view: ViewType;
     latestVersion?: string;
     sidebarOpen: boolean;
     showExperimental: boolean;
@@ -23,7 +22,6 @@ interface State {
     adminShow?: 'setup' | 'main' | 'shutdown' | 'orphanChainWarning' | null;
 }
 interface Actions {
-    setBackground: (background: State['background']) => void;
     setView: (view: State['view']) => void;
     setSidebarOpen: (sidebarOpen: State['sidebarOpen']) => void;
     setShowExperimental: (showExperimental: boolean) => void;
@@ -38,8 +36,7 @@ const initialDarkMode = window.matchMedia && window.matchMedia('(prefers-color-s
 const initialState: State = {
     isWebglNotSupported: false,
     theme: initialDarkMode ? 'dark' : 'light',
-    background: 'onboarding',
-    view: 'setup',
+    view: 'mining',
     sidebarOpen: false,
     dialogToShow: null,
     showExperimental: false,
@@ -50,7 +47,6 @@ const initialState: State = {
 
 export const useUIStore = create<UIStoreState>()((set) => ({
     ...initialState,
-    setBackground: (background) => set({ background }),
     setView: (view) => set({ view }),
     setSidebarOpen: (sidebarOpen) => set({ sidebarOpen }),
     setShowExperimental: (showExperimental) => set({ showExperimental }),