Feat/add new dashboard UI

__tests__/integration/dashboard.spec.js

@@ -0,0 +1,211 @@
+describe('visiting /dashboard', () => {
+  before(() => {
+    cy.visit('/dashboard');
+  });
+
+  it('checks if url is pointing to dashboard route', () => {
+    cy.location('pathname').should('eq', '/dashboard');
+  });
+
+  it('checks if sidebar is rendered', () => {
+    const sidebarMenuOptions = [
+      {
+        name: 'Home',
+        iconPath: '/assets/Home.svg',
+        urlPath: '/',
+      },
+      {
+        name: 'Dashboard',
+        iconPath: '/assets/Dashboard.svg',
+        urlPath: 'dashboard',
+      },
+      {
+        name: 'Currency Exchange',
+        iconPath: '/assets/Swap.svg',
+        urlPath: 'currency-exchange',
+      },
+      {
+        name: 'Auction',
+        iconPath: '/assets/Auction.svg',
+        urlPath: 'auction',
+      },
+      {
+        name: 'Stocks',
+        iconPath: '/assets/Stocks.svg',
+        urlPath: 'trading',
+      },
+      {
+        name: 'Balance',
+        iconPath: '/assets/Balance.svg',
+        urlPath: 'wallet',
+      },
+    ];
+
+    cy.get('[data-testid="sidebar-logo"]').should('exist');
+    cy.get('[data-testid="sidebar-title"]').should('have.text', 'RealDevSquad');
+
+    sidebarMenuOptions.forEach((option) => {
+      cy.get(`[data-testid="sidebar-menu-icon=${option.iconPath}"]`).should(
+        'exist'
+      );
+      cy.get(`[data-testid="sidebar-menu-title-${option.name}"]`).should(
+        'have.text',
+        option.name
+      );
+    });
+
+    cy.get('[data-testid="sidebar-trade-button"]').should(
+      'have.text',
+      'Trade Now'
+    );
+    cy.get('[data-testid="sidebar-trade-button-icon"]').should('exist');
+    cy.get('[data-testid="sidebar-guide-button"]').should('exist');
+    cy.get('[data-testid="sidebar-guide-button-icon"]').should('exist');
+  });
+
+  it('checks if breadcrumbs are rendered', () => {
+    const links = ['home', 'dashboard'];
+
+    cy.get('[data-testid="breadcrumbs-separator"]').should('exist');
+
+    links.forEach((link) => {
+      cy.get(`[data-testid="breadcrumbs-link-${link}"]`).should(
+        'have.text',
+        link
+      );
+    });
+  });
+
+  it('checks if wallets section is rendered', () => {
+    const currencyData = [
+      {
+        name: 'Gold',
+        value: 110,
+        color: ' #f39c12',
+        borderColor: '#A58F20',
+      },
+      {
+        name: 'Silver',
+        value: 120,
+        color: ' #bdc3c7',
+        borderColor: '#7F7F7F',
+      },
+      {
+        name: 'Brass',
+        value: 150,
+        color: '#e67e22',
+        borderColor: '#885A01',
+      },
+    ];
+
+    cy.get('[data-testid="wallets-title"]').should('have.text', 'Wallets');
+    cy.get('[data-testid="wallets-more-assets-btn"]').should(
+      'have.text',
+      'More Assets →'
+    );
+    cy.get(`[data-testid="wallets-add-currency-btn"]`).should(
+      'have.text',
+      '+ Add Currency'
+    );
+
+    currencyData.forEach((currency) => {
+      cy.get(`[data-testid="currency-card-name-${currency.name}"]`).should(
+        'have.text',
+        currency.name
+      );
+      cy.get(`[data-testid="currency-card-value-${currency.value}"]`).should(
+        'have.text',
+        currency.value
+      );
+    });
+  });
+
+  it('checks if rds transaction graph is visible', () => {
+    const monthsList = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'Sepetember',
+      'October',
+      'November',
+      'December',
+    ];
+
+    cy.get('[data-testid="trasaction-title"]').should(
+      'have.text',
+      'RDS Transaction'
+    );
+    cy.get('[data-testid="latest-transaction-btn"]').should(
+      'have.text',
+      'Latest Transaction'
+    );
+    cy.get('[data-testid="transaction-select-month"]').should('exist');
+    cy.get('[data-testid="transaction-chart"]').should('exist');
+
+    monthsList.forEach((month) => {
+      cy.get(`[data-testid="transaction-select-month-${month}"]`).should(
+        'have.text',
+        month
+      );
+    });
+  });
+
+  it('checks if profile sidebar is rendered', () => {
+    const personData = {
+      name: 'Ankush Dharkar',
+      email: 'some.gmail.com',
+      joined: '23 August, 2022',
+      type: 'Active',
+      coins: {
+        brass: 200,
+        gold: 100,
+        silver: 300,
+      },
+    };
+
+    cy.get('[data-testid="profile-sidebar-img"]').should('exist');
+    cy.get('[data-testid="profile-sidebar-name"]').should(
+      'have.text',
+      personData.name
+    );
+    cy.get('[data-testid="profile-sidebar-email"]').should(
+      'have.text',
+      personData.email
+    );
+    cy.get('[data-testid="profile-sidebar-account-title"]').should(
+      'have.text',
+      'Account'
+    );
+    cy.get('[data-testid="profile-sidebar-joined-title"]').should(
+      'have.text',
+      'Joined'
+    );
+    cy.get('[data-testid="profile-sidebar-joined-detail"]').should(
+      'have.text',
+      personData.joined
+    );
+    cy.get('[data-testid="profile-sidebar-assets-title"]').should(
+      'have.text',
+      'Assets'
+    );
+    cy.get('[data-testid="profile-sidebar-more-asset-btn"]').should(
+      'have.text',
+      'More Assets...'
+    );
+
+    for (let coin in personData.coins) {
+      cy.get(`[data-testid=profile-sidebar-asset-${coin}]`).should(
+        'have.text',
+        coin
+      );
+      cy.get(
+        `[data-testid=profile-sidebar-asset-${personData.coins[coin]}]`
+      ).should('have.text', personData.coins[coin]);
+    }
+  });
+});

components/Sidebar/index.jsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import sidebarMenuOptions from 'constants/sidebarMenuOptions';
+import { MENU_ICON_HEIGHT, MENU_ICON_WIDTH } from 'constants/sidebarImgDetails';
+import sidebarIconPaths from 'constants/sidebarMenuIconPaths';
+import styles from './sidebar.module.css';
+
+const Sidebar = () => {
+  const [mobileToggle, setMobileToggle] = useState(false);
+  const router = useRouter();
+  const navigateTo = (url) => router.push(url);
+  const { ICON_PATH_LOGO, ICON_PATH_ARROW, ICON_PATH_INFO } = sidebarIconPaths;
+
+  const basePath = router.pathname;
+  const pagePath = router.pathname.split('/')[1];
+
+  const addActiveOptionClass = (optionURL) =>
+    pagePath === optionURL || (basePath === '/' && '/' === optionURL)
+      ? ' ' + styles.option_active
+      : '';
+
+  return (
+    <div className={styles.wrapper} data-testid="sidebar-notification">
+      <div
+        className={
+          styles.mobileToggle +
+          ` ${mobileToggle ? styles['mobileToggle--active'] : ''}`
+        }
+        onClick={() => setMobileToggle((prev) => !prev)}
+      >
+        <h3>Menu</h3>
+        <Image
+          src={ICON_PATH_ARROW}
+          width={MENU_ICON_WIDTH}
+          height={MENU_ICON_HEIGHT}
+        />
+      </div>
+
+      <aside className={styles.sidebar}>
+        <span className={styles.heading}>
+          <Image
+            data-testid="sidebar-logo"
+            src={ICON_PATH_LOGO}
+            width={50}
+            height={50}
+          />
+          <h3 data-testid="sidebar-title">RealDevSquad</h3>
+        </span>
+        <div className={styles.options}>
+          {sidebarMenuOptions.map((option, index) => {
+            return (
+              <span
+                key={index}
+                // this code below insure even if we are in nested path like currency-exchange/**/
+                //even then the link is active
+                className={styles.option + addActiveOptionClass(option.urlPath)}
+                onClick={() => navigateTo(option.urlPath)}
+              >
+                <Image
+                  data-testid={`sidebar-menu-icon=${option.iconPath}`}
+                  src={option.iconPath}
+                  className={styles.option_image}
+                  width={MENU_ICON_WIDTH}
+                  height={MENU_ICON_HEIGHT}
+                />
+                <p data-testid={`sidebar-menu-title-${option.name}`}>
+                  {option.name}
+                </p>
+                <span className={styles.option_bar}></span>
+              </span>
+            );
+          })}
+        </div>
+
+        <div className={styles.buttonWrapper}>
+          {router.pathname !== '/currency-exchange' && (
+            <button
+              data-testid="sidebar-trade-button"
+              className={styles.button}
+            >
+              <Image
+                data-testid="sidebar-trade-button-icon"
+                src={ICON_PATH_INFO}
+                width={MENU_ICON_WIDTH}
+                height={MENU_ICON_HEIGHT}
+              />
+              Trade Now
+            </button>
+          )}
+          <button data-testid="sidebar-guide-button" className={styles.button}>
+            <Image
+              data-testid="sidebar-guide-button-icon"
+              src={ICON_PATH_INFO}
+              width={MENU_ICON_WIDTH}
+              height={MENU_ICON_HEIGHT}
+            />
+            Guide
+          </button>
+        </div>
+      </aside>
+    </div>
+  );
+};
+
+export default Sidebar;