claim modals, add search to nav

2026-01-03 14:34:27 +01:00 · 2021-11-21 11:45:18 +02:00
parent 543055a42d
commit 1cf6a84ca1
27 changed files with 418 additions and 118 deletions
--- a/build/asset-manifest.json
+++ b/build/asset-manifest.json
@@ -1,26 +1,26 @@
 {
  "files": {
-    "main.css": "./static/css/main.3d512978.chunk.css",
-    "main.js": "./static/js/main.7f9557eb.chunk.js",
-    "main.js.map": "./static/js/main.7f9557eb.chunk.js.map",
+    "main.css": "./static/css/main.adcdce2d.chunk.css",
+    "main.js": "./static/js/main.60666633.chunk.js",
+    "main.js.map": "./static/js/main.60666633.chunk.js.map",
    "runtime-main.js": "./static/js/runtime-main.295a7585.js",
    "runtime-main.js.map": "./static/js/runtime-main.295a7585.js.map",
    "static/css/2.4cfadce7.chunk.css": "./static/css/2.4cfadce7.chunk.css",
-    "static/js/2.c3a67f07.chunk.js": "./static/js/2.c3a67f07.chunk.js",
-    "static/js/2.c3a67f07.chunk.js.map": "./static/js/2.c3a67f07.chunk.js.map",
+    "static/js/2.d61a862d.chunk.js": "./static/js/2.d61a862d.chunk.js",
+    "static/js/2.d61a862d.chunk.js.map": "./static/js/2.d61a862d.chunk.js.map",
    "static/js/3.e4f897ae.chunk.js": "./static/js/3.e4f897ae.chunk.js",
    "static/js/3.e4f897ae.chunk.js.map": "./static/js/3.e4f897ae.chunk.js.map",
    "index.html": "./index.html",
    "static/css/2.4cfadce7.chunk.css.map": "./static/css/2.4cfadce7.chunk.css.map",
-    "static/css/main.3d512978.chunk.css.map": "./static/css/main.3d512978.chunk.css.map",
-    "static/js/2.c3a67f07.chunk.js.LICENSE.txt": "./static/js/2.c3a67f07.chunk.js.LICENSE.txt",
+    "static/css/main.adcdce2d.chunk.css.map": "./static/css/main.adcdce2d.chunk.css.map",
+    "static/js/2.d61a862d.chunk.js.LICENSE.txt": "./static/js/2.d61a862d.chunk.js.LICENSE.txt",
    "static/media/styles.css": "./static/media/revicons.e8746a62.woff"
  },
  "entrypoints": [
    "static/js/runtime-main.295a7585.js",
    "static/css/2.4cfadce7.chunk.css",
-    "static/js/2.c3a67f07.chunk.js",
-    "static/css/main.3d512978.chunk.css",
-    "static/js/main.7f9557eb.chunk.js"
+    "static/js/2.d61a862d.chunk.js",
+    "static/css/main.adcdce2d.chunk.css",
+    "static/js/main.60666633.chunk.js"
  ]
 }
--- a/build/index.html
+++ b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="manifest" href="./manifest.json"/><title>makers.bolt.fun</title><link href="./static/css/2.4cfadce7.chunk.css" rel="stylesheet"><link href="./static/css/main.3d512978.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"e4f897ae"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="./static/js/2.c3a67f07.chunk.js"></script><script src="./static/js/main.7f9557eb.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="manifest" href="./manifest.json"/><title>makers.bolt.fun</title><link href="./static/css/2.4cfadce7.chunk.css" rel="stylesheet"><link href="./static/css/main.adcdce2d.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"e4f897ae"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="./static/js/2.d61a862d.chunk.js"></script><script src="./static/js/main.60666633.chunk.js"></script></body></html>
--- a/build/static/css/main.3d512978.chunk.css
+++ b/build/static/css/main.3d512978.chunk.css
--- a/build/static/css/main.3d512978.chunk.css.map
+++ b/build/static/css/main.3d512978.chunk.css.map
--- a/build/static/css/main.adcdce2d.chunk.css
+++ b/build/static/css/main.adcdce2d.chunk.css
--- a/build/static/css/main.adcdce2d.chunk.css.map
+++ b/build/static/css/main.adcdce2d.chunk.css.map
--- a/build/static/js/2.d61a862d.chunk.js
+++ b/build/static/js/2.d61a862d.chunk.js
--- a/build/static/js/2.d61a862d.chunk.js.LICENSE.txt
+++ b/build/static/js/2.d61a862d.chunk.js.LICENSE.txt
--- a/build/static/js/2.d61a862d.chunk.js.map
+++ b/build/static/js/2.d61a862d.chunk.js.map
--- a/build/static/js/main.60666633.chunk.js
+++ b/build/static/js/main.60666633.chunk.js
--- a/build/static/js/main.60666633.chunk.js.map
+++ b/build/static/js/main.60666633.chunk.js.map
--- a/build/static/js/main.7f9557eb.chunk.js.map
+++ b/build/static/js/main.7f9557eb.chunk.js.map
--- a/src/Components/ClaimProject/Claim_CopySignatureCard.tsx
+++ b/src/Components/ClaimProject/Claim_CopySignatureCard.tsx
@@ -0,0 +1,67 @@
+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 { useCallback, useEffect, useState } from 'react';
+import { IoClose } from 'react-icons/io5';
+import { IoIosCopy } from 'react-icons/io'
+
+export default function Claim_CopySignatureCard({ onClose, direction, ...props }: ModalCard) {
+
+    const dispatch = useAppDispatch();
+
+
+    const handleNext = useCallback(() => {
+        dispatch(replaceModal({
+            modalId: ModalId.Login_NativeWallet,
+            direction: Direction.NEXT
+        }))
+    }, [dispatch])
+
+    useEffect(() => {
+
+        // const timeout = setTimeout(handleNext, 3000)
+        // return () => clearTimeout(timeout)
+    }, [handleNext])
+
+    const onCopy = () => {
+        // Copy to Clipboard
+        setTimeout(handleNext, 2000)
+    }
+
+    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'>Claim this project</h2>
+            <div className="flex justify-center my-32">
+                <img
+                    src="assets/icons/lightning-big.svg"
+                    className='w-80 h-80'
+                    alt="" />
+            </div>
+            <p className="text-body4 text-center px-16">
+                To claim ownership of <span className="font-bold">Application Name</span> and its tips, copy the signature hash below and paste it on the following URL:
+            </p>
+            <p className="font-bold text-primary-500 text-center mt-16">
+                <a href="projectname.com/well-known/bolt.fun.json"
+                    target='_blank' rel='noreferrer'
+                >projectname.com/well-known/bolt.fun.json</a>
+            </p>
+            <div className="input-wrapper mt-16">
+                <input
+                    className="input-field overflow-ellipsis"
+                    value={"Inurldp-3234234-ahhsdfm-dssdf-uooiRS-TTRASssa-334Qaas-UUI"}
+                />
+                <IoIosCopy onClick={onCopy} className='input-icon hover:cursor-pointer' />
+            </div>
+
+        </motion.div>
+    )
+}
--- a/src/Components/ClaimProject/Claim_FundWithdrawCard.tsx
+++ b/src/Components/ClaimProject/Claim_FundWithdrawCard.tsx
@@ -0,0 +1,44 @@
+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 { useCallback, useEffect, useState } from 'react';
+import { IoClose } from 'react-icons/io5';
+import { IoIosCopy } from 'react-icons/io'
+
+export default function Claim_FundWithdrawCard({ onClose, direction, ...props }: ModalCard) {
+
+    const dispatch = useAppDispatch();
+
+
+
+
+    return (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[270px] py-16 px-24 rounded-xl relative"
+        >
+            <div className="flex justify-center my-16">
+                <img
+                    src="assets/icons/lightning-small.svg"
+                    className='w-64 h-64'
+                    alt="" />
+            </div>
+            <p className="text-h4 text-center font-bold">
+                2,220 sats
+            </p>
+            <p className="text-body4 text-center text-gray-400">
+                2.78$
+            </p>
+            <div className="mt-32 flex flex-col gap-16">
+                <button className='btn btn-primary w-full' >Fund</button>
+                <button className='btn border-2 w-full' >Withdraw</button>
+            </div>
+
+        </motion.div>
+    )
+}
--- a/src/Components/ClaimProject/Claim_GenerateSignatureCard.tsx
+++ b/src/Components/ClaimProject/Claim_GenerateSignatureCard.tsx
@@ -0,0 +1,57 @@
+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 { useCallback, useEffect } from 'react';
+import { IoClose } from 'react-icons/io5';
+
+export default function Claim_GenerateSignatureCard({ onClose, direction, ...props }: ModalCard) {
+
+    const dispatch = useAppDispatch();
+
+
+    const handleNext = useCallback(() => {
+        dispatch(replaceModal({
+            modalId: ModalId.Login_NativeWallet,
+            direction: Direction.NEXT
+        }))
+    }, [dispatch])
+
+    useEffect(() => {
+
+        // const timeout = setTimeout(handleNext, 3000)
+        // return () => clearTimeout(timeout)
+    }, [handleNext])
+
+    const onCopy = () => {
+        // Copy to Clipboard
+        setTimeout(handleNext, 2000)
+    }
+
+    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'>Claim this project</h2>
+            <div className="flex justify-center my-32">
+                <img
+                    src="assets/icons/lightning-big.svg"
+                    className='w-80 h-80'
+                    alt="" />
+            </div>
+            <p className="text-body4 text-center px-16">
+                To claim ownership of <span className="font-bold">Application Name</span> and its tips, you need to sign a message and paste this on the project website so we can verify you are the real ownership
+            </p>
+            <div className="mt-32">
+                <button className='btn btn-primary w-full' onClick={handleNext}>Generate Signature</button>
+            </div>
+
+        </motion.div>
+    )
+}
--- a/src/Components/ClaimProject/Claim_SubmittedCard.tsx
+++ b/src/Components/ClaimProject/Claim_SubmittedCard.tsx
@@ -0,0 +1,39 @@
+import { motion } from 'framer-motion'
+import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
+import { IoClose } from 'react-icons/io5';
+
+export default function Claim_SubmittedCard({ onClose, direction, ...props }: ModalCard) {
+
+
+    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'>Submitted For Review</h2>
+            <div className="flex justify-center my-32">
+                <img
+                    src="assets/icons/flag-icon.svg"
+                    className='w-80 h-80'
+                    alt="success" />
+            </div>
+            <p className="text-body4 text-center">
+                Great work! your claim to <span className="font-bold">Application Name</span> has been submitted for review.
+                <br />
+                Check back soon to see if it was successful.
+            </p>
+
+
+
+        </motion.div>
+    )
+}
--- a/src/Components/ClaimProject/Step1.tsx
+++ b/src/Components/ClaimProject/Step1.tsx
@@ -1,51 +0,0 @@
-import { motion } from "framer-motion";
-import { ModalCard, modalCardVariants } from "../Shared/ModalsContainer/ModalsContainer";
-
-interface Props extends ModalCard {
-
-}
-
-export default function Step1({ onClose, direction }: Props) {
-    return (
-        <motion.div
-            custom={direction}
-            variants={modalCardVariants}
-            initial={'initial'}
-            animate="animate"
-            exit='exit'
-            className="rounded-[40px] bg-gray-50 overflow-hidden w-full"
-        >
-
-            <div className="p-24">
-                <div className="flex gap-24 items-center">
-                    <div className="flex-shrink-0 w-[93px] h-[93px] rounded-md overflow-hidden">
-                        <img className="w-full h-full object-cover" src="https://s3-alpha-sig.figma.com/img/be1b/cd75/1baa911b3875134c0889d6755c4ba2cb?Expires=1637539200&Signature=QExmgJCGGSES~zIwM-2G8yd7aPR-j5eFnV3tOg6BkSdXVB9AMhHQPbRpbfOv~rD3hdMdSPMkS9kfjyFbAuonltV2zrf5GOwGxrF2GVdhpIGc6RiqGLWVVY8mXysEm6~0fVj~2SK8hec~YnV1h0oHDQiZF5YjGi143pImGmcVERPpB7MiksSoD0Vki6RXamySopj~f-~lUGy2uKRbQKxQ4LCFTz-H9O8vpkZpCVq274FYsqsEtUihwVjniNXV8ukLxdL~rfgf8L9MeiR7gDYYQ9MSLMZKEa~TnQ-JadlngQz78a2T801WaG2xp5hGHYQMtIi1ES-N4FOg5PwEjtIetA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA" alt="" />
-                    </div>
-                    <div>
-                        <h3 className="text-h3 font-regular">Project Name</h3>
-                        <a className="text-blue-400 font-regular text-body4" href="/">www.project.com</a>
-                    </div>
-                    <div className="flex ml-auto gap-16">
-                        <button className="btn btn-primary py-12 px-24 rounded-lg my-16">Play 🕹</button>
-                        <button className="btn py-12 px-24 rounded-lg my-16">Vote 🔥</button>
-                    </div>
-                </div>
-                <p className="mt-40 text-body4 leading-normal">Lorem ipsum dolor, sit amet consectetur adipisicing elit. At natus perferendis sunt suscipit libero amet praesentium? Magni minus libero maxime aspernatur eius, repudiandae distinctio aut perferendis laboriosam impedit reiciendis blanditiis cum alias hic, ipsam facere obcaecati, amet atque numquam doloribus in explicabo possimus autem! Ipsum consequatur, dignissimos minima esse illum obcaecati aliquid eligendi delectus architecto beatae perferendis. Ipsam, non maxime.</p>
-                <div className="flex gap-24 mt-24 flex-wrap">
-                    <span className="chip-small bg-red-100 text-red-800 font-regular"> payments </span>
-                    <span className="chip-small bg-primary-100 text-primary-800 font-regular"> lightining </span>
-                </div>
-
-                <div className="mt-40">
-                    <h3 className="text-h5 font-bold">Screen Shots</h3>
-                    <div className="flex gap-x-24 gap-y-20">
-                        <div className="flex-none w-[164px] h-[120px] md:w-[300px] md:h-[136px] bg-gray-300 rounded-xl"></div>
-                        <div className="flex-none w-[164px] h-[120px] md:w-[300px] md:h-[136px] bg-gray-300 rounded-xl"></div>
-                        <div className="flex-none w-[164px] h-[120px] md:w-[300px] md:h-[136px] bg-gray-300 rounded-xl"></div>
-                    </div>
-                </div>
-
-            </div>
-        </motion.div>
-    )
-}
--- a/src/Components/ExplorePage/partials/ProjectsSection.tsx
+++ b/src/Components/ExplorePage/partials/ProjectsSection.tsx
@@ -11,10 +11,10 @@ export default function ProjectsSection() {
    if (isLoading || !data) return null;

    return (
-        <>
-            <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} />
+        <div className='mt-32 lg:mt-48'>
+            <ProjectsRow title={<>Hottest <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> apps</>}
+                projects={data[0].projects} />
            {data.slice(1).map(({ title, projects }) => <ProjectsRow key={title} title={title} projects={projects} />)}
-        </>
+        </div>
    )
 }
--- a/src/Components/Login/Login_ExternalWalletCard.tsx
+++ b/src/Components/Login/Login_ExternalWalletCard.tsx
@@ -0,0 +1,65 @@
+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, useState } from 'react';
+import { IoClose } from 'react-icons/io5';
+import { IoIosCopy } from 'react-icons/io'
+
+export default function Login_ExternalWalletCard({ onClose, direction, ...props }: ModalCard) {
+
+    const dispatch = useAppDispatch();
+
+
+    const handleNext = useCallback(() => {
+        dispatch(replaceModal({
+            modalId: ModalId.Login_NativeWallet,
+            direction: Direction.NEXT
+        }))
+    }, [dispatch])
+
+    useEffect(() => {
+
+        // const timeout = setTimeout(handleNext, 3000)
+        // return () => clearTimeout(timeout)
+    }, [handleNext])
+
+    const onCopy = () => {
+        // Copy to Clipboard
+        setTimeout(handleNext, 2000)
+    }
+
+    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='flex justify-center mt-32'>
+                <img
+                    onClick={onCopy}
+                    className='w-full max-w-[200px]'
+                    src="assets/images/barcode.jpg"
+                    alt="barcode" />
+            </div>
+            <p className="text-body4 text-center mt-16">
+                Scan this code or copy the address below to login using Inurl-auth
+            </p>
+            <div className="input-wrapper mt-16">
+                <input
+                    className="input-field overflow-ellipsis"
+                    value={"Inurldp-3234234-ahhsdfm-dssdf-uooiRS-TTRASssa-334Qaas-UUI"}
+                />
+                <IoIosCopy onClick={onCopy} className='input-icon hover:cursor-pointer' />
+            </div>
+
+        </motion.div>
+    )
+}
--- a/src/Components/Login/Login_NativeWalletCard.tsx
+++ b/src/Components/Login/Login_NativeWalletCard.tsx
@@ -4,13 +4,13 @@ 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) {
+export default function Login_NativeWalletCard({ onClose, direction, ...props }: ModalCard) {

    const dispatch = useAppDispatch();

    const handleNext = () => {
        dispatch(replaceModal({
-            modalId: ModalId.LoginSuccess,
+            modalId: ModalId.Login_Success,
            direction: Direction.NEXT
        }))
    }
--- a/src/Components/Login/Login_ScanningWalletCard.tsx
+++ b/src/Components/Login/Login_ScanningWalletCard.tsx
@@ -7,13 +7,13 @@ 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) {
+export default function Login_ScanningWalletCard({ onClose, direction, ...props }: ModalCard) {

    const dispatch = useAppDispatch();

    const handleNext = useCallback(() => {
        dispatch(replaceModal({
-            modalId: ModalId.LoginNativeWallet,
+            modalId: ModalId.Login_NativeWallet,
            direction: Direction.NEXT
        }))
    }, [dispatch])
--- a/src/Components/Login/Login_SuccessCard.tsx
+++ b/src/Components/Login/Login_SuccessCard.tsx
@@ -3,13 +3,13 @@ import { useAppDispatch } from '../../utils/hooks';
 import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
 import { useCallback, useEffect } from 'react';

-export default function LoginSuccessCard({ onClose, direction, ...props }: ModalCard) {
+export default function Login_SuccessCard({ onClose, direction, ...props }: ModalCard) {

    const dispatch = useAppDispatch();

    const handleNext = useCallback(() => {
        // dispatch(replaceModal({
-        //     modalId: ModalId.LoginScanWallet,
+        //     modalId: ModalId.Login_ScanWallet,
        //     direction: Direction.NEXT
        // })) 
        onClose && onClose()
@@ -33,13 +33,13 @@ export default function LoginSuccessCard({ onClose, direction, ...props }: Modal
        >
            <h2 className='text-h5 font-bold'>Login success</h2>

-            <div className="flex justify-center mt-32">
+            <div className="flex justify-center my-32">
                <img
                    src="assets/icons/success-icon.svg"
                    className='w-80 h-80'
                    alt="success" />
            </div>
-            <p className="text-body4 text-center mt-32">
+            <p className="text-body4 text-center">
                Welcome <span className="font-bold">bc104NhPs...2oGnSKTs</span>
            </p>

--- 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.LoginScanWallet,
+            modalId: ModalId.Login_ScanWallet,
            initialModalProps: { projectId: props.projectId },
        }))
    }
--- a/src/Components/Shared/ModalsContainer/ModalsContainer.tsx
+++ b/src/Components/Shared/ModalsContainer/ModalsContainer.tsx
@@ -2,13 +2,18 @@ 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 LoginNativeWalletCard from "../../Login/LoginNativeWalletCard";
-import LoginSuccessCard from "../../Login/LoginSuccessCard";
-import ScanningWalletCard from "../../Login/ScanningWalletCard";
+import Claim_CopySignatureCard from "../../ClaimProject/Claim_CopySignatureCard";
+import Claim_GenerateSignatureCard from "../../ClaimProject/Claim_GenerateSignatureCard";
+import Login_ExternalWalletCard from "../../Login/Login_ExternalWalletCard";
+import Login_NativeWalletCard from "../../Login/Login_NativeWalletCard";
+import Login_SuccessCard from "../../Login/Login_SuccessCard";
+import Login_ScanningWalletCard from "../../Login/Login_ScanningWalletCard";
 import ProjectCard from "../../Project/ProjectCard";
 import VoteCard from "../../Vote/VoteCard";
 import Modal from "../Modal/Modal";
 import { Portal } from "../Portal/Portal";
+import Claim_SubmittedCard from "../../ClaimProject/Claim_SubmittedCard";
+import Claim_FundWithdrawCard from "../../ClaimProject/Claim_FundWithdrawCard";

 export interface ModalCard {
    onClose?: () => void;
@@ -42,18 +47,32 @@ const ModalsMap = (modalId: ModalId) => {
    switch (modalId) {
        case ModalId.Project:
            return ProjectCard;
-        case ModalId.LoginScanWallet:
-            return ScanningWalletCard;
-        case ModalId.LoginNativeWallet:
-            return LoginNativeWalletCard;
-        case ModalId.LoginSuccess:
-            return LoginSuccessCard;
+        case ModalId.Login_ScanWallet:
+            return Login_ScanningWalletCard;
+        case ModalId.Login_NativeWallet:
+            return Login_NativeWalletCard;
+        case ModalId.Login_Success:
+            return Login_SuccessCard;
+        case ModalId.Login_ExternalWallet:
+            return Login_ExternalWalletCard;
        case ModalId.Vote:
            return VoteCard;
+        case ModalId.Claim_GenerateSignature:
+            return Claim_GenerateSignatureCard;
+        case ModalId.Claim_CopySignature:
+            return Claim_CopySignatureCard;
+        case ModalId.Claim_Submitted:
+            return Claim_SubmittedCard;
+        case ModalId.Claim_FundWithdraw:
+            return Claim_FundWithdrawCard;
+
+
+
        default:
            return () => <></>
    }

+
 }


--- a/src/Components/Shared/Navbar/NavMobile.tsx
+++ b/src/Components/Shared/Navbar/NavMobile.tsx
@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { useState } from "react";
+import { FormEvent, useEffect, useState } from "react";
 import { FiMenu } from 'react-icons/fi';
 import { GrClose } from 'react-icons/gr';
 import { BsSearch } from 'react-icons/bs'
@@ -18,18 +18,30 @@ const navListVariants = {
    hide: { x: 0 }
 }

+interface Props {
+    onSearch: (search: string) => void;
+}

-export default function NavMobile() {
-    const [open, setOpen] = useState(false)
+export default function NavMobile({ onSearch }: Props) {
+    const [open, setOpen] = useState(false);
+    const [searchInput, setSearchInput] = useState("")

    const handleClick = () => {
-        if (open)
-            document.body.classList.remove('overflow-y-hidden')
-        else
-            document.body.classList.add('overflow-y-hidden')
        setOpen(open => !open);
    }

+    useEffect(() => {
+        if (open) document.body.style.overflowY = "hidden";
+        else document.body.style.overflowY = "initial";
+    }, [open]);
+
+    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (searchInput)
+            onSearch(searchInput)
+    }
+
+
    return (
        <nav className='block lg:hidden overflow-hidden z-[2010]'>
            <div className="p-16   w-screen flex items-center">
@@ -49,16 +61,23 @@ export default function NavMobile() {

                </div>}
                <motion.div
-                    className="pointer-events-auto bg-white w-full sm:max-w-[400px] min-h-full absolute left-full  border shadow-2xl sm:p-32 flex flex-col"
+                    className="pointer-events-auto bg-white w-full sm:max-w-[400px] min-h-full absolute left-full  border shadow-2xl pt-32 sm:p-32 flex flex-col"
                    variants={navListVariants}
                    animate={open ? "show" : "hide"}
                >
                    <div className="px-16">
-                        <div className='relative'>
-                            <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-thunder transform scale-125' />  app️</button>
+                        <form className='relative' onSubmit={handleSubmit}>
+                            <BsSearch className='absolute top-1/2 left-20 transform -translate-x-1/2  -translate-y-1/2 text-gray-500' />
+                            <input
+                                value={searchInput}
+                                onChange={e => setSearchInput(e.target.value)}
+                                className="bg-gray-100 text-gray-600 focus:outline-primary w-full py-12 px-20 pl-40 rounded-24 placeholder-gray-500" placeholder="Search" />
+
+                            {/* <input className="btn bg-gray-100 w-full  rounded-24 mt-16 placeholder-gray-500" placeholder="Search" /> */}
+                        </form>
+                        <button className="btn btn-primary w-full py-12 px-40 rounded-24 mt-64">Submit <AiFillThunderbolt className='inline-block text-thunder transform scale-125' />  app️</button>
+                        <button className="btn btn-gray w-full py-12 px-40 rounded-24 my-16"> <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </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
@@ -3,6 +3,10 @@ import { FaHome } from 'react-icons/fa';
 import { MdLocalFireDepartment } from 'react-icons/md';
 import { IoExtensionPuzzle } from 'react-icons/io5';
 import { AiFillThunderbolt } from 'react-icons/ai';
+import { BsSearch } from "react-icons/bs";
+import { FormEvent, useState } from "react";
+import { motion } from "framer-motion";
+import { GrClose } from 'react-icons/gr';

 export const navLinks = [
    { text: "Explore", url: "/", icon: FaHome, color: 'text-primary-600' },
@@ -13,22 +17,54 @@ export const navLinks = [

 export default function Navbar() {

+    const [searchOpen, setSearchOpen] = useState(false)
+    const [searchInput, setSearchInput] = useState("")
+
+    const toggleSearch = () => {
+        setSearchOpen(!searchOpen);
+    }
+
+    const onSearch = (search: string) => {
+        // Make Search Request
+        alert(`Your Searched for: ${search}`)
+    }
+
+    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        // Make Search Request
+        onSearch(searchInput)
+    }
+
    return (
        <>
-            <NavMobile />
+            <NavMobile onSearch={onSearch} />
            {/* Desktop Nav */}

            <nav className="hidden lg:flex py-36 px-32 items-center">
                <h2 className="text-h5 font-bold mr-40 lg:mr-64">makers.bolt.fun</h2>
-                <ul className="flex gap-32 lg:gap-64">
+                <ul className="flex gap-32 xl:gap-64">
                    {navLinks.map((link, idx) => <li key={idx} className="text-body4 hover:text-primary-600">
                        <a href={link.url}><link.icon className={`text-body2 align-middle inline-block mr-8 ${link.color}`} /> {link.text}</a></li>
                    )}

                </ul>
-                <div className="ml-auto">
-                    <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 className="ml-auto flex">
+                    <motion.div
+                        animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
+                        className="flex">
+                        <button className="btn btn-primary py-12 px-32 lg:px-40">Submit <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> App️</button>
+                        <button className="btn btn-gray rounded-3xl ml-16 py-12 px-16 lg:px-20"><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </button>
+
+                    </motion.div>
+                    <form onBlur={toggleSearch} className='relative flex items-center' onSubmit={handleSubmit}>
+                        {searchOpen ? <GrClose onClick={toggleSearch} className='text-gray-500 w-24 h-24 mx-12 z-20 hover:cursor-pointer' /> : <BsSearch onClick={toggleSearch} className='text-gray-500 w-24 h-24 mx-12 z-20 hover:cursor-pointer' />}
+                        <motion.input
+                            value={searchInput}
+                            onChange={e => setSearchInput(e.target.value)}
+                            initial={{ scaleX: .3, opacity: 0, originX: 'right' }}
+                            animate={searchOpen ? { scaleX: 1, opacity: 1, originX: 'right' } : { scaleX: .3, opacity: 0, originX: 'right' }}
+                            className="absolute top-0 right-0  z-10   bg-gray-200 text-gray-600 focus:outline-primary w-[300px] py-12 px-20 pr-40 rounded-24 placeholder-gray-500" placeholder="Search" />
+                    </form>
                </div>
            </nav>
        </>
--- a/src/redux/features/modals.slice.ts
+++ b/src/redux/features/modals.slice.ts
@@ -10,9 +10,14 @@ export enum Direction {
 export enum ModalId {
  None,
  Project,
-  LoginScanWallet,
-  LoginNativeWallet,
-  LoginSuccess,
+  Login_ScanWallet,
+  Login_NativeWallet,
+  Login_ExternalWallet,
+  Login_Success,
+  Claim_GenerateSignature,
+  Claim_CopySignature,
+  Claim_Submitted,
+  Claim_FundWithdraw,
  Vote,
 }

@@ -33,7 +38,7 @@ const initialState = {
  isLoading: false,
  direction: Direction.START,
  openModals: [
-    // { modalId: ModalId.Vote }
+    // { modalId: ModalId.Claim_FundWithdraw }
  ] as OpenModal[],
 } as StoreState;