Fix className typos error in Welcome component

client/README.md

@@ -1,15 +1,16 @@
-# Basic Sample Hardhat Project
 
-This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, a sample script that deploys that contract, and an example of a task implementation, which simply lists the available accounts.
+## 工具网站
 
-Try running some of the following tasks:
+* <https://www.rapidtables.com/convert/number/hex-to-decimal.html>
+* <https://eth-converter.com/>
 
-```shell
-npx hardhat accounts
-npx hardhat compile
-npx hardhat clean
-npx hardhat test
-npx hardhat node
-node scripts/sample-script.js
-npx hardhat help
-```
+
+## 视频信息
+
+* [视频链接](https://www.youtube.com/watch?v=Wn_Kb3MR_cU)
+* [源码链接](https://github.com/adrianhajdin/project_web3.0)
+
+
+## 部署效果访问地址
+
+<https://crazygit.wiseturtles.com/project_web3.0/>

client/package.json

@@ -1,31 +1,23 @@
 {
-  "name": "wave-app",
+  "name": "demo",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "preview": "vite preview",
+    "deploy_build": "vite build --base=/project_web3.0/"
   },
   "dependencies": {
-    "@tailwindcss/forms": "^0.3.4",
-    "autoprefixer": "^10.4.0",
-    "eth-revert-reason": "^1.0.3",
-    "ethers": "^5.5.1",
-    "framer-motion": "^5.3.1",
-    "postcss": "^8.3.11",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "ethers": "^5.5.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-icons": "^4.3.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^1.0.0",
-    "eslint": "^8.4.1",
-    "eslint-config-airbnb": "^19.0.2",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "tailwindcss": "^2.2.19",
-    "vite": "^2.6.4"
+    "@vitejs/plugin-react": "^1.0.7",
+    "autoprefixer": "^10.4.2",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.18",
+    "vite": "^2.7.2"
   }
 }

client/postcss.config.js

@@ -1,4 +1,6 @@
-const tailwindcss = require("tailwindcss");
 module.exports = {
-  plugins: [tailwindcss("./tailwind.config.js"), require("autoprefixer")],
-};
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/src/App.jsx

@@ -1,15 +1,16 @@
-import { Navbar, Welcome, Footer, Services, Transactions } from "./components";
-
-const App = () => (
-  <div className="min-h-screen">
-    <div className="gradient-bg-welcome">
-      <Navbar />
-      <Welcome />
+import { Navbar, Welcome, Loader, Footer, Services, Transactions } from "./components";
+const App = () => {
+  return (
+    <div className="min-h-screen">
+      <div className="gradient-bg-welcome">
+        <Navbar />
+        <Welcome />
+      </div>
+      <Services />
+      <Transactions />
+      <Footer />
     </div>
-    <Services />
-    <Transactions />
-    <Footer />
-  </div>
-);
+  )
+}
 
 export default App;

client/src/components/Loader.jsx

@@ -1,7 +1,7 @@
 const Loader = () => (
-  <div className="flex justify-center items-center py-3">
-    <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-red-700" />
-  </div>
+    <div className="flex justify-center items-center py-3">
+        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-red-700" />
+    </div>
 );
 
-export default Loader;
+export default Loader;

client/src/components/Navbar.jsx

@@ -1,50 +1,51 @@
-import React from "react";
-import { HiMenuAlt4 } from "react-icons/hi";
-import { AiOutlineClose } from "react-icons/ai";
+import { useState } from 'react';
+import { HiMenuAlt4 } from 'react-icons/hi';
+import { AiOutlineClose } from 'react-icons/ai';
+
+import logo from '../../images/logo.png';
 
-import logo from "../../images/logo.png";
 
 const NavBarItem = ({ title, classprops }) => (
-  <li className={`mx-4 cursor-pointer ${classprops}`}>{title}</li>
+    <li className={`mx-4 cursor-pointer ${classprops}`}>{title}</li>
 );
 
 const Navbar = () => {
-  const [toggleMenu, setToggleMenu] = React.useState(false);
-
-  return (
-    <nav className="w-full flex md:justify-center justify-between items-center p-4">
-      <div className="md:flex-[0.5] flex-initial justify-center items-center">
-        <img src={logo} alt="logo" className="w-32 cursor-pointer" />
-      </div>
-      <ul className="text-white md:flex hidden list-none flex-row justify-between items-center flex-initial">
-        {["Market", "Exchange", "Tutorials", "Wallets"].map((item, index) => (
-          <NavBarItem key={item + index} title={item} />
-        ))}
-        <li className="bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]">
-          Login
-        </li>
-      </ul>
-      <div className="flex relative">
-        {!toggleMenu && (
-          <HiMenuAlt4 fontSize={28} className="text-white md:hidden cursor-pointer" onClick={() => setToggleMenu(true)} />
-        )}
-        {toggleMenu && (
-          <AiOutlineClose fontSize={28} className="text-white md:hidden cursor-pointer" onClick={() => setToggleMenu(false)} />
-        )}
-        {toggleMenu && (
-          <ul
-            className="z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none
-            flex flex-col justify-start items-end rounded-md blue-glassmorphism text-white animate-slide-in"
-          >
-            <li className="text-xl w-full my-2"><AiOutlineClose onClick={() => setToggleMenu(false)} /></li>
-            {["Market", "Exchange", "Tutorials", "Wallets"].map(
-              (item, index) => <NavBarItem key={item + index} title={item} classprops="my-2 text-lg" />,
-            )}
-          </ul>
-        )}
-      </div>
-    </nav>
-  );
+    const [toggleMenu, setToggleMenu] = useState(false);
+    return (
+        <nav className='w-full flex md:justify-center justify-between items-center p-4 '>
+            <div className='md:flex-[0.5] flex-initial justify-center items-center'>
+                <img src={logo} alt='logo' className='w-32 cursor-pointer' />
+            </div>
+            <ul className='text-white md:flex hidden list-none flex-row justify-between items-center flex-initial'>
+                {['Market', 'Exchange', 'Tutorials', 'Wallet'].map((title, index) => (
+                    <NavBarItem key={title + index} title={title} />
+                ))}
+                <li className='bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]'>
+                    Login
+                </li>
+            </ul>
+            <div className='flex relative'>
+                {!toggleMenu && (
+                    <HiMenuAlt4 fontSize={28} className='text-white md:hidden cursor-pointer' onClick={() => setToggleMenu(true)} />
+                )}
+                {/* {toggleMenu && (
+                    <AiOutlineClose fontSize={28} className='text-white md:hidden cursor-pointer' onClick={() => setToggleMenu(false)} />
+                )} */}
+                {toggleMenu && (
+                    <ul
+                        className='z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none
+            flex flex-col justify-start items-end rounded-md blue-glassmorphism text-white animate-slide-in'
+                    >
+                        <li className='text-xl w-full my-2'><AiOutlineClose onClick={() => setToggleMenu(false)} /></li>
+                        {['Market', 'Exchange', 'Tutorials', 'Wallets'].map(
+                            (title, index) => <NavBarItem key={title + index} title={title} classprops='my-2 text-lg text-white' />,
+                        )}
+                    </ul>
+                )}
+            </div>
+        </nav>
+    );
 };
 
 export default Navbar;
+

client/src/components/Services.jsx

@@ -3,57 +3,55 @@ import { BsShieldFillCheck } from "react-icons/bs";
 import { BiSearchAlt } from "react-icons/bi";
 import { RiHeart2Fill } from "react-icons/ri";
 
+
 const ServiceCard = ({ color, title, icon, subtitle }) => (
-  <div className="flex flex-row justify-start items-start white-glassmorphism p-3 m-2 cursor-pointer hover:shadow-xl">
-    <div className={`w-10 h-10 rounded-full flex justify-center items-center ${color}`}>
-      {icon}
-    </div>
-    <div className="ml-5 flex flex-col flex-1">
-      <h3 className="mt-2 text-white text-lg">{title}</h3>
-      <p className="mt-1 text-white text-sm md:w-9/12">
-        {subtitle}
-      </p>
+    <div className="flex flex-row justify-start items-start white-glassmorphism p-3 m-2 cursor-pointer hover:shadow-xl">
+        <div className={`w-10 h-10 rounded-full flex justify-center items-center ${color}`}>
+            {icon}
+        </div>
+        <div className="ml-5 flex flex-col flex-1">
+            <h3 className="mt-2 text-white text-lg">{title}</h3>
+            <p className="mt-1 text-white text-sm md:w-9/12">{subtitle}</p>
+        </div>
     </div>
-  </div>
-);
+)
+const Services = () => {
+    return (
+        <div className="flex w-full flex-col justify-center items-center gradient-bg-services">
+            <div className="flex mf:flex-row flex-col items-center justify-between md:p-20 py-12 px-4">
+                <div className="flex flex-1 flex-col justify-start items-start">
+                    <h1 className="text-white text-3xl sm:text-5xl py-2 text-gradient">
+                        Services that we
+                        <br />
+                        continue to improve
+                    </h1>
+                    <p className="text-left my-2 text-white  foint-light md:w-9/12 w-11/12 text-base">The best choice for buying and selling your crypto assets, with the
+                        various super friendly services we offer</p>
+                </div>
+                <div className="flex-1 flex flex-col justify-center items-center">
+                    <ServiceCard
+                        color="bg-[#2952E3]"
+                        title="Security gurantee"
+                        icon={<BsShieldFillCheck fontSize={21} className="text-white" />}
+                        subtitle="Security is guranteed. We always maintain privacy and maintain the quality of our products"
+                    />
+                    <ServiceCard
+                        color="bg-[#8945F8]"
+                        title="Best exchange rates"
+                        icon={<BiSearchAlt fontSize={21} className="text-white" />}
+                        subtitle="Security is guranteed. We always maintain privacy and maintain the quality of our products"
+                    />
+                    <ServiceCard
+                        color="bg-[#F84550]"
+                        title="Fastest transactions"
+                        icon={<RiHeart2Fill fontSize={21} className="text-white" />}
+                        subtitle="Security is guranteed. We always maintain privacy and maintain the quality of our products"
+                    />
+                </div>
+            </div>
+        </div>
 
-const Services = () => (
-  <div className="flex w-full justify-center items-center gradient-bg-services">
-    <div className="flex mf:flex-row flex-col items-center justify-between md:p-20 py-12 px-4">
-      <div className="flex-1 flex flex-col justify-start items-start">
-        <h1 className="text-white text-3xl sm:text-5xl py-2 text-gradient ">
-          Services that we
-          <br />
-          continue to improve
-        </h1>
-        <p className="text-left my-2 text-white font-light md:w-9/12 w-11/12 text-base">
-          The best choice for buying and selling your crypto assets, with the
-          various super friendly services we offer
-        </p>
-      </div>
-
-      <div className="flex-1 flex flex-col justify-start items-center">
-        <ServiceCard
-          color="bg-[#2952E3]"
-          title="Security gurantee"
-          icon={<BsShieldFillCheck fontSize={21} className="text-white" />}
-          subtitle="Security is guranteed. We always maintain privacy and maintain the quality of our products"
-        />
-        <ServiceCard
-          color="bg-[#8945F8]"
-          title="Best exchange rates"
-          icon={<BiSearchAlt fontSize={21} className="text-white" />}
-          subtitle="Security is guranteed. We always maintain privacy and maintain the quality of our products"
-        />
-        <ServiceCard
-          color="bg-[#F84550]"
-          title="Fastest transactions"
-          icon={<RiHeart2Fill fontSize={21} className="text-white" />}
-          subtitle="Security is guranteed. We always maintain privacy and maintain the quality of our products"
-        />
-      </div>
-    </div>
-  </div>
-);
+    );
+}
 
-export default Services;
+export default Services;