wip: wallet components

src/App/App.styles.ts

@@ -39,6 +39,8 @@ export const AppContentContainer = styled(m.div).attrs({
     animate: 'visible',
     exit: 'exit',
 })`
-    width: 100vw;
-    height: 100vh;
+    min-width: 100vw;
+    min-height: 100vh;
+    height: 100%;
+    width: 100%;
 `;

src/components/transactions/Balance.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import WalletBalanceMarkup from '@app/containers/main/SidebarNavigation/components/Wallet/WalletBalanceMarkup.tsx';
+import { Typography } from '@app/components/elements/Typography.tsx';
+
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+`;
+
+export function Balance() {
+    return (
+        <Wrapper>
+            <Typography>{`My Tari`}</Typography>
+            <WalletBalanceMarkup />
+        </Wrapper>
+    );
+}

src/containers/main/Dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
-import MiningView from './MiningView/MiningView';
 import { DashboardContentContainer } from './styles';
 import { useUIStore } from '@app/store/useUIStore.ts';
-import WalletView from '@app/containers/main/Dashboard/WalletView/WalletView.tsx';
+import WalletView from './WalletView/WalletView.tsx';
+import MiningView from './MiningView/MiningView';
 
 export default function Dashboard() {
     const view = useUIStore((s) => s.view);

src/containers/main/Dashboard/MiningView/MiningView.styles.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const MiningViewContainer = styled.div`
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: center;
     width: 100%;
     height: 100%;
     position: relative;

src/containers/main/Dashboard/WalletView/WalletView.styles.ts

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 export const WalletViewContainer = styled.div`
     display: flex;
     flex-direction: column;
-    align-items: center;
     width: 100%;
+    pointer-events: all;
     height: 100%;
+    padding: calc(5rem + 1.5vmin) calc(5rem + 1vmin) 0;
 `;

src/containers/main/Dashboard/WalletView/WalletView.tsx

@@ -1,10 +1,11 @@
 import { memo } from 'react';
 import { WalletViewContainer } from '@app/containers/main/Dashboard/WalletView/WalletView.styles.ts';
+import { Balance } from '@app/components/transactions/Balance.tsx';
 
 const WalletView = memo(function WalletView() {
     return (
         <WalletViewContainer>
-            <h1>{`👻`}</h1>
+            <Balance />
         </WalletViewContainer>
     );
 });

src/containers/main/Dashboard/styles.ts

@@ -2,12 +2,8 @@ import * as m from 'motion/react-m';
 import styled from 'styled-components';
 
 export const DashboardContentContainer = styled(m.div)`
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
     height: 100%;
-    flex-grow: 1;
+    width: 100%;
     position: relative;
 `;
 

src/theme/styles.ts

@@ -6,12 +6,13 @@ export const SB_WIDTH = 348;
 export const SB_SPACING = 20;
 
 export const DashboardContainer = styled.div<{ $visualModeOff?: boolean }>`
-    display: grid;
-    grid-template-columns: ${`${SB_WIDTH + SB_MINI_WIDTH + SB_SPACING}px`} auto;
+    display: flex;
+    justify-content: space-between;
     position: relative;
     gap: 20px;
     padding: 20px;
-    height: 100%;
+    height: 100vh;
+    width: 100vw;
 
     &:after {
         content: '';