mirror of
https://github.com/aljazceru/landscape-template.git
synced 2026-01-08 00:44:29 +01:00
more modals cards and logic
This commit is contained in:
=Mtg_Dev
67
package-lock.json
generated
67
package-lock.json
generated
@@ -18,6 +18,7 @@
|
||||
"@types/react-dom": "^17.0.10",
|
||||
"framer-motion": "^5.3.0",
|
||||
"react": "^17.0.2",
|
||||
"react-copy-to-clipboard": "^5.0.4",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-icons": "^4.3.1",
|
||||
"react-loader-spinner": "^4.0.0",
|
||||
@@ -32,6 +33,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@craco/craco": "^6.4.0",
|
||||
"@types/react-copy-to-clipboard": "^5.0.2",
|
||||
"autoprefixer": "^9.8.8",
|
||||
"gh-pages": "^3.2.3",
|
||||
"postcss": "^7.0.39",
|
||||
@@ -3651,6 +3653,15 @@
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-copy-to-clipboard": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
|
||||
"integrity": "sha512-O29AThfxrkUFRsZXjfSWR2yaWo0ppB1yLEnHA+Oh24oNetjBAwTDu1PmolIqdJKzsZiO4J1jn6R6TmO96uBvGg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "17.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.10.tgz",
|
||||
@@ -6293,6 +6304,14 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/copy-to-clipboard": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
|
||||
"integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
|
||||
"dependencies": {
|
||||
"toggle-selection": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.19.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.1.tgz",
|
||||
@@ -16699,6 +16718,18 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/react-copy-to-clipboard": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz",
|
||||
"integrity": "sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==",
|
||||
"dependencies": {
|
||||
"copy-to-clipboard": "^3",
|
||||
"prop-types": "^15.5.8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dev-utils": {
|
||||
"version": "11.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
|
||||
@@ -20067,6 +20098,11 @@
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/toggle-selection": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
|
||||
"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
|
||||
},
|
||||
"node_modules/toidentifier": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
|
||||
@@ -25135,6 +25171,15 @@
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"@types/react-copy-to-clipboard": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
|
||||
"integrity": "sha512-O29AThfxrkUFRsZXjfSWR2yaWo0ppB1yLEnHA+Oh24oNetjBAwTDu1PmolIqdJKzsZiO4J1jn6R6TmO96uBvGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"version": "17.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.10.tgz",
|
||||
@@ -27255,6 +27300,14 @@
|
||||
"resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
|
||||
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
|
||||
},
|
||||
"copy-to-clipboard": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
|
||||
"integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
|
||||
"requires": {
|
||||
"toggle-selection": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"core-js": {
|
||||
"version": "3.19.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.1.tgz",
|
||||
@@ -35244,6 +35297,15 @@
|
||||
"whatwg-fetch": "^3.4.1"
|
||||
}
|
||||
},
|
||||
"react-copy-to-clipboard": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz",
|
||||
"integrity": "sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==",
|
||||
"requires": {
|
||||
"copy-to-clipboard": "^3",
|
||||
"prop-types": "^15.5.8"
|
||||
}
|
||||
},
|
||||
"react-dev-utils": {
|
||||
"version": "11.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
|
||||
@@ -37895,6 +37957,11 @@
|
||||
"is-number": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"toggle-selection": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
|
||||
"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
|
||||
},
|
||||
"toidentifier": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"@types/react-dom": "^17.0.10",
|
||||
"framer-motion": "^5.3.0",
|
||||
"react": "^17.0.2",
|
||||
"react-copy-to-clipboard": "^5.0.4",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-icons": "^4.3.1",
|
||||
"react-loader-spinner": "^4.0.0",
|
||||
@@ -55,9 +56,10 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@craco/craco": "^6.4.0",
|
||||
"@types/react-copy-to-clipboard": "^5.0.2",
|
||||
"autoprefixer": "^9.8.8",
|
||||
"gh-pages": "^3.2.3",
|
||||
"postcss": "^7.0.39",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,32 +1,28 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
|
||||
import { useAppDispatch } from '../../utils/hooks';
|
||||
import { useAppDispatch, useAppSelector } 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'
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
|
||||
export default function Claim_CopySignatureCard({ onClose, direction, ...props }: ModalCard) {
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const { projectName, image } = useAppSelector(state => ({ projectName: state.project.project?.title, image: state.project.project?.thumbnail_image, }))
|
||||
|
||||
const generatedHash = '0x000330RaaSt302440zxc327jjiaswf19987183345pRReuBNksbaaueee'
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
dispatch(replaceModal({
|
||||
modalId: ModalId.Login_NativeWallet,
|
||||
modalId: ModalId.Claim_Submitted,
|
||||
direction: Direction.NEXT
|
||||
}))
|
||||
}, [dispatch])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
// const timeout = setTimeout(handleNext, 3000)
|
||||
// return () => clearTimeout(timeout)
|
||||
}, [handleNext])
|
||||
|
||||
const onCopy = () => {
|
||||
// Copy to Clipboard
|
||||
setTimeout(handleNext, 2000)
|
||||
// Copy to Clipboard
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -42,24 +38,28 @@ export default function Claim_CopySignatureCard({ onClose, direction, ...props }
|
||||
<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'
|
||||
src={image}
|
||||
className='w-80 h-80 object-cover rounded-2xl'
|
||||
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"
|
||||
Good job! Now paste this on the webpage
|
||||
<a className="font-bold" href="www.projectname.com/"
|
||||
target='_blank' rel='noreferrer'
|
||||
>projectname.com/well-known/bolt.fun.json</a>
|
||||
>www.projectname.com/</a>
|
||||
</p>
|
||||
<div className="input-wrapper mt-16">
|
||||
<div className="input-wrapper mt-32">
|
||||
<input
|
||||
className="input-field overflow-ellipsis"
|
||||
value={"Inurldp-3234234-ahhsdfm-dssdf-uooiRS-TTRASssa-334Qaas-UUI"}
|
||||
value={generatedHash}
|
||||
/>
|
||||
<IoIosCopy onClick={onCopy} className='input-icon hover:cursor-pointer' />
|
||||
<CopyToClipboard text={generatedHash} >
|
||||
<IoIosCopy onClick={onCopy} className='input-icon hover:cursor-pointer' />
|
||||
</CopyToClipboard>
|
||||
|
||||
</div>
|
||||
<div className="mt-32">
|
||||
<button className='btn btn-primary w-full' onClick={handleNext}>Submit for review</button>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
|
||||
import { useAppDispatch } from '../../utils/hooks';
|
||||
import { useAppDispatch, useAppSelector } from '../../utils/hooks';
|
||||
import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { IoClose } from 'react-icons/io5';
|
||||
@@ -11,8 +11,6 @@ export default function Claim_FundWithdrawCard({ onClose, direction, ...props }:
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
@@ -20,12 +18,12 @@ export default function Claim_FundWithdrawCard({ onClose, direction, ...props }:
|
||||
initial='initial'
|
||||
animate="animate"
|
||||
exit='exit'
|
||||
className="modal-card max-w-[270px] py-16 px-24 rounded-xl relative"
|
||||
className="modal-card max-w-[260px] 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'
|
||||
src={'assets/icons/lightning-small.svg'}
|
||||
className='w-48 h-48 object-cover rounded-full'
|
||||
alt="" />
|
||||
</div>
|
||||
<p className="text-h4 text-center font-bold">
|
||||
@@ -34,7 +32,7 @@ export default function Claim_FundWithdrawCard({ onClose, direction, ...props }:
|
||||
<p className="text-body4 text-center text-gray-400">
|
||||
2.78$
|
||||
</p>
|
||||
<div className="mt-32 flex flex-col gap-16">
|
||||
<div className="mt-16 flex flex-col gap-8">
|
||||
<button className='btn btn-primary w-full' >Fund</button>
|
||||
<button className='btn border-2 w-full' >Withdraw</button>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
|
||||
import { useAppDispatch } from '../../utils/hooks';
|
||||
import { useAppDispatch, useAppSelector } from '../../utils/hooks';
|
||||
import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { IoClose } from 'react-icons/io5';
|
||||
@@ -8,11 +8,13 @@ import { IoClose } from 'react-icons/io5';
|
||||
export default function Claim_GenerateSignatureCard({ onClose, direction, ...props }: ModalCard) {
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const { projectName, image } = useAppSelector(state => ({ projectName: state.project.project?.title, image: state.project.project?.thumbnail_image, }))
|
||||
|
||||
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
dispatch(replaceModal({
|
||||
modalId: ModalId.Login_NativeWallet,
|
||||
modalId: ModalId.Claim_CopySignature,
|
||||
direction: Direction.NEXT
|
||||
}))
|
||||
}, [dispatch])
|
||||
@@ -41,12 +43,12 @@ export default function Claim_GenerateSignatureCard({ onClose, direction, ...pro
|
||||
<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'
|
||||
src={image}
|
||||
className='w-80 h-80 object-cover rounded-2xl'
|
||||
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
|
||||
To claim ownership of <span className="font-bold">{projectName}</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>
|
||||
|
||||
@@ -28,7 +28,7 @@ export default function ProjectsRow({ title, projects }: Props) {
|
||||
const handleClick = (projectId: string) => {
|
||||
projectId = '123123123';
|
||||
if (!drag.current)
|
||||
dispatch(openModal({ modalId: ModalId.Project, initialModalProps: { projectId } }))
|
||||
dispatch(openModal({ modalId: ModalId.Project, propsToPass: { projectId } }))
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Direction, ModalId, replaceModal } from '../../redux/features/modals.sl
|
||||
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 { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { IoClose } from 'react-icons/io5';
|
||||
import { IoIosCopy } from 'react-icons/io'
|
||||
@@ -15,20 +15,17 @@ export default function Login_ExternalWalletCard({ onClose, direction, ...props
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
dispatch(replaceModal({
|
||||
modalId: ModalId.Login_NativeWallet,
|
||||
modalId: ModalId.Login_Success,
|
||||
direction: Direction.NEXT
|
||||
}))
|
||||
}, [dispatch])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
// const timeout = setTimeout(handleNext, 3000)
|
||||
// return () => clearTimeout(timeout)
|
||||
}, [handleNext])
|
||||
|
||||
const onCopy = () => {
|
||||
// Copy to Clipboard
|
||||
setTimeout(handleNext, 2000)
|
||||
setTimeout(handleNext, 1000)
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -45,19 +42,21 @@ export default function Login_ExternalWalletCard({ onClose, direction, ...props
|
||||
<div className='flex justify-center mt-32'>
|
||||
<img
|
||||
onClick={onCopy}
|
||||
className='w-full max-w-[200px]'
|
||||
className='w-full max-w-[160px]'
|
||||
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">
|
||||
<div className="input-wrapper mt-16 relative">
|
||||
<input
|
||||
className="input-field overflow-ellipsis"
|
||||
value={"Inurldp-3234234-ahhsdfm-dssdf-uooiRS-TTRASssa-334Qaas-UUI"}
|
||||
/>
|
||||
<IoIosCopy onClick={onCopy} className='input-icon hover:cursor-pointer' />
|
||||
<CopyToClipboard text={'Inurldp-3234234-ahhsdfm-dssdf-uooiRS-TTRASssa-334Qaas-UUI'} >
|
||||
<IoIosCopy onClick={onCopy} className='input-icon hover:cursor-pointer' />
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
|
||||
@@ -10,7 +10,7 @@ export default function Login_NativeWalletCard({ onClose, direction, ...props }:
|
||||
|
||||
const handleNext = () => {
|
||||
dispatch(replaceModal({
|
||||
modalId: ModalId.Login_Success,
|
||||
modalId: ModalId.Login_ExternalWallet,
|
||||
direction: Direction.NEXT
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -2,21 +2,21 @@ import { motion } from 'framer-motion'
|
||||
import { useAppDispatch } from '../../utils/hooks';
|
||||
import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { closeModal, openSceduledModal } from '../../redux/features/modals.slice';
|
||||
import { connectWallet } from '../../redux/features/wallet.slice';
|
||||
|
||||
export default function Login_SuccessCard({ onClose, direction, ...props }: ModalCard) {
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
// dispatch(replaceModal({
|
||||
// modalId: ModalId.Login_ScanWallet,
|
||||
// direction: Direction.NEXT
|
||||
// }))
|
||||
onClose && onClose()
|
||||
dispatch(closeModal())
|
||||
dispatch(openSceduledModal())
|
||||
}, [dispatch, onClose])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(connectWallet());
|
||||
const timeout = setTimeout(handleNext, 3000)
|
||||
return () => clearTimeout(timeout)
|
||||
}, [handleNext])
|
||||
|
||||
@@ -5,15 +5,22 @@ import { MdLocalFireDepartment } from 'react-icons/md';
|
||||
import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer';
|
||||
import { useQuery } from 'react-query';
|
||||
import { getProjectById } from '../../api';
|
||||
import { useAppDispatch } from '../../utils/hooks';
|
||||
import { ModalId, openModal } from '../../redux/features/modals.slice';
|
||||
import { useAppDispatch, useAppSelector } from '../../utils/hooks';
|
||||
import { ModalId, openModal, scheduleModal } from '../../redux/features/modals.slice';
|
||||
import { setProject } from '../../redux/features/project.slice';
|
||||
|
||||
|
||||
export default function ProjectCard({ onClose, direction, ...props }: ModalCard) {
|
||||
|
||||
|
||||
const { data: project, isLoading } = useQuery(['get-project', props.projectId], () => getProjectById(props.projectId))
|
||||
|
||||
const { data: project, isLoading } = useQuery(
|
||||
['get-project', props.projectId],
|
||||
() => getProjectById(props.projectId),
|
||||
{
|
||||
onSuccess: project => dispatch(setProject(project))
|
||||
}
|
||||
)
|
||||
const { isWalletConnected } = useAppSelector(state => ({ isWalletConnected: state.wallet.isConnected }))
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
if (isLoading || !project) return <></>;
|
||||
@@ -21,14 +28,29 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
|
||||
|
||||
const onVote = () => {
|
||||
|
||||
dispatch(openModal({ modalId: ModalId.Vote, initialModalProps: { projectId: props.projectId } }))
|
||||
if (!isWalletConnected) {
|
||||
dispatch(scheduleModal({ modalId: ModalId.Vote, propsToPass: { projectId: props.projectId } }))
|
||||
dispatch(openModal({
|
||||
modalId: ModalId.Login_ScanWallet
|
||||
}))
|
||||
} else
|
||||
dispatch(openModal({ modalId: ModalId.Vote, propsToPass: { projectId: props.projectId } }))
|
||||
}
|
||||
|
||||
const onClaim = () => {
|
||||
dispatch(openModal({
|
||||
modalId: ModalId.Login_ScanWallet,
|
||||
initialModalProps: { projectId: props.projectId },
|
||||
}))
|
||||
if (!isWalletConnected) {
|
||||
dispatch(scheduleModal({
|
||||
modalId: ModalId.Claim_GenerateSignature,
|
||||
propsToPass: { projectId: props.projectId },
|
||||
}))
|
||||
dispatch(openModal({
|
||||
modalId: ModalId.Login_ScanWallet
|
||||
}))
|
||||
} else
|
||||
dispatch(openModal({
|
||||
modalId: ModalId.Claim_GenerateSignature,
|
||||
propsToPass: { projectId: props.projectId },
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -56,7 +78,7 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
|
||||
</div>
|
||||
<div className="flex-shrink-0 hidden md:flex ml-auto gap-16">
|
||||
<button className="btn btn-primary py-12 px-24 rounded-lg my-16">Play <BsJoystick /></button>
|
||||
<button onClick={onVote} className="btn bg-yellow-100 hover:bg-yellow-50 py-12 px-24 rounded-lg my-16">Vote <MdLocalFireDepartment className='text-fire' /></button>
|
||||
<button onClick={onVote} className="btn border border-yellow-300 bg-yellow-100 hover:bg-yellow-50 py-12 px-24 rounded-lg my-16">Vote <MdLocalFireDepartment className='text-fire' /></button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-40 text-body4 leading-normal">{project.description}</p>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useEffect } from "react";
|
||||
import { closeModal, Direction, ModalId } from "../../../redux/features/modals.slice";
|
||||
import { closeModal, Direction, ModalId, removeScheduledModal } from "../../../redux/features/modals.slice";
|
||||
import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
|
||||
import Claim_CopySignatureCard from "../../ClaimProject/Claim_CopySignatureCard";
|
||||
import Claim_GenerateSignatureCard from "../../ClaimProject/Claim_GenerateSignatureCard";
|
||||
@@ -85,7 +85,10 @@ export default function ModalsContainer() {
|
||||
}))
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const onClose = () => dispatch(closeModal());
|
||||
const onClose = () => {
|
||||
dispatch(removeScheduledModal());
|
||||
dispatch(closeModal());
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) document.body.style.overflowY = "hidden";
|
||||
|
||||
@@ -4,9 +4,11 @@ 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 { FormEvent, useRef, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { GrClose } from 'react-icons/gr';
|
||||
import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
|
||||
import { ModalId, openModal } from "../../../redux/features/modals.slice";
|
||||
|
||||
export const navLinks = [
|
||||
{ text: "Explore", url: "/", icon: FaHome, color: 'text-primary-600' },
|
||||
@@ -18,9 +20,13 @@ export const navLinks = [
|
||||
export default function Navbar() {
|
||||
|
||||
const [searchOpen, setSearchOpen] = useState(false)
|
||||
const [searchInput, setSearchInput] = useState("")
|
||||
const [searchInput, setSearchInput] = useState("");
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const dispatch = useAppDispatch()
|
||||
const { isWalletConnected } = useAppSelector(state => ({ isWalletConnected: state.wallet.isConnected }))
|
||||
|
||||
const toggleSearch = () => {
|
||||
if (!searchOpen) inputRef.current?.focus();
|
||||
setSearchOpen(!searchOpen);
|
||||
}
|
||||
|
||||
@@ -29,6 +35,18 @@ export default function Navbar() {
|
||||
alert(`Your Searched for: ${search}`)
|
||||
}
|
||||
|
||||
const onConnectWallet = () => {
|
||||
dispatch(openModal({
|
||||
modalId: ModalId.Login_ScanWallet
|
||||
}));
|
||||
}
|
||||
|
||||
const onWithdraw = () => {
|
||||
dispatch(openModal({
|
||||
modalId: ModalId.Claim_FundWithdraw
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
// Make Search Request
|
||||
@@ -53,17 +71,20 @@ export default function Navbar() {
|
||||
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>
|
||||
|
||||
{isWalletConnected ?
|
||||
<button className="btn border ml-16 py-12 px-16 lg:px-20" onClick={onWithdraw}>2.2k Sats <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /></button>
|
||||
: <button className="btn border ml-16 py-12 px-16 lg:px-20" onClick={onConnectWallet}><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
|
||||
{searchOpen && <motion.input
|
||||
ref={inputRef}
|
||||
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" />
|
||||
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>
|
||||
|
||||
@@ -103,8 +103,8 @@
|
||||
"id": "123123123",
|
||||
"cover_image": "https://s3-alpha-sig.figma.com/img/07b8/5d84/145942255afd215b3da26dbbf1dd03bd?Expires=1638144000&Signature=Cl1DUQJIUsrrFi48M~qU1r3Z0agGdy-uiNUao5g8-nu34QtoyWTFPXvaH3naSZBYqcPyKFq1jaXF6Mw1uj1hdWwGhXhMPLnKNJFFrGViVXhXu-3YeCPY9p4-IcieFJBZPVA~zDY8zxY5b06loWsINAVx4eMHRAhSWl~~Mca5PjlSXloiYrT00W-6c9m8gevfMMX~PsHQedzwYzg0j2DlnhPX8LbRkli1G2OxtCaFwo3~HGHXIlFGuGU1uXRvi1qBWrdjdsuWgIly1ekcFfJWAKmwYXk06EtCmfWRgGYbD7cBK~lwOkFofbf1LW0yqLv0hr4svwToH~3FiHenrCF-1g__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
|
||||
"thumbnail_image": "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",
|
||||
"title": "Project Name",
|
||||
"website": "www.project.com",
|
||||
"title": "{Project Name}",
|
||||
"website": "https://www.project.com",
|
||||
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nobis aliquam, minima assumenda earum sapiente pariatur cupiditate error nihil, eius corporis ratione unde perspiciatis tenetur ipsa aut ex consequatur maiores eligendi quidem exercitationem suscipit. Ex hic reprehenderit deleniti possimus culpa animi velit? Dolores, nemo quis minima sapiente sed laborum ipsam?",
|
||||
"tags": [
|
||||
{
|
||||
|
||||
@@ -5,19 +5,19 @@
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply text-gray-900 px-42 bg-gray-25 hover:bg-gray-100 py-12 font-sans rounded-8 shadow-md font-regular;
|
||||
@apply text-gray-900 px-42 bg-gray-25 hover:bg-gray-50 py-12 font-sans rounded-8 font-regular;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-primary-500 hover:bg-primary-400 text-white;
|
||||
@apply bg-primary-500 shadow-md hover:bg-primary-400 text-white;
|
||||
}
|
||||
|
||||
.btn-gray {
|
||||
@apply bg-gray-200 hover:bg-gray-100 text-gray-900;
|
||||
@apply bg-gray-100 border-2 hover:bg-gray-200 text-gray-900;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
@apply w-full relative border rounded-lg shadow flex h-42 overflow-hidden focus-within:outline-primary;
|
||||
@apply w-full relative border rounded-lg shadow flex h-42 focus-within:outline-primary;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
|
||||
@@ -23,13 +23,15 @@ export enum ModalId {
|
||||
|
||||
interface OpenModal {
|
||||
modalId: ModalId;
|
||||
propsToPass: any;
|
||||
propsToPass?: any;
|
||||
}
|
||||
|
||||
interface StoreState {
|
||||
isOpen: boolean;
|
||||
isLoading: boolean;
|
||||
direction: Direction;
|
||||
flows: ModalId[];
|
||||
toOpenLater: OpenModal | null;
|
||||
openModals: OpenModal[];
|
||||
}
|
||||
|
||||
@@ -37,9 +39,9 @@ const initialState = {
|
||||
isOpen: false,
|
||||
isLoading: false,
|
||||
direction: Direction.START,
|
||||
openModals: [
|
||||
// { modalId: ModalId.Claim_FundWithdraw }
|
||||
] as OpenModal[],
|
||||
flows: [],
|
||||
toOpenLater: null,
|
||||
openModals: [] as OpenModal[],
|
||||
} as StoreState;
|
||||
|
||||
export const modalSlice = createSlice({
|
||||
@@ -50,15 +52,32 @@ export const modalSlice = createSlice({
|
||||
state.direction = action.payload;
|
||||
},
|
||||
|
||||
scheduleModal(state, action: PayloadAction<OpenModal>) {
|
||||
state.toOpenLater = action.payload;
|
||||
},
|
||||
|
||||
openSceduledModal(state) {
|
||||
if (state.toOpenLater) {
|
||||
state.direction = Direction.START;
|
||||
state.isOpen = true;
|
||||
state.openModals.push(state.toOpenLater);
|
||||
state.toOpenLater = null;
|
||||
}
|
||||
},
|
||||
|
||||
removeScheduledModal(state) {
|
||||
state.toOpenLater = null;
|
||||
},
|
||||
|
||||
openModal(
|
||||
state,
|
||||
action: PayloadAction<{ modalId: ModalId; initialModalProps?: any }>
|
||||
action: PayloadAction<{ modalId: ModalId; propsToPass?: any }>
|
||||
) {
|
||||
state.direction = Direction.START;
|
||||
state.isOpen = true;
|
||||
state.openModals.push({
|
||||
modalId: action.payload.modalId,
|
||||
propsToPass: action.payload.initialModalProps || {},
|
||||
propsToPass: action.payload.propsToPass,
|
||||
});
|
||||
},
|
||||
|
||||
@@ -66,7 +85,7 @@ export const modalSlice = createSlice({
|
||||
state,
|
||||
action: PayloadAction<{
|
||||
modalId: ModalId;
|
||||
initialModalProps?: any;
|
||||
propsToPass?: any;
|
||||
direction: Direction;
|
||||
}>
|
||||
) {
|
||||
@@ -74,7 +93,7 @@ export const modalSlice = createSlice({
|
||||
state.openModals.pop();
|
||||
state.openModals.push({
|
||||
modalId: action.payload.modalId,
|
||||
propsToPass: action.payload.initialModalProps || {},
|
||||
propsToPass: action.payload.propsToPass || {},
|
||||
});
|
||||
},
|
||||
|
||||
@@ -91,6 +110,9 @@ export const {
|
||||
openModal,
|
||||
replaceModal,
|
||||
setDirection,
|
||||
scheduleModal,
|
||||
openSceduledModal,
|
||||
removeScheduledModal,
|
||||
} = modalSlice.actions;
|
||||
|
||||
export default modalSlice.reducer;
|
||||
|
||||
30
src/redux/features/project.slice.ts
Normal file
30
src/redux/features/project.slice.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||
import { Project } from "../../utils/interfaces";
|
||||
|
||||
import mockData from "../../api/mockData.json";
|
||||
|
||||
interface StoreState {
|
||||
project: Project | null;
|
||||
}
|
||||
|
||||
const initialState = {
|
||||
project: mockData.project,
|
||||
} as StoreState;
|
||||
|
||||
export const projectSlice = createSlice({
|
||||
name: "project",
|
||||
initialState,
|
||||
reducers: {
|
||||
setProject(state, action: PayloadAction<Project>) {
|
||||
state.project = action.payload;
|
||||
},
|
||||
|
||||
unsetProject(state) {
|
||||
state.project = null;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setProject } = projectSlice.actions;
|
||||
|
||||
export default projectSlice.reducer;
|
||||
@@ -13,9 +13,13 @@ const initialState = {
|
||||
export const walletSlice = createSlice({
|
||||
name: "wallet",
|
||||
initialState,
|
||||
reducers: {},
|
||||
reducers: {
|
||||
connectWallet(state) {
|
||||
state.isConnected = true;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const {} = walletSlice.actions;
|
||||
export const { connectWallet } = walletSlice.actions;
|
||||
|
||||
export default walletSlice.reducer;
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import modalsSlice from "./features/modals.slice";
|
||||
import projectSlice from "./features/project.slice";
|
||||
import walletSlice from "./features/wallet.slice";
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
modals: modalsSlice,
|
||||
project: projectSlice,
|
||||
wallet: walletSlice,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user