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 + + + + + + + + + +
+ +
+ + + + + + 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" + } + diff --git a/dexFinal/dex/src/components/Header.js b/dexFinal/dex/src/components/Header.js index 3e104ab1a..0f451008d 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 "../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"}
+
+
+ + + +
+ +
); 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]; + +}; +