diff --git a/public/assets/images/header-2.jfif b/public/assets/images/header-2.jfif new file mode 100644 index 0000000..bdebaa8 Binary files /dev/null and b/public/assets/images/header-2.jfif differ diff --git a/public/assets/images/header.jpg b/public/assets/images/header.jpg new file mode 100644 index 0000000..66d5bf1 Binary files /dev/null and b/public/assets/images/header.jpg differ diff --git a/src/pages/ExplorePage/ProjectCardMini/ProjectCardMini.Skeleton.tsx b/src/Components/Cards/ProjectCardMini/ProjectCardMini.Skeleton.tsx similarity index 100% rename from src/pages/ExplorePage/ProjectCardMini/ProjectCardMini.Skeleton.tsx rename to src/Components/Cards/ProjectCardMini/ProjectCardMini.Skeleton.tsx diff --git a/src/pages/ExplorePage/ProjectCardMini/ProjectCardMini.stories.tsx b/src/Components/Cards/ProjectCardMini/ProjectCardMini.stories.tsx similarity index 94% rename from src/pages/ExplorePage/ProjectCardMini/ProjectCardMini.stories.tsx rename to src/Components/Cards/ProjectCardMini/ProjectCardMini.stories.tsx index f964e91..1e464fa 100644 --- a/src/pages/ExplorePage/ProjectCardMini/ProjectCardMini.stories.tsx +++ b/src/Components/Cards/ProjectCardMini/ProjectCardMini.stories.tsx @@ -6,7 +6,7 @@ import ProjectCardMiniSkeleton from './ProjectCardMini.Skeleton'; export default { - title: 'Explore Page/Project Card Mini', + title: 'Projects/Project Card Mini', component: ProjectCardMini, } as ComponentMeta; diff --git a/src/pages/ExplorePage/ProjectCardMini/ProjectCardMini.tsx b/src/Components/Cards/ProjectCardMini/ProjectCardMini.tsx similarity index 84% rename from src/pages/ExplorePage/ProjectCardMini/ProjectCardMini.tsx rename to src/Components/Cards/ProjectCardMini/ProjectCardMini.tsx index 8003db1..f4ae490 100644 --- a/src/pages/ExplorePage/ProjectCardMini/ProjectCardMini.tsx +++ b/src/Components/Cards/ProjectCardMini/ProjectCardMini.tsx @@ -1,5 +1,5 @@ import { MdLocalFireDepartment } from "react-icons/md"; -import { ProjectCard } from "../../../utils/interfaces"; +import { ProjectCard } from "src/utils/interfaces"; interface Props { @@ -9,7 +9,7 @@ interface Props { export default function ProjectCardMini({ project, onClick }: Props) { return ( -
onClick(project.id)}> +
onClick(project.id)}> {project.title}

{project.title}

diff --git a/src/pages/CategoryPage/CategoryPage.tsx b/src/pages/CategoryPage/CategoryPage.tsx new file mode 100644 index 0000000..3deda80 --- /dev/null +++ b/src/pages/CategoryPage/CategoryPage.tsx @@ -0,0 +1 @@ +export { } \ No newline at end of file diff --git a/src/pages/CategoryPage/HeaderImage/HeaderImage.stories.tsx b/src/pages/CategoryPage/HeaderImage/HeaderImage.stories.tsx new file mode 100644 index 0000000..306df63 --- /dev/null +++ b/src/pages/CategoryPage/HeaderImage/HeaderImage.stories.tsx @@ -0,0 +1,23 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import HeaderImage from './HeaderImage'; + +export default { + title: 'Pages/Category/Header Image', + component: HeaderImage, + argTypes: { + backgroundColor: { control: 'color' }, + }, +} as ComponentMeta; + + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}); +Default.args = { + title: 'Art & Collectibles', + apps_count: 44, + img: '/assets/images/header-2.jfif' +} + + diff --git a/src/pages/CategoryPage/HeaderImage/HeaderImage.tsx b/src/pages/CategoryPage/HeaderImage/HeaderImage.tsx new file mode 100644 index 0000000..f098f7e --- /dev/null +++ b/src/pages/CategoryPage/HeaderImage/HeaderImage.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { FiArrowLeft } from 'react-icons/fi' + +interface Props { + title: string + apps_count: number + img: string +} + +export default function HeaderImage({ title, apps_count, img }: Props) { + return ( +
+ {`${title} +
+ +

{title}

+

{apps_count} apps

+
+ ) +} diff --git a/src/pages/CategoryPage/ProjectsGrid/ProjectsGrid.stories.tsx b/src/pages/CategoryPage/ProjectsGrid/ProjectsGrid.stories.tsx new file mode 100644 index 0000000..99bb93e --- /dev/null +++ b/src/pages/CategoryPage/ProjectsGrid/ProjectsGrid.stories.tsx @@ -0,0 +1,21 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import ProjectsGrid from './ProjectsGrid'; + +export default { + title: 'Pages/Category/Projects Grid', + component: ProjectsGrid, + argTypes: { + backgroundColor: { control: 'color' }, + }, +} as ComponentMeta; + + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}); +Default.args = { + +} + + diff --git a/src/pages/CategoryPage/ProjectsGrid/ProjectsGrid.tsx b/src/pages/CategoryPage/ProjectsGrid/ProjectsGrid.tsx new file mode 100644 index 0000000..3d6d62f --- /dev/null +++ b/src/pages/CategoryPage/ProjectsGrid/ProjectsGrid.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import ProjectCardMini from 'src/Components/Cards/ProjectCardMini/ProjectCardMini' +import mockData from 'src/api/mockData.json' + +export default function ProjectsGrid() { + return ( +
+ {Array(30).fill(0).map((_, idx) => { }} />)} +
+ ) +} diff --git a/src/pages/ExplorePage/ProjectsRow/ProjectsRow.Skeleton.tsx b/src/pages/ExplorePage/ProjectsRow/ProjectsRow.Skeleton.tsx index 751679b..9a4f7f6 100644 --- a/src/pages/ExplorePage/ProjectsRow/ProjectsRow.Skeleton.tsx +++ b/src/pages/ExplorePage/ProjectsRow/ProjectsRow.Skeleton.tsx @@ -1,5 +1,5 @@ -import ProjectCardMiniSkeleton from "../ProjectCardMini/ProjectCardMini.Skeleton"; +import ProjectCardMiniSkeleton from "src/Components/Cards/ProjectCardMini/ProjectCardMini.Skeleton"; import Skeleton from "react-loading-skeleton"; export default function ProjectsRowSkeleton() { diff --git a/src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx b/src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx index 6861094..da4664e 100644 --- a/src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx +++ b/src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx @@ -1,15 +1,19 @@ -import { ReactElement, useRef, useState } from "react"; -import { ProjectCard } from "../../../utils/interfaces"; +import { ReactNode, useEffect, useRef, useState } from "react"; +import { ProjectCard } from "src/utils/interfaces"; import Carousel from 'react-multi-carousel'; -import { MdArrowRight, MdDoubleArrow, } from 'react-icons/md'; -import { useAppDispatch } from "../../../utils/hooks"; -import { openModal } from "../../../redux/features/modals.slice"; -import ProjectCardMini from "../ProjectCardMini/ProjectCardMini"; +import { MdDoubleArrow, } from 'react-icons/md'; +import { useAppDispatch } from "src/utils/hooks"; +import { openModal } from "src/redux/features/modals.slice"; +import ProjectCardMini from "src/Components/Cards/ProjectCardMini/ProjectCardMini"; import { useResizeListener } from 'src/utils/hooks' import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io"; import './style.css'; - +interface Props { + title: string | ReactNode, + categoryId: string, + projects: ProjectCard[] +} const responsive = { all: { @@ -29,23 +33,35 @@ function calcNumItems() { return items; } -interface Props { title: string | ReactElement, categoryId: string, projects: ProjectCard[] } + export default function ProjectsRow({ title, categoryId, projects }: Props) { const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems); const dispatch = useAppDispatch() + let drag = useRef(false); responsive.all.items = carouselItmsCnt - let drag = useRef(false); - document.addEventListener('mousedown', () => drag.current = false); - document.addEventListener('mousemove', () => drag.current = true); + useEffect(() => { + const mousedownListener = () => drag.current = false + const mousemoveListener = () => drag.current = true + + document.addEventListener('mousedown', mousedownListener); + document.addEventListener('mousemove', mousemoveListener); + + return () => { + document.removeEventListener('mousedown', mousedownListener); + document.removeEventListener('mousemove', mousemoveListener); + } + }, []) + + const handleClick = (projectId: string) => { if (!drag.current) - dispatch(openModal({ Modal: "ProjectCard", props: { projectId } })) + dispatch(openModal({ Modal: "ProjectDetailsCard", props: { projectId } })) } useResizeListener(() => { @@ -57,7 +73,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) { return ( -
+

{title} { @@ -85,7 +101,9 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) { } > {projects.map((project, idx) => - +
+ +
)}

diff --git a/src/pages/ProjectPage/ClaimProject/Claim_CopySignatureCard.stories.tsx b/src/pages/ProjectPage/ClaimProject/Claim_CopySignatureCard.stories.tsx index a7c4042..59ef388 100644 --- a/src/pages/ProjectPage/ClaimProject/Claim_CopySignatureCard.stories.tsx +++ b/src/pages/ProjectPage/ClaimProject/Claim_CopySignatureCard.stories.tsx @@ -5,7 +5,7 @@ import Claim_CopySignatureCard from './Claim_CopySignatureCard'; import { ModalsDecorator } from 'src/utils/storybookDecorators' export default { - title: 'Claim/Copy Signature Card', + title: 'Projects/Claim/Copy Signature Card', component: Claim_CopySignatureCard, decorators: [ModalsDecorator] diff --git a/src/pages/ProjectPage/ClaimProject/Claim_FundWithdrawCard.stories.tsx b/src/pages/ProjectPage/ClaimProject/Claim_FundWithdrawCard.stories.tsx index 21b4b09..4e6188f 100644 --- a/src/pages/ProjectPage/ClaimProject/Claim_FundWithdrawCard.stories.tsx +++ b/src/pages/ProjectPage/ClaimProject/Claim_FundWithdrawCard.stories.tsx @@ -5,7 +5,7 @@ import Claim_FundWithdrawCard from './Claim_FundWithdrawCard'; import { ModalsDecorator } from 'src/utils/storybookDecorators' export default { - title: 'Claim/Fund Withdraw Card', + title: 'Projects/Claim/Fund Withdraw Card', component: Claim_FundWithdrawCard, decorators: [ModalsDecorator] diff --git a/src/pages/ProjectPage/ClaimProject/Claim_GenerateSignatureCard.stories.tsx b/src/pages/ProjectPage/ClaimProject/Claim_GenerateSignatureCard.stories.tsx index 6e5016e..b97f0c8 100644 --- a/src/pages/ProjectPage/ClaimProject/Claim_GenerateSignatureCard.stories.tsx +++ b/src/pages/ProjectPage/ClaimProject/Claim_GenerateSignatureCard.stories.tsx @@ -5,7 +5,7 @@ import Claim_GenerateSignatureCard from './Claim_GenerateSignatureCard'; import { ModalsDecorator } from 'src/utils/storybookDecorators' export default { - title: 'Claim/Generate Signature Card', + title: 'Projects/Claim/Generate Signature Card', component: Claim_GenerateSignatureCard, decorators: [ModalsDecorator] diff --git a/src/pages/ProjectPage/ClaimProject/Claim_SubmittedCard.stories.tsx b/src/pages/ProjectPage/ClaimProject/Claim_SubmittedCard.stories.tsx index 3c22cae..69238cc 100644 --- a/src/pages/ProjectPage/ClaimProject/Claim_SubmittedCard.stories.tsx +++ b/src/pages/ProjectPage/ClaimProject/Claim_SubmittedCard.stories.tsx @@ -5,7 +5,7 @@ import Claim_SubmittedCard from './Claim_SubmittedCard'; import { ModalsDecorator } from 'src/utils/storybookDecorators' export default { - title: 'Claim/Submitted Card', + title: 'Projects/Claim/Submitted Card', component: Claim_SubmittedCard, decorators: [ModalsDecorator] diff --git a/src/pages/ProjectPage/ProjectCard/ProjectCard.stories.tsx b/src/pages/ProjectPage/ProjectCard/ProjectCard.stories.tsx deleted file mode 100644 index 13f2dda..0000000 --- a/src/pages/ProjectPage/ProjectCard/ProjectCard.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import ProjectCard from './ProjectCard'; -import ProjectCardSkeleton from './ProjectCard.Skeleton'; - -import { ModalsDecorator } from 'src/utils/storybookDecorators' - -export default { - title: 'Project/Project Card', - component: ProjectCard, - - decorators: [ModalsDecorator] -} as ComponentMeta; - -const Template: ComponentStory = (args) => ; - -export const Default = Template.bind({ -}); - -Default.args = { - projectId: '3' -} - - - -const LoadingTemplate: ComponentStory = (args) => ; -export const LoadingState = LoadingTemplate.bind({}) \ No newline at end of file diff --git a/src/pages/ProjectPage/ProjectCard/ProjectCard.Skeleton.tsx b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx similarity index 97% rename from src/pages/ProjectPage/ProjectCard/ProjectCard.Skeleton.tsx rename to src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx index 079048b..ad32557 100644 --- a/src/pages/ProjectPage/ProjectCard/ProjectCard.Skeleton.tsx +++ b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx @@ -9,7 +9,7 @@ import { useAppSelector } from 'src/utils/hooks'; interface Props extends ModalCard { } -export default function ProjectCardSkeleton({ onClose, direction, ...props }: Props) { +export default function ProjectDetailsCardSkeleton({ onClose, direction, ...props }: Props) { diff --git a/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.stories.tsx b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.stories.tsx new file mode 100644 index 0000000..492896c --- /dev/null +++ b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.stories.tsx @@ -0,0 +1,27 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import ProjectDetailsCard from './ProjectDetailsCard'; +import ProjectDetailsCardSkeleton from './ProjectDetailsCard.Skeleton'; + +import { ModalsDecorator } from 'src/utils/storybookDecorators' + +export default { + title: 'Project/Project Details Card', + component: ProjectDetailsCard, + + decorators: [ModalsDecorator] +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Default = Template.bind({ +}); + +Default.args = { + projectId: '3' +} + + + +const LoadingTemplate: ComponentStory = (args) => ; +export const LoadingState = LoadingTemplate.bind({}) \ No newline at end of file diff --git a/src/pages/ProjectPage/ProjectCard/ProjectCard.tsx b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx similarity index 91% rename from src/pages/ProjectPage/ProjectCard/ProjectCard.tsx rename to src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx index e33b085..fb71786 100644 --- a/src/pages/ProjectPage/ProjectCard/ProjectCard.tsx +++ b/src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx @@ -8,8 +8,8 @@ import { setProject } from 'src/redux/features/project.slice'; import Button from 'src/Components/Button/Button'; import { PROJECT_BY_ID_QUERY, PROJECT_BY_ID_RES, PROJECT_BY_ID_VARS } from './query' import { AiFillThunderbolt } from 'react-icons/ai'; -import ProjectCardSkeleton from './ProjectCard.Skeleton' -import TipButton from 'src/Components/TipButton/TipButton'; +import ProjectCardSkeleton from './ProjectDetailsCard.Skeleton' +import VoteButton from 'src/pages/ProjectPage/VoteButton/VoteButton'; import { Wallet_Service } from 'src/services' @@ -17,7 +17,7 @@ interface Props extends ModalCard { projectId: string } -export default function ProjectCard({ onClose, direction, projectId, ...props }: Props) { +export default function ProjectDetailsCard({ onClose, direction, projectId, ...props }: Props) { const dispatch = useAppDispatch(); @@ -46,15 +46,15 @@ export default function ProjectCard({ onClose, direction, projectId, ...props }: Wallet_Service.connectWallet() } - const onTip = (tip?: number) => { + const onVote = (votes?: number) => { if (!isWalletConnected) { - dispatch(scheduleModal({ Modal: 'TipCard', props: { tipValue: tip, projectId: project.id } })) + dispatch(scheduleModal({ Modal: 'VoteCard', props: { initVotes: votes, projectId: project.id } })) dispatch(openModal({ Modal: 'Login_ScanningWalletCard' })) } else - dispatch(openModal({ Modal: 'TipCard', props: { tipValue: tip, projectId: project.id } })) + dispatch(openModal({ Modal: 'VoteCard', props: { initVotes: votes, projectId: project.id } })) } @@ -98,7 +98,7 @@ export default function ProjectCard({ onClose, direction, projectId, ...props }:
{isWalletConnected ? - + : } @@ -108,7 +108,7 @@ export default function ProjectCard({ onClose, direction, projectId, ...props }:
{isWalletConnected ? - + : } diff --git a/src/pages/ProjectPage/ProjectCard/query.ts b/src/pages/ProjectPage/ProjectDetailsCard/query.ts similarity index 100% rename from src/pages/ProjectPage/ProjectCard/query.ts rename to src/pages/ProjectPage/ProjectDetailsCard/query.ts diff --git a/src/Components/TipButton/TipButton.stories.tsx b/src/pages/ProjectPage/VoteButton/VoteButton.stories.tsx similarity index 50% rename from src/Components/TipButton/TipButton.stories.tsx rename to src/pages/ProjectPage/VoteButton/VoteButton.stories.tsx index cccca96..55e8e53 100644 --- a/src/Components/TipButton/TipButton.stories.tsx +++ b/src/pages/ProjectPage/VoteButton/VoteButton.stories.tsx @@ -1,17 +1,17 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; -import TipButton from './TipButton'; +import VoteButton from './VoteButton'; import { centerDecorator } from 'src/utils/storybookDecorators' export default { - title: 'Shared/Tip Button', - component: TipButton, + title: 'Projects/Tip Button', + component: VoteButton, decorators: [ centerDecorator ] -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => { }} />; +const Template: ComponentStory = (args) => { }} />; export const Default = Template.bind({}); diff --git a/src/Components/TipButton/TipButton.tsx b/src/pages/ProjectPage/VoteButton/VoteButton.tsx similarity index 86% rename from src/Components/TipButton/TipButton.tsx rename to src/pages/ProjectPage/VoteButton/VoteButton.tsx index 2032d84..7ad79ae 100644 --- a/src/Components/TipButton/TipButton.tsx +++ b/src/pages/ProjectPage/VoteButton/VoteButton.tsx @@ -3,7 +3,7 @@ import Button from 'src/Components/Button/Button' import { useAppSelector, usePressHolder } from 'src/utils/hooks' import _throttle from 'lodash.throttle' import { ComponentProps, useRef, useState } from 'react' -import './tipbutton.style.css' +import './vote-button.style.css' import { random, randomItem } from 'src/utils/helperFunctions' @@ -17,12 +17,12 @@ interface Particle { } type Props = { - onTip: (tip: number) => void + onVote: (Vote: number) => void } & Omit, 'children'> -export default function TipButton({ onTip = () => { }, ...props }: Props) { - const [tipCnt, setTipCnt] = useState(0) - const tipCntRef = useRef(0); +export default function VoteButton({ onVote = () => { }, ...props }: Props) { + const [voteCnt, setVoteCnt] = useState(0) + const voteCntRef = useRef(0); const [sparks, setSparks] = useState([]); const [wasActive, setWasActive] = useState(false); @@ -30,10 +30,10 @@ export default function TipButton({ onTip = () => { }, ...props }: Props) { const { onPressDown, onPressUp } = usePressHolder(_throttle(() => { - const _incStep = (Math.ceil((tipCnt + 1) / 10) + 1) ** 2 * 10; - setTipCnt(s => { + const _incStep = (Math.ceil((voteCnt + 1) / 10) + 1) ** 2 * 10; + setVoteCnt(s => { const newValue = s + _incStep; - tipCntRef.current = newValue; + voteCntRef.current = newValue; return newValue; }) @@ -70,14 +70,14 @@ export default function TipButton({ onTip = () => { }, ...props }: Props) { setWasActive(false); if (event?.preventDefault) event.preventDefault(); onPressUp(); - if (tipCnt === 0) - onTip(10); + if (voteCnt === 0) + onVote(10); else setTimeout(() => { setSparks([]); - onTip(tipCntRef.current); - setTipCnt(0); - tipCntRef.current = 0; + onVote(voteCntRef.current); + setVoteCnt(0); + voteCntRef.current = 0; }, 500) } @@ -91,17 +91,17 @@ export default function TipButton({ onTip = () => { }, ...props }: Props) { onTouchEnd={handlePressUp} size='md' color='none' - className="tip-button border relative 100 my-16 noselect" + className="vote-button border relative 100 my-16 noselect" style={{ - "--scale": tipCnt, + "--scale": voteCnt, } as any} {...props} > Hold To Vote !!! {tipCnt} + className='Vote-counter' + >{voteCnt}
; +} as ComponentMeta; -const Template: ComponentStory = (args) => ; +const Template: ComponentStory = (args) => ; export const Default = Template.bind({}); diff --git a/src/pages/ProjectPage/Tip/TipCard.tsx b/src/pages/ProjectPage/VoteCard/VoteCard.tsx similarity index 89% rename from src/pages/ProjectPage/Tip/TipCard.tsx rename to src/pages/ProjectPage/VoteCard/VoteCard.tsx index a9fe434..c67e7be 100644 --- a/src/pages/ProjectPage/Tip/TipCard.tsx +++ b/src/pages/ProjectPage/VoteCard/VoteCard.tsx @@ -9,6 +9,7 @@ import useWindowSize from "react-use/lib/useWindowSize"; import Confetti from "react-confetti"; import { Wallet_Service } from 'src/services'; import styles from './style.module.css' +import { CONFIRM_VOTE_QUERY, CONFIRM_VOTE_QUERY_RES_TYPE, VOTE_QUERY, VOTE_QUERY_RES_TYPE } from './query'; const defaultOptions = [ { text: '100 sat', value: 100 }, @@ -27,36 +28,13 @@ enum PaymentStatus { CANCELED } -const VOTE = gql` -mutation Mutation($projectId: Int!, $amountInSat: Int!) { - vote(project_id: $projectId, amount_in_sat: $amountInSat) { - id - amount_in_sat - payment_request - payment_hash - paid - } -} -`; - -const CONFIRM_VOTE = gql` -mutation Mutation($paymentRequest: String!, $preimage: String!) { - confirmVote(payment_request: $paymentRequest, preimage: $preimage) { - id - amount_in_sat - paid - payment_hash - payment_request - } -} -`; interface Props extends ModalCard { - tipValue?: number; + initVotes?: number; projectId: string } -export default function TipCard({ onClose, direction, tipValue, projectId, ...props }: Props) { +export default function VoteCard({ onClose, direction, initVotes, projectId, ...props }: Props) { const { width, height } = useWindowSize() const { isWalletConnected } = useAppSelector(state => ({ @@ -65,10 +43,10 @@ export default function TipCard({ onClose, direction, tipValue, projectId, ...pr const [selectedOption, setSelectedOption] = useState(10); - const [voteAmount, setVoteAmount] = useState(tipValue ?? 10); + const [voteAmount, setVoteAmount] = useState(initVotes ?? 10); const [paymentStatus, setPaymentStatus] = useState(PaymentStatus.DEFAULT); - const [vote, { data }] = useMutation(VOTE, { + const [vote, { data }] = useMutation(VOTE_QUERY, { onCompleted: async (votingData) => { try { setPaymentStatus(PaymentStatus.AWAITING_PAYMENT); @@ -97,7 +75,7 @@ export default function TipCard({ onClose, direction, tipValue, projectId, ...pr } }); - const [confirmVote, { data: confirmedVoteData }] = useMutation(CONFIRM_VOTE, { + const [confirmVote, { data: confirmedVoteData }] = useMutation(CONFIRM_VOTE_QUERY, { refetchQueries: [ 'Project', 'AllCategoriesProjects' diff --git a/src/pages/ProjectPage/VoteCard/query.ts b/src/pages/ProjectPage/VoteCard/query.ts new file mode 100644 index 0000000..cc19bf4 --- /dev/null +++ b/src/pages/ProjectPage/VoteCard/query.ts @@ -0,0 +1,45 @@ +import { gql } from "@apollo/client"; + +export const VOTE_QUERY = gql` +mutation Mutation($projectId: Int!, $amountInSat: Int!) { + vote(project_id: $projectId, amount_in_sat: $amountInSat) { + id + amount_in_sat + payment_request + payment_hash + paid + } +} +`; + +export type VOTE_QUERY_RES_TYPE = { + vote: { + id: number; + amount_in_sat: number; + payment_request: string; + payment_hash: string; + paid: boolean; + } +} + +export const CONFIRM_VOTE_QUERY = gql` +mutation Mutation($paymentRequest: String!, $preimage: String!) { + confirmVote(payment_request: $paymentRequest, preimage: $preimage) { + id + amount_in_sat + paid + payment_hash + payment_request + } +} +`; + +export type CONFIRM_VOTE_QUERY_RES_TYPE = { + confirmVote: { + id: number; + amount_in_sat: number; + paid: boolean; + payment_hash: string; + payment_request: string; + } +} \ No newline at end of file diff --git a/src/pages/ProjectPage/Tip/style.module.css b/src/pages/ProjectPage/VoteCard/style.module.css similarity index 100% rename from src/pages/ProjectPage/Tip/style.module.css rename to src/pages/ProjectPage/VoteCard/style.module.css diff --git a/src/redux/features/modals.slice.ts b/src/redux/features/modals.slice.ts index d9d2710..2aa439b 100644 --- a/src/redux/features/modals.slice.ts +++ b/src/redux/features/modals.slice.ts @@ -5,8 +5,8 @@ import Login_ExternalWalletCard from "src/Components/Modals/Login/Login_External import Login_NativeWalletCard from "src/Components/Modals/Login/Login_NativeWalletCard"; import Login_SuccessCard from "src/Components/Modals/Login/Login_SuccessCard"; import Login_ScanningWalletCard from "src/Components/Modals/Login/Login_ScanningWalletCard"; -import ProjectCard from "src/pages/ProjectPage/ProjectCard/ProjectCard"; -import TipCard from "src/pages/ProjectPage/Tip/TipCard"; +import ProjectDetailsCard from "src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard"; +import VoteCard from "src/pages/ProjectPage/VoteCard/VoteCard"; import Claim_SubmittedCard from "src/pages/ProjectPage/ClaimProject/Claim_SubmittedCard"; import Claim_FundWithdrawCard from "src/pages/ProjectPage/ClaimProject/Claim_FundWithdrawCard"; import { ModalCard } from "src/Components/Modals/ModalsContainer/ModalsContainer"; @@ -22,12 +22,12 @@ export enum Direction { export const ALL_MODALS = { - ProjectCard, + ProjectDetailsCard, Login_ScanningWalletCard, Login_NativeWalletCard, Login_SuccessCard, Login_ExternalWalletCard, - TipCard, + VoteCard, Claim_GenerateSignatureCard, Claim_CopySignatureCard, Claim_SubmittedCard, @@ -117,7 +117,7 @@ export const modalSlice = createSlice({ let props: any = {}; if ('props' in action.payload) props = { ...action.payload.props } - props.isPageModal = action.payload.Modal === 'ProjectCard'; + props.isPageModal = action.payload.Modal === 'ProjectDetailsCard'; state.openModals.push({ Modal: action.payload.Modal, @@ -136,7 +136,7 @@ export const modalSlice = createSlice({ let props: any = {}; if ('props' in action.payload) props = { ...action.payload.props } - props.isPageModal = action.payload.Modal === 'ProjectCard'; + props.isPageModal = action.payload.Modal === 'ProjectDetailsCard'; state.openModals.push({ Modal: action.payload.Modal, diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts deleted file mode 100644 index c5c4f91..0000000 --- a/src/utils/interfaces.ts +++ /dev/null @@ -1,36 +0,0 @@ -export interface AllCategoriesData { - allCategories: ProjectCategory[]; -} - -export interface ProjectCategory { - id: string; - title: string; -} - -export interface ProjectCard { - id: string; - title: string; - thumbnail_image: string; - category: ProjectCategory; - votes_count: number; -} - -export interface Tag { - id: string; - title: string; -} - -export type Image = string; - -export interface Project { - id: string; - title: string; - category: ProjectCategory; - website?: string; - description: string; - tags: Tag[]; - cover_image: Image; - thumbnail_image: Image; - screenShots: Image[]; - votes_count: number; -} diff --git a/src/utils/interfaces/index.ts b/src/utils/interfaces/index.ts new file mode 100644 index 0000000..c62ce17 --- /dev/null +++ b/src/utils/interfaces/index.ts @@ -0,0 +1,4 @@ +export * from './misc.interfaces' +export * from './project.interfaces' + + diff --git a/src/utils/interfaces/misc.interfaces.ts b/src/utils/interfaces/misc.interfaces.ts new file mode 100644 index 0000000..64ec759 --- /dev/null +++ b/src/utils/interfaces/misc.interfaces.ts @@ -0,0 +1,8 @@ + + +export interface Tag { + id: string; + title: string; +} + +export type Image = string; \ No newline at end of file diff --git a/src/utils/interfaces/project.interfaces.ts b/src/utils/interfaces/project.interfaces.ts new file mode 100644 index 0000000..3f376e0 --- /dev/null +++ b/src/utils/interfaces/project.interfaces.ts @@ -0,0 +1,31 @@ +import { Image, Tag } from "."; + +export interface Project { + id: string; + title: string; + category: ProjectCategory; + website?: string; + description: string; + tags: Tag[]; + cover_image: Image; + thumbnail_image: Image; + screenShots: Image[]; + votes_count: number; +} + +export interface ProjectCategory { + id: string; + title: string; +} + +export interface ProjectCard { + id: string; + title: string; + thumbnail_image: string; + category: ProjectCategory; + votes_count: number; +} + +interface AllCategoriesData { + allCategories: ProjectCategory[]; +} \ No newline at end of file