feat: wallet ui (#10)

Description
---
Adds ui elements for the wallet and milestones - needs to be hooked up
to the backend

Motivation and Context
---

How Has This Been Tested?
---
Manually

What process can a PR reviewer use to test or verify this change?
---

<!-- Checklist -->
<!-- 1. Is the title of your PR in the form that would make nice release
notes? The title, excluding the conventional commit
tag, will be included exactly as is in the CHANGELOG, so please think
about it carefully. -->


Breaking Changes
---
x

- [x] None
- [ ] Requires data directory on base node to be deleted
- [ ] Requires hard fork
- [ ] Other - Please specify

<!-- Does this include a breaking change? If so, include this line as a
footer -->
<!-- BREAKING CHANGE: Description what the user should do, e.g. delete a
database, resync the chain -->

src/containers/SideBar/SideBar.tsx

@@ -1,6 +1,7 @@
 import Miner from './Miner/Miner';
 import Wallet from './components/Wallet';
 import Heading from './components/Heading';
+import Milestones from './components/Milestone';
 import {
   SideBarContainer,
   SideBarInner,
@@ -21,6 +22,7 @@ function SideBar() {
       </HeadingContainer>
       <SideBarInner>
         <Miner />
+        <Milestones />
         <TestButtons />
       </SideBarInner>
       <BottomContainer>

src/containers/SideBar/components/Milestone.tsx

@@ -0,0 +1,21 @@
+import { Stack, Typography } from '@mui/material';
+import { StyledLinearProgress, ProgressBox } from '../styles';
+import gem from '../../../assets/images/gem-sml.png';
+
+function Milestones() {
+  const progress = 70;
+  return (
+    <Stack spacing={0.5}>
+      <Stack direction="row" justifyContent="space-between" spacing={1}>
+        <Typography variant="body2">Next milestone</Typography>
+        <Typography variant="body2">5 XTR</Typography>
+      </Stack>
+      <ProgressBox>
+        <StyledLinearProgress variant="determinate" value={progress} />
+        <img src={gem} alt="gem" />
+      </ProgressBox>
+    </Stack>
+  );
+}
+
+export default Milestones;

src/containers/SideBar/components/Wallet.tsx

@@ -1,20 +1,87 @@
-import { Typography, Stack } from '@mui/material';
+import { Typography, Stack, Divider } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
-import { WalletContainer } from '../styles';
+import { WalletContainer, Handle, HoverStack, WalletButton } from '../styles';
 import { darkTheme } from '../../../theme/themes';
 import useAppStateStore from '../../../store/appStateStore';
+import { AddressBox, BalanceChangeChip } from '../styles';
+import { FaCircleArrowUp } from 'react-icons/fa6';
 
 function Wallet() {
   const wallet = useAppStateStore((state) => state.wallet);
+  const address = '🚀⏰🎉';
   return (
     <ThemeProvider theme={darkTheme}>
       <WalletContainer>
-        <Typography variant="body2">Wallet Balance</Typography>
-
-        <Stack direction="row" spacing={0.5} alignItems="baseline">
-          <Typography variant="h2">{wallet.balance}</Typography>
-          <Typography variant="h6">XTM</Typography>
+        <Stack
+          direction="column"
+          spacing={0.5}
+          alignItems="center"
+          width="100%"
+          height="90px"
+        >
+          <Handle />
+          <Stack
+            direction="column"
+            spacing={1}
+            alignItems="flex-end"
+            width="100%"
+          >
+            <AddressBox>{address}</AddressBox>
+          </Stack>
+        </Stack>
+        <Stack ml="10px">
+          <Typography variant="body2" mb={1}>
+            Wallet Balance
+          </Typography>
+          <Stack
+            direction="row"
+            spacing={0.5}
+            alignItems="baseline"
+            justifyContent="space-between"
+            width="100%"
+          >
+            <Stack direction="row" spacing={0.2} alignItems="baseline">
+              <Typography variant="h2" fontSize="50px">
+                {wallet.balance}
+              </Typography>
+              <Typography variant="h4">XTM</Typography>
+            </Stack>
+            <BalanceChangeChip
+              direction="up"
+              icon={<FaCircleArrowUp size={20} />}
+              label="30%"
+            />
+          </Stack>
         </Stack>
+        <HoverStack className="hover-stack">
+          <Stack
+            direction="row"
+            spacing={1}
+            justifyContent="space-between"
+            divider={<Divider orientation="vertical" />}
+            style={{
+              borderTop: '1px solid rgba(255,255,255,0.1)',
+              marginTop: '10px',
+              paddingTop: '10px',
+              width: '100%',
+            }}
+          >
+            <WalletButton
+              variant="contained"
+              fullWidth
+              onClick={() => console.log('Send')}
+            >
+              Send
+            </WalletButton>
+            <WalletButton
+              variant="contained"
+              fullWidth
+              onClick={() => console.log('Receive')}
+            >
+              Receive
+            </WalletButton>
+          </Stack>
+        </HoverStack>
       </WalletContainer>
     </ThemeProvider>
   );

src/containers/SideBar/styles.ts

@@ -1,11 +1,18 @@
 import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
+import { Box, LinearProgress, Chip, Button } from '@mui/material';
 import { headerHeight, sidebarWidth } from '../../theme/styles';
+import cardbg from '../../assets/images/card.png';
+import { keyframes } from '@emotion/react';
 
 interface SideBarContainerProps {
   sidebaropen: boolean;
 }
 
+interface BalanceChangeProps {
+  direction: 'up' | 'down';
+}
+
+// SideBar
 export const SideBarContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'sidebaropen',
 })<SideBarContainerProps>(({ theme, sidebaropen }) => ({
@@ -26,6 +33,7 @@ export const SideBarContainer = styled(Box, {
   flexDirection: 'column',
   gap: theme.spacing(2),
   justifyContent: 'flex-start',
+  overflow: 'hidden',
 }));
 
 export const SideBarInner = styled(Box)(({ theme }) => ({
@@ -42,6 +50,9 @@ export const BottomContainer = styled(Box)(({ theme }) => ({
   paddingLeft: theme.spacing(2),
   paddingRight: theme.spacing(2),
   paddingBottom: theme.spacing(2),
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
 }));
 
 export const HeadingContainer = styled(Box)(({ theme }) => ({
@@ -50,14 +61,143 @@ export const HeadingContainer = styled(Box)(({ theme }) => ({
   paddingTop: theme.spacing(2),
 }));
 
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 100px;
+  }
+`;
+
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+    max-height: 100px;
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+  }
+`;
+
+// Wallet
 export const WalletContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'stretch',
+  gap: theme.spacing(0),
+  backgroundImage: `url(${cardbg})`,
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'top left',
+  padding: theme.spacing(1),
+  borderRadius: '20px',
+  width: `calc(${sidebarWidth} - ${theme.spacing(4)})`,
+  boxShadow: '4px 4px 10px 0px rgba(0, 0, 0, 0.30)',
+  '&:hover .hover-stack': {
+    display: 'flex',
+    animation: `${fadeIn} 0.8s ease-in-out forwards`,
+  },
+  '&:not(:hover) .hover-stack': {
+    opacity: 0,
+    maxHeight: 0,
+    animation: `${fadeOut} 0.8s ease-in-out forwards`,
+  },
+}));
+
+export const HoverStack = styled(Box)(() => ({
+  display: 'flex',
+  opacity: 0,
+  maxHeight: 0,
+  overflow: 'hidden',
+  width: '100%',
+  transition: 'opacity 0.8s ease-in-out, max-height 0.8s ease-in-out',
+  '&.active': {
+    opacity: 1,
+    maxHeight: '100px',
+  },
+}));
+
+export const AddressBox = styled(Box)(({ theme }) => ({
+  backgroundColor: 'rgba(255,255,255,0.05)',
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.spacing(2),
+  padding: '5px 10px',
+  display: 'flex',
+  alignItems: 'center',
   gap: theme.spacing(0.5),
-  backgroundColor: theme.palette.background.default,
-  paddingTop: theme.spacing(1),
-  paddingBottom: theme.spacing(1),
-  paddingLeft: theme.spacing(1.5),
-  paddingRight: theme.spacing(1.5),
-  borderRadius: theme.shape.borderRadius,
+  transition: 'color 0.5s ease-in-out',
+}));
+
+export const Handle = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.text.secondary,
+  width: '52px',
+  height: '3px',
+  borderRadius: '2px',
+}));
+
+export const BalanceChangeChip = styled(Chip, {
+  shouldForwardProp: (prop) => prop !== 'direction',
+})<BalanceChangeProps>(({ theme, direction }) => ({
+  backgroundColor: 'rgba(255,255,255,0.05)',
+  border: `1px solid ${theme.palette.divider}`,
+  color:
+    direction === 'up' ? theme.palette.success.main : theme.palette.error.main,
+  borderRadius: theme.spacing(2),
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(0.5),
+  transition: 'color 0.5s ease-in-out',
+  '& .MuiChip-icon': {
+    color:
+      direction === 'up'
+        ? theme.palette.success.main
+        : theme.palette.error.main,
+    transform: direction === 'up' ? 'rotate(0deg)' : 'rotate(180deg)',
+    transition: 'color 0.5s ease-in-out, transform 0.5s ease-in-out',
+  },
+  '& .MuiChip-label': {
+    paddingLeft: '6px',
+    paddingRight: '6px',
+    fontSize: '12px',
+  },
+}));
+
+export const WalletButton = styled(Button)(({ theme }) => ({
+  backgroundColor: 'rgba(255,255,255,0.05)',
+  color: theme.palette.primary.contrastText,
+  borderRadius: '20px',
+  border: `1px solid ${theme.palette.divider}`,
+  padding: '10px',
+  height: '34px',
+  '&:hover': {
+    backgroundColor: theme.palette.divider,
+  },
+}));
+
+// Milestones
+export const ProgressBox = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  padding: '3px',
+  borderRadius: '10px',
+  width: '100%',
+  border: `1px solid ${theme.palette.divider}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: theme.spacing(0.1),
+}));
+
+export const StyledLinearProgress = styled(LinearProgress)(() => ({
+  '& .MuiLinearProgress-bar': {
+    background: 'linear-gradient(90deg, #FF7D45 0%, #FFB660 99.49%)',
+    borderRadius: '5px',
+  },
+  backgroundColor: 'transparent',
+  padding: '3px',
+  borderRadius: '10px',
+  flexGrow: 1,
 }));

src/theme/colors.ts

@@ -22,7 +22,7 @@
 
 export const success = {
   100: '#E6FAF6',
-  200: '#5F9C91',
+  200: '#06C983',
   300: '#094E41',
 };