Initial project v1.0

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

README.md

@@ -1,2 +1,34 @@
-# CryptoWarriors-ICO-React
-BEP20 ICO  with React, Redux, Next.js Tailwindcss, Web3, wallet connect integration
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/BuyPanel/Investors.jsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+
+export default function Investors() {
+    return (
+        <div className="flex justify-center items-center bg-[lightgray] w-[160px] h-[100px] p-[10px] m-[10px] rounded-[10px]">
+            <div className="mr-[10px]">
+                <Image src='/Images/investors.svg'
+                alt='' width={50} height={50}/>
+            </div>
+            <div className='flex flex-col justify-start items-center'>
+                <p> Investors</p>
+                <p> 1242</p>
+            </div>
+        </div>
+    );
+}

components/BuyPanel/PriceBox.jsx

@@ -0,0 +1,17 @@
+import { TokenSymbol } from 'config';
+import Image from 'next/image';
+
+export default function PriceBox() {
+    return (
+        <div className="flex justify-center items-center bg-[lightgray] w-[160px] h-[100px] p-[10px] m-[10px] rounded-[10px]">
+            <div className="mr-[10px]">
+                <Image src='/Images/coins.svg'
+                alt='' width={50} height={50}/>
+            </div>
+            <div className='flex flex-col justify-start items-center'>
+                <p> {'1 ' + TokenSymbol}</p>
+                <p> 0.75 USDT</p>
+            </div>
+        </div>
+    );
+}

components/BuyPanel/Timer.jsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from "react";
+import TimerElement from "./TimerElement";
+import Web3 from 'web3';
+import { RPCURL, ContractAddress } from "config";
+import { ICO_ABI } from "config/abi";
+
+export default function Timer() {
+    const [endTime, setEndTime] = useState(1658636017);
+    const [days, setDays] = useState(12);
+    const [hours, setHours] = useState(12);
+    const [mins, setMins] = useState(12);
+    const [secs, setSecs] = useState(12);
+
+    useEffect(() => {
+        getReleaseTime();
+
+        setInterval(() => {
+          let t = new Date().getTime();
+          t = (t - (t % 1000)) / 1000;
+          let delay = endTime - t;
+          const s = delay % 60;
+          delay = (delay - s) / 60;
+          const m = delay % 60;
+          delay = (delay - m) / 60;
+          const h = delay % 24;
+          const d = (delay - h) / 24;
+          setSecs(s);
+          setMins(m);
+          setHours(h);
+          setDays(d);
+
+          console.log("timer");
+        }, 1000);
+    }, []);
+
+    async function getReleaseTime() {
+        const web3 = new Web3(RPCURL)
+        const icoContract = new web3.eth.Contract(ICO_ABI, ContractAddress);
+        let t = await icoContract.methods.releaseTime().call();
+        console.log('ico_endtime: ', t);
+        setEndTime(t);
+    }
+
+    return (
+        <div className="flex justify-center">
+            <TimerElement value={days} label='Days'/>
+            <TimerElement value={hours} label='Hours'/>
+            <TimerElement value={mins} label='Mins'/>
+            <TimerElement value={secs} label='Secs'/>
+        </div>
+    );
+}

components/BuyPanel/TimerElement.jsx

@@ -0,0 +1,8 @@
+export default function TimerElement({value, label}) {
+    return (
+        <div className="flex flex-col justify-center items-center w-[80px] h-[80px] bg-[#00b2ff] m-[10px] font-bold rounded-[5px]">
+            <p className="text-[24px] font-bold">{value}</p>
+            <p className="text-[14px] font-bold">{label}</p>
+        </div>
+    );
+}

components/BuyPanel/index.jsx

@@ -0,0 +1,51 @@
+import Investors from "./Investors";
+import PriceBox from "./PriceBox";
+import Timer from "./timer";
+import { useWeb3React } from "@web3-react/core";
+import { useDispatch } from "react-redux";
+import { showWalletConnector, showCryptoPayment } from 'store/slices/utilSlice';
+import CryptoPaymetPanel from "components/CryptoPaymentPanel";
+import { useUtil } from "store/hook";
+
+export default function BuyPanel() {
+    const { account } = useWeb3React();
+    const dispatch = useDispatch();
+    const { isCryptoPayment} = useUtil();
+
+    return (
+        <div className="flex flex-col justify-center items-center my-[40px]">
+            <p className='text-[24px] mb-[10px]'> 40% </p>
+            <div className="w-[80%] bg-[lightgray] h-[12px] rounded-[6px]">
+                <div className="w-[40%] h-full bg-[blue] rounded-[6px]"></div>
+            </div>
+            <div className='w-[80%] flex justify-between px-[30px] mb-[20px]'>
+                <p>0 USDT </p>
+                <p>15 000 000 USDT</p>
+            </div>
+            <Timer/>
+            <div className='w-[80%] flex justify-center lg:justify-between lg:-mt-[110px]'>
+                <PriceBox/>
+                <Investors/>
+            </div>
+            <div className="mt-[20px]">
+                { account &&
+                    <button className='bg-[#3434FF] hover:bg-[#2C23D2] text-[white] text-[24px] border-2 border-[#004c73] hover:border-[001927] border-b-[#001927] rounded-[6px] h-[70px] px-[30px] flex items-center justify-center w-[380px] lg:w-auto'
+                        onClick={() => {dispatch(showCryptoPayment())}}>
+                        Buy Token
+                    </button>
+                }
+                { !account &&
+                    <button className='bg-[#3434FF] hover:bg-[#2C23D2] text-[white] text-[24px] border-2 border-[#004c73] hover:border-[001927] border-b-[#001927] rounded-[6px] h-[70px] px-[30px] flex items-center justify-center w-[380px] lg:w-auto'
+                        onClick={() => {dispatch(showWalletConnector())}}
+                        >
+                        Connect Wallet
+                    </button>
+                }
+            </div>
+            { isCryptoPayment && 
+                <CryptoPaymetPanel/>
+            }
+
+        </div>
+    )
+}