update pages

2024-10-01 13:02:09 +05:30
parent 4482aad236
commit 12542e51cf
22 changed files with 1885 additions and 20 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,11 +12,15 @@
        "@emotion/react": "^11.13.3",
        "@emotion/styled": "^11.13.0",
        "@reduxjs/toolkit": "^2.2.7",
+        "chart.js": "^4.4.4",
        "framer-motion": "^11.5.6",
        "js-cookie": "^3.0.5",
        "react": "^18.3.1",
+        "react-chartjs-2": "^5.2.0",
        "react-dom": "^18.3.1",
-        "react-redux": "^9.1.2"
+        "react-icons": "^5.3.0",
+        "react-redux": "^9.1.2",
+        "react-router-dom": "^6.26.2"
      },
      "devDependencies": {
        "@eslint/js": "^9.9.0",
@@ -2252,6 +2256,11 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2324,6 +2333,14 @@
        }
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
+      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.22.4",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
@@ -2813,14 +2830,14 @@
      "version": "15.7.13",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/@types/react": {
      "version": "18.3.8",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.8.tgz",
      "integrity": "sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@types/prop-types": "*",
@@ -3211,6 +3228,17 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/chart.js": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
+      "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5279,6 +5307,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-chartjs-2": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-clientside-effect": {
      "version": "1.2.6",
      "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
@@ -5333,6 +5370,14 @@
        }
      }
    },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5409,6 +5454,36 @@
        }
      }
    },
+    "node_modules/react-router": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
+      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "dependencies": {
+        "@remix-run/router": "1.19.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
+      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "dependencies": {
+        "@remix-run/router": "1.19.2",
+        "react-router": "6.26.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/react-style-singleton": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
--- a/package.json
+++ b/package.json
@@ -14,11 +14,15 @@
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@reduxjs/toolkit": "^2.2.7",
+    "chart.js": "^4.4.4",
    "framer-motion": "^11.5.6",
    "js-cookie": "^3.0.5",
    "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2"
+    "react-icons": "^5.3.0",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.26.2"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,27 @@
-import { Box } from '@chakra-ui/react'
-import React from 'react'
+/* eslint-disable no-unused-vars */
+import {
+  Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  RouterProvider,
+} from "react-router-dom";
+import { route } from "./routes/_routes";
+import DefaultLayout from "./Layout/DefaultLayout";

-const App = () => {
-  return (
-    <Box>App</Box>
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    route.map(({ path, element }) => (
+      <Route
+        key={path}
+        path={path}
+        element={<DefaultLayout >{element}</DefaultLayout>}
+      />
+    ))
  )
+);
+
+function App() {
+  return <RouterProvider router={router} />;
 }

-export default App
+export default App;
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -6,11 +6,307 @@ import GlobalStateContext from "./GlobalStateContext";
 const GlobalStateProvider = ({ children }) => {
  const [isAuthenticate, setIsAuthenticate] = useState(false);

+  const [transactions, setTransactions] = useState([
+    {
+      id: 1,
+      description:
+        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzABCDEFGHIJKLMNOPQRS5674577TUV WXYZ !"§ $%&',
+      sender: 'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNO PQRSTUVWXYZ !"§ $%&45677',
+      receiver:
+        'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNO PQRSTUVWXYZ !"§ $%&45677',
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "ABCDESDJFDBJ",
+      subnetID: "A1B2C3D4E5F6G",
+    },
+    {
+      id: 2,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 3,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 4,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+  ]);
+
+  const [ overview, setOverview] = useState([
+    {
+      id: 1,
+      description:
+        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzABCDEFGHIJKLMNOPQRS5674577TUV WXYZ !"§ $%&',
+      sender: 'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNO PQRSTUVWXYZ !"§ $%&45677',
+      receiver:
+        'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNO PQRSTUVWXYZ !"§ $%&45677',
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "ABCDESDJFDBJ",
+      subnetID: "A1B2C3D4E5F6G",
+    },
+    {
+      id: 2,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 3,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 4,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 5,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 6,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 7,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 8,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 9,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 10,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+  ]);
+
+  const [ subnet, setSubnet] = useState([
+    {
+      id: 1,
+      description:
+        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzABCDEFGHIJKLMNOPQRS5674577TUV WXYZ !"§ $%&',
+      sender: 'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNO PQRSTUVWXYZ !"§ $%&45677',
+      receiver:
+        'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNO PQRSTUVWXYZ !"§ $%&45677',
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "ABCDESDJFDBJ",
+      subnetID: "A1B2C3D4E5F6G",
+    },
+    {
+      id: 2,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 3,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 4,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 5,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 6,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 7,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 8,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 9,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 10,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+    {
+      id: 11,
+      description: "anotherDescription567123ABCDESDJ123",
+      sender: "Sender2exampleABCDEFGHIJKLMNOPQRS456",
+      receiver: "Receiver2exampleABCDEFGHIJK1234",
+      contract:"A1B2C3D4E5F6G",
+      date:"18 hours ago, 29/07/2024",
+      amount:"$ 10000.12345",
+      transactionType: "TXType2Example",
+      subnetID: "S1N2P3E4T5I6D",
+    },
+  ]);
+
  return (
    <GlobalStateContext.Provider
      value={{
        isAuthenticate,
        setIsAuthenticate,
+        transactions,
+        setTransactions,
+        overview,
+        setOverview,
+        subnet,
+        setSubnet,
      }}
    >
      {children}
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -0,0 +1,45 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
+import NavBar from "../components/NavBar/NavBar";
+import Footer from "../components/Footer/Footer";
+import { Box, ScaleFade, SlideFade } from "@chakra-ui/react";
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const DefaultLayout = ({ children }) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    localStorage.setItem("light", true)
+  });
+
+  // console.log(localStorage?.getItem("light"));
+  
+
+  return (
+    <Box
+    //  bg={"red"}
+
+    //  bg={localStorage?.getItem("light") === true ?"white" : "black"}
+     >
+      <NavBar />
+      <SlideFade
+        key={location.pathname}
+        initialScale={0.9}
+        finalScale={1.2}
+        in={true}
+        transition={{
+          enter: {
+            duration: 0.5,
+            delay: 0.1,
+          },
+        }}
+      >
+        {children}
+      </SlideFade>
+      <Footer />
+    </Box>
+  );
+};
+
+export default DefaultLayout;
--- a/src/Theme/Theme.js
+++ b/src/Theme/Theme.js
@@ -0,0 +1,44 @@
+// theme.js
+import { extendTheme } from "@chakra-ui/react";
+
+const customTheme = extendTheme({
+  colors: {
+    gray: {
+      50: "#e0e0e0", // Light gray (almost white, lightest)
+      100: "#b3b3b3", // Light gray
+      200: "#808080", // Medium gray
+      300: "#4d4d4d", // Darker gray
+      400: "#262626", // Even darker gray
+      500: "#000000", // Black (your target color)
+      600: "#000000", // Black
+      700: "#000000", // Black
+      800: "#000000", // Black
+      900: "#000000", // Black (darkest)
+    },
+    deepPurple: {
+      50: "#F1EAF4",
+      100: "#DBC7E4",
+      200: "#BFA0D0",
+      300: "#9D78B8",
+      400: "#794DA0",
+      500: "#210A33",
+      600: "#1C082D",
+      700: "#160524",
+      800: "#10041C",
+      900: "#0A0212",
+    },
+  },
+  components: {
+    // Switch: {
+    //   baseStyle: {
+    //     track: {
+    //       _checked: {
+    //         bg: 'forestGreen.500', // using your custom color here
+    //       },
+    //     },
+    //   },
+    // },
+  },
+});
+
+export default customTheme;
--- a/src/assets/images/light-logo.png
+++ b/src/assets/images/light-logo.png
--- a/src/assets/images/rubix.png
+++ b/src/assets/images/rubix.png
--- a/src/components/AmountCard/AmountCard.jsx
+++ b/src/components/AmountCard/AmountCard.jsx
@@ -0,0 +1,299 @@
+import {
+  Box,
+  Container,
+  Grid,
+  GridItem,
+  HStack,
+  Text,
+  useColorMode,
+  VStack,
+} from "@chakra-ui/react";
+import React from "react";
+import { PiWalletFill } from "react-icons/pi";
+
+const AmountCard = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  return (
+    <VStack>
+      <Container maxW="6xl">
+        <Grid
+          templateColumns="repeat(4, 2fr)"
+          gap={4}
+          bg={colorMode === "light" ? "light.100" : "black.900"}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <GridItem
+            bg={
+              colorMode === "light"
+                ? "#230A7926"
+                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
+            }
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            p={3}
+            rounded={10}
+          >
+            <Box>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+              >
+                RBT Price
+              </Text>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#fff"}
+              >
+                $53,000
+              </Text>
+            </Box>
+            <Box
+              backgroundColor={"#4023A6"}
+              w={30}
+              h={30}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+              rounded={10}
+            >
+              <PiWalletFill color="white" fontSize={"20px"} />
+            </Box>
+          </GridItem>
+          <GridItem
+            bg={
+              colorMode === "light"
+                ? "#230A7926"
+                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
+            }
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            p={3}
+            rounded={10}
+          >
+            <Box>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+              >
+                RBT Price
+              </Text>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#fff"}
+              >
+                $53,000
+              </Text>
+            </Box>
+            <Box
+              backgroundColor={"#4023A6"}
+              w={30}
+              h={30}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+              rounded={10}
+            >
+              <PiWalletFill color="white" fontSize={"20px"} />
+            </Box>
+          </GridItem>
+          <GridItem
+            bg={
+              colorMode === "light"
+                ? "#230A7926"
+                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
+            }
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            p={3}
+            rounded={10}
+          >
+            <Box>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+              >
+                RBT Price
+              </Text>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#fff"}
+              >
+                $53,000
+              </Text>
+            </Box>
+            <Box
+              backgroundColor={"#4023A6"}
+              w={30}
+              h={30}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+              rounded={10}
+            >
+              <PiWalletFill color="white" fontSize={"20px"} />
+            </Box>
+          </GridItem>
+          <GridItem
+            bg={
+              colorMode === "light"
+                ? "#230A7926"
+                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
+            }
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            p={3}
+            rounded={10}
+          >
+            <Box>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+              >
+                RBT Price
+              </Text>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#fff"}
+              >
+                $53,000
+              </Text>
+            </Box>
+            <Box
+              backgroundColor={"#4023A6"}
+              w={30}
+              h={30}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+              rounded={10}
+            >
+              <PiWalletFill color="white" fontSize={"20px"} />
+            </Box>
+          </GridItem>
+          <GridItem
+            bg={
+              colorMode === "light"
+                ? "#230A7926"
+                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
+            }
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            p={3}
+            rounded={10}
+          >
+            <Box>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+              >
+                RBT Price
+              </Text>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#fff"}
+              >
+                $53,000
+              </Text>
+            </Box>
+            <Box
+              backgroundColor={"#4023A6"}
+              w={30}
+              h={30}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+              rounded={10}
+            >
+              <PiWalletFill color="white" fontSize={"20px"} />
+            </Box>
+          </GridItem>
+          <GridItem
+            bg={
+              colorMode === "light"
+                ? "#230A7926"
+                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
+            }
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            p={3}
+            rounded={10}
+          >
+            <Box>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+              >
+                RBT Price
+              </Text>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#fff"}
+              >
+                $53,000
+              </Text>
+            </Box>
+            <Box
+              backgroundColor={"#4023A6"}
+              w={30}
+              h={30}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+              rounded={10}
+            >
+              <PiWalletFill color="white" fontSize={"20px"} />
+            </Box>
+          </GridItem>
+          <GridItem
+            bg={
+              colorMode === "light"
+                ? "#230A7926"
+                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
+            }
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            p={3}
+            rounded={10}
+          >
+            <Box>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+              >
+                RBT Price
+              </Text>
+              <Text
+                fontSize={"sm"}
+                color={colorMode === "light" ? "#230A79" : "#fff"}
+              >
+                $53,000
+              </Text>
+            </Box>
+            <Box
+              backgroundColor={"#4023A6"}
+              w={30}
+              h={30}
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"center"}
+              rounded={10}
+            >
+              <PiWalletFill color="white" fontSize={"20px"} />
+            </Box>
+          </GridItem>
+        </Grid>
+      </Container>
+    </VStack>
+  );
+};
+
+export default AmountCard;
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -0,0 +1,94 @@
+// LineChart.jsx
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+} from "chart.js";
+
+// Register the necessary components
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale
+);
+
+// Sample options for the chart
+// Sample options for the chart
+const options = {
+  responsive: true,
+  plugins: {
+    legend: {
+      position: "top",
+    },
+    tooltip: {
+      callbacks: {
+        label: function (context) {
+          let label = context.dataset.label || "";
+          if (label) {
+            label += ": ";
+          }
+          if (context.parsed.y !== null) {
+            label += `${context.parsed.y}`;
+          }
+          return label;
+        },
+      },
+    },
+  },
+  animation: {
+    tension: {
+      duration: 2000,
+      easing: "linear",
+      from: 1,
+      to: 0,
+      loop: false,
+    },
+  },
+};
+
+const Utils = {
+  numbers: ({ count, min, max }) =>
+    Array.from(
+      { length: count },
+      () => Math.floor(Math.random() * (max - min + 1)) + min
+    ),
+  CHART_COLORS: {
+    darkGreen: "#978FED ",
+  },
+  transparentize: (color, opacity) => {
+    return color.replace(/(rgba\(\d+, \d+, \d+, )\d+(\))/, `$1${opacity}$2`);
+  },
+};
+
+const LineChart = ({ width = 300, height = 250 }) => {
+  const data = {
+    labels: ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC",],
+    datasets: [
+      {
+        label: "Exchange rate",
+        data: [0, 3, 2, 4, 6, 2, 4, 4, 5, 4, 4, 5],
+        borderColor: Utils.CHART_COLORS.darkGreen,
+        backgroundColor: Utils.transparentize(
+          Utils.CHART_COLORS.darkGreen,0.5
+        ),
+        pointStyle: "rectRounded",
+        pointRadius: 1,
+        pointHoverRadius: 5,
+      },
+    ],
+  };
+  return <Line data={data} options={options} />;
+};
+
+export default LineChart;
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div>
+      
+    </div>
+  )
+}
+
+export default Footer
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -0,0 +1,109 @@
+import { Box, Container, Grid, GridItem, HStack, Text, useColorMode } from "@chakra-ui/react";
+import React, { useContext } from "react";
+import { MdOutlineErrorOutline } from "react-icons/md";
+import Pagination from "../Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+
+
+
+const LatestTransactions = () => {
+
+  const { colorMode, toggleColorMode } = useColorMode();
+  const { transactions } = useContext(GlobalStateContext);
+
+  return (
+    <Box>
+      <Container maxW="6xl">
+        <Grid
+          templateColumns="10% 90%"
+          gap={0}
+          bg={colorMode === "light" ? "#230A79" : "#232127"}
+          // bg={"#232127"}
+          borderTopRightRadius={4}
+          borderTopLeftRadius={4}
+        >
+          <GridItem p={2}>
+            <Text color={"#fff"}>Sr. no</Text>
+          </GridItem>
+          <GridItem p={2}>
+            <Text color={"#fff"}>Transactions</Text>
+          </GridItem>
+        </Grid>
+        <Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
+          {transactions.map((transaction, index) => (
+            <Grid
+              bg={index % 2 === 0 ? (colorMode === "light" ? "#F2EFFF" : "#312F35") : (colorMode === "light" ? "#fff" : "#232127")}
+              key={transaction.id}
+              templateColumns="10% 90%"
+              gap={0}
+            >
+              <GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>{index + 1}.</GridItem>
+              <GridItem p={4}>
+                <Box>
+                  <Text fontSize={"sm"} mb={2} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    {transaction.description}
+                  </Text>
+                  <HStack fontSize={"sm"} gap={4} mb={2}>
+                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
+                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>{transaction.sender}</Text>
+                  </HStack>
+                  <HStack fontSize={"sm"} gap={4} mb={3}>
+                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
+                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>{transaction.receiver}</Text>
+                  </HStack>
+                  <HStack
+                    display={"flex"}
+                    justifyContent={"space-between"}
+                    w={"80%"}
+                    fontSize={"sm"}
+                    mb={3}
+                  >
+                    <Box>
+                      <Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
+                        Smart contract ID dd :
+                      </Text>
+                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.contract}</Text>
+                    </Box>
+                    <Box>
+                      <Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
+                        Date and Time Stamp :
+                      </Text>
+                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.date}</Text>
+                    </Box>
+                    <Box>
+                      <Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
+                        Amount:
+                      </Text>
+                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.amount}</Text>
+                    </Box>
+                  </HStack>
+                  <HStack fontSize={"sm"} alignItems={"flex-start"}>
+                    <MdOutlineErrorOutline
+                      fontSize={"20px"}
+                      style={{ paddingTop: "4px" }}
+                    />
+                    <Box>
+                      <HStack>
+                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Transaction type :</Text>
+                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                          {transaction.transactionType}
+                        </Text>
+                      </HStack>
+                      <HStack>
+                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
+                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.subnetID}</Text>
+                      </HStack>
+                    </Box>
+                  </HStack>
+                </Box>
+              </GridItem>
+            </Grid>
+          ))}
+        </Box>
+        <Pagination />
+      </Container>
+    </Box>
+  );
+};
+
+export default LatestTransactions;
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -0,0 +1,100 @@
+/* eslint-disable no-unused-vars */
+import {
+  Box,
+  Button,
+  Container,
+  Icon,
+  Image,
+  Stack,
+  Switch,
+  useColorMode,
+  VStack,
+} from "@chakra-ui/react";
+import { Outlet, Link, useLocation } from "react-router-dom";
+import logo from "../../assets/images/rubix.png";
+import logoLight from "../../assets/images/light-logo.png";
+import { useEffect, useState } from "react";
+import SwitchBtn from "../SwitchBtn/SwitchBtn";
+
+const NavBar = () => {
+  // const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const { colorMode, toggleColorMode } = useColorMode();
+  const [isSwitchOn, setIsSwitchOn] = useState(true);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY;
+      setIsScrolled(scrollPosition > 0);
+    };
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const theme = localStorage?.getItem("light");
+
+  return (
+    <>
+      <Box
+        position={"absolute"}
+        zIndex={"999"}
+        width={"100%"}
+        top={0}
+        left={0}
+        id="navbar"
+        // bg={colorMode === "light" ? "light" : "black.900"}
+        color={colorMode === "light" ? "light" : "black.900"}
+        padding={"15px 0px"}
+        // borderBottom={"1px solid #ccc"}
+        borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
+      >
+        <Container maxW="6xl">
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"space-between"}
+            w={"100%"}
+          >
+            <Link to="/">
+              <Image
+                src={colorMode === "light" ? logoLight : logo}
+                width={"120px"}
+              />
+            </Link>
+
+            <Box display={"flex"} alignItems={"center"} gap={7}>
+              <Link
+                to="/mainNet"
+                style={{ fontSize: "14px", fontWeight: "400" }}
+              >
+                MAIN NET
+              </Link>
+              <Link
+                to="/subnet"
+                style={{ fontSize: "14px", fontWeight: "400" }}
+              >
+                SUBNETS
+              </Link>
+              <SwitchBtn
+                isSwitchOn={isSwitchOn}
+                setIsSwitchOn={setIsSwitchOn}
+              />
+            </Box>
+          </Box>
+        </Container>
+      </Box>
+      {/* <Box h={"74px"}></Box> */}
+    </>
+  );
+};
+
+export default NavBar;
--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import {
+  Select,
+  HStack,
+  Text,
+  Box,
+  IconButton,
+  Button,
+  useColorMode,
+} from "@chakra-ui/react";
+import { FaArrowLeftLong, FaArrowRightLong } from "react-icons/fa6";
+// import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+
+const Pagination = ({
+  pageSize,
+  setPageSize,
+  totalItems,
+  isLoading,
+  setCurrentPage,
+  currentPage,
+}) => {
+  // const [] = useState(itemsPerPageOptions[0]);
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  const totalPages = Math.ceil(totalItems / pageSize);
+
+  const handlePageSizeChange = (e) => {
+    setPageSize(Number(e.target.value));
+    setCurrentPage(1); // Reset to first page whenever page size changes
+  };
+
+  const paginationPrev = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const paginationNext = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const displayRange = {
+    start: (currentPage - 1) * pageSize + 1,
+    end: Math.min(currentPage * pageSize, totalItems),
+  };
+
+  return (
+    <HStack mt={16}>
+      {/* <Text className='web-text-small'>Tanami v0.1</Text> */}
+
+      <HStack justifyContent={"space-between"} w={"100%"}>
+        <Button
+          mt={1}
+          size={"sm"}
+          rounded="md"
+          leftIcon={<FaArrowLeftLong />} // Icon on the left
+          onClick={paginationPrev}
+          className="link pointer"
+          isDisabled={currentPage === 1}
+          aria-label="Previous Page"
+          bg={colorMode === "light" ? "light.100" : "#757575"}
+          border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
+        >
+          Previous
+        </Button>
+        {/* <Text
+          w={"100px"}
+          display={"flex"}
+          justifyContent={"center"}
+          className="web-text-medium"
+          as={"span"}
+        >
+          {isLoading ? "0" : displayRange?.start} - {" "}
+          {isLoading ? "00" : displayRange?.end} of {" "}
+          {isLoading ? "00" : totalItems}
+        </Text> */
+        }
+        <Text><Text as={"span"} me={3}>1</Text> <Text as={"span"} me={3}>2</Text> <Text as={"span"} me={3}>3</Text> <Text as={"span"} me={3}>4</Text><Text as={"span"} >....</Text></Text>
+        <Button
+          mt={1}
+          size={"sm"}
+          rounded="md"
+          rightIcon={<FaArrowRightLong />} // Icon on the left
+          onClick={paginationNext}
+          className="link pointer"
+          isDisabled={currentPage === totalPages}
+          aria-label="Previous Page"
+          bg={colorMode === "light" ? "light.100" : "#757575"}
+          border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
+        >
+          Next
+        </Button>
+      </HStack>
+    </HStack>
+  );
+};
+
+export default Pagination;
--- a/src/components/SwitchBtn/SwitchBtn.jsx
+++ b/src/components/SwitchBtn/SwitchBtn.jsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { Stack, Switch, Icon, Box, Button, useColorMode } from "@chakra-ui/react";
+import { MdLightMode, MdDarkMode } from "react-icons/md";
+
+const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  const switch_onChange_handle = () => {
+    setIsSwitchOn(!isSwitchOn);
+  };
+
+  return (
+    <Box onClick={toggleColorMode}>
+       {/* {colorMode === "light" ? "Dark" : "Light"} */}
+      <Stack align="center" direction="row" spacing={4}>
+        <Box
+        bg={colorMode === "light" ? "#DFDFE1" : "#27262B"}
+        //   as="span"
+          display="flex"
+          justifyContent="normal"
+          alignItems="center"
+          width="90px"
+          height="45px"
+          borderRadius="50px"
+          // backgroundColor={"#27262B"}
+          onClick={switch_onChange_handle}
+          position="relative"
+          transition="background-color 0.2s"
+          _before={{
+            content: '""',
+            position: "absolute",
+            width: "32px",
+            height: "32px",
+            borderRadius: "50%",
+            backgroundColor: colorMode === "light" ? "#fff" : "#D9D9D933",
+            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+            transform: isSwitchOn ? "translateX(48px)" : "translateX(0)",
+            transition: "transform 0.2s",
+            left: "5px",
+            top:"6px"
+          }}
+        >
+          <Icon
+            color={colorMode === "light" ? "#F49E09" : "#fff"}
+            as={isSwitchOn ? MdLightMode : MdDarkMode}
+            // color={isSwitchOn ? "#fff" : "#fff"}
+            zIndex={1}
+            position="absolute"
+            left={isSwitchOn ? "10px" : "auto"}
+            right={isSwitchOn ? "auto" : "10px"}
+            fontSize={"25px"}
+          />
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
+
+export default SwitchBtn;
--- a/src/components/SwitchBtn/SwitchCharts.jsx
+++ b/src/components/SwitchBtn/SwitchCharts.jsx
@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  Stack,
+  Box,
+  Text,
+  useColorMode,
+} from "@chakra-ui/react";
+
+const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
+
+  const { colorMode, toggleColorMode } = useColorMode();
+
+    const switch_onChange_handle = () => {
+        setIsSwitchOn(!isSwitchOn);
+      };
+    
+
+  return (
+    <Box>
+      <Stack align="center" direction="row" spacing={4}>
+        <Box
+         bg={colorMode === "light" ? "#fff" : "#27262B"}
+         cursor={"pointer"}
+          display="flex"
+          justifyContent="normal"
+          alignItems="center"
+          width="150px"
+          height="45px"
+          borderRadius="10px"
+          // backgroundColor={"#27262B"}
+          onClick={switch_onChange_handle}
+          position="relative"
+          transition="background-color 0.2s"
+          _before={{
+            content: '""',
+            position: "absolute",
+            width: "60px",
+            height: "32px",
+            borderRadius: "10px",
+            backgroundColor: "#fff",
+            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+            transform: isSwitchOn ? "translateX(80px)" : "translateX(0)",
+            transition: "transform 0.2s",
+            left: "5px",
+            top: "6px",
+          }}
+        >
+          <Text
+            
+         color={colorMode === "light" ? "#000" : "#ccc"}
+            fontWeight="400"
+            zIndex={1}
+            position="absolute"
+            mb={0}
+            // color={isSwitchOn ? "#A9A9A9" : "#A9A9A9"}
+            left={isSwitchOn ? "10px" : "auto"}
+            right={isSwitchOn ? "auto" : "10px"}
+          >
+            {isSwitchOn ? "Monthly" : "Daily"}
+          </Text>
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
+
+export default SwitchCharts;
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,7 @@
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
+  

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
@@ -13,6 +14,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+#root{
+  width: 100%;
+}
+
 a {
  font-weight: 500;
  color: #646cff;
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,29 +2,22 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
 import { extendTheme } from "@chakra-ui/react";
 import * as ReactDOM from "react-dom/client";

 import { Provider } from "react-redux";
 import store from "./Store/Store.js";
 import GlobalStateProvider from "./Contexts/GlobalStateProvider.jsx";
+import customTheme from "./Theme/Theme.js";

-// 2. Extend the theme to include custom colors, fonts, etc
-const colors = {
-  brand: {
-    900: "#1a365d",
-    800: "#153e75",
-    700: "#2a69ac",
-  },
-};

-const customTheme = extendTheme({ colors });

 createRoot(document.getElementById("root")).render(
    <ChakraProvider theme={customTheme}>
      <Provider store={store}>
        <GlobalStateProvider>
+          <ColorModeScript initialColorMode={customTheme.config.initialColorMode} />
          <App />
        </GlobalStateProvider>
      </Provider>
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -0,0 +1,154 @@
+import {
+  border,
+  Box,
+  Button,
+  Container,
+  FormControl,
+  Heading,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  useColorMode,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import { IoSearch } from "react-icons/io5";
+import LineChart from "../components/Doughnut/LineChart";
+import AmountCard from "../components/AmountCard/AmountCard";
+import SwitchCharts from "../components/SwitchBtn/SwitchCharts";
+import LatestTransactions from "../components/LatestTransactions/LatestTransactions";
+import { Link } from "react-router-dom";
+import Pagination from "../components/Pagination";
+
+const Home = () => {
+  const [isSwitchOn, setIsSwitchOn] = useState(true);
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  return (
+    <>
+      <Box 
+        // bg={colorMode === "light" ? "#fff" : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%);"}
+        bg={colorMode === "light" ? "#fff" : "#000"}
+      >
+        <VStack mb={"5rem"}>
+          <Container maxW="container.sm" position={"relative"}>
+            <Box display={"flex"} alignItems={"center"} mt={"10rem"}>
+              <InputGroup
+                width={"100%"}
+                size="sm"
+                bg={colorMode === "light" ? "light.100" : "#393939"}
+                border={"none"}
+                rounded={5}
+              >
+                <Input
+                  border={`1px solid ${
+                    colorMode === "light" ? "#230A79" : "#393939"
+                  }`}
+                  h={"42px"}
+                  type="search"
+                  placeholder="Search by Transaction hash, token hash , DID or smart contract"
+                  rounded="md"
+                  focusBorderColor="#3725EA"
+                  // value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  _placeholder={colorMode === "light" ? "red" : "red"}
+                />
+                <Button
+                  zIndex={99}
+                  h={"42px"}
+                  position={"absolute"}
+                  fontWeight={400}
+                  right={"0"}
+                  top={"0"}
+                  fontSize={"sm"}
+                  border={`1px solid ${
+                    colorMode === "light" ? "#230A79" : "#393939"
+                  }`}
+                  bg={colorMode === "light" ? "transparent" : "#565252"}
+                  _hover={{
+                    border: `1px solid ${
+                      colorMode === "light" ? "#230A79" : "#393939"
+                    }`,
+                    outline: "0px",
+                  }}
+                  _focus={{ outline: "none" }}
+                >
+                  Generate short url
+                </Button>
+              </InputGroup>
+              <Box
+                pointerEvents="none"
+                position={"inherit"}
+                right={"0"}
+                // bg={"#393939"}
+                h={"42px"}
+                rounded={7}
+                w={"42px"}
+                display={"flex"}
+                justifyContent={"center"}
+                alignItems={"center"}
+                bg={colorMode === "light" ? "light.100" : "#393939"}
+                color={colorMode === "light" ? "#230A79" : "#fff"}
+                border={`1px solid ${
+                  colorMode === "light" ? "#230A79" : "#393939"
+                }`}
+              >
+                <IoSearch fontSize={"20px"} />
+              </Box>
+            </Box>
+          </Container>
+        </VStack>
+        <AmountCard />
+        <Container maxW="6xl" p={"5rem 1rem"}>
+          <Box
+            p={5}
+            rounded={10}
+            bg={colorMode === "light" ? "#DEDBEB47" : "#232127"}
+          >
+            <Box
+              display={"flex"}
+              justifyContent={"space-between"}
+              alignItems={"center"}
+            >
+              <Heading fontSize={"md"}>Transaction History</Heading>
+              <SwitchCharts
+                isSwitchOn={isSwitchOn}
+                setIsSwitchOn={setIsSwitchOn}
+              />
+            </Box>
+            <LineChart />
+          </Box>
+        </Container>
+      </Box>
+      <Box p={"5rem 0"} bg={colorMode === "light" ? "light.100" : "#101015"}>
+        <Container
+          maxW="6xl"
+          color="white"
+          display={"flex"}
+          justifyContent={"space-between"}
+          mb={6}
+        >
+          <Heading
+            fontSize={"md"}
+            fontWeight={500}
+            color={colorMode === "light" ? "#000" : "#fff"}
+          >
+            Latest Transactions
+          </Heading>
+          <Link
+            to=""
+            style={{
+              fontSize: "14px",
+              color: colorMode === "light" ? "#000" : "#fff",
+            }}
+          >
+            View all
+          </Link>
+        </Container>
+        <LatestTransactions />
+      </Box>
+    </>
+  );
+};
+
+export default Home;
--- a/src/pages/MainNet.jsx
+++ b/src/pages/MainNet.jsx
@@ -0,0 +1,187 @@
+import { Box, Container, Grid, GridItem, Heading, HStack, Select, Text, useColorMode } from "@chakra-ui/react";
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import LatestTransactions from "../components/LatestTransactions/LatestTransactions";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
+import Pagination from "../components/Pagination";
+import { MdOutlineErrorOutline } from "react-icons/md";
+
+const MainNet = () => {
+
+  const { overview } = useContext(GlobalStateContext);
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  return (
+    <Box p={"10rem 0 4rem 0"} bg={colorMode === "light" ? "#fff" : "#000"}>
+      <Container
+        maxW="6xl"
+        color="white"
+        display={"flex"}
+        justifyContent={"space-between"}
+        mb={10}
+      >
+        <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
+           Main Net - Overview
+        </Heading>
+        <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
+          View total number of records
+          <Select width={"70px"} rounded="md" size="xs">
+            <option value='option1'>10</option>
+            <option value='option2'>20</option>
+            <option value='option3'>30</option>
+          </Select>
+        </Text>
+      </Container>
+      <Box>
+        <Container maxW="6xl">
+          <Grid
+            templateColumns="10% 90%"
+            gap={0}
+            bg={colorMode === "light" ? "#230A79" : "#232127"}
+            // bg={"#232127"}
+            borderTopRightRadius={4}
+            borderTopLeftRadius={4}
+          >
+            <GridItem p={2}>
+              <Text color={"#fff"}>Sr. no</Text>
+            </GridItem>
+            <GridItem p={2}>
+              <Text color={"#fff"}>Transactions</Text>
+            </GridItem>
+          </Grid>
+          <Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
+            {overview.map((transaction, index) => (
+              <Grid
+                bg={
+                  index % 2 === 0
+                    ? colorMode === "light"
+                      ? "#F2EFFF"
+                      : "#312F35"
+                    : colorMode === "light"
+                    ? "#fff"
+                    : "#232127"
+                }
+                key={transaction.id}
+                templateColumns="10% 90%"
+                gap={0}
+              >
+                <GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>
+                  {index + 1}.
+                </GridItem>
+                <GridItem p={4}>
+                  <Box>
+                    <Text
+                      fontSize={"sm"}
+                      mb={2}
+                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                    >
+                      {transaction.description}
+                    </Text>
+                    <HStack fontSize={"sm"} gap={4} mb={2}>
+                      <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                        Sender :
+                      </Text>
+                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                        {transaction.sender}
+                      </Text>
+                    </HStack>
+                    <HStack fontSize={"sm"} gap={4} mb={3}>
+                      <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                        Receiver :
+                      </Text>
+                      <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                        {transaction.receiver}
+                      </Text>
+                    </HStack>
+                    <HStack
+                      display={"flex"}
+                      justifyContent={"space-between"}
+                      w={"80%"}
+                      fontSize={"sm"}
+                      mb={3}
+                    >
+                      <Box>
+                        <Text
+                          mb={2}
+                          color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                        >
+                          Smart contract ID dd :
+                        </Text>
+                        <Text
+                          color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        >
+                          {transaction.contract}
+                        </Text>
+                      </Box>
+                      <Box>
+                        <Text
+                          mb={2}
+                          color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                        >
+                          Date and Time Stamp :
+                        </Text>
+                        <Text
+                          color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        >
+                          {transaction.date}
+                        </Text>
+                      </Box>
+                      <Box>
+                        <Text
+                          mb={2}
+                          color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                        >
+                          Amount:
+                        </Text>
+                        <Text
+                          color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        >
+                          {transaction.amount}
+                        </Text>
+                      </Box>
+                    </HStack>
+                    <HStack fontSize={"sm"} alignItems={"flex-start"}>
+                      <MdOutlineErrorOutline
+                        fontSize={"20px"}
+                        style={{ paddingTop: "4px" }}
+                      />
+                      <Box>
+                        <HStack>
+                          <Text
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                          >
+                            Transaction type :
+                          </Text>
+                          <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                          >
+                            {transaction.transactionType}
+                          </Text>
+                        </HStack>
+                        <HStack>
+                          <Text
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                          >
+                            Subnet ID/Main net :
+                          </Text>
+                          <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                          >
+                            {transaction.subnetID}
+                          </Text>
+                        </HStack>
+                      </Box>
+                    </HStack>
+                  </Box>
+                </GridItem>
+              </Grid>
+            ))}
+          </Box>
+          <Pagination />
+        </Container>
+      </Box>
+    </Box>
+  );
+};
+
+export default MainNet;
--- a/src/pages/Subnet.jsx
+++ b/src/pages/Subnet.jsx
@@ -0,0 +1,187 @@
+import { Box, Container, Grid, GridItem, Heading, HStack, Select, Text, useColorMode } from "@chakra-ui/react";
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import LatestTransactions from "../components/LatestTransactions/LatestTransactions";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
+import Pagination from "../components/Pagination";
+import { MdOutlineErrorOutline } from "react-icons/md";
+
+const Subnet = () => {
+
+  const { overview } = useContext(GlobalStateContext);
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  return (
+    <Box p={"10rem 0 4rem 0"} bg={colorMode === "light" ? "#fff" : "#000"}>
+      <Container
+        maxW="6xl"
+        color="white"
+        display={"flex"}
+        justifyContent={"space-between"}
+        mb={10}
+      >
+        <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
+           Main Net - Overview
+        </Heading>
+        <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
+          View total number of records
+          <Select width={"70px"} rounded="md" size="xs">
+            <option value='option1'>10</option>
+            <option value='option2'>20</option>
+            <option value='option3'>30</option>
+          </Select>
+        </Text>
+      </Container>
+      <Box>
+        <Container maxW="6xl">
+          <Grid
+            templateColumns="10% 90%"
+            gap={0}
+            bg={colorMode === "light" ? "#230A79" : "#232127"}
+            // bg={"#232127"}
+            borderTopRightRadius={4}
+            borderTopLeftRadius={4}
+          >
+            <GridItem p={2}>
+              <Text color={"#fff"}>Sr. no</Text>
+            </GridItem>
+            <GridItem p={2}>
+              <Text color={"#fff"}>Transactions</Text>
+            </GridItem>
+          </Grid>
+          <Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
+            {overview.map((transaction, index) => (
+                <Grid
+                bg={
+                    index % 2 === 0
+                    ? colorMode === "light"
+                        ? "#F2EFFF"
+                        : "#312F35"
+                    : colorMode === "light"
+                    ? "#fff"
+                    : "#232127"
+                }
+                key={transaction.id}
+                templateColumns="10% 90%"
+                gap={0}
+                >
+                <GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>
+                    {index + 1}.
+                </GridItem>
+                <GridItem p={4}>
+                    <Box>
+                    <Text
+                        fontSize={"sm"}
+                        mb={2}
+                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                    >
+                        {transaction.description}
+                    </Text>
+                    <HStack fontSize={"sm"} gap={4} mb={2}>
+                        <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                        Sender :
+                        </Text>
+                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                        {transaction.sender}
+                        </Text>
+                    </HStack>
+                    <HStack fontSize={"sm"} gap={4} mb={3}>
+                        <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                        Receiver :
+                        </Text>
+                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                        {transaction.receiver}
+                        </Text>
+                    </HStack>
+                    <HStack
+                        display={"flex"}
+                        justifyContent={"space-between"}
+                        w={"80%"}
+                        fontSize={"sm"}
+                        mb={3}
+                    >
+                        <Box>
+                        <Text
+                            mb={2}
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                        >
+                            Smart contract ID dd :
+                        </Text>
+                        <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        >
+                            {transaction.contract}
+                        </Text>
+                        </Box>
+                        <Box>
+                        <Text
+                            mb={2}
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                        >
+                            Date and Time Stamp :
+                        </Text>
+                        <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        >
+                            {transaction.date}
+                        </Text>
+                        </Box>
+                        <Box>
+                        <Text
+                            mb={2}
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                        >
+                            Amount:
+                        </Text>
+                        <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        >
+                            {transaction.amount}
+                        </Text>
+                        </Box>
+                    </HStack>
+                    <HStack fontSize={"sm"} alignItems={"flex-start"}>
+                        <MdOutlineErrorOutline
+                        fontSize={"20px"}
+                        style={{ paddingTop: "4px" }}
+                        />
+                        <Box>
+                        <HStack>
+                            <Text
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                            >
+                            Transaction type :
+                            </Text>
+                            <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                            >
+                            {transaction.transactionType}
+                            </Text>
+                        </HStack>
+                        <HStack>
+                            <Text
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                            >
+                            Subnet ID/Main net :
+                            </Text>
+                            <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                            >
+                            {transaction.subnetID}
+                            </Text>
+                        </HStack>
+                        </Box>
+                    </HStack>
+                    </Box>
+                </GridItem>
+                </Grid>
+            ))}
+          </Box>
+          <Pagination />
+        </Container>
+      </Box>
+    </Box>
+  );
+};
+
+export default Subnet;
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -0,0 +1,19 @@
+
+import Home from "../pages/Home";
+import MainNet from "../pages/MainNet";
+import Subnet from "../pages/Subnet";
+
+export const route = [
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "/mainNet",
+    element: <MainNet />,
+  },
+  {
+    path: "/subnet",
+    element: <Subnet />,
+  },
+];