From 41d9d03e272b6e295e24ac9a7c3e0039122d21f0 Mon Sep 17 00:00:00 2001 From: "ilge.ustun" Date: Fri, 1 Mar 2024 15:44:23 +0100 Subject: [PATCH 01/14] new frontend init --- app/.env.example | 2 + app/package.json | 6 ++ app/src/App.js | 34 ------ app/src/App.tsx | 86 ++++++++++++++++ app/src/components/FaucetForm/Faucet.css | 46 +++++++++ app/src/components/FaucetForm/Faucet.tsx | 85 +++++++++++++++ app/src/components/Loading/Loading.css | 26 +++++ app/src/components/Loading/Loading.tsx | 10 ++ app/src/components/hcaptcha/hcaptcha.css | 4 +- app/src/components/hcaptcha/hcaptcha.js | 2 +- app/src/components/loading/loading.js | 17 --- app/src/css/App.css | 62 +++++++++-- app/src/css/index.css | 18 +++- app/src/fonts/ABCMaxiRound-Regular.otf | Bin 0 -> 163320 bytes app/src/fonts/GT-Planar-Regular.ttf | Bin 0 -> 145492 bytes app/src/fonts/GT-Planar-Regular.woff | Bin 0 -> 65768 bytes app/src/fonts/GT-Planar-Regular.woff2 | Bin 0 -> 58680 bytes app/src/images/Faucet_BG.jpg | Bin 0 -> 598395 bytes app/src/images/logo.svg | 6 +- app/src/{index.js => index.tsx} | 4 +- app/tsconfig.json | 27 +++++ app/types.d.ts | 4 + app/yarn.lock | 126 ++++++++++++++++++++++- 23 files changed, 496 insertions(+), 69 deletions(-) create mode 100644 app/.env.example delete mode 100644 app/src/App.js create mode 100644 app/src/App.tsx create mode 100644 app/src/components/FaucetForm/Faucet.css create mode 100644 app/src/components/FaucetForm/Faucet.tsx create mode 100644 app/src/components/Loading/Loading.css create mode 100644 app/src/components/Loading/Loading.tsx delete mode 100644 app/src/components/loading/loading.js create mode 100644 app/src/fonts/ABCMaxiRound-Regular.otf create mode 100644 app/src/fonts/GT-Planar-Regular.ttf create mode 100644 app/src/fonts/GT-Planar-Regular.woff create mode 100644 app/src/fonts/GT-Planar-Regular.woff2 create mode 100644 app/src/images/Faucet_BG.jpg rename app/src/{index.js => index.tsx} (80%) create mode 100644 app/tsconfig.json create mode 100644 app/types.d.ts diff --git a/app/.env.example b/app/.env.example new file mode 100644 index 0000000..8d828ba --- /dev/null +++ b/app/.env.example @@ -0,0 +1,2 @@ +REACT_APP_HCAPTCHA_SITE_KEY= +REACT_APP_FAUCET_API_URL=http://localhost:8000/api/v1 \ No newline at end of file diff --git a/app/package.json b/app/package.json index 40c5f1b..e2846b3 100644 --- a/app/package.json +++ b/app/package.json @@ -10,11 +10,17 @@ "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", + "@types/jest": "^29.5.12", + "@types/node": "^20.11.21", + "@types/react": "^18.2.60", + "@types/react-dom": "^18.2.19", "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "react-select": "^5.8.0", "react-toastify": "^9.1.3", + "typescript": "^5.3.3", "web-vitals": "^2.1.0" }, "scripts": { diff --git a/app/src/App.js b/app/src/App.js deleted file mode 100644 index fd9508d..0000000 --- a/app/src/App.js +++ /dev/null @@ -1,34 +0,0 @@ -import logo from "./images/logo.svg"; -import "./css/App.css"; -import { HCaptchaForm } from "./components/hcaptcha/hcaptcha"; - -import { Fragment } from "react"; -import { Container } from "@mui/system"; -import { ToastContainer } from "react-toastify"; -import "react-toastify/dist/ReactToastify.css"; - -function App() { - return ( - - - - - logo - - - - - ); -} - -export default App; diff --git a/app/src/App.tsx b/app/src/App.tsx new file mode 100644 index 0000000..5e95c56 --- /dev/null +++ b/app/src/App.tsx @@ -0,0 +1,86 @@ +import { useEffect, useState } from "react"; +import logo from "./images/logo.svg" +import "./css/App.css"; +// import { HCaptchaForm } from "./components/hcaptcha/hcaptcha"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import axios from "axios"; +import Loading from "./components/Loading/Loading"; +import Faucet from "./components/FaucetForm/Faucet"; + +const chainName:{ [key: string]: string }= { + "100": "Gnosis", + "10200": "Chiado" +} + +function App(): JSX.Element { + const [chainId, setChainId] = useState("10200"); + const [loading, setLoading] = useState(true) + // const [enabledTokens, setEnabledTokens] = useState([]); + + const getFaucetInfo = async () => { + return axios.get(`${process.env.REACT_APP_FAUCET_API_URL}/info`); + }; + + + useEffect(() => { + getFaucetInfo() + .then((response) => { + setChainId(response.data.chainId); + // setEnabledTokens(response.data.enabledTokens); + }) + .catch(() => { + toast.error("Network error"); + }) + .finally(() => { + // setTimeout(()=> {setLoading(false)}, 5000) + setLoading(false); + }); + }, []); + + const title = loading ? "CHAIN" : `${chainName[chainId]} CHAIN` + const subtitle = loading + ? "Loading faucet..." + : (chainId === "100" ? "Faucet" : "Testnet Faucet") + + const enabledTokens = [ + { + address: "0x01", + name: "GNO", + maximumAmount: 2, + }, + { + address: "0x02", + name: "xDAI", + maximumAmount: 10, + } + ] + + return ( + <> + + {loading && } +
+ logo +
+

{title}

+

{subtitle}

+
+ + {/* */} +
+ + ); +} + +export default App; diff --git a/app/src/components/FaucetForm/Faucet.css b/app/src/components/FaucetForm/Faucet.css new file mode 100644 index 0000000..8d118d9 --- /dev/null +++ b/app/src/components/FaucetForm/Faucet.css @@ -0,0 +1,46 @@ +.faucet-container { + display: flex; + flex-direction: column; + max-width: 500px; + background: rgba(62, 105, 87, 0.7); + border-radius: 10px; + padding: 40px; + color: white; + font-size: 1rem; +} + +.faucet-container p { + margin-top: 0; + margin-bottom: 0; + line-height: 1.5rem; +} + +.flex-row { + display: flex; + flex-direction: row; + height: 56px; + align-items: center; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.flex-row label { + width: 10rem; +} + +.flex-row input { + padding-left: 12px; + padding-right: 12px; + font-size: 1rem; + font-family: "GT Planar", sans-serif; +} + +.flex-row input, +.flex-row .token-select { + flex: 1; + height: 100%; + border-radius: 4px; + border: none; + color: #212121; + +} diff --git a/app/src/components/FaucetForm/Faucet.tsx b/app/src/components/FaucetForm/Faucet.tsx new file mode 100644 index 0000000..13597e8 --- /dev/null +++ b/app/src/components/FaucetForm/Faucet.tsx @@ -0,0 +1,85 @@ +/* eslint-disable */ +import { useState, ChangeEvent } from "react" +import Select, { ActionMeta, StylesConfig } from 'react-select' +import "./Faucet.css" + + +interface Option { + value: string, + token: string, + maximumAmount: string +} + +const customStyles: StylesConfig = { + control: (provided) => ({ + ...provided, + height: "56px" + }) +} + +interface IToken { + address: string + name: string + maximumAmount: string | number +} + +interface IFaucetProps { + enabledTokens: IToken[] +} + +const formatOptionLabel = ({ token, maximumAmount }: Option) => { + return ( +
+ {token} {maximumAmount} +
+ ) +} + +function Faucet({ enabledTokens }: IFaucetProps): JSX.Element { + const [address, setAddress] = useState("") + + const handleChangeAddress = (event: ChangeEvent) => { + setAddress(event.target.value); + } + + const handleChangeToken = (option: Option | null, actionMeta: ActionMeta