diff --git a/web/.github/workflows/tg-bot.yml b/web/.github/workflows/tg-bot.yml index 89e2e69..76b3199 100644 --- a/web/.github/workflows/tg-bot.yml +++ b/web/.github/workflows/tg-bot.yml @@ -1,7 +1,6 @@ name: telegram message on: [push] jobs: - build: name: Build runs-on: ubuntu-latest @@ -14,7 +13,7 @@ jobs: message: | ${{ github.actor }} created commit: Commit message: ${{ github.event.commits[0].message }} - + Repository: ${{ github.repository }} - + See changes: https://github.com/${{ github.repository }}/commit/${{github.sha}} diff --git a/web/.prettierrc b/web/.prettierrc new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/web/.prettierrc @@ -0,0 +1 @@ +{} diff --git a/web/README.md b/web/README.md index 4720007..476a575 100644 --- a/web/README.md +++ b/web/README.md @@ -1,14 +1,13 @@ +- Landing - 1 - Route "/fluence" +- Claiming flow 1 - Route "/" +- Claiming flow 2 - Route "/wallet" +- Claiming flow 14 - Route "/proof" +- Claiming flow 8 - Route "/delegation" +- Claiming flow 9 - Route "/done" +- Claiming flow 10 - Route "/finish" +- Claiming flow 11 - Route "/not-found" +- Claiming flow 12 - Route "/claimed" - -* Landing - 1 - Route "/fluence" -* Claiming flow 1 - Route "/" -* Claiming flow 2 - Route "/wallet" -* Claiming flow 14 - Route "/proof" -* Claiming flow 8 - Route "/delegation" -* Claiming flow 9 - Route "/done" -* Claiming flow 10 - Route "/finish" -* Claiming flow 11 - Route "/not-found" -* Claiming flow 12 - Route "/claimed" # -Deploy on GH Pages - https://nsvdev.github.io/fluence/#/fluence +Deploy on GH Pages - https://nsvdev.github.io/fluence/#/fluence diff --git a/web/package-lock.json b/web/package-lock.json index 4dd0302..1aeda64 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -44,6 +44,7 @@ "http": "npm:stream-http@^3.2.0", "https": "npm:https-browserify@^1.0.0", "os": "npm:os-browserify@^0.3.0", + "prettier": "^3.2.5", "stream": "npm:stream-browserify@^3.0.0", "url": "^0.11.3", "utils": "^0.3.1" @@ -17150,6 +17151,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -34899,6 +34915,12 @@ "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, + "prettier": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "dev": true + }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/web/package.json b/web/package.json index 11d2162..dc380f8 100644 --- a/web/package.json +++ b/web/package.json @@ -66,6 +66,7 @@ "http": "npm:stream-http@^3.2.0", "https": "npm:https-browserify@^1.0.0", "os": "npm:os-browserify@^0.3.0", + "prettier": "^3.2.5", "stream": "npm:stream-browserify@^3.0.0", "url": "^0.11.3", "utils": "^0.3.1" diff --git a/web/public/index.html b/web/public/index.html index 82e11a4..2fa8470 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -1,4 +1,4 @@ - + diff --git a/web/src/App.test.js b/web/src/App.test.js index 1f03afe..9382b9a 100644 --- a/web/src/App.test.js +++ b/web/src/App.test.js @@ -1,7 +1,7 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; +import { render, screen } from "@testing-library/react"; +import App from "./App"; -test('renders learn react link', () => { +test("renders learn react link", () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); diff --git a/web/src/components/App/App.css b/web/src/components/App/App.css index 3fcb014..748abd5 100644 --- a/web/src/components/App/App.css +++ b/web/src/components/App/App.css @@ -1,6 +1,2 @@ .App { - - - } - diff --git a/web/src/components/App/App.js b/web/src/components/App/App.js index ab12dfe..9642540 100644 --- a/web/src/components/App/App.js +++ b/web/src/components/App/App.js @@ -1,21 +1,27 @@ -import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'; -import { useDispatch, useSelector } from 'react-redux'; -import { memo, useEffect, useState } from 'react'; +import { + Navigate, + Route, + Routes, + useLocation, + useNavigate, +} from "react-router-dom"; +import { useDispatch, useSelector } from "react-redux"; +import { memo, useEffect, useState } from "react"; -import './App.css'; -import 'react-toastify/dist/ReactToastify.css'; +import "./App.css"; +import "react-toastify/dist/ReactToastify.css"; -import PageBegin from '../../pages/begin-page/begin-page'; -import FirstStepPage from '../../pages/step1-page/step1-page'; -import ProofPage from '../../pages/proof-page/proof-page'; -import DonePage from '../../pages/done-page/done-page'; -import ClaimedPage from '../../pages/claimed-page/claimed-page'; -import AccountNotFound from '../../pages/not-found-account-page/not-found-account-page'; -import FinishPage from '../../pages/finish-page/finish-page'; -import ConnectWallet from '../ConnectWallet/ConnectWallet'; -import { toast, ToastContainer } from 'react-toastify'; -import { useWeb3Connection } from '../../hooks/useWeb3Connection'; -import { reduxCleanup } from '../../store/actions/common'; +import PageBegin from "../../pages/begin-page/begin-page"; +import FirstStepPage from "../../pages/step1-page/step1-page"; +import ProofPage from "../../pages/proof-page/proof-page"; +import DonePage from "../../pages/done-page/done-page"; +import ClaimedPage from "../../pages/claimed-page/claimed-page"; +import AccountNotFound from "../../pages/not-found-account-page/not-found-account-page"; +import FinishPage from "../../pages/finish-page/finish-page"; +import ConnectWallet from "../ConnectWallet/ConnectWallet"; +import { toast, ToastContainer } from "react-toastify"; +import { useWeb3Connection } from "../../hooks/useWeb3Connection"; +import { reduxCleanup } from "../../store/actions/common"; import { ROUTE_CLAIMED, ROUTE_CONNECT, @@ -24,53 +30,54 @@ import { ROUTE_INDEX, ROUTE_NOT_FOUND, ROUTE_PROOF, - ROUTE_WALLET -} from '../../constants/routes' -import { catchError } from '../../utils'; -import { setCurrentRoute } from '../../store/actions/routes'; -import { fetchCurrentAward, fetchMerkleRoot, fetchNextHalvePeriod } from '../../store/actions/distributor'; -import { useVh } from '../../hooks/useVh'; + ROUTE_WALLET, +} from "../../constants/routes"; +import { catchError } from "../../utils"; +import { setCurrentRoute } from "../../store/actions/routes"; +import { + fetchCurrentAward, + fetchMerkleRoot, + fetchNextHalvePeriod, +} from "../../store/actions/distributor"; +import { useVh } from "../../hooks/useVh"; function App() { - const { network, address } = useWeb3Connection() + const { network, address } = useWeb3Connection(); - const dispatch = useDispatch() - const navigate = useNavigate() - const { error } = useSelector(state => state.error) + const dispatch = useDispatch(); + const navigate = useNavigate(); + const { error } = useSelector((state) => state.error); const [prevAddress, setPrevAddress] = useState(null); - const { username } = useSelector(state => state.user) - const { currentRoute } = useSelector(state => state.routes) - const location = useLocation() - const [locationPut, setLocationPut] = useState(false) - const [merkleRootFetched, setMerkleRootFetched] = useState(false) + const { username } = useSelector((state) => state.user); + const { currentRoute } = useSelector((state) => state.routes); + const location = useLocation(); + const [locationPut, setLocationPut] = useState(false); + const [merkleRootFetched, setMerkleRootFetched] = useState(false); - useVh() + useVh(); useEffect(() => { - if (currentRoute - && !locationPut - && currentRoute !== location.pathname - ) { - navigate(currentRoute) - setLocationPut(true) + if (currentRoute && !locationPut && currentRoute !== location.pathname) { + navigate(currentRoute); + setLocationPut(true); } - }, [currentRoute]) + }, [currentRoute]); useEffect(() => { - console.log("nerwork: " + network.name) + console.log("nerwork: " + network.name); if (!merkleRootFetched && network?.name && network.name !== "unknown") { - dispatch(fetchMerkleRoot(network.name)) - dispatch(fetchCurrentAward(network.name)) - dispatch(fetchNextHalvePeriod(network.name)) - setMerkleRootFetched(true) - } - }, [network]) + dispatch(fetchMerkleRoot(network.name)); + dispatch(fetchCurrentAward(network.name)); + dispatch(fetchNextHalvePeriod(network.name)); + setMerkleRootFetched(true); + } + }, [network]); useEffect(() => { if (address) { if (prevAddress && address !== prevAddress) { - dispatch(reduxCleanup()) - navigate(ROUTE_INDEX) - dispatch(setCurrentRoute(ROUTE_INDEX)) + dispatch(reduxCleanup()); + navigate(ROUTE_INDEX); + dispatch(setCurrentRoute(ROUTE_INDEX)); } else if (!address && username) { navigate(ROUTE_WALLET); } else { @@ -80,34 +87,31 @@ function App() { }, [address, prevAddress]); useEffect(() => { - window.scrollTo(0, 0) - dispatch(setCurrentRoute(location.pathname)) + window.scrollTo(0, 0); + dispatch(setCurrentRoute(location.pathname)); }, [location]); useEffect(() => { if (error) { - toast(catchError(error, true)) + toast(catchError(error, true)); } - }, [error]) + }, [error]); return ( -
- - - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - } - /> - -
+
+ + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
); } diff --git a/web/src/components/Button/Button.js b/web/src/components/Button/Button.js index dcd4ee7..56af566 100644 --- a/web/src/components/Button/Button.js +++ b/web/src/components/Button/Button.js @@ -1,28 +1,83 @@ -import React from 'react'; +import React from "react"; -import styles from './Button.module.css'; +import styles from "./Button.module.css"; const Button = ({ - type = 'default', - text, - icon = null, - opacity=false, - callback=null + type = "default", + text, + icon = null, + opacity = false, + callback = null, }) => { - if (type === 'default') return + if (type === "default") + return ( + + ); - if (type === 'small' && opacity === true) return + if (type === "small" && opacity === true) + return ( + + ); - if (type === 'small') return + if (type === "small") + return ( + + ); - if (type === 'large' && icon === 'git') return + if (type === "large" && icon === "git") + return ( + + ); - if (type === 'large' && icon === 'twitter') return + if (type === "large" && icon === "twitter") + return ( + + ); - if (type === 'large' && opacity === true) return + if (type === "large" && opacity === true) + return ( + + ); - if (type === 'large') return + if (type === "large") + return ( + + ); +}; -} - -export default Button; \ No newline at end of file +export default Button; diff --git a/web/src/components/Button/Button.module.css b/web/src/components/Button/Button.module.css index f0869ef..70639f0 100644 --- a/web/src/components/Button/Button.module.css +++ b/web/src/components/Button/Button.module.css @@ -1,89 +1,83 @@ .button { - padding-left: 27px; - padding-right: 27px; - font-family: 'Hauora_Bold', sans-serif; - font-size: 15px; - line-height: 21px; - color: rgb(255, 255, 255); + padding-left: 27px; + padding-right: 27px; + font-family: "Hauora_Bold", sans-serif; + font-size: 15px; + line-height: 21px; + color: rgb(255, 255, 255); - background-color: rgba(0, 0, 0, 0.8); + background-color: rgba(0, 0, 0, 0.8); - letter-spacing: 0.2px; - border: 1px solid rgba(0, 0, 0, 0.8); - border-radius: 30px; + letter-spacing: 0.2px; + border: 1px solid rgba(0, 0, 0, 0.8); + border-radius: 30px; - transition: .3s ease; + transition: 0.3s ease; } .button_height_default { - height: 46px; + height: 46px; } .button_height_large { - height: 54px; + height: 54px; } .button_height_small { - height: 42px; - - + height: 42px; } .button:hover { - color: rgba(207, 255, 196, 1); + color: rgba(207, 255, 196, 1); - background-color: rgba(15, 15, 15, 0,8); - cursor: pointer; + background-color: rgba(15, 15, 15, 0, 8); + cursor: pointer; } .button:active { - color: rgb(255, 255, 255); + color: rgb(255, 255, 255); } .button_opacity { - background-color: rgba(0, 0, 0, 0.4); - border-color: rgba(0, 0, 0, 0.4); + background-color: rgba(0, 0, 0, 0.4); + border-color: rgba(0, 0, 0, 0.4); } .button_icon { - position: relative; + position: relative; - padding-left: 55px; - + padding-left: 55px; } .button_icon::before { - content: ''; - position: absolute; + content: ""; + position: absolute; } - - .button_icon_git::before { - background-image: url('../../images/github.svg'); - transition: .3s ease; - width: 20.5px; - height: 20px; - top: 16px; - left: 20px; + background-image: url("../../images/github.svg"); + transition: 0.3s ease; + width: 20.5px; + height: 20px; + top: 16px; + left: 20px; } .button_icon_git:hover::before { - background-image: url('../../images/github hover.svg'); + background-image: url("../../images/github hover.svg"); } .button_icon_twitter::before { - background-image: url('../../images/twitter.svg'); - transition: .3s ease; - background-position: center; - background-repeat: no-repeat; - width: 16px; - height: 13px; - top: 20px; - left: 30px; + background-image: url("../../images/twitter.svg"); + transition: 0.3s ease; + background-position: center; + background-repeat: no-repeat; + width: 16px; + height: 13px; + top: 20px; + left: 30px; } .button_icon_twitter:hover::before { - background-image: url('../../images/twitter hover.svg'); + background-image: url("../../images/twitter hover.svg"); } - diff --git a/web/src/components/ConnectWallet/ConnectWallet.js b/web/src/components/ConnectWallet/ConnectWallet.js index add7549..df1cf11 100644 --- a/web/src/components/ConnectWallet/ConnectWallet.js +++ b/web/src/components/ConnectWallet/ConnectWallet.js @@ -1,20 +1,19 @@ -import Button from '../Button/Button' -import { useWeb3Connection } from '../../hooks/useWeb3Connection' +import Button from "../Button/Button"; +import { useWeb3Connection } from "../../hooks/useWeb3Connection"; //import { getChainData } from '../../utils' const ConnectWallet = () => { + const { connect, disconnect, address } = useWeb3Connection(); - const { connect, disconnect, address } = useWeb3Connection() + return ( + <> + {address ? ( +