IAmJaysWay · prafulljosh · Apr 29, 2023 · Apr 29, 2023 · Apr 29, 2023 · Apr 29, 2023
diff --git a/dexFinal/dex/public/index.html b/dexFinal/dex/public/index.html
@@ -1,43 +1,128 @@
 <!DOCTYPE html>
+
 <html lang="en">
+
   <head>
+
     <meta charset="utf-8" />
+
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
     <meta name="theme-color" content="#000000" />
+
     <meta
+
       name="description"
+
       content="Web site created using create-react-app"
+
     />
+
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
     <!--
+
       manifest.json provides metadata used when your web app is installed on a
+
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+
     -->
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <!--
+
       Notice the use of %PUBLIC_URL% in the tags above.
+
       It will be replaced with the URL of the `public` folder during the build.
+
       Only files inside the `public` folder can be referenced from the HTML.
 
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+
       work correctly both with client-side routing and a non-root public URL.
+
       Learn how to configure a non-root public URL by running `npm run build`.
+
     -->
+
     <title>Moralis DEX</title>
+
+    <link rel="stylesheet" href="./css/styles.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+
+    <style>
+
+      #loader {
+
+        position: absolute;
+
+        top: 50%;
+
+        left: 50%;
+
+        transform: translate(-50%, -50%);
+
+        z-index: 9999;
+
+        border: 16px solid #f3f3f3;
+
+        border-top: 16px solid #3498db;
+
+        border-radius: 50%;
+
+        width: 120px;
+
+        height: 120px;
+
+        animation: spin 2s linear infinite;
+
+      }
+
+
+
+      @keyframes spin {
+
+        0% { transform: rotate(0deg); }
+
+        100% { transform: rotate(360deg); }
+
+      }
+
+    </style>
+
   </head>
+
   <body>
+
     <noscript>You need to enable JavaScript to run this app.</noscript>
+
     <div id="root"></div>
+
+    <div id="loader"></div>
+
     <!--
+
       This HTML file is a template.
+
       If you open it directly in the browser, you will see an empty page.
 
       You can add webfonts, meta tags, or analytics to this file.
+
       The build step will place the bundled scripts into the <body> tag.
 
       To begin the development, run `npm start` or `yarn start`.
+
       To create a production bundle, use `npm run build` or `yarn build`.
+
     -->
+
+    <script src="./js/index.js"></script>
+
   </body>
+
 </html>
+
diff --git a/dexFinal/dex/public/manifest.json b/dexFinal/dex/public/manifest.json
@@ -1,25 +1,58 @@
 {
+
   "short_name": "Moralis DEX",
+
   "name": "Moralis DEX",
+
   "icons": [
+
     {
+
       "src": "favicon.ico",
+
       "sizes": "64x64 32x32 24x24 16x16",
+
       "type": "image/x-icon"
+
     },
+
     {
+
       "src": "logo192.png",
+
       "type": "image/png",
+
       "sizes": "192x192"
+
     },
+
     {
+
       "src": "logo512.png",
+
       "type": "image/png",
+
       "sizes": "512x512"
+
     }
+
   ],
+
   "start_url": ".",
+
   "display": "standalone",
+
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+
+  "background_color": "#ffffff",
+
+  "description": "A decentralized exchange built on the Moralis platform.",
+
+  "scope": "/",
+
+  "orientation": "portrait",
+
+  "lang": "en-US"
+
 }
+
diff --git a/dexFinal/dex/src/components/Header.js b/dexFinal/dex/src/components/Header.js
@@ -2,13 +2,20 @@ import React from "react";
 import Logo from "../moralis-logo.svg";
 import Eth from "../eth.svg";
 import { Link } from "react-router-dom";
+import { useDarkMode } from "../useDarkMode";
 
 function Header(props) {
 
-  const {address, isConnected, connect} = props;
+  const {address, isConnected, connect, balance} = props;
+
+  const [darkMode, toggleDarkMode] = useDarkMode();
+
+  const dropdownRef = React.useRef(null);
+  const [isActive, setIsActive] = React.useState(false);
+  const onClick = () => setIsActive(!isActive);
 
   return (
-    <header>
+    <header className={`header ${darkMode ? "dark" : ""}`}>
       <div className="leftH">
         <img src={Logo} alt="logo" className="logo" />
         <Link to="/" className="link">
@@ -23,9 +30,54 @@ function Header(props) {
           <img src={Eth} alt="eth" className="eth" />
           Ethereum
         </div>
+        <div className="balance">{balance} ETH</div>
         <div className="connectButton" onClick={connect}>
           {isConnected ? (address.slice(0,4) +"..." +address.slice(38)) : "Connect"}
         </div>
+        <div className="dropdownContainer">
+          <div className="dropdownButton" onClick={onClick}>
+            <svg
+              width="14"
+              height="7"
+              viewBox="0 0 14 7"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M1 1L7 6L13 1"
+                stroke="#2E3A59"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+          <nav
+            ref={dropdownRef}
+            className={`dropdownMenu ${isActive ? "active" : "inactive"}`}
+          >
+            <Link to="/account-settings" className="dropdownLink">
+              Account Settings
+            </Link>
+            <div className="darkModeToggle">
+              <input
+                type="checkbox"
+                id="toggle"
+                checked={darkMode}
+                onChange={toggleDarkMode}
+              />
+              <label htmlFor="toggle" className="switch"></label>
+            </div>
+            <Link to="/help" className="dropdownLink">
+              Help Center
+            </Link>
+            <Link to="/contact" className="dropdownLink">
+              Contact Us
+            </Link>
+            <Link to="/logout" className="dropdownLink">
+              Logout
+            </Link>
+          </nav>
+        </div>
       </div>
     </header>
   );

diff --git a/dexFinal/dex/src/useDarkMode.js b/dexFinal/dex/src/useDarkMode.js
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+export const useDarkMode = () => {
+
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+
+    const body = document.body;
+
+    if (darkMode) {
+
+      body.classList.add("dark");
+
+    } else {
+
+      body.classList.remove("dark");
+
+    }
+
+  }, [darkMode]);
+
+  const toggleDarkMode = () => {
+
+    setDarkMode(!darkMode);
+
+  };
+
+  return [darkMode, toggleDarkMode];
+
+};
+