feat: wallet ui

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',
 };