added 3 login modals

2026-02-23 15:34:21 +01:00 · 2021-11-18 16:48:25 +02:00
parent 00134718dd
commit 87f1755e0d
22 changed files with 228 additions and 78 deletions
--- 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",
--- 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"
  }
-}
+}
--- a/public/assets/icons/flag-icon.svg
+++ b/public/assets/icons/flag-icon.svg
@@ -0,0 +1,5 @@
+<svg width="93" height="92" viewBox="0 0 93 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6.5" y="6" width="80" height="80" rx="37.625" fill="#E1DBFF"/>
+<path d="M39 49C39 49 40 48 43 48C46 48 48 50 51 50C54 50 55 49 55 49V37C55 37 54 38 51 38C48 38 46 36 43 36C40 36 39 37 39 37V49ZM39 49V56" stroke="#7B61FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="6.5" y="6" width="80" height="80" rx="37.625" stroke="#EDEAFF" stroke-width="12"/>
+</svg>
--- a/public/assets/icons/lightning-big.svg
+++ b/public/assets/icons/lightning-big.svg
@@ -0,0 +1,5 @@
+<svg width="93" height="92" viewBox="0 0 93 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6.5" y="6" width="80" height="80" rx="37.625" fill="#F7D154"/>
+<path d="M47.5 36L37.5 48H46.5L45.5 56L55.5 44H46.5L47.5 36Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="6.5" y="6" width="80" height="80" rx="37.625" stroke="#FFF1C4" stroke-width="12"/>
+</svg>
--- a/public/assets/icons/lightning-small.svg
+++ b/public/assets/icons/lightning-small.svg
@@ -0,0 +1,5 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="48" height="48" rx="24" fill="#F7D154"/>
+<path d="M29 18L19 30H28L27 38L37 26H28L29 18Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFF1C3" stroke-width="8"/>
+</svg>
--- a/public/assets/icons/success-icon.svg
+++ b/public/assets/icons/success-icon.svg
@@ -0,0 +1,5 @@
+<svg width="91" height="92" viewBox="0 0 91 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5.5" y="6" width="80" height="80" rx="37.625" fill="#D1FADF"/>
+<path d="M58.5625 44.8887V46.125C58.5609 49.0227 57.6225 51.8422 55.8875 54.163C54.1525 56.4839 51.7138 58.1817 48.935 59.0033C46.1562 59.8249 43.1863 59.7263 40.4682 58.7221C37.7501 57.7179 35.4294 55.8619 33.8522 53.431C32.2751 51.0001 31.526 48.1246 31.7166 45.2331C31.9073 42.3417 33.0275 39.5894 34.9102 37.3867C36.7929 35.1839 39.3372 33.6488 42.1636 33.0102C44.9901 32.3716 47.9472 32.6637 50.5941 33.8431M58.5625 35.375L45.125 48.8259L41.0938 44.7947" stroke="#039855" stroke-width="2.6875" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="5.5" y="6" width="80" height="80" rx="37.625" stroke="#ECFDF3" stroke-width="10.75"/>
+</svg>
--- a/public/assets/images/barcode.jpg
+++ b/public/assets/images/barcode.jpg
--- a/src/Components/ExplorePage/partials/ProjectsSection.tsx
+++ b/src/Components/ExplorePage/partials/ProjectsSection.tsx
@@ -12,7 +12,7 @@ export default function ProjectsSection() {

    return (
        <>
-            <ProjectsRow title={<h3 className="font-bolder text-body3 mb-20">Hottest <AiFillThunderbolt className='inline-block text-yellow-400 transform scale-125' /> apps</h3>
+            <ProjectsRow title={<h3 className="font-bolder text-body3 mb-20">Hottest <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> apps</h3>
            } projects={data[0].projects} />
            {data.slice(1).map(({ title, projects }) => <ProjectsRow key={title} title={title} projects={projects} />)}
        </>
--- a/src/Components/Login/LoginCard-1.tsx
+++ b/src/Components/Login/LoginCard-1.tsx
@@ -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 (
-        <motion.div
-            custom={direction}
-            variants={modalCardVariants}
-            initial='initial'
-            animate="animate"
-            exit='exit'
-            className="modal-card max-w-[400px] h-[400px]"
-
-        >
-            <div className="p-24 h-full flex flex-col items-center justify-center">
-                <h3 className="text-h2  font-bold">Login Modal Step 1</h3>
-                <p className="text-body2 mt-40">WIP</p>
-                <button className="btn btn-primary mx-auto py-12 px-24 rounded-lg mt-48 mb-16" onClick={handleNext}>Continue</button>
-
-            </div>
-        </motion.div>
-    )
-}
--- a/src/Components/Login/LoginCard-2.tsx
+++ b/src/Components/Login/LoginCard-2.tsx
@@ -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 (
-        <motion.div
-            custom={direction}
-            variants={modalCardVariants}
-            initial='initial'
-            animate="animate"
-            exit='exit'
-            className="modal-card max-w-[400px] h-[400px]"
-
-        >
-            <div className="p-24 h-full flex flex-col items-center justify-center">
-                <h3 className="text-h2  font-bold">Login Modal Step 2</h3>
-                <p className="text-body2 mt-40">WIP</p>
-            </div>
-        </motion.div>
-    )
-}
--- a/src/Components/Login/LoginNativeWalletCard.tsx
+++ 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 (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[343px] p-24 rounded-xl relative"
+
+        >
+            <div className="flex justify-center">
+                <img
+                    src="/assets/icons/lightning-big.svg"
+                    className='w-80 h-80'
+                    alt="lightning" />
+            </div>
+            <p className="text-body4 text-center mt-16">
+                <IoLockClosed className='align-middle' /> bolt.fun/maker
+            </p>
+
+            <div className="mt-32 text-center">
+                <h3 className="text-h4 font-bold">Login to this site?</h3>
+                <p className='text-body4 mt-8'>By clicking login, you allow ALBY wallet to anonymously login into bolt.fun/makers</p>
+            </div>
+
+            <div className="grid gap-16 grid-cols-2 mt-32">
+                <button className='btn border-2' onClick={onClose}>Cancel</button>
+                <button className='btn btn-primary' onClick={handleNext}>Login</button>
+
+            </div>
+        </motion.div>
+    )
+}
--- a/src/Components/Login/LoginSuccessCard.tsx
+++ 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 (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[343px] p-24 rounded-xl relative"
+
+        >
+            <h2 className='text-h5 font-bold'>Login success</h2>
+
+            <div className="flex justify-center mt-32">
+                <img
+                    src="/assets/icons/success-icon.svg"
+                    className='w-80 h-80'
+                    alt="success" />
+            </div>
+            <p className="text-body4 text-center mt-32">
+                Welcome <span className="font-bold">bc104NhPs...2oGnSKTs</span>
+            </p>
+
+
+        </motion.div>
+    )
+}
--- a/src/Components/Login/ScanningWalletCard.tsx
+++ 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 (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[343px] p-24 rounded-xl relative"
+
+        >
+            <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <h2 className='text-h5 font-bold'>Log in with Lightning  <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /></h2>
+            <div className="mt-24 py-24 ">
+                <div className="flex justify-center">
+                    <Loader
+                        type="Rings"
+                        color="black"
+                        height={60}
+                        width={60}
+                    />
+                </div>
+                <p className="text-body5 text-center mt-24">
+                    Scanning browser for native wallet...
+                </p>
+            </div>
+        </motion.div>
+    )
+}
--- 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 },
        }))
    }
--- 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 (
-        <div className='w-screen h-full fixed inset-0 py-32 md:py-64 flex justify-center overflow-x-hidden overflow-y-hidden no-scrollbar'>
+        <div className='w-screen h-full fixed inset-0 py-32 md:py-64 flex flex-col justify-center items-center overflow-x-hidden overflow-y-hidden no-scrollbar'>
            <div
                className="w-screen h-full bg-gray-300 bg-opacity-50 absolute inset-0"
                onClick={props.onClose}
--- a/src/Components/Shared/ModalsContainer/ModalsContainer.tsx
+++ b/src/Components/Shared/ModalsContainer/ModalsContainer.tsx
@@ -2,8 +2,9 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useEffect } from "react";
 import { closeModal, Direction, ModalId } from "../../../redux/features/modals.slice";
 import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
-import LoginCard_1 from "../../Login/LoginCard-1";
-import LoginCard_2 from "../../Login/LoginCard-2";
+import LoginNativeWalletCard from "../../Login/LoginNativeWalletCard";
+import LoginSuccessCard from "../../Login/LoginSuccessCard";
+import ScanningWalletCard from "../../Login/ScanningWalletCard";
 import ProjectCard from "../../Project/ProjectCard";
 import VoteCard from "../../Vote/VoteCard";
 import Modal from "../Modal/Modal";
@@ -41,10 +42,12 @@ const ModalsMap = (modalId: ModalId) => {
    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:
--- a/src/Components/Shared/Navbar/NavMobile.tsx
+++ b/src/Components/Shared/Navbar/NavMobile.tsx
@@ -58,7 +58,7 @@ export default function NavMobile() {
                            <BsSearch className='absolute top-1/2 left-20 transform -translate-x-1/2  -translatey-1/2 text-gray-500' />
                            <input className="btn bg-gray-100 w-full py-12 px-40 rounded-24 mt-16 placeholder-gray-500" placeholder="Search" />
                        </div>
-                        <button className="btn btn-primary w-full py-12 px-40 rounded-24 my-16">Submit <AiFillThunderbolt className='inline-block text-yellow-400 transform scale-125' />  app️</button>
+                        <button className="btn btn-primary w-full py-12 px-40 rounded-24 my-16">Submit <AiFillThunderbolt className='inline-block text-thunder transform scale-125' />  app️</button>
                    </div>
                    <ul className="py-16 gap-64 border-t">
                        {navLinks.map((link, idx) => <li key={idx} className="text-body3 p-16 hover:bg-gray-200">
--- a/src/Components/Shared/Navbar/Navbar.tsx
+++ b/src/Components/Shared/Navbar/Navbar.tsx
@@ -27,8 +27,8 @@ export default function Navbar() {

                </ul>
                <div className="ml-auto">
-                    <button className="btn btn-primary py-12 px-32 lg:px-40">Submit <AiFillThunderbolt className='inline-block text-yellow-400 transform scale-125' /> app️</button>
-                    <span className="chip mx-12 h-full mr-24 p-12"><AiFillThunderbolt className='inline-block text-yellow-400 transform scale-125' /> 2.2k sats </span>
+                    <button className="btn btn-primary py-12 px-32 lg:px-40">Submit <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> app️</button>
+                    <span className="chip mx-12 h-full mr-24 p-12"><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> 2.2k sats </span>
                </div>
            </nav>
        </>
--- 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 {
--- 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({
--- 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()

--- 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"],