diff --git a/README.md b/README.md index 266213a..cba3740 100644 --- a/README.md +++ b/README.md @@ -79,20 +79,11 @@ With Quick DApp, you can just create a simple dapp in minutes and share it with - `src/hooks/` - Custom React hooks - `useTransactionTracker.js` - Hook for tracking transaction status -## History - -In the past years, **Patrick Gallagher** created a tool named OneClick DApp for the community. However, this tool has not worked for a long time since mid-2023. So we created a new tool to replace it under the name of Web3Camp. - -## Technologies - -- React 17 -- ethers.js 5.5 -- Ant Design 4.18 -- Styled Components - ## Special Thanks -https://oneclickdapp.com +https://oneclickdapp.com (Original inspiration) + +In the past years, **Patrick Gallagher** created a tool named OneClick DApp for the community. However, this tool has not worked for a long time since mid-2023. So we created Quick dApp as a new tool to replace it under the name of Web3Camp. ## License diff --git a/package.json b/package.json index 059c0ea..1bc119c 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "oneclick-dapp", + "name": "quick-dapp", "version": "0.1.0", "private": true, "homepage": "./", diff --git a/public/index.html b/public/index.html index 17eae01..7cccd17 100644 --- a/public/index.html +++ b/public/index.html @@ -7,11 +7,11 @@ - One Click DApp ｜ a tool to instantly build a dApp + Quick dApp | a tool to instantly build a dApp diff --git a/src/components/AppCreate.jsx b/src/components/AppCreate.jsx index f2fb261..3f6f7ac 100644 --- a/src/components/AppCreate.jsx +++ b/src/components/AppCreate.jsx @@ -10,10 +10,10 @@ const { Text, Title: AntTitle } = Typography; const WD = styled.div` - padding: 40px 5%; + padding: 2em; background-color: #ffffff; + width: 100vw; flex-grow: 1; - box-shadow: 0 0 5px #e5e5e5; border-radius: 10px; max-width: 800px; margin: 0 auto; diff --git a/src/components/AppDetail.jsx b/src/components/AppDetail.jsx index fa12750..a9ac825 100644 --- a/src/components/AppDetail.jsx +++ b/src/components/AppDetail.jsx @@ -58,9 +58,11 @@ const ContractInfo = styled.div` ` const WD = styled.div` - padding: 20px 5%; + padding: 2em; background-color: #ffffff; + width: 100vw; flex-grow: 1; + border-radius: 10px; `; const Title = styled.h1` diff --git a/src/components/AppHome.jsx b/src/components/AppHome.jsx index 2ed4896..ca8e7fc 100644 --- a/src/components/AppHome.jsx +++ b/src/components/AppHome.jsx @@ -1,29 +1,119 @@ import styled from 'styled-components'; -import { Button } from 'antd'; - +import { Button, Row, Col, Card, Typography, Space } from 'antd'; +import { RocketOutlined, CodeOutlined, MobileOutlined, ApiOutlined, TeamOutlined, GlobalOutlined } from '@ant-design/icons'; import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; +import logo from '../res/logo.svg'; +const { Title: AntTitle, Paragraph, Text } = Typography; const WD = styled.div` - padding: 4em; -background-color: #ffffff; - width: 100vw; - flex-grow:1; + padding: 0; + background-color: #ffffff; + width: 100vw; + flex-grow: 1; border-radius: 10px; `; -const Title = styled.h1` -font-size: 18px; - text-align: center; - font-weight: bold; +const HeroSection = styled.div` + padding: 4em 2em; + text-align: center; + background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); + border-radius: 10px 10px 0 0; + + @media (max-width: 768px) { + padding: 3em 1em; + } +`; + +const HeroTitle = styled(AntTitle)` + margin-bottom: 16px !important; + font-size: 2.5rem !important; + + @media (max-width: 768px) { + font-size: 2rem !important; + } +`; + +const HeroSubtitle = styled(Paragraph)` + font-size: 1.2rem; + max-width: 700px; + margin: 0 auto 2rem auto !important; + color: #555; + + @media (max-width: 768px) { + font-size: 1rem; + } +`; + +const Logo = styled.img` + width: 120px; + margin-bottom: 20px; + + @media (max-width: 768px) { + width: 100px; + } `; -const BoxButton = styled.div` -margin-top: 50px; - display: flex; - justify-content: center; -` +const FeaturesSection = styled.div` + padding: 4em 2em; + background-color: white; + + @media (max-width: 768px) { + padding: 2em 1em; + } +`; + +const ContentContainer = styled.div` + max-width: 1200px; + margin: 0 auto; +`; + + +const SectionTitle = styled(AntTitle)` + text-align: center; + margin-bottom: 2em !important; +`; + +const FeatureCard = styled(Card)` + height: 100%; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); + } + + .ant-card-head-title { + font-weight: 600; + } + + .ant-card-body { + padding: 24px; + } +`; + +const IconWrapper = styled.div` + font-size: 36px; + margin-bottom: 16px; + color: #1890ff; +`; + +const CTASection = styled.div` + padding: 3em 2em; + text-align: center; + background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%); + border-radius: 0 0 10px 10px; +`; + +const CTAButton = styled(Button)` + height: 50px; + font-size: 16px; + padding: 0 32px; + border-radius: 25px; +`; export default function AppHome() { const navigate = useNavigate(); @@ -35,8 +125,82 @@ export default function AppHome() { navigate(`/new`); // Navigate to App Create page } - return - Welcome to OneClickDapp! - - + const features = [ + { + title: 'Instant dApp Creation', + description: 'Create a dApp interface for any smart contract in seconds with just the ABI and contract address.', + icon: + }, + { + title: 'Multi-Network Support', + description: 'Support for Ethereum, Polygon, Arbitrum, Optimism and other EVM-compatible networks.', + icon: + }, + { + title: 'Mobile Compatible', + description: 'Access your dApp on any device using your favorite Ethereum wallet.', + icon: + }, + { + title: 'Developer Friendly', + description: 'Clear error messages and transaction status updates for a better development experience.', + icon: + }, + { + title: 'No Coding Required', + description: 'Generate a complete interface without writing a single line of code.', + icon: + }, + { + title: 'Open Source', + description: 'Built by the Web3Camp community, free to use and open for contributions.', + icon: + } + ]; + + return ( + + + + + Instantly Create dApps for Any Smart Contract + + Quick dApp is a tool that lets you create a simple dApp interface for any smart contract in seconds. + Just paste your contract's ABI and address to get started. + + } onClick={onClickStart}> + Create Your dApp + + + + + + + Features + + {features.map((feature, index) => ( + + + {feature.icon} + {feature.title} + {feature.description} + + + ))} + + + + + + + + Ready to build your dApp? + + Get Started Now + + + + + + ); } \ No newline at end of file diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index d466c8b..72d5917 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -4,25 +4,57 @@ import TwitterImg from "../res/Twitter.png"; const Footer = styled.div` height: 80px; - width: 90%; + width: 100%; margin: 0 auto; - padding-top: 15px; + padding: 15px 5%; font-size: 14px; + background-color: #ffffff; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06); + .midBox{ display: flex; justify-content: space-between; align-items: center; } + img{ - width: 40px; - height: 40px; + width: 32px; + height: 32px; + transition: opacity 0.3s ease; + + &:hover { + opacity: 0.8; + } } + .lft{ padding-left: 10px; + color: #666; } + a{ display: inline-block; margin-left: 20px; + text-decoration: none; + color: #1890ff; + + &:hover { + color: #40a9ff; + } + } + + @media (max-width: 768px) { + height: 70px; + padding: 10px 3%; + + img { + width: 28px; + height: 28px; + } + + .lft { + font-size: 12px; + } } ` export default function footerBox(){ @@ -30,11 +62,11 @@ export default function footerBox(){
-
© 2022 Web3camp.us
+
© 2022-2025 Web3Camp.us
- + diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 6c6ee1b..8273ea0 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -3,7 +3,7 @@ import { WalletOutlined, DisconnectOutlined, CopyOutlined, HomeOutlined } from ' import { useState, useEffect } from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; -import logo from '../res/oneclick.png'; +import logo from '../res/logo.svg'; import { useDappContext } from '../store/contextProvider'; import { ethers } from 'ethers'; @@ -11,27 +11,39 @@ const HeaderTop = styled.div` display: flex; align-items: center; justify-content: space-between; - width: 100vw; - padding: 15px 5%; + width: 100%; + min-height: 64px; + padding: 0 5%; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); background-color: #ffffff; + position: sticky; + top: 0; + z-index: 1000; + + @media (max-width: 768px) { + min-height: 56px; + padding: 0 3%; + } `; const Logo = styled.div` - padding-top: .1rem; cursor: pointer; display: flex; align-items: center; + height: 100%; + padding: 8px 0; img { width: 80px; + height: auto; + + @media (max-width: 768px) { + width: 60px; + } } `; -const LogoText = styled(Typography.Title)` - margin: 0 0 0 10px !important; - font-size: 18px !important; -`; + const AccountDisplay = styled.div` display: flex; @@ -41,6 +53,7 @@ const AccountDisplay = styled.div` padding: 5px 15px; cursor: pointer; transition: all 0.3s ease; + height: 36px; &:hover { background-color: #e6f7ff; @@ -50,6 +63,15 @@ const AccountDisplay = styled.div` margin-left: 8px; font-size: 14px; } + + @media (max-width: 768px) { + padding: 4px 10px; + height: 32px; + + .address { + font-size: 12px; + } + } `; const NetworkBadge = styled.div` @@ -65,6 +87,11 @@ const HeaderActions = styled.div` display: flex; align-items: center; gap: 15px; + height: 100%; + + @media (max-width: 768px) { + gap: 8px; + } `; export default function Header() { @@ -264,8 +291,7 @@ export default function Header() { return ( - OneClick dApp Logo - OneClick dApp + Quick dApp Logo diff --git a/src/res/logo.png b/src/res/logo.png deleted file mode 100644 index 78f100c..0000000 Binary files a/src/res/logo.png and /dev/null differ diff --git a/src/res/logo.svg b/src/res/logo.svg new file mode 100644 index 0000000..7bcd905 --- /dev/null +++ b/src/res/logo.svg @@ -0,0 +1,19 @@ + + + + + + + Quick + + + dApp + + + + + + + + + diff --git a/src/res/oneclick.png b/src/res/oneclick.png deleted file mode 100644 index 92e4769..0000000 Binary files a/src/res/oneclick.png and /dev/null differ