DAPP1-17: added wallet view (#62)

https://3um.atlassian.net/browse/DAPP1-17

.github/workflows/ci.yml

@@ -1,102 +1,53 @@
-name: CI Pipeline
+name: Continuous Integration
 
 on:
+  push:
+    branches:
+      - main
   pull_request:
     branches:
       - main
 
 jobs:
-  scan-code:
-    name: Scan Code
+  continuous_integration:
     runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Snyk Scan
-        uses: snyk/actions/npm@v2
-        with:
-          args: test
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
 
-  test:
-    name: Run Tests
-    runs-on: ubuntu-latest
-    needs: scan-code
     steps:
-      - name: Checkout code
+      - name: Checkout code 🛎️
         uses: actions/checkout@v3
+        with:
+          clean: true
 
-      - name: Install Dependencies
-        run: npm install
-
-      - name: Run Jest Tests
-        run: npm test
-
-      - name: Run Storybook Visual Tests
-        run: npm run storybook:test
-
-  code-sandbox:
-    name: CodeSandbox CI
-    runs-on: ubuntu-latest
-    needs: test
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - name: Set Node Version
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.13.1
 
-      - name: Create CodeSandbox Environment
+      - name: Setup .npmrc file
         run: |
-          npx codesandbox-cli create
+          echo "@3um-group:registry=https://npm.pkg.github.com/" > ~/.npmrc
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
 
-  integration-tests:
-    name: Run Integration and E2E Tests
-    runs-on: ubuntu-latest
-    needs: code-sandbox
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Run Integration Tests
-        run: npm run integration-tests
-
-      - name: Run E2E Tests
-        run: npm run e2e-tests
-
-  codacy:
-    name: Update Code Quality Findings
-    runs-on: ubuntu-latest
-    needs: integration-tests
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - name: Install Packages
+        run: npm install
 
-      - name: Codacy Analysis
-        uses: codacy/codacy-analysis-cli-action@v4
-        with:
-          project-token: ${{ secrets.CODACY_PROJECT_TOKEN }}
+      - name: Run Test
+        run: npm run test
+      - name: Deploy to CodeSandbox
+        env:
+          CODESANDBOX_API_TOKEN: ${{ secrets.CODESANDBOX_API_TOKEN }}
+        run: |
+          # Install CodeSandbox CLI if not already installed
+          npm install -g codesandbox
 
-  pr-label-checker:
-    name: PR Label Checker
-    runs-on: ubuntu-latest
-    needs: codacy
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+          # Log in to CodeSandbox
+          codesandbox login --token $CODESANDBOX_API_TOKEN
 
-      - name: PR Label Checker
-        uses: pr-label-checker-action@v1
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-
-  update-project-column:
-    name: Update Quarterly GitHub Project Column
-    runs-on: ubuntu-latest
-    needs: pr-label-checker
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+          # Create or update sandbox (replace with appropriate command or API call)
+          codesandbox create --name "Fortuna" --directory .
 
-      - name: Update Project Column
-        uses: github-actions-automate-projects@v1
-        with:
-          project-column: 'Quarterly'
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+          # Optional: Publish or serve the sandbox (replace with appropriate command or API call)
+          codesandbox publish --sandbox "Fortuna" --port 3000

jest.config.ts

@@ -0,0 +1,23 @@
+export default {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'], // Use TypeScript setup if needed
+    moduleNameMapper: {
+      '^@/(.*)$': '<rootDir>/src/$1', // Alias for easy imports from src
+    },
+    transform: {
+      '^.+\\.tsx?$': 'ts-jest', // Transpile TypeScript files
+    },
+    testRegex: '(/test/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', // Custom regex to find test files in the /test/ folder
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], // Supported file extensions
+    collectCoverage: true,
+    collectCoverageFrom: [
+      'src/**/*.{ts,tsx}',
+      '!src/index.tsx', // Exclude index.tsx from coverage
+      '!src/**/*.d.ts',
+    ],
+    coverageDirectory: 'coverage', // Directory for coverage reports
+    testPathIgnorePatterns: ['/node_modules/', '/test/test-utils.tsx'],
+
+  };
+

package.json

@@ -8,10 +8,12 @@
     "preinstall": "npx npm-force-resolutions",
     "build": "REACT_APP_ENV=production react-scripts build",
     "start:prod": "REACT_APP_ENV=production react-scripts start",
-    "test": "jest",
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "keywords": [],
   "author": "",
@@ -40,11 +42,14 @@
     "clsx": "^2.1.1",
     "daisyui": "^4.12.10",
     "jest-image-snapshot": "^6.4.0",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-daisyui": "^5.0.4",
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
+    "react-icons": "^5.3.0",
+    "react-refresh": "^0.14.2",
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
     "tailwind-merge": "^2.5.2",
@@ -73,15 +78,19 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
-    "@types/jest": "^29.5.12",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.13",
+    "@types/lodash": "^4.17.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "nodemon": "^3.1.4",
     "playwright": "1.46.1",
     "prop-types": "^15.8.1",
     "tailwindcss": "^3.4.6",
-    "ts-jest": "^29.2.2",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
     "typescript": "^4.9.5",
     "webpack": "^5.93.0"
   }

src/App.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import { Header, Sidebar, SearchBar, PropertyListCard } from '@3um-group/atomic-sdk';
+import { Routes, Route } from 'react-router-dom';
+import Wallet from './pages/Wallet';
 // import { useThemeContext } from './context/ThemeContext';
 const App: React.FC = () => {
 
@@ -240,7 +242,12 @@ const App: React.FC = () => {
         </div>
       </div>
       <div className="viewContainer">
-        <PropertyList />
+
+        <Routes>
+          <Route path="/" element={<PropertyList />} />
+          <Route path="/wallet" element={<Wallet />} />
+          {/* Add more routes as needed */}
+        </Routes>
       </div>
     </div>
   );

src/components/Wallet/BalanceCard.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BalanceCardProps } from '../../types/BalanceCardTypes';
+
+const BalanceCard: React.FC<BalanceCardProps> = ({ title, amount }) => {
+  return (
+    <div className="bg-white p-4 rounded-lg shadow-md flex flex-col items-center">
+      <span className="text-xs font-bold">{title}</span>
+      <span className="text-lg font-light">{amount}</span>
+    </div>
+  );
+};
+export default BalanceCard;

src/components/Wallet/DrawerMenu.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FaHome, FaWallet, FaUser } from 'react-icons/fa';
+
+const DrawerMenu: React.FC = () => {
+  return (
+    <div className="bg-white h-20 w-full flex items-center justify-evenly rounded-t-3xl shadow-lg fixed bottom-0">
+      <span className="text-yellow-400 text-2xl cursor-pointer">
+        <FaHome data-testid="home-icon" />
+      </span>
+      <span className="text-yellow-400 text-2xl cursor-pointer">
+        <FaWallet data-testid="wallet-icon" />
+      </span>
+      <span className="text-yellow-400 text-2xl cursor-pointer">
+        <FaUser data-testid="user-icon" />
+      </span>
+    </div>
+  );
+};
+
+export default DrawerMenu;