diff --git a/package-lock.json b/package-lock.json index 4d9701f..027abe7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "my-app-2", + "name": "makers.bolt.fun", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "my-app-2", + "name": "makers.bolt.fun", "version": "0.1.0", "dependencies": { "@reduxjs/toolkit": "^1.6.2", @@ -20,6 +20,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.3.1", + "react-loader-spinner": "^4.0.0", "react-multi-carousel": "^2.6.5", "react-query": "^3.32.3", "react-redux": "^7.2.6", @@ -16859,6 +16860,18 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-loader-spinner": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz", + "integrity": "sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/react-multi-carousel": { "version": "2.6.5", "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.6.5.tgz", @@ -35358,6 +35371,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-loader-spinner": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz", + "integrity": "sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-multi-carousel": { "version": "2.6.5", "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.6.5.tgz", diff --git a/package.json b/package.json index a665e53..a58cb63 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.3.1", + "react-loader-spinner": "^4.0.0", "react-multi-carousel": "^2.6.5", "react-query": "^3.32.3", "react-redux": "^7.2.6", @@ -57,4 +58,4 @@ "postcss": "^7.0.39", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17" } -} \ No newline at end of file +} diff --git a/public/assets/icons/flag-icon.svg b/public/assets/icons/flag-icon.svg new file mode 100644 index 0000000..6621a84 --- /dev/null +++ b/public/assets/icons/flag-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/icons/lightning-big.svg b/public/assets/icons/lightning-big.svg new file mode 100644 index 0000000..56cbf6b --- /dev/null +++ b/public/assets/icons/lightning-big.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/icons/lightning-small.svg b/public/assets/icons/lightning-small.svg new file mode 100644 index 0000000..781b618 --- /dev/null +++ b/public/assets/icons/lightning-small.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/icons/success-icon.svg b/public/assets/icons/success-icon.svg new file mode 100644 index 0000000..0bfb465 --- /dev/null +++ b/public/assets/icons/success-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/barcode.jpg b/public/assets/images/barcode.jpg new file mode 100644 index 0000000..bd2463b Binary files /dev/null and b/public/assets/images/barcode.jpg differ diff --git a/src/Components/ExplorePage/partials/ProjectsSection.tsx b/src/Components/ExplorePage/partials/ProjectsSection.tsx index 45f291d..38ebbeb 100644 --- a/src/Components/ExplorePage/partials/ProjectsSection.tsx +++ b/src/Components/ExplorePage/partials/ProjectsSection.tsx @@ -12,7 +12,7 @@ export default function ProjectsSection() { return ( <> - Hottest apps + Hottest apps } projects={data[0].projects} /> {data.slice(1).map(({ title, projects }) => )} diff --git a/src/Components/Login/LoginCard-1.tsx b/src/Components/Login/LoginCard-1.tsx deleted file mode 100644 index 72ddea1..0000000 --- a/src/Components/Login/LoginCard-1.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { motion } from 'framer-motion' -import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice'; -import { useAppDispatch } from '../../utils/hooks'; -import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer' - -export default function LoginCard_1({ onClose, direction, ...props }: ModalCard) { - - const dispatch = useAppDispatch(); - - const handleNext = () => { - dispatch(replaceModal({ - modalId: ModalId.Login2, - direction: Direction.NEXT - })) - } - - return ( - -
-

Login Modal Step 1

-

WIP

- - -
- - ) -} diff --git a/src/Components/Login/LoginCard-2.tsx b/src/Components/Login/LoginCard-2.tsx deleted file mode 100644 index 0288325..0000000 --- a/src/Components/Login/LoginCard-2.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { motion } from 'framer-motion' -import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer' - -export default function LoginCard_2({ onClose, direction, ...props }: ModalCard) { - return ( - -
-

Login Modal Step 2

-

WIP

-
- - ) -} diff --git a/src/Components/Login/LoginNativeWalletCard.tsx b/src/Components/Login/LoginNativeWalletCard.tsx new file mode 100644 index 0000000..34bbe2b --- /dev/null +++ b/src/Components/Login/LoginNativeWalletCard.tsx @@ -0,0 +1,50 @@ +import { motion } from 'framer-motion' +import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice'; +import { useAppDispatch } from '../../utils/hooks'; +import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer' +import { IoLockClosed, } from 'react-icons/io5' + +export default function LoginNativeWalletCard({ onClose, direction, ...props }: ModalCard) { + + const dispatch = useAppDispatch(); + + const handleNext = () => { + dispatch(replaceModal({ + modalId: ModalId.LoginSuccess, + direction: Direction.NEXT + })) + } + + return ( + +
+ lightning +
+

+ bolt.fun/maker +

+ +
+

Login to this site?

+

By clicking login, you allow ALBY wallet to anonymously login into bolt.fun/makers

+
+ +
+ + + +
+ + ) +} diff --git a/src/Components/Login/LoginSuccessCard.tsx b/src/Components/Login/LoginSuccessCard.tsx new file mode 100644 index 0000000..d3e6da9 --- /dev/null +++ b/src/Components/Login/LoginSuccessCard.tsx @@ -0,0 +1,50 @@ +import { motion } from 'framer-motion' +import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice'; +import { useAppDispatch } from '../../utils/hooks'; +import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer' +import { IoLockClosed, } from 'react-icons/io5' +import { useEffect } from 'react'; + +export default function LoginSuccessCard({ onClose, direction, ...props }: ModalCard) { + + const dispatch = useAppDispatch(); + + const handleNext = () => { + dispatch(replaceModal({ + modalId: ModalId.LoginScanWallet, + direction: Direction.NEXT + })) + } + + + useEffect(() => { + // const timeout = setTimeout(handleNext, 3000) + // return () => clearTimeout(timeout) + }, [handleNext]) + + return ( + +

Login success

+ +
+ success +
+

+ Welcome bc104NhPs...2oGnSKTs +

+ + + + ) +} diff --git a/src/Components/Login/ScanningWalletCard.tsx b/src/Components/Login/ScanningWalletCard.tsx new file mode 100644 index 0000000..fe39097 --- /dev/null +++ b/src/Components/Login/ScanningWalletCard.tsx @@ -0,0 +1,54 @@ +import { motion } from 'framer-motion' +import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice'; +import { useAppDispatch } from '../../utils/hooks'; +import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer' +import { AiFillThunderbolt } from 'react-icons/ai'; +import Loader from 'react-loader-spinner'; +import { useCallback, useEffect } from 'react'; +import { IoClose } from 'react-icons/io5'; + +export default function ScanningWalletCard({ onClose, direction, ...props }: ModalCard) { + + const dispatch = useAppDispatch(); + + const handleNext = useCallback(() => { + dispatch(replaceModal({ + modalId: ModalId.LoginNativeWallet, + direction: Direction.NEXT + })) + }, [dispatch]) + + useEffect(() => { + + const timeout = setTimeout(handleNext, 3000) + return () => clearTimeout(timeout) + }, [handleNext]) + + return ( + + +

Log in with Lightning

+
+
+ +
+

+ Scanning browser for native wallet... +

+
+ + ) +} diff --git a/src/Components/Project/ProjectCard.tsx b/src/Components/Project/ProjectCard.tsx index 46e693d..4e89c69 100644 --- a/src/Components/Project/ProjectCard.tsx +++ b/src/Components/Project/ProjectCard.tsx @@ -26,7 +26,7 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard) const onClaim = () => { dispatch(openModal({ - modalId: ModalId.Login1, + modalId: ModalId.LoginScanWallet, initialModalProps: { projectId: props.projectId }, })) } diff --git a/src/Components/Shared/Modal/Modal.tsx b/src/Components/Shared/Modal/Modal.tsx index 0f4a5c8..e9444d1 100644 --- a/src/Components/Shared/Modal/Modal.tsx +++ b/src/Components/Shared/Modal/Modal.tsx @@ -9,7 +9,7 @@ interface Props { export default function Modal(props: Props) { return ( -
+
{ switch (modalId) { case ModalId.Project: return ProjectCard; - case ModalId.Login1: - return LoginCard_1; - case ModalId.Login2: - return LoginCard_2; + case ModalId.LoginScanWallet: + return ScanningWalletCard; + case ModalId.LoginNativeWallet: + return LoginNativeWalletCard; + case ModalId.LoginSuccess: + return LoginSuccessCard; case ModalId.Vote: return VoteCard; default: diff --git a/src/Components/Shared/Navbar/NavMobile.tsx b/src/Components/Shared/Navbar/NavMobile.tsx index 0e0ff6c..d818bc3 100644 --- a/src/Components/Shared/Navbar/NavMobile.tsx +++ b/src/Components/Shared/Navbar/NavMobile.tsx @@ -58,7 +58,7 @@ export default function NavMobile() {
- +
    {navLinks.map((link, idx) =>
  • diff --git a/src/Components/Shared/Navbar/Navbar.tsx b/src/Components/Shared/Navbar/Navbar.tsx index 8cad468..f7d381d 100644 --- a/src/Components/Shared/Navbar/Navbar.tsx +++ b/src/Components/Shared/Navbar/Navbar.tsx @@ -27,8 +27,8 @@ export default function Navbar() {
- - 2.2k sats + + 2.2k sats
diff --git a/src/index.css b/src/index.css index 62210ec..1c99e91 100644 --- a/src/index.css +++ b/src/index.css @@ -9,7 +9,7 @@ } .btn-primary { - @apply bg-primary-600 hover:bg-primary-500 text-white; + @apply bg-primary-500 hover:bg-primary-400 text-white; } .btn-gray { diff --git a/src/redux/features/modals.slice.ts b/src/redux/features/modals.slice.ts index 98d39a7..92cbc19 100644 --- a/src/redux/features/modals.slice.ts +++ b/src/redux/features/modals.slice.ts @@ -10,8 +10,9 @@ export enum Direction { export enum ModalId { None, Project, - Login1, - Login2, + LoginScanWallet, + LoginNativeWallet, + LoginSuccess, Vote, } @@ -28,10 +29,10 @@ interface StoreState { } const initialState = { - isOpen: false, + isOpen: true, isLoading: false, direction: Direction.START, - openModals: [] as OpenModal[], + openModals: [{ modalId: ModalId.LoginSuccess }] as OpenModal[], } as StoreState; export const modalSlice = createSlice({ diff --git a/src/utils/Wrapper.tsx b/src/utils/Wrapper.tsx index 4bc16e7..7b0fc1f 100644 --- a/src/utils/Wrapper.tsx +++ b/src/utils/Wrapper.tsx @@ -1,8 +1,11 @@ import { QueryClient, QueryClientProvider } from 'react-query' -import 'react-multi-carousel/lib/styles.css'; + import { Provider } from 'react-redux'; import { store } from '../redux/store'; +import 'react-multi-carousel/lib/styles.css'; +import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"; + const queryClient = new QueryClient() diff --git a/tailwind.config.js b/tailwind.config.js index e2e465e..3e37ad3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -36,7 +36,6 @@ module.exports = { 800: "#2C1E93", 900: "#1C127A", }, - fire: "#ff6a00", sucess: { 300: "#6CE9A6", 400: "#32D583", @@ -44,6 +43,10 @@ module.exports = { 600: "#039855", 700: "#027A48", }, + + // Custom Colors + thunder: "#ffd400", + fire: "#ff6a00", }, fontSize: { h1: ["36px", "30px"],