From 82e4b06c34ff0a946e0851d2b264f4fd8f0ac108 Mon Sep 17 00:00:00 2001 From: prafulljosh <73922045+prafulljosh@users.noreply.github.com> Date: Sat, 29 Apr 2023 06:43:57 +0530 Subject: [PATCH 1/5] Update Header.js Here's an updated version with five new features: Animation Cool background effect Dark mode support Wallet balance display Dropdown menu for account settings The code now includes a dropdown menu with additional links for "Help Center", "Contact Us", and "Logout". It also includes a "switch" toggle for the dark mode feature, which allows the user to switch between light and dark themes. --- dexFinal/dex/src/components/Header.js | 56 ++++++++++++++++++++++++++- 1 file changed, 54 insertions(+), 2 deletions(-) diff --git a/dexFinal/dex/src/components/Header.js b/dexFinal/dex/src/components/Header.js index 3e104ab1a..644971ab9 100644 --- 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 "../hooks/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 ( -
+
logo @@ -23,9 +30,54 @@ function Header(props) { eth Ethereum
+
{balance} ETH
{isConnected ? (address.slice(0,4) +"..." +address.slice(38)) : "Connect"}
+
+
+ + + +
+ +
); From 8b54830b3e03c187396c45d12363c721c0b010b9 Mon Sep 17 00:00:00 2001 From: prafulljosh <73922045+prafulljosh@users.noreply.github.com> Date: Sat, 29 Apr 2023 06:45:37 +0530 Subject: [PATCH 2/5] Create useDarkMode.js ` useDarkMode.js ` is a custom hook in React that enables toggling between light and dark mode on a web application. It works by managing the state of the application's theme and toggling between a light and dark mode stylesheet based on that state. When the hook is used, it sets up the necessary event listeners and functions to toggle between light and dark mode. It also returns the current state of the theme and a function to toggle the theme. By using this hook, a developer can easily implement a light/dark mode toggle feature in their application without having to write a lot of repetitive code. --- dexFinal/dex/src/useDarkMode.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 dexFinal/dex/src/useDarkMode.js diff --git a/dexFinal/dex/src/useDarkMode.js b/dexFinal/dex/src/useDarkMode.js new file mode 100644 index 000000000..0ad0aef96 --- /dev/null +++ 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]; + +}; + From 8869baadb50a3b6c2602900538a75c5370bdefc5 Mon Sep 17 00:00:00 2001 From: prafulljosh <73922045+prafulljosh@users.noreply.github.com> Date: Sat, 29 Apr 2023 06:49:05 +0530 Subject: [PATCH 3/5] Update index.html Here is an updated version of the HTML file with 3 new features: Added a global CSS file to apply styles across the entire application. Added a custom font using Google Fonts. Added a loading spinner for when the application is initially loading. --- dexFinal/dex/public/index.html | 85 ++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) diff --git a/dexFinal/dex/public/index.html b/dexFinal/dex/public/index.html index 2b8de93d5..1ddec0dac 100644 --- a/dexFinal/dex/public/index.html +++ b/dexFinal/dex/public/index.html @@ -1,43 +1,128 @@ + + + + + + + + + + + + Moralis DEX + + + + + + + + + +
+ +
+ + + + + + From 15fcf5706341d76cba407fd7dcd6b4e7f034c6f1 Mon Sep 17 00:00:00 2001 From: prafulljosh <73922045+prafulljosh@users.noreply.github.com> Date: Sat, 29 Apr 2023 06:50:50 +0530 Subject: [PATCH 4/5] Update manifest.json I've added three new features: "description": A short description of the web app. "scope": The scope of the service worker registration. In this case, it's set to the root directory (/). "orientation": The default orientation of the web app. In this case, it's set to portrait mode. --- dexFinal/dex/public/manifest.json | 35 ++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/dexFinal/dex/public/manifest.json b/dexFinal/dex/public/manifest.json index e80112bb0..de27c280b 100644 --- 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" + } + From 9b0aae72e9218cb8cf373fc8fb906caa3f4e3517 Mon Sep 17 00:00:00 2001 From: prafulljosh <73922045+prafulljosh@users.noreply.github.com> Date: Sat, 29 Apr 2023 07:23:53 +0530 Subject: [PATCH 5/5] Update Header.js Bugs Solve --- dexFinal/dex/src/components/Header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dexFinal/dex/src/components/Header.js b/dexFinal/dex/src/components/Header.js index 644971ab9..0f451008d 100644 --- a/dexFinal/dex/src/components/Header.js +++ b/dexFinal/dex/src/components/Header.js @@ -2,7 +2,7 @@ import React from "react"; import Logo from "../moralis-logo.svg"; import Eth from "../eth.svg"; import { Link } from "react-router-dom"; -import { useDarkMode } from "../hooks/useDarkMode"; +import { useDarkMode } from "../useDarkMode"; function Header(props) {