diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx index 971930d..0d605c3 100644 --- a/frontend/src/pages/AboutPage.jsx +++ b/frontend/src/pages/AboutPage.jsx @@ -96,10 +96,10 @@ const additionalFeatures = [ const AboutPage = () => { return ( <> -
+
{ animate={{ opacity: 1, y: 0 }} transition={{ duration: 1.2 }} > - DecenTrade is a decentralized digital marketplace built - on the Ethereum blockchain, empowering users to engage - in secure and transparent transactions for digital - assets. + DecenTrade is a decentralized digital marketplace built on the Ethereum blockchain, + empowering users to engage in secure and transparent transactions for digital assets.
{features.map((feature) => (

- {feature.icon} {feature.title} + {feature.title}

{feature.description} @@ -141,16 +139,17 @@ const AboutPage = () => {

-

Our Vision

+

+ Our Vision +

- At DecenTrade, we envision a world where digital assets - are easily accessible, allowing everyone to participate - in the digital economy. + At DecenTrade, we envision a world where digital assets are easily accessible, + allowing everyone to participate in the digital economy. { animate={{ opacity: 1, y: 0 }} transition={{ duration: 1.8 }} > - Our mission is to create a secure, transparent, and - user-friendly platform for trading various digital - assets, empowering creators and collectors alike. + Our mission is to create a secure, transparent, and user-friendly platform for + trading various digital assets, empowering creators and collectors alike.
-

+

Why Choose Us?

{additionalFeatures.map((item) => ( {
- - ) -} + ); +}; export default AboutPage diff --git a/frontend/src/pages/CreateNFTPage.jsx b/frontend/src/pages/CreateNFTPage.jsx index 065c2b4..f2a3c69 100644 --- a/frontend/src/pages/CreateNFTPage.jsx +++ b/frontend/src/pages/CreateNFTPage.jsx @@ -1,10 +1,76 @@ -import React, { useState } from 'react' -import PropTypes from 'prop-types' -import { connectWallet, createNFT } from '../utils/ethereum' -import { ethers } from 'ethers' +import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import { motion, AnimatePresence } from 'framer-motion'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons'; +import { connectWallet, createNFT } from '../utils/ethereum'; -const nftAddress = import.meta.env.VITE_NFT_ADDRESS -const marketplaceAddress = import.meta.env.VITE_MARKET_ADDRESS +const ThemeToggle = ({ className }) => { + const [darkMode, setDarkMode] = useState(false); + + const toggleDarkMode = () => { + setDarkMode((prevMode) => !prevMode); + document.body.classList.toggle('dark', !darkMode); + }; + + useEffect(() => { + const savedMode = localStorage.getItem('darkMode') === 'true'; + setDarkMode(savedMode); + document.body.classList.toggle('dark', savedMode); + }, []); + + useEffect(() => { + localStorage.setItem('darkMode', darkMode); + }, [darkMode]); + + return ( + + + {darkMode ? ( + + + + ) : ( + + + + )} + + + + + ); +}; const CreateNFT = ({ wallet }) => { const [formData, setFormData] = useState({ @@ -12,7 +78,7 @@ const CreateNFT = ({ wallet }) => { description: '', price: '', file: null, - }) + }); const [dragging, setDragging] = useState(false); const handleChange = (e) => { @@ -21,29 +87,28 @@ const CreateNFT = ({ wallet }) => { ...prevState, [name]: files ? files[0] : value, })); - } + }; const handleDragOver = (e) => { e.preventDefault(); - if (!dragging) setDragging(true); // Prevent unnecessary reassignments - } + if (!dragging) setDragging(true); + }; const handleDragLeave = () => { - if (dragging) setDragging(false); // Prevent unnecessary reassignments - } + if (dragging) setDragging(false); + }; const handleDrop = (e) => { e.preventDefault(); setDragging(false); const droppedFiles = e.dataTransfer.files; - if (droppedFiles && droppedFiles[0]) { setFormData((prevState) => ({ ...prevState, file: droppedFiles[0], })); } - } + }; const handleFileChange = (e) => { const file = e.target.files[0]; @@ -51,27 +116,23 @@ const CreateNFT = ({ wallet }) => { ...prevState, file: file, })); - } + }; const handleCancelFile = () => { setFormData((prevState) => ({ ...prevState, file: null, })); - } + }; const handleSubmit = async (e) => { - e.preventDefault() - + e.preventDefault(); try { - const { name, description, price, file } = formData - + const { name, description, price, file } = formData; if (!name || !description || !price || !file) { - throw new Error('All fields are required') + throw new Error('All fields are required'); } - - const signer = await connectWallet() - + const signer = await connectWallet(); try { const tokenId = await createNFT( signer, @@ -79,33 +140,34 @@ const CreateNFT = ({ wallet }) => { description, price, file, - nftAddress, - marketplaceAddress - ) - console.log('NFT created and listed with token ID:', tokenId) + import.meta.env.VITE_NFT_ADDRESS, + import.meta.env.VITE_MARKET_ADDRESS + ); + console.log('NFT created and listed with token ID:', tokenId); } catch (error) { - console.error('Failed to create and list NFT:', error) + console.error('Failed to create and list NFT:', error); } } catch (error) { - console.error('Error creating NFT:', error) + console.error('Error creating NFT:', error); } - } + }; return ( -
-
+ -

+ +

CREATE NFT

+
+
+
+
+
-
+
- ) -} + ); +}; CreateNFT.propTypes = { wallet: PropTypes.object.isRequired, -} +}; -export default CreateNFT +export default CreateNFT; \ No newline at end of file