Q-Fund

+ + ); +}; diff --git a/src/components/common/Donate/Donate-styles.tsx b/src/components/common/Donate/Donate-styles.tsx new file mode 100644 index 0000000..def3215 --- /dev/null +++ b/src/components/common/Donate/Donate-styles.tsx @@ -0,0 +1,48 @@ +import { styled } from "@mui/material/styles"; +import { Box, Button, InputLabel } from "@mui/material"; +import { changeLightness } from "qortal-app-utils"; + +const ButtonStyle = styled(Button)({ + fontFamily: "Mulish", + fontWeight: "800", + fontSize: "21px", + lineHeight: "1.75", + textTransform: "uppercase", + minWidth: "64px", + padding: "15px 25px", + color: "#ffffff", + "&:disabled": { + filter: "brightness(0.8)", + }, +}); + +export const DonateModalCol = styled(Box)({ + display: "flex", + flexDirection: "column", + alignItems: "center", + width: "400px", + justifyContent: "center", + gap: "20px", +}); + +export const CrowdfundPageDonateButton = styled(ButtonStyle)(({ theme }) => ({ + backgroundColor: theme.palette.primary.main, + "&:hover": { + backgroundColor: changeLightness(theme.palette.primary.main, -10), + }, +})); + +export const DonorDetailsButton = styled(ButtonStyle)(({ theme }) => ({ + backgroundColor: theme.palette.secondary.main, + "&:hover": { + backgroundColor: changeLightness(theme.palette.secondary.main, -10), + }, +})); + +export const DonateModalLabel = styled(InputLabel)(({ theme }) => ({ + fontFamily: "Copse", + fontSize: "27px", + letterSpacing: "1px", + color: theme.palette.text.primary, + fontWeight: 400, +})); diff --git a/src/components/common/Donate/Donate.tsx b/src/components/common/Donate/Donate.tsx new file mode 100644 index 0000000..85f04be --- /dev/null +++ b/src/components/common/Donate/Donate.tsx @@ -0,0 +1,235 @@ +import { useEffect, useState } from "react"; +import { + Box, + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + InputAdornment, + Tooltip, + useTheme, +} from "@mui/material"; +import { useDispatch } from "react-redux"; +import Portal from "../Portal"; +import { setNotification } from "../../../state/features/notificationsSlice"; +import { + CrowdfundPageDonateButton, + DonateModalCol, + DonateModalLabel, +} from "./Donate-styles"; +import { QortalSVG } from "../../../assets/svgs/QortalSVG"; +import BoundedNumericTextField from "../../../utils/BoundedNumericTextField"; +import { getUserBalance, truncateNumber } from "qortal-app-utils"; + +interface DonateProps { + atAddress: string; + ATDonationPossible: boolean; + onSubmit: () => void; + onClose: () => void; +} + +export const Donate = ({ + onSubmit, + onClose, + atAddress, + ATDonationPossible, +}: DonateProps) => { + const dispatch = useDispatch(); + const theme = useTheme(); + + const [isOpen, setIsOpen] = useState(false); + const [amount, setAmount] = useState(0); + const [currentBalance, setCurrentBalance] = useState(""); + const resetValues = () => { + setAmount(0); + setIsOpen(false); + }; + + const sendCoin = async () => { + try { + if (!atAddress) return; + if (isNaN(amount)) return; + + // Check one last time if the AT has finished and if so, don't send the coin + const url = `/at/${atAddress}`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseDataSearch = await response.json(); + if (response.status !== 200 || responseDataSearch?.isFinished) { + dispatch( + setNotification({ + msg: "This crowdfund has ended", + alertType: "error", + }) + ); + resetValues(); + return; + } + // Prevent them from sending a coin if there's 4 blocks left or less to avoid timing issues + const url2 = `/blocks/height`; + const blockHeightResponse = await fetch(url2, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const blockHeight = await blockHeightResponse.json(); + const diff = +responseDataSearch?.sleepUntilHeight - +blockHeight; + if (diff <= 4) { + dispatch( + setNotification({ + msg: "This crowdfund has ended", + alertType: "error", + }) + ); + resetValues(); + return; + } + await qortalRequest({ + action: "SEND_COIN", + coin: "QORT", + destinationAddress: atAddress, + amount: amount, + }); + dispatch( + setNotification({ + msg: "Donation successfully sent", + alertType: "success", + }) + ); + resetValues(); + onSubmit(); + } catch (error: any) { + let notificationObj: any = null; + if (typeof error === "string") { + notificationObj = { + msg: error || "Failed to send coin", + alertType: "error", + }; + } else if (typeof error?.error === "string") { + notificationObj = { + msg: error?.error || "Failed to send coin", + alertType: "error", + }; + } else { + notificationObj = { + msg: error?.message || "Failed to send coin", + alertType: "error", + }; + } + if (!notificationObj) return; + dispatch(setNotification(notificationObj)); + } + }; + useEffect(() => { + getUserBalance().then(foundBalance => { + setCurrentBalance(truncateNumber(foundBalance, 2)); + }); + }, []); + return ( + + + + setIsOpen(prev => !prev)} + disabled={!ATDonationPossible} + variant="contained" + > + Donate Now + + + + {isOpen && ( + + + + )} + + ); +}; diff --git a/src/components/common/Donate/DonorInfo.tsx b/src/components/common/Donate/DonorInfo.tsx new file mode 100644 index 0000000..bcd6cf9 --- /dev/null +++ b/src/components/common/Donate/DonorInfo.tsx @@ -0,0 +1,90 @@ +import { DonorDetailsButton } from "./Donate-styles"; +import { Tooltip } from "@mui/material"; +import { + addStringNumbers, + getAccountNames, + removeTrailingZeros, + SearchTransactionResponse, +} from "qortal-app-utils"; +import React, { useEffect, useState } from "react"; +import DonorModal from "./DonorModal"; + +interface DonorInfoProps { + rawDonorData: SearchTransactionResponse[]; + aggregateDonorData?: boolean; +} + +export type ViewableDonorData = { + nameIfExists: string; + address: string; + amount: string; +}; + +const DonorInfo = ({ + rawDonorData, + aggregateDonorData = true, +}: DonorInfoProps) => { + const [displayModal, setDisplayModal] = useState(false); + const [donorData, setDonorData] = useState([]); + + const processOneDonor = ( + donorArray: ViewableDonorData[], + donor: ViewableDonorData + ) => { + const donorIndex = donorArray.findIndex(d => { + return d.address === donor.address; + }); + + if (aggregateDonorData && donorIndex >= 0) { + donorArray[donorIndex].amount = addStringNumbers( + donorArray[donorIndex].amount, + donor.amount + ); + } else { + donorArray.push(donor); + } + }; + + const processAllDonors = async () => { + const processedDonorData: ViewableDonorData[] = []; + Promise.all( + rawDonorData.map(({ creatorAddress, amount }) => { + return getAccountNames(creatorAddress); + }) + ).then(responseArray => { + responseArray.map((response, index) => { + processOneDonor(processedDonorData, { + nameIfExists: response[0].name, + address: response[0].owner, + amount: removeTrailingZeros(rawDonorData[index].amount), + }); + }); + setDonorData(processedDonorData); + }); + }; + + useEffect(() => { + processAllDonors(); + }, [rawDonorData]); + return ( + <> + + { + setDisplayModal(true); + }} + > + Donor Details + + + setDisplayModal(false)} + /> + + ); +}; + +export default DonorInfo; diff --git a/src/components/common/Donate/DonorModal.tsx b/src/components/common/Donate/DonorModal.tsx new file mode 100644 index 0000000..a4e1e5c --- /dev/null +++ b/src/components/common/Donate/DonorModal.tsx @@ -0,0 +1,82 @@ +import { + Button, + Modal, + Stack, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from "@mui/material"; +import { ModalBody } from "../../Crowdfund/Crowdfund-styles"; +import Box from "@mui/material/Box"; +import { ViewableDonorData } from "./DonorInfo"; +import { truncateNumber } from "qortal-app-utils"; + +interface DonorModalProps { + donorData: ViewableDonorData[]; + closeModal: () => void; + open: boolean; +} + +const DonorModal = ({ donorData, closeModal, open }: DonorModalProps) => { + const getAverageDonation = () => { + const donorCount = donorData.length; + if (donorCount === 0) return 0; + let donorSum = 0; + donorData.map(data => { + donorSum += Number(data.amount); + }); + const average = donorSum / donorCount; + return truncateNumber(average, 2); + }; + + return ( + + + + + + + + ID + Name + Amount + Address + + + + {donorData.map((donorData, index) => ( + + {index + 1} + {donorData.nameIfExists} + {donorData.amount} + {donorData.address} + + ))} + +

+ + + +

Total # of Donations: {donorData.length}

Average Donation Amount: {getAverageDonation()}

+ + + + + ); +}; +export default DonorModal; diff --git a/src/components/common/DownloadTaskManager.tsx b/src/components/common/DownloadTaskManager.tsx new file mode 100644 index 0000000..b727ca0 --- /dev/null +++ b/src/components/common/DownloadTaskManager.tsx @@ -0,0 +1,204 @@ +import React, { useState, useEffect } from 'react' +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Button, + LinearProgress, + List, + ListItem, + ListItemIcon, + Popover, + Typography, + useTheme +} from '@mui/material' +import Movie from '@mui/icons-material/Movie' +import AttachFileIcon from '@mui/icons-material/AttachFile'; +import { useSelector } from 'react-redux' +import { RootState } from '../../state/store' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' +import { useLocation, useNavigate } from 'react-router-dom' +import { DownloadingLight } from '../../assets/svgs/DownloadingLight' +import { DownloadedLight } from '../../assets/svgs/DownloadedLight' + +export const DownloadTaskManager: React.FC = () => { + const { downloads } = useSelector((state: RootState) => state.global) + const location = useLocation() + const theme = useTheme() + const [visible, setVisible] = useState(false) + const [hidden, setHidden] = useState(true) + const navigate = useNavigate() + const [anchorEl, setAnchorEl] = useState(null); + + + const [openDownload, setOpenDownload] = useState(false); + + + const handleClick = (event?: React.MouseEvent) => { + const target = event?.currentTarget as unknown as HTMLButtonElement | null; + setAnchorEl(target); + }; + + const handleCloseDownload = () => { + setAnchorEl(null); + setOpenDownload(false); + }; + + useEffect(() => { + // Simulate downloads for demo purposes + + if (visible) { + setTimeout(() => { + setHidden(true) + setVisible(false) + }, 3000) + } + }, [visible]) + + + useEffect(() => { + if (Object.keys(downloads).length === 0) return + setVisible(true) + setHidden(false) + }, [downloads]) + + + if ( + !downloads || + Object.keys(downloads).length === 0 + ) + return null + + + let downloadInProgress = false + if(Object.keys(downloads).find((key)=> (downloads[key]?.status?.status !== 'READY' && downloads[key]?.status?.status !== 'DOWNLOADED'))){ + downloadInProgress = true + } + + return ( + + + + + + {Object.keys(downloads) + .map((download: any) => { + const downloadObj = downloads[download] + const progress = downloads[download]?.status?.percentLoaded || 0 + const status = downloads[download]?.status?.status + const service = downloads[download]?.service + return ( + { + const id = downloadObj?.properties?.jsonId + if (!id) return + + navigate( + `/crowdfund/${downloadObj?.properties?.user}/${id}` + ) + }} + > + + + {service === 'VIDEO' ? ( + + ): } + + + + + + + {`${progress?.toFixed(0)}%`}{' '} + {status && status === 'REFETCHING' && '- refetching'} + {status && status === 'DOWNLOADED' && '- building'} + + + + {downloadObj?.identifier} + + + ) + })} + + + + + + ) +} diff --git a/src/components/common/FileElement.tsx b/src/components/common/FileElement.tsx new file mode 100644 index 0000000..850c006 --- /dev/null +++ b/src/components/common/FileElement.tsx @@ -0,0 +1,419 @@ +import * as React from "react"; +import { styled, useTheme } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import { MyContext } from "../../wrappers/DownloadWrapper"; +import { useDispatch, useSelector } from "react-redux"; +import { RootState } from "../../state/store"; +import { CircularProgress } from "@mui/material"; +import AttachFileIcon from "@mui/icons-material/AttachFile"; +import { base64ToUint8Array } from "../../utils/toBase64"; +import { setNotification } from "../../state/features/notificationsSlice"; + +const Widget = styled("div")(({ theme }) => ({ + padding: 8, + borderRadius: 10, + maxWidth: 350, + position: "relative", + zIndex: 1, + backdropFilter: "blur(40px)", + background: "skyblue", + transition: "0.2s all", + "&:hover": { + opacity: 0.75, + }, +})); + +const CoverImage = styled("div")({ + width: 40, + height: 40, + objectFit: "cover", + overflow: "hidden", + flexShrink: 0, + borderRadius: 8, + backgroundColor: "rgba(0,0,0,0.08)", + "& > img": { + width: "100%", + }, +}); + +interface IAudioElement { + title: string; + description?: string; + author?: string; + fileInfo?: any; + postId?: string; + user?: string; + children?: React.ReactNode; + mimeType?: string; + disable?: boolean; + mode?: string; + otherUser?: string; + customStyles?: any; +} + +interface CustomWindow extends Window { + showSaveFilePicker: any; // Replace 'any' with the appropriate type if you know it +} + +const customWindow = window as unknown as CustomWindow; + +export default function FileElement({ + title, + description, + author, + fileInfo, + postId = "", + user, + children, + mimeType, + disable, + mode, + otherUser, + customStyles, +}: IAudioElement) { + const { downloadVideo } = React.useContext(MyContext); + const [isLoading, setIsLoading] = React.useState(false); + const [fileProperties, setFileProperties] = React.useState(null); + const [downloadLoader, setDownloadLoader] = React.useState(false); + const { downloads } = useSelector((state: RootState) => state.global); + const hasCommencedDownload = React.useRef(false); + const dispatch = useDispatch(); + const download = React.useMemo(() => { + if (!downloads || !fileInfo?.identifier) return {}; + const findDownload = downloads[fileInfo?.identifier]; + + if (!findDownload) return {}; + return findDownload; + }, [downloads, fileInfo]); + + const resourceStatus = React.useMemo(() => { + return download?.status || {}; + }, [download]); + + const retryDownload = React.useRef(0); + + const handlePlay = async () => { + if (disable) return; + hasCommencedDownload.current = true; + if ( + resourceStatus?.status === "READY" && + download?.url && + download?.properties?.filename + ) { + if (downloadLoader) return; + dispatch( + setNotification({ + msg: "Saving file... please wait", + alertType: "info", + }) + ); + setDownloadLoader(true); + try { + const { name, service, identifier } = fileInfo; + + const url = `/arbitrary/${service}/${name}/${identifier}`; + fetch(url) + .then(response => response.blob()) + .then(async blob => { + await qortalRequest({ + action: "SAVE_FILE", + blob, + filename: download?.properties?.filename, + mimeType: + download?.properties?.mimeType || + download?.properties?.type || + "", + }); + }) + .catch(error => { + console.error("Error fetching the video:", error); + }); + } catch (error: any) { + let notificationObj: any = null; + if (typeof error === "string") { + notificationObj = { + msg: error || "Failed to send message", + alertType: "error", + }; + } else if (typeof error?.error === "string") { + notificationObj = { + msg: error?.error || "Failed to send message", + alertType: "error", + }; + } else { + notificationObj = { + msg: error?.message || "Failed to send message", + alertType: "error", + }; + } + if (!notificationObj) return; + dispatch(setNotification(notificationObj)); + } finally { + setDownloadLoader(false); + } + return; + } + + const { name, service, identifier } = fileInfo; + let filename = fileProperties?.filename; + let mimeType = fileProperties?.mimeType; + if (!fileProperties) { + try { + dispatch( + setNotification({ + msg: "Downloading file... please wait", + alertType: "info", + }) + ); + const res = await qortalRequest({ + action: "GET_QDN_RESOURCE_PROPERTIES", + name: name, + service: service, + identifier: identifier, + }); + setFileProperties(res); + filename = res?.filename; + mimeType = res?.mimeType; + } catch (error: any) { + if (retryDownload.current === 0) { + handlePlay(); + retryDownload.current = 1; + return; + } + setIsLoading(false); + dispatch( + setNotification({ + msg: error?.message || "Error with download. Please try again", + alertType: "error", + }) + ); + } + } + if (!filename) return; + setIsLoading(true); + downloadVideo({ + name, + service, + identifier, + properties: { + ...fileInfo, + }, + }); + }; + + React.useEffect(() => { + if ( + resourceStatus?.status === "READY" && + download?.url && + download?.properties?.filename && + hasCommencedDownload.current + ) { + setIsLoading(false); + dispatch( + setNotification({ + msg: "Download completed. Click to save file", + alertType: "info", + }) + ); + } + }, [resourceStatus, download]); + + return ( + + {children && ( + + {children}{" "} + {(resourceStatus.status && resourceStatus?.status !== "READY") || + isLoading ? ( + <> + + {`${Math.round( + resourceStatus?.percentLoaded || 0 + ).toFixed(0)}% loaded`} + + ) : resourceStatus?.status === "READY" ? ( + <> + + Ready to save: click here + + {downloadLoader && ( + + )} + + ) : null} + + )} + {!children && ( + + + + + + + + {author} + + + {title} + + + {description} + + {mimeType && ( + + {mimeType} + + )} + + + {((resourceStatus.status && resourceStatus?.status !== "READY") || + isLoading) && ( + + + {resourceStatus && ( + + {resourceStatus?.status === "REFETCHING" ? ( + <> + <> + {( + (resourceStatus?.localChunkCount / + resourceStatus?.totalChunkCount) * + 100 + )?.toFixed(0)} + % + + + <> Refetching in 2 minutes + + ) : resourceStatus?.status === "DOWNLOADED" ? ( + <>Download Completed: building file... + ) : resourceStatus?.status !== "READY" ? ( + <> + {( + (resourceStatus?.localChunkCount / + resourceStatus?.totalChunkCount) * + 100 + )?.toFixed(0)} + % + + ) : ( + <>Download Completed: fetching file... + )} + + )} + + )} + {resourceStatus?.status === "READY" && + download?.url && + download?.properties?.filename && ( + + + Ready to save: click here + + {downloadLoader && ( + + )} + + )} + + )} + + ); +} diff --git a/src/components/common/LazyLoad.tsx b/src/components/common/LazyLoad.tsx new file mode 100644 index 0000000..5ce7a30 --- /dev/null +++ b/src/components/common/LazyLoad.tsx @@ -0,0 +1,48 @@ +import React, { useState, useEffect, useRef } from 'react' +import { useInView } from 'react-intersection-observer' +import CircularProgress from '@mui/material/CircularProgress' + +interface Props { + onLoadMore: () => Promise + isLoading?: boolean +} + +const LazyLoad: React.FC = ({ onLoadMore, isLoading }) => { + const [isFetching, setIsFetching] = useState(false) + + const firstLoad = useRef(false) + const [ref, inView] = useInView({ + threshold: 0.7 + }) + + useEffect(() => { + if (inView) { + setIsFetching(true) + onLoadMore().finally(() => { + setIsFetching(false) + firstLoad.current = true + }) + } + }, [inView]) + + return ( +

+ +

+ ) +} + +export default LazyLoad diff --git a/src/components/common/Notification/Notification.tsx b/src/components/common/Notification/Notification.tsx new file mode 100644 index 0000000..501f081 --- /dev/null +++ b/src/components/common/Notification/Notification.tsx @@ -0,0 +1,86 @@ +import { useDispatch, useSelector } from 'react-redux' +import { toast, ToastContainer, Zoom, Slide } from 'react-toastify' +import { removeNotification } from '../../../state/features/notificationsSlice' +import 'react-toastify/dist/ReactToastify.css' +import { RootState } from '../../../state/store' + +const Notification = () => { + const dispatch = useDispatch() + + const { alertTypes } = useSelector((state: RootState) => state.notifications) + + if (alertTypes.alertError) { + toast.error(`❌ ${alertTypes?.alertError}`, { + position: 'bottom-right', + autoClose: 4000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + icon: false + }) + dispatch(removeNotification()) + } + if (alertTypes.alertSuccess) { + toast.success(`✔️ ${alertTypes?.alertSuccess}`, { + position: 'bottom-right', + autoClose: 4000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + icon: false + }) + dispatch(removeNotification()) + } + if (alertTypes.alertInfo) { + toast.info(`${alertTypes?.alertInfo}`, { + position: 'top-right', + autoClose: 1300, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + theme: 'light' + }) + dispatch(removeNotification()) + } + + if (alertTypes.alertInfo) { + return ( + + ) + } + + return ( + + ) +} + +export default Notification diff --git a/src/components/common/PageLoader.tsx b/src/components/common/PageLoader.tsx new file mode 100644 index 0000000..9ab0d17 --- /dev/null +++ b/src/components/common/PageLoader.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import CircularProgress from '@mui/material/CircularProgress'; +import { Box, useTheme } from '@mui/material' + +interface PageLoaderProps { + size?: number + thickness?: number +} + +const PageLoader: React.FC = ({ + size = 40, + thickness = 5 +}) => { + const theme = useTheme() + + return ( + + + + ) +} + +export default PageLoader; diff --git a/src/components/common/Portal.tsx b/src/components/common/Portal.tsx new file mode 100644 index 0000000..1e0cb26 --- /dev/null +++ b/src/components/common/Portal.tsx @@ -0,0 +1,25 @@ +import React, { useEffect, useState } from 'react' +import { createPortal } from 'react-dom' + +interface PortalProps { + children: React.ReactNode +} + +const Portal: React.FC = ({ children }) => { + const [mounted, setMounted] = useState(false) + + useEffect(() => { + setMounted(true) + + return () => setMounted(false) + }, []) + + return mounted + ? createPortal( + children, + document.querySelector('#modal-root') as HTMLElement + ) + : null +} + +export default Portal diff --git a/src/components/common/Progress/Progress-styles.tsx b/src/components/common/Progress/Progress-styles.tsx new file mode 100644 index 0000000..e048542 --- /dev/null +++ b/src/components/common/Progress/Progress-styles.tsx @@ -0,0 +1,92 @@ +import { styled } from "@mui/material/styles"; +import { Box, CircularProgress, Typography } from "@mui/material"; + +export const FundAmountsCol = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + justifyContent: "center", + gap: "7px", +})); + +export const FundAmountsRow = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "flex-start", + gap: "15px", +})); + +export const FundAmount = styled(Typography)(({ theme }) => ({ + fontFamily: "Montserrat", + fontWeight: 500, + fontSize: "28px", + letterSpacing: "0.2px", + userSelect: "none", + color: + theme.palette.mode === "light" + ? theme.palette.primary.dark + : theme.palette.primary.light, +})); + +export const FundAmountNumber = styled(Box)(({ theme }) => ({ + display: "flex", + alignItems: "center", + gap: "5px", + fontFamily: "Montserrat", + fontWeight: 500, + fontSize: "28px", + letterSpacing: "0.2px", + userSelect: "none", + color: theme.palette.text.primary, + "& span": { + textOverflow: "ellipsis", + whiteSpace: "nowrap", + overflow: "hidden", + maxWidth: "100%", + fontSize: "28px", + width: "100px", + }, +})); + +export const ProgressRow = styled(Box)(({ theme }) => ({ + display: "grid", + gridTemplateColumns: "1fr 1fr", + alignItems: "center", + width: "fit-content", + minWidth: "450px", + maxWidth: "450px", + padding: "25px", + border: `1px solid ${theme.palette.primary.light}`, + borderRadius: "8px", +})); + +export const CustomCircularProgress = styled(CircularProgress)(({ theme }) => ({ + position: "relative", + color: + theme.palette.mode === "light" + ? theme.palette.primary.dark + : theme.palette.primary.light, + justifySelf: "center", + + "&::before": { + content: '""', + display: "block", + position: "absolute", + top: "50%", + left: "50%", + width: "calc(100% - 2px)", + height: "calc(100% - 2px)", + borderRadius: "50%", + background: + theme.palette.mode === "dark" + ? `radial-gradient(circle at center, transparent 34%, #fffffff0 34%)` + : `radial-gradient(circle at center, transparent 34%, #e2e0e0ee 34%)`, + transform: "translate(-50%, -50%)", + zIndex: -1, + }, + + "& .MuiCircularProgress-circle": { + zIndex: 1, + }, +})); diff --git a/src/components/common/Progress/Progress.tsx b/src/components/common/Progress/Progress.tsx new file mode 100644 index 0000000..9159f5a --- /dev/null +++ b/src/components/common/Progress/Progress.tsx @@ -0,0 +1,65 @@ +import { useTheme } from "@mui/material"; +import { + CustomCircularProgress, + FundAmount, + FundAmountNumber, + FundAmountsCol, + FundAmountsRow, + ProgressRow, +} from "./Progress-styles"; +import { QortalSVG } from "../../../assets/svgs/QortalSVG"; + +interface CrowdfundProgressProps { + achieved?: number | null; + raised: number; + goal: number; +} + +export const CrowdfundProgress: React.FC = ({ + achieved, + raised, + goal, +}) => { + const theme = useTheme(); + const progress = achieved + ? (+achieved / +goal) * 100 + : (+raised / +goal) * 100; + + return ( + + + + {achieved ? "Achieved:" : "Raised:"} + + + + {achieved ? +Math.round(achieved) : +Math.round(raised)} + + + + + Goal: + + + {+goal} + + + + 0 ? 1 : progress} + /> + + ); +}; diff --git a/src/components/common/Reviews/AddReview/AddReview-styles.tsx b/src/components/common/Reviews/AddReview/AddReview-styles.tsx new file mode 100644 index 0000000..e5e3459 --- /dev/null +++ b/src/components/common/Reviews/AddReview/AddReview-styles.tsx @@ -0,0 +1,46 @@ +import { styled } from "@mui/system"; +import { Box, Button, TextareaAutosize } from "@mui/material"; + +export const AddReviewHeader = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "row", + alignItems: "center", +})); + +export const AddReviewContainer = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + alignItems: "center", + padding: "25px", + justifyContent: "flex-start", + flexGrow: 1, + width: "100%", +})); + +export const AddReviewDescription = styled(TextareaAutosize)(({ theme }) => ({ + width: "100%", + fontFamily: "Mulish", + fontSize: "19px", + fontWeight: 400, + letterSpacing: "0px", + lineHeight: "1.5", + padding: "12px", + borderRadius: "12px 12px 0 12px", + color: theme.palette.text.primary, + background: theme.palette.background.default, + resize: "none", + "& placeholder": { + color: theme.palette.mode === "light" ? "#808183" : "#edeef0", + fontFamily: "Mulish", + fontWeight: 400, + fontSize: "19px", + letterSpacing: "0px", + }, + border: `1px solid ${theme.palette.background.paper}`, + "&:hover": { + borderColor: theme.palette.secondary.main, + }, + "&:focus": { + borderColor: theme.palette.secondary.main, + }, +})); diff --git a/src/components/common/Reviews/AddReview/AddReview.tsx b/src/components/common/Reviews/AddReview/AddReview.tsx new file mode 100644 index 0000000..2b64231 --- /dev/null +++ b/src/components/common/Reviews/AddReview/AddReview.tsx @@ -0,0 +1,295 @@ +import { FC, useState, useMemo } from "react"; +import { + AddReviewContainer, + AddReviewDescription, + AddReviewHeader, +} from "./AddReview-styles"; +import { Rating } from "@mui/material"; +import { CustomInputField } from "../../../Crowdfund/Crowdfund-styles"; +import { + CreateButton, + CloseButton, + CloseButtonRow, + Divider, + OwnerName, +} from "../QFundOwnerReviews-styles"; +import { useDispatch, useSelector } from "react-redux"; +import { RootState } from "../../../../state/store"; +import ShortUniqueId from "short-unique-id"; +import { setNotification } from "../../../../state/features/notificationsSlice"; +import { objectToBase64 } from "../../../../utils/toBase64"; +import { + addToHashMapOwnerReviews, + addToReviews, +} from "../../../../state/features/globalSlice"; +import { generateReviewId } from "../../../../utils/generateReviewId"; + +/* Reviews notes + Prevent them from adding a review to their own store + Filter their own review + Make sure user has at least one store order before being able to leave a review + Get first 100 reviews for the average (without metadata) +*/ + +interface AddReviewProps { + QFundId: string; + QFundOwner: string; + setOpenLeaveReview: (open: boolean) => void; +} + +export const AddReview: FC = ({ + QFundId, + QFundOwner, + setOpenLeaveReview, +}) => { + const dispatch = useDispatch(); + const username = useSelector((state: RootState) => state.auth?.user?.name); + + const [rating, setRating] = useState(null); + const [reviewTitle, setReviewTitle] = useState(""); + const [reviewDescription, setReviewDescription] = useState(""); + + // Verify if review identifier already exists + const verifyIfReviewIdExists = async ( + username: string, + identifier: string + ) => { + try { + const response = await qortalRequest({ + action: "LIST_QDN_RESOURCES", + service: "DOCUMENT", + name: username, + identifier: identifier, + includeMetadata: true, + limit: 1, + }); + if (response?.resources?.length > 0) { + return true; + } + return false; + } catch (err) { + console.log(err); + return false; + } + }; + + // Add review to QDN + const addReviewFunc = async () => { + let ownerName = ""; + let reviewId = ""; + let errorMsg = ""; + let userName = ""; + let ownerRegistrationNumber; + + if (QFundOwner) { + ownerName = QFundOwner; + } + + if (username) { + userName = username; + } + + // Get person's name registration number + + try { + const QFundOwnerRegistration = await qortalRequest({ + action: "GET_NAME_DATA", + name: ownerName, + }); + if (Object.keys(QFundOwnerRegistration).length > 0) { + ownerRegistrationNumber = QFundOwnerRegistration.registered; + } + } catch (error) { + console.error(error); + } + + // Validation + if (!ownerName) { + errorMsg = + "Cannot send a message without a access to the Q-Fund Owner's name!"; + } + + if (!userName) { + errorMsg = "Cannot add a review without having a name!"; + } + + if (!QFundId) { + errorMsg = "Cannot add a review without having a Q-Fund ID!"; + } + + if (!ownerRegistrationNumber) { + errorMsg = + "Cannot add a review without having a Q-Fund Owner's registration number!"; + } + + if (!rating || !reviewTitle || !reviewDescription) { + errorMsg = + "Cannot add a review without a rating, title, and description!"; + } + + if (errorMsg) { + dispatch( + setNotification({ + msg: errorMsg, + alertType: "error", + }) + ); + throw new Error(errorMsg); + } + + if (QFundOwner && QFundId && ownerRegistrationNumber && rating) { + // Create identifier for the review + reviewId = generateReviewId( + QFundOwner, + QFundId, + ownerRegistrationNumber, + rating + ); + } + + // Check if review identifier already exists + const doesExist = await verifyIfReviewIdExists(userName, reviewId); + if (doesExist) { + throw new Error( + "The review identifier already exists! Try changing your review's title" + ); + } + + // Resource raw data + const reviewObj = { + title: reviewTitle, + description: reviewDescription, + rating: rating, + created: Date.now(), + }; + + const reviewToBase64 = await objectToBase64(reviewObj); + try { + // Publish Review to QDN + const resourceResponse = await qortalRequest({ + action: "PUBLISH_QDN_RESOURCE", + name: userName, + service: "DOCUMENT", + identifier: reviewId, + data64: reviewToBase64, + filename: "review.json", + // Resource metadata down here + title: reviewTitle.slice(0, 60), + description: reviewDescription.slice(0, 150), + }); + setOpenLeaveReview(false); + dispatch( + addToReviews({ + id: reviewId, + name: userName, + created: Date.now(), + updated: Date.now(), + title: reviewTitle.slice(0, 60), + description: reviewDescription.slice(0, 150), + rating: rating, + }) + ); + dispatch( + addToHashMapOwnerReviews({ + id: reviewId, + name: userName, + created: Date.now(), + updated: Date.now(), + title: reviewTitle, + description: reviewDescription, + rating: rating, + isValid: true, + }) + ); + dispatch( + setNotification({ + alertType: "success", + msg: "Added Review Successfully!", + }) + ); + } catch (error: any) { + let notificationObj: any = null; + if (typeof error === "string") { + notificationObj = { + msg: error || "Failed to create review", + alertType: "error", + }; + } else if (typeof error?.error === "string") { + notificationObj = { + msg: error?.error || "Failed to create review", + alertType: "error", + }; + } else { + notificationObj = { + msg: error?.message || "Failed to create review", + alertType: "error", + }; + } + if (!notificationObj) return; + dispatch(setNotification(notificationObj)); + if (error instanceof Error) { + throw new Error(error.message); + } else { + throw new Error("An unknown error occurred"); + } + } + }; + + return ( + + + {`Leave a review for ${QFundOwner}`} + + + + + , + newValue: number | null + ) => { + setRating(newValue); + }} + precision={0.5} + value={rating} + style={{ fontSize: "55px", paddingTop: "5px" }} + /> + setReviewTitle(e.target.value as string)} + inputProps={{ maxLength: 180 }} + required + style={{ width: "100%" }} + /> + setReviewDescription(e.target.value as string)} + required + /> + + + { + setOpenLeaveReview(false); + }} + > + Close + + + Add Review + + + + + ); +}; diff --git a/src/components/common/Reviews/QFundOwnerReviewCard.tsx b/src/components/common/Reviews/QFundOwnerReviewCard.tsx new file mode 100644 index 0000000..358589c --- /dev/null +++ b/src/components/common/Reviews/QFundOwnerReviewCard.tsx @@ -0,0 +1,86 @@ +import { useState, FC, useEffect } from "react"; +import { Rating } from "@mui/material"; +import { + ReviewContainer, + ReviewDateFont, + ReviewDescriptionFont, + ReviewHeader, + ReviewTitleFont, + ReviewTitleRow, + ReviewUsernameFont, +} from "./QFundOwnerReviews-styles"; +import moment from "moment"; +import { useFetchOwnerReviews } from "../../../hooks/useFetchOwnerReviews"; +import { useSelector } from "react-redux"; +import { RootState } from "../../../state/store"; +import { OwnerReview } from "../../../state/features/globalSlice"; + +interface QFundOwnerReviewCardProps { + review: OwnerReview; +} + +export const QFundOwnerReviewCard: FC = ({ + review, +}) => { + const [showCompleteReview, setShowCompleteReview] = useState(false); + const [fullStoreTitle, setFullStoreTitle] = useState(""); + const [fullStoreDescription, setFullStoreDescription] = useState(""); + + const hashMapOwnerReviews = useSelector( + (state: RootState) => state.global.hashMapOwnerReviews + ); + + const { created, name, title, rating, description, id, updated } = review; + + const { getReview, checkAndUpdateResource } = useFetchOwnerReviews(); + + const handleFetchReviewRawData = async () => { + try { + if (name && id) { + // avoid fetching the same review twice on QDN if it's already in the hashmap + const res = checkAndUpdateResource({ + id, + updated, + }); + // if the review is not in the hashmap, fetch it from QDN + if (res) { + getReview(name, id, review); + } + } + } catch (error) { + console.error(error); + } + }; + + useEffect(() => { + Object.keys(hashMapOwnerReviews).find(key => { + if (key === review.id) { + setShowCompleteReview(true); + setFullStoreTitle(hashMapOwnerReviews[key].title); + setFullStoreDescription(hashMapOwnerReviews[key].description); + } + }); + }, [hashMapOwnerReviews]); + + return ( + { + setShowCompleteReview(true); + handleFetchReviewRawData(); + }} + showCompleteReview={showCompleteReview ? true : false} + > + + {name} + + {fullStoreTitle || title} + + + {moment(created).format("llll")} + + + {fullStoreDescription || description} + + + ); +}; diff --git a/src/components/common/Reviews/QFundOwnerReviews-styles.tsx b/src/components/common/Reviews/QFundOwnerReviews-styles.tsx new file mode 100644 index 0000000..e75214b --- /dev/null +++ b/src/components/common/Reviews/QFundOwnerReviews-styles.tsx @@ -0,0 +1,283 @@ +import { styled } from "@mui/material/styles"; +import { ReusableModal } from "../../modals/ReusableModal"; +import { Box, Button, Typography } from "@mui/material"; +import { TimesSVG } from "../../../assets/svgs/TimesSVG"; + +interface OwnerReviewsProps { + showCompleteReview: boolean; +} + +export const AddReviewButton = styled(Button)(({ theme }) => ({ + display: "flex", + alignItems: "center", + padding: "4px 15px", + gap: "10px", + fontFamily: "Livvic", + fontSize: "16px", + width: "auto", + color: theme.palette.mode === "dark" ? "#000000" : "#ffffff", + backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#000000", + border: "none", + borderRadius: "5px", + transition: "all 0.3s ease-in-out", + "&:hover": { + cursor: "pointer", + backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#000000", + boxShadow: + theme.palette.mode === "dark" + ? "0px 8px 10px 1px hsla(0,0%,0%,0.14), 0px 3px 14px 2px hsla(0,0%,0%,0.12), 0px 5px 5px -3px hsla(0,0%,0%,0.2)" + : "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;", + }, +})); + +export const AverageReviewContainer = styled(Box)({ + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "flex-start", + maxHeight: "200px", + width: "100%", +}); + +export const ReviewsFont = styled(Typography)(({ theme }) => ({ + textAlign: "center", + fontFamily: "Mulish", + fontSize: "19px", + fontWeight: 400, + letterSpacing: "0px", + color: theme.palette.text.primary, + userSelect: "none", + marginBottom: "5px", +})); + +export const AverageReviewNumber = styled(Typography)(({ theme }) => ({ + fontFamily: "Raleway", + fontSize: "60px", + fontWeight: 600, + letterSpacing: "2px", + color: theme.palette.text.primary, + userSelect: "none", + lineHeight: "35px", + marginBottom: "25px", +})); + +export const TotalReviewsFont = styled(Typography)(({ theme }) => ({ + fontFamily: "Mulish", + fontSize: "19px", + fontWeight: 400, + color: theme.palette.text.primary, + userSelect: "none", + opacity: 0.8, + letterSpacing: 0, +})); + +export const ReviewContainer = styled(Box)( + ({ theme, showCompleteReview }) => ({ + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + justifyContent: "flex-start", + gap: "10px", + padding: "5px", + borderRadius: "5px", + width: "100%", + transition: "all 0.3s ease-in-out", + "&:hover": { + cursor: showCompleteReview ? "auto" : "pointer", + backgroundColor: showCompleteReview + ? "transparent" + : theme.palette.mode === "light" + ? "#d3d3d3ac" + : "#aeabab1e", + }, + }) +); + +export const ReviewHeader = styled(Box)({ + display: "flex", + flexDirection: "column", + gap: "1px", +}); + +export const ReviewTitleRow = styled(Box)({ + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "flex-start", + gap: "15px", +}); + +export const ReviewUsernameFont = styled(Box)(({ theme }) => ({ + fontFamily: "Montserrat", + fontSize: "17px", + fontWeight: 400, + letterSpacing: "0.3px", + color: theme.palette.text.primary, +})); + +export const ReviewTitleFont = styled(Box)(({ theme }) => ({ + fontFamily: "Montserrat, sans-serif", + fontSize: "18px", + fontWeight: 500, + letterSpacing: "-0.3px", + color: theme.palette.text.primary, +})); + +export const ReviewDateFont = styled(Typography)(({ theme }) => ({ + fontFamily: "Mulish", + fontSize: "16px", + fontWeight: 400, + letterSpacing: "0px", + color: theme.palette.text.primary, + opacity: 0.8, +})); + +export const ReviewDescriptionFont = styled(Box)(({ theme }) => ({ + fontFamily: "Mulish", + fontSize: "19px", + fontWeight: 400, + letterSpacing: "0px", + color: theme.palette.text.primary, +})); + +export const OwnerReviewsContainer = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + flexGrow: 1, + gap: "30px", + overflowY: "auto", + "&::-webkit-scrollbar-track": { + backgroundColor: "transparent", + }, + "&::-webkit-scrollbar-track:hover": { + backgroundColor: "transparent", + }, + "&::-webkit-scrollbar": { + width: "8px", + height: "10px", + backgroundColor: "transparent", + }, + "&::-webkit-scrollbar-thumb": { + backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#414763", + borderRadius: "8px", + backgroundClip: "content-box", + border: "4px solid transparent", + }, + "&::-webkit-scrollbar-thumb:hover": { + backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#40455f", + }, +})); + +export const CloseIconModal = styled(TimesSVG)({ + position: "absolute", + top: "15px", + right: "5px", + transition: "all 0.2s ease-in-out", + "&:hover": { + cursor: "pointer", + transform: "scale(1.1)", + }, +}); + +export const ReusableModalStyled = styled(ReusableModal)(({ theme }) => ({ + "& [class$='MuiBox-root']": { + "&::-webkit-scrollbar-track": { + backgroundColor: "transparent", + }, + "&::-webkit-scrollbar-track:hover": { + backgroundColor: "transparent", + }, + "&::-webkit-scrollbar": { + width: "8px", + height: "10px", + backgroundColor: "transparent", + }, + "&::-webkit-scrollbar-thumb": { + backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#414763", + borderRadius: "8px", + backgroundClip: "content-box", + border: "4px solid transparent", + }, + "&::-webkit-scrollbar-thumb:hover": { + backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#40455f", + }, + }, +})); + +export const OwnerAvatar = styled("img")({ + width: "90px", + height: "90px", + borderRadius: "50%", + objectFit: "cover", +}); + +export const OwnerName = styled(Box)(({ theme }) => ({ + display: "flex", + justifySelf: "center", + userSelect: "none", + fontFamily: "Copse", + fontWeight: 400, + fontSize: "25px", + letterSpacing: "0.5px", + color: theme.palette.text.primary, +})); + +export const Divider = styled(Box)(({ theme }) => ({ + width: "100%", + height: "2px", + backgroundColor: theme.palette.text.primary, + padding: "0 10px", + divider: 0.7, +})); + +export const HeaderRow = styled(Box)(({ theme }) => ({ + display: "grid", + gridTemplateColumns: "auto 1fr", + alignItems: "center", + justifyContent: "flex-start", + width: "100%", + padding: "10px 15px", + fontFamily: "Copse, sans-serif", + fontSize: "23px", + color: theme.palette.text.primary, +})); + +export const CardDetailsContainer = styled(Box)({ + display: "flex", + flexDirection: "column", + flexGrow: 1, +}); + +export const OwnerNameCol = styled(Box)({ + display: "flex", + alignItems: "center", + flexDirection: "column", +}); + +export const CloseButtonRow = styled(Box)({ + display: "flex", + gap: 1, + justifyContent: "flex-end", +}); + +export const CreateButton = styled(Button)({ + fontFamily: "Montserrat", + fontWeight: 400, + letterSpacing: "0.2px", + textTransform: "uppercase", + fontSize: "15px", + backgroundColor: "#32d43a", + color: "black", + "&:hover": { + cursor: "pointer", + backgroundColor: "#2bb131", + }, +}); + +export const CloseButton = styled(Button)({ + fontFamily: "Montserrat", + fontWeight: 400, + letterSpacing: "0.2px", + textTransform: "uppercase", + fontSize: "15px", +}); diff --git a/src/components/common/Reviews/QFundOwnerReviews.tsx b/src/components/common/Reviews/QFundOwnerReviews.tsx new file mode 100644 index 0000000..b57adae --- /dev/null +++ b/src/components/common/Reviews/QFundOwnerReviews.tsx @@ -0,0 +1,245 @@ +import { FC, useState, useCallback, useEffect, useMemo } from "react"; +import { CircularProgress, Grid, Rating, useTheme } from "@mui/material"; +import { + CardDetailsContainer, + Divider, + HeaderRow, + OwnerAvatar, + OwnerName, + OwnerNameCol, + OwnerReviewsContainer, +} from "./QFundOwnerReviews-styles"; +import { StarSVG } from "../../../assets/svgs/StarSVG"; +import { + AddReviewButton, + AverageReviewContainer, + AverageReviewNumber, + CloseIconModal, + ReviewsFont, + TotalReviewsFont, +} from "./QFundOwnerReviews-styles"; +import { QFundOwnerReviewCard } from "./QFundOwnerReviewCard"; +import { ReusableModal } from "../../modals/ReusableModal"; +import { useDispatch, useSelector } from "react-redux"; +import LazyLoad from "../../../components/common/LazyLoad"; +import { RootState } from "../../../state/store"; +import { AddReview } from "./AddReview/AddReview"; +import { REVIEW_BASE } from "../../../constants"; +import { + OwnerReview, + upsertReviews, +} from "../../../state/features/globalSlice"; +import { AccountCircleSVG } from "../../../assets/svgs/AccountCircleSVG"; + +// Fetch 100 reviews from the crowdfund owner +// Average reviews from the crowdfund owner + +interface QFundOwnerReviewsProps { + QFundId: string; + QFundOwner: string; + QFundOwnerAvatar: string; + QFundOwnerRegisteredNumber: number | null; + averageOwnerRating: number | null; + setOpenQFundOwnerReviews: (open: boolean) => void; +} + +export const QFundOwnerReviews: FC = ({ + QFundId, + QFundOwner, + QFundOwnerAvatar, + QFundOwnerRegisteredNumber, + averageOwnerRating, + setOpenQFundOwnerReviews, +}) => { + const theme = useTheme(); + const dispatch = useDispatch(); + + const ownerReviews = useSelector( + (state: RootState) => state.global.ownerReviews + ); + + const [openLeaveReview, setOpenLeaveReview] = useState(false); + const [loadingReviews, setLoadingReviews] = useState(false); + const [reviewIdentifier, setReviewIdentifier] = useState(""); + + // Fetch all the owner's reviews (regardless of the Q-Fund) resources from QDN + const getQFundOwnerReviews = useCallback(async () => { + if (!QFundId || !QFundOwner) return; + try { + setLoadingReviews(true); + let ownerRegistrationNumber; + if (QFundOwnerRegisteredNumber) { + ownerRegistrationNumber = QFundOwnerRegisteredNumber; + } else { + throw new Error("No registered number found for QFund owner name"); + } + + const offset = ownerReviews.length; + const shortQFundOwner = QFundOwner.slice(0, 15); + // Those first three constants will remain the same no matter which crowdfund the owner made + const query = `${REVIEW_BASE}-${shortQFundOwner}-${ownerRegistrationNumber}`; + // Set the review identifier in the local state so we can filter only the reviews that are for the current Q-Fund + setReviewIdentifier(query); + // Since it the url includes /resources, you know you're fetching the resources and not the raw data + const url = `/arbitrary/resources/search?service=DOCUMENT&query=${query}&limit=10&includemetadata=true&mode=LATEST&offset=${offset}&reverse=true`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseData = await response.json(); + // Modify resource into data that is more easily used on the front end + const structuredReviewData = responseData.map( + (review: any): OwnerReview => { + const splitIdentifier = review.identifier.split("-"); + return { + id: review?.identifier, + name: review?.name, + created: review?.created, + updated: review?.updated, + title: review?.metadata?.title, + description: review?.metadata?.description, + rating: Number(splitIdentifier[splitIdentifier.length - 1]) / 10, + }; + } + ); + + // Filter out duplicates by checking if the review id already exists in ownerReviews in global redux store + const copiedOwnerReviews: OwnerReview[] = [...ownerReviews]; + + structuredReviewData.forEach((review: OwnerReview) => { + const index = ownerReviews.findIndex( + (ownerReview: OwnerReview) => ownerReview.id === review.id + ); + if (index !== -1) { + copiedOwnerReviews[index] = review; + } else { + copiedOwnerReviews.push(review); + } + }); + + dispatch(upsertReviews(copiedOwnerReviews)); + } catch (error) { + console.error(error); + } finally { + setLoadingReviews(false); + } + }, [ownerReviews, QFundId, QFundOwner]); + + // Pass this function down to lazy loader + const handleGetReviews = useCallback(async () => { + await getQFundOwnerReviews(); + }, [getQFundOwnerReviews]); + + return ( + <> + + {QFundOwnerAvatar ? ( + + ) : ( + + )} + + {QFundOwner} + setOpenLeaveReview(true)}> + {" "} + Add Review + + + setOpenQFundOwnerReviews(false)} + color={theme.palette.text.primary} + height={"26"} + width={"26"} + /> + + + + + {averageOwnerRating && ( + + + Average Review + + {averageOwnerRating || null} + + + + {`${ownerReviews.length} review${ + ownerReviews.length === 1 ? "" : "s" + }`} + + + + )} + + + {ownerReviews.length === 0 ? ( + No reviews yet + ) : ( + ownerReviews + .filter((review: OwnerReview) => { + // Change and add filter here to remove owner's own reviews + return review.id.includes(reviewIdentifier); + }) + .map((review: OwnerReview) => { + return ; + }) + )} + + + + + + + + + + ); +}; diff --git a/src/components/common/VideoPlayer.tsx b/src/components/common/VideoPlayer.tsx new file mode 100644 index 0000000..cad719e --- /dev/null +++ b/src/components/common/VideoPlayer.tsx @@ -0,0 +1,812 @@ +import React, { useContext, useEffect, useMemo, useRef, useState } from 'react' +import ReactDOM from 'react-dom' +import { Box, IconButton, Slider } from '@mui/material' +import { CircularProgress, Typography } from '@mui/material' +import { Key } from 'ts-key-enum' +import { + PlayArrow, + Pause, + VolumeUp, + Fullscreen, + PictureInPicture, VolumeOff +} from '@mui/icons-material' +import { styled } from '@mui/system' +import { MyContext } from '../../wrappers/DownloadWrapper' +import { useDispatch, useSelector } from 'react-redux' +import { RootState } from '../../state/store' +import { Refresh } from '@mui/icons-material' + +import { Menu, MenuItem } from '@mui/material' +import { MoreVert as MoreIcon } from '@mui/icons-material' +import { setVideoPlaying } from '../../state/features/globalSlice' +const VideoContainer = styled(Box)` + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; +` + +const VideoElement = styled('video')` + width: 100%; + height: auto; + max-height: calc(100vh - 150px); + background: rgb(33, 33, 33); +` + +const ControlsContainer = styled(Box)` + position: absolute; + display: flex; + align-items: center; + justify-content: space-between; + bottom: 0; + left: 0; + right: 0; + padding: 8px; + background-color: rgba(0, 0, 0, 0.6); +` + +interface VideoPlayerProps { + src?: string + poster?: string + name?: string + identifier?: string + service?: string + autoplay?: boolean + from?: string | null + customStyle?: any + user?: string + jsonId?: string +} + +export const VideoPlayer: React.FC = ({ + poster, + name, + identifier, + service, + autoplay = true, + from = null, + customStyle = {}, + user = '', + jsonId = '' +}) => { + const dispatch = useDispatch() + const videoRef = useRef(null) + const [playing, setPlaying] = useState(false) + const [volume, setVolume] = useState(1) + const [mutedVolume, setMutedVolume] = useState(1) + const [isMuted, setIsMuted] = useState(false) + const [progress, setProgress] = useState(0) + const [isLoading, setIsLoading] = useState(false) + const [canPlay, setCanPlay] = useState(false) + const [startPlay, setStartPlay] = useState(false) + const [isMobileView, setIsMobileView] = useState(false) + const [playbackRate, setPlaybackRate] = useState(1) + const [anchorEl, setAnchorEl] = useState(null) + const videoPlaying = useSelector((state: RootState) => state.global.videoPlaying); + const reDownload = useRef(false) + const { downloads } = useSelector((state: RootState) => state.global) + const download = useMemo(() => { + if (!downloads || !identifier) return {} + const findDownload = downloads[identifier] + + if (!findDownload) return {} + return findDownload + }, [downloads, identifier]) + + const src = useMemo(() => { + return download?.url || '' + }, [download?.url]) + const resourceStatus = useMemo(() => { + return download?.status || {} + }, [download]) + + const minSpeed = 0.25; + const maxSpeed = 4.0; + const speedChange = 0.25; + + const updatePlaybackRate = (newSpeed: number) => { + if (videoRef.current) { + if (newSpeed > maxSpeed || newSpeed < minSpeed) + newSpeed = minSpeed + videoRef.current.playbackRate = newSpeed + setPlaybackRate(newSpeed) + } + } + + const increaseSpeed = (wrapOverflow = true) => { + const changedSpeed = playbackRate + speedChange + let newSpeed = wrapOverflow ? changedSpeed : Math.min(changedSpeed, maxSpeed) + + + if (videoRef.current) { + updatePlaybackRate(newSpeed); + } + } + + const decreaseSpeed = () => { + if (videoRef.current) { + updatePlaybackRate(playbackRate - speedChange); + } + } + + + const toggleRef = useRef(null) + const { downloadVideo } = useContext(MyContext) + const togglePlay = async () => { + if (!videoRef.current) return + setStartPlay(true) + if (!src || resourceStatus?.status !== 'READY') { + const el = document.getElementById('videoWrapper') + if (el) { + el?.parentElement?.removeChild(el) + } + ReactDOM.flushSync(() => { + setIsLoading(true) + }) + getSrc() + } + if (playing) { + videoRef.current.pause() + } else { + videoRef.current.play() + } + setPlaying(!playing) + } + + const onVolumeChange = (_: any, value: number | number[]) => { + if (!videoRef.current) return + videoRef.current.volume = value as number + setVolume(value as number) + setIsMuted(false) + } + + const onProgressChange = (_: any, value: number | number[]) => { + if (!videoRef.current) return + videoRef.current.currentTime = value as number + setProgress(value as number) + if (!playing) { + videoRef.current.play() + setPlaying(true) + } + } + + const handleEnded = () => { + setPlaying(false) + } + + const updateProgress = () => { + if (!videoRef.current) return + setProgress(videoRef.current.currentTime) + } + + const [isFullscreen, setIsFullscreen] = useState(false) + + const enterFullscreen = () => { + if (!videoRef.current) return + if (videoRef.current.requestFullscreen) { + videoRef.current.requestFullscreen() + } + } + + const exitFullscreen = () => { + if (document.exitFullscreen) { + document.exitFullscreen() + } + } + + const toggleFullscreen = () => { + isFullscreen ? exitFullscreen() : enterFullscreen() + } + const togglePictureInPicture = async () => { + if (!videoRef.current) return + if (document.pictureInPictureElement === videoRef.current) { + await document.exitPictureInPicture() + } else { + await videoRef.current.requestPictureInPicture() + } + } + + useEffect(() => { + const handleFullscreenChange = () => { + setIsFullscreen(!!document.fullscreenElement) + } + + document.addEventListener('fullscreenchange', handleFullscreenChange) + return () => { + document.removeEventListener('fullscreenchange', handleFullscreenChange) + } + }, []) + + useEffect(()=> { + if(videoPlaying && videoPlaying.id === identifier && src && videoRef?.current){ + handleCanPlay() + videoRef.current.volume = videoPlaying.volume + videoRef.current.currentTime = videoPlaying.currentTime + videoRef.current.play() + setPlaying(true) + setStartPlay(true) + dispatch(setVideoPlaying(null)) + } + }, [videoPlaying, identifier, src]) + + const handleCanPlay = () => { + setIsLoading(false) + setCanPlay(true) + } + + const getSrc = React.useCallback(async () => { + if (!name || !identifier || !service || !jsonId || !user) return + try { + downloadVideo({ + name, + service, + identifier, + properties: { + jsonId, + user + } + }) + } catch (error) { + console.error(error) + } + }, [identifier, name, service, jsonId, user]) + + useEffect(() => { + const videoElement = videoRef.current + + const handleLeavePictureInPicture = async (event: any) => { + const target = event?.target + if (target) { + target.pause() + if (setPlaying) { + setPlaying(false) + } + } + } + + if (videoElement) { + videoElement.addEventListener( + 'leavepictureinpicture', + handleLeavePictureInPicture + ) + } + + return () => { + if (videoElement) { + videoElement.removeEventListener( + 'leavepictureinpicture', + handleLeavePictureInPicture + ) + } + } + }, []) + + useEffect(() => { + const videoElement = videoRef.current + + const minimizeVideo = async () => { + if (!videoElement) return + + dispatch(setVideoPlaying(videoElement)) + // const handleClose = () => { + // if (videoElement && videoElement.parentElement) { + // const el = document.getElementById('videoWrapper') + // if (el) { + // el?.parentElement?.removeChild(el) + // } + // } + // } + // const createCloseButton = (): HTMLButtonElement => { + // const closeButton = document.createElement('button') + // closeButton.textContent = 'X' + // closeButton.style.position = 'absolute' + // closeButton.style.top = '0' + // closeButton.style.right = '0' + // closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.7)' + // closeButton.style.border = 'none' + // closeButton.style.fontWeight = 'bold' + // closeButton.style.fontSize = '1.2rem' + // closeButton.style.cursor = 'pointer' + // closeButton.style.padding = '2px 8px' + // closeButton.style.borderRadius = '0 0 0 4px' + + // closeButton.addEventListener('click', handleClose) + + // return closeButton + // } + // const buttonClose = createCloseButton() + // const videoWrapper = document.createElement('div') + // videoWrapper.id = 'videoWrapper' + // videoWrapper.style.position = 'fixed' + // videoWrapper.style.zIndex = '900000009' + // videoWrapper.style.bottom = '0px' + // videoWrapper.style.right = '0px' + + // videoElement.parentElement?.insertBefore(videoWrapper, videoElement) + // videoWrapper.appendChild(videoElement) + + // videoWrapper.appendChild(buttonClose) + // videoElement.controls = true + // videoElement.style.height = 'auto' + // videoElement.style.width = '300px' + + // document.body.appendChild(videoWrapper) + } + + return () => { + if (videoElement) { + if (videoElement && !videoElement.paused && !videoElement.ended) { + minimizeVideo() + } + } + } + }, []) + + function formatTime(seconds: number): string { + seconds = Math.floor(seconds) + let minutes: number | string = Math.floor(seconds / 60) + let hours: number | string = Math.floor(minutes / 60) + + let remainingSeconds: number | string = seconds % 60 + let remainingMinutes: number | string = minutes % 60 + + if (remainingSeconds < 10) { + remainingSeconds = '0' + remainingSeconds + } + + if (remainingMinutes < 10) { + remainingMinutes = '0' + remainingMinutes + } + + if (hours === 0) { + hours = '' + } + else { + hours = hours + ':' + } + + return hours + remainingMinutes + ':' + remainingSeconds + } + + const reloadVideo = () => { + if (!videoRef.current) return + const currentTime = videoRef.current.currentTime + videoRef.current.src = src + videoRef.current.load() + videoRef.current.currentTime = currentTime + if (playing) { + videoRef.current.play() + } + } + + useEffect(() => { + if ( + resourceStatus?.status === 'DOWNLOADED' && + reDownload?.current === false + ) { + getSrc() + reDownload.current = true + } + }, [getSrc, resourceStatus]) + + const handleMenuOpen = (event: any) => { + setAnchorEl(event.currentTarget) + } + + const handleMenuClose = () => { + setAnchorEl(null) + } + + useEffect(() => { + const videoWidth = videoRef?.current?.offsetWidth + if (videoWidth && videoWidth <= 600) { + setIsMobileView(true) + } + }, [canPlay]) + + const getDownloadProgress = (current: number, total: number) => { + const progress = current / total * 100; + return Number.isNaN(progress) ? '' : progress.toFixed(0) + '%' + } + const mute = () => { + setIsMuted(true) + setMutedVolume(volume) + setVolume(0) + if (videoRef.current) videoRef.current.volume = 0 + } + const unMute = () => { + setIsMuted(false) + setVolume(mutedVolume) + if (videoRef.current) videoRef.current.volume = mutedVolume + } + + const toggleMute = () => { + isMuted ? unMute() : mute(); + } + + const changeVolume = (volumeChange: number) => { + if (videoRef.current) { + const minVolume = 0; + const maxVolume = 1; + + + let newVolume = volumeChange + volume + + newVolume = Math.max(newVolume, minVolume) + newVolume = Math.min(newVolume, maxVolume) + + setIsMuted(false) + setMutedVolume(newVolume) + videoRef.current.volume = newVolume + setVolume(newVolume); + } + + } + const setProgressRelative = (secondsChange: number) => { + if (videoRef.current) { + const currentTime = videoRef.current?.currentTime + const minTime = 0 + const maxTime = videoRef.current?.duration || 100 + + let newTime = currentTime + secondsChange; + newTime = Math.max(newTime, minTime) + newTime = Math.min(newTime, maxTime) + videoRef.current.currentTime = newTime; + setProgress(newTime); + } + } + + const setProgressAbsolute = (videoPercent: number) => { + if (videoRef.current) { + videoPercent = Math.min(videoPercent, 100) + videoPercent = Math.max(videoPercent, 0) + const finalTime = videoRef.current?.duration * videoPercent / 100 + videoRef.current.currentTime = finalTime + setProgress(finalTime); + } + } + + + const keyboardShortcutsDown = (e: React.KeyboardEvent) => { + e.preventDefault() + + switch (e.key) { + case Key.Add: increaseSpeed(false); break; + case '+': increaseSpeed(false); break; + case '>': increaseSpeed(false); break; + + case Key.Subtract: decreaseSpeed(); break; + case '-': decreaseSpeed(); break; + case '<': decreaseSpeed(); break; + + case Key.ArrowLeft: { + if (e.shiftKey) setProgressRelative(-300); + else if (e.ctrlKey) setProgressRelative(-60); + else if (e.altKey) setProgressRelative(-10); + else setProgressRelative(-5); + } break; + + case Key.ArrowRight: { + if (e.shiftKey) setProgressRelative(300); + else if (e.ctrlKey) setProgressRelative(60); + else if (e.altKey) setProgressRelative(10); + else setProgressRelative(5); + } break; + + case Key.ArrowDown: changeVolume(-0.05); break; + case Key.ArrowUp: changeVolume(0.05); break; + } + } + + const keyboardShortcutsUp = (e: React.KeyboardEvent) => { + e.preventDefault() + + switch (e.key) { + case ' ': togglePlay(); break; + case 'm': toggleMute(); break; + + case 'f': enterFullscreen(); break; + case Key.Escape: exitFullscreen(); break; + + case '0': setProgressAbsolute(0); break; + case '1': setProgressAbsolute(10); break; + case '2': setProgressAbsolute(20); break; + case '3': setProgressAbsolute(30); break; + case '4': setProgressAbsolute(40); break; + case '5': setProgressAbsolute(50); break; + case '6': setProgressAbsolute(60); break; + case '7': setProgressAbsolute(70); break; + case '8': setProgressAbsolute(80); break; + case '9': setProgressAbsolute(90); break; + } + } + + + return ( + + + {isLoading && ( + + + {resourceStatus && ( + + {resourceStatus?.status === 'REFETCHING' ? ( + <> + <> + {getDownloadProgress(resourceStatus?.localChunkCount, resourceStatus?.totalChunkCount)} + + + <> Refetching in 25 seconds + + ) : resourceStatus?.status === 'DOWNLOADED' ? ( + <>Download Completed: building video... + ) : resourceStatus?.status !== 'READY' ? ( + <> + {getDownloadProgress(resourceStatus?.localChunkCount, resourceStatus?.totalChunkCount)} + + + ) : ( + <>Fetching video... + )} + + )} + + )} + {((!src && !isLoading) || !startPlay) && ( + { + if (from === 'create') return + dispatch(setVideoPlaying(null)) + togglePlay() + }} + sx={{ + cursor: 'pointer' + }} + > + + + )} + + + + + {isMobileView && canPlay ? ( + <> + + {playing ? : } + + + + + + + + + + + ) : canPlay ? ( + <> + + {playing ? : } + + + + + + + {progress && videoRef.current?.duration && formatTime(progress)}/ + {progress && + videoRef.current?.duration && + formatTime(videoRef.current?.duration)} + + + {isMuted ? : } + + + increaseSpeed()} + > + Speed: {playbackRate}x + + + + + + + + + + ) : null} + + + ) +} diff --git a/src/components/common/VideoPlayerGlobal.tsx b/src/components/common/VideoPlayerGlobal.tsx new file mode 100644 index 0000000..da14639 --- /dev/null +++ b/src/components/common/VideoPlayerGlobal.tsx @@ -0,0 +1,648 @@ +import React, { useContext, useEffect, useMemo, useRef, useState } from 'react' +import ReactDOM from 'react-dom' +import { Box, IconButton, Slider, useTheme } from '@mui/material' +import { CircularProgress, Typography } from '@mui/material' +import { Key } from 'ts-key-enum' +import { + PlayArrow, + Pause, + VolumeUp, + Fullscreen, + PictureInPicture, VolumeOff +} from '@mui/icons-material' +import { styled } from '@mui/system' +import { MyContext } from '../../wrappers/DownloadWrapper' +import { useDispatch, useSelector } from 'react-redux' +import { RootState } from '../../state/store' +import { Refresh } from '@mui/icons-material' +import CloseIcon from '@mui/icons-material/Close'; + +import { Menu, MenuItem } from '@mui/material' +import { MoreVert as MoreIcon } from '@mui/icons-material' +import { setVideoPlaying } from '../../state/features/globalSlice' +const VideoContainer = styled(Box)` + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; +` + +const VideoElement = styled('video')` + width: 100%; + height: auto; + max-height: calc(100vh - 150px); + background: rgb(33, 33, 33); +` + +const ControlsContainer = styled(Box)` + position: absolute; + display: flex; + align-items: center; + justify-content: space-between; + bottom: 0; + left: 0; + right: 0; + padding: 8px; + background-color: rgba(0, 0, 0, 0.6); +` + +interface VideoPlayerProps { + src?: string + poster?: string + name?: string + identifier?: string + service?: string + autoplay?: boolean + from?: string | null + customStyle?: any + user?: string + jsonId?: string + element?: null | any + checkIfDrag?: ()=> boolean; +} + +export const VideoPlayerGlobal: React.FC = ({ + poster, + name, + identifier, + service, + autoplay = true, + from = null, + customStyle = {}, + user = '', + jsonId = '', + element, + checkIfDrag +}) => { + const theme = useTheme() + + const videoRef = useRef(null) + const [playing, setPlaying] = useState(false) + const [volume, setVolume] = useState(1) + const [mutedVolume, setMutedVolume] = useState(1) + const [isMuted, setIsMuted] = useState(false) + const [progress, setProgress] = useState(0) + const [isLoading, setIsLoading] = useState(false) + const [canPlay, setCanPlay] = useState(false) + const [startPlay, setStartPlay] = useState(false) + const [isMobileView, setIsMobileView] = useState(false) + const [playbackRate, setPlaybackRate] = useState(1) + const [anchorEl, setAnchorEl] = useState(null) + const dispatch = useDispatch() + const reDownload = useRef(false) + const { downloads } = useSelector((state: RootState) => state.global) + const download = useMemo(() => { + if (!downloads || !identifier) return {} + const findDownload = downloads[identifier] + + if (!findDownload) return {} + return findDownload + }, [downloads, identifier]) + + + const resourceStatus = useMemo(() => { + return download?.status || {} + }, [download]) + + const minSpeed = 0.25; + const maxSpeed = 4.0; + const speedChange = 0.25; + + const updatePlaybackRate = (newSpeed: number) => { + if (videoRef.current) { + if (newSpeed > maxSpeed || newSpeed < minSpeed) + newSpeed = minSpeed + videoRef.current.playbackRate = newSpeed + setPlaybackRate(newSpeed) + } + } + + const increaseSpeed = (wrapOverflow = true) => { + const changedSpeed = playbackRate + speedChange + let newSpeed = wrapOverflow ? changedSpeed : Math.min(changedSpeed, maxSpeed) + + + if (videoRef.current) { + updatePlaybackRate(newSpeed); + } + } + + const decreaseSpeed = () => { + if (videoRef.current) { + updatePlaybackRate(playbackRate - speedChange); + } + } + + + const toggleRef = useRef(null) + const { downloadVideo } = useContext(MyContext) + const togglePlay = async () => { + + if(checkIfDrag && checkIfDrag()) return + if (!videoRef.current) return + if (playing) { + videoRef.current.pause() + } else { + videoRef.current.play() + } + setPlaying((prev)=> !prev) + } + + const onVolumeChange = (_: any, value: number | number[]) => { + if (!videoRef.current) return + videoRef.current.volume = value as number + setVolume(value as number) + setIsMuted(false) + } + + const onProgressChange = (_: any, value: number | number[]) => { + if (!videoRef.current) return + videoRef.current.currentTime = value as number + setProgress(value as number) + if (!playing) { + videoRef.current.play() + setPlaying(true) + } + } + + const handleEnded = () => { + setPlaying(false) + } + + const updateProgress = () => { + if (!videoRef.current) return + setProgress(videoRef.current.currentTime) + } + + const [isFullscreen, setIsFullscreen] = useState(false) + + const enterFullscreen = () => { + if (!videoRef.current) return + if (videoRef.current.requestFullscreen) { + videoRef.current.requestFullscreen() + } + } + + const exitFullscreen = () => { + if (document.exitFullscreen) { + document.exitFullscreen() + } + } + + const toggleFullscreen = () => { + isFullscreen ? exitFullscreen() : enterFullscreen() + } + const togglePictureInPicture = async () => { + if (!videoRef.current) return + if (document.pictureInPictureElement === videoRef.current) { + await document.exitPictureInPicture() + } else { + await videoRef.current.requestPictureInPicture() + } + } + + useEffect(() => { + const handleFullscreenChange = () => { + setIsFullscreen(!!document.fullscreenElement) + } + + document.addEventListener('fullscreenchange', handleFullscreenChange) + return () => { + document.removeEventListener('fullscreenchange', handleFullscreenChange) + } + }, []) + + + const handleCanPlay = () => { + setIsLoading(false) + setCanPlay(true) + } + + + + useEffect(() => { + const videoElement = videoRef.current + + const handleLeavePictureInPicture = async (event: any) => { + const target = event?.target + if (target) { + target.pause() + if (setPlaying) { + setPlaying(false) + } + } + } + + if (videoElement) { + videoElement.addEventListener( + 'leavepictureinpicture', + handleLeavePictureInPicture + ) + } + + return () => { + if (videoElement) { + videoElement.removeEventListener( + 'leavepictureinpicture', + handleLeavePictureInPicture + ) + } + } + }, []) + + + + function formatTime(seconds: number): string { + seconds = Math.floor(seconds) + let minutes: number | string = Math.floor(seconds / 60) + let hours: number | string = Math.floor(minutes / 60) + + let remainingSeconds: number | string = seconds % 60 + let remainingMinutes: number | string = minutes % 60 + + if (remainingSeconds < 10) { + remainingSeconds = '0' + remainingSeconds + } + + if (remainingMinutes < 10) { + remainingMinutes = '0' + remainingMinutes + } + + if (hours === 0) { + hours = '' + } + else { + hours = hours + ':' + } + + return hours + remainingMinutes + ':' + remainingSeconds + } + + const reloadVideo = () => { + if (!videoRef.current) return + const src = videoRef.current.src + const currentTime = videoRef.current.currentTime + videoRef.current.src = src + videoRef.current.load() + videoRef.current.currentTime = currentTime + if (playing) { + videoRef.current.play() + } + } + + + const handleMenuOpen = (event: any) => { + setAnchorEl(event.currentTarget) + } + + + const handleMenuClose = () => { + setAnchorEl(null) + } + + useEffect(() => { + const videoWidth = videoRef?.current?.offsetWidth + if (videoWidth && videoWidth <= 600) { + setIsMobileView(true) + } + }, [canPlay]) + + const getDownloadProgress = (current: number, total: number) => { + const progress = current / total * 100; + return Number.isNaN(progress) ? '' : progress.toFixed(0) + '%' + } + const mute = () => { + setIsMuted(true) + setMutedVolume(volume) + setVolume(0) + if (videoRef.current) videoRef.current.volume = 0 + } + const unMute = () => { + setIsMuted(false) + setVolume(mutedVolume) + if (videoRef.current) videoRef.current.volume = mutedVolume + } + + const toggleMute = () => { + isMuted ? unMute() : mute(); + } + + const changeVolume = (volumeChange: number) => { + if (videoRef.current) { + const minVolume = 0; + const maxVolume = 1; + + + let newVolume = volumeChange + volume + + newVolume = Math.max(newVolume, minVolume) + newVolume = Math.min(newVolume, maxVolume) + + setIsMuted(false) + setMutedVolume(newVolume) + videoRef.current.volume = newVolume + setVolume(newVolume); + } + + } + const setProgressRelative = (secondsChange: number) => { + if (videoRef.current) { + const currentTime = videoRef.current?.currentTime + const minTime = 0 + const maxTime = videoRef.current?.duration || 100 + + let newTime = currentTime + secondsChange; + newTime = Math.max(newTime, minTime) + newTime = Math.min(newTime, maxTime) + videoRef.current.currentTime = newTime; + setProgress(newTime); + } + } + + const setProgressAbsolute = (videoPercent: number) => { + if (videoRef.current) { + videoPercent = Math.min(videoPercent, 100) + videoPercent = Math.max(videoPercent, 0) + const finalTime = videoRef.current?.duration * videoPercent / 100 + videoRef.current.currentTime = finalTime + setProgress(finalTime); + } + } + + + const keyboardShortcutsDown = (e: React.KeyboardEvent) => { + e.preventDefault() + + switch (e.key) { + case Key.Add: increaseSpeed(false); break; + case '+': increaseSpeed(false); break; + case '>': increaseSpeed(false); break; + + case Key.Subtract: decreaseSpeed(); break; + case '-': decreaseSpeed(); break; + case '<': decreaseSpeed(); break; + + case Key.ArrowLeft: { + if (e.shiftKey) setProgressRelative(-300); + else if (e.ctrlKey) setProgressRelative(-60); + else if (e.altKey) setProgressRelative(-10); + else setProgressRelative(-5); + } break; + + case Key.ArrowRight: { + if (e.shiftKey) setProgressRelative(300); + else if (e.ctrlKey) setProgressRelative(60); + else if (e.altKey) setProgressRelative(10); + else setProgressRelative(5); + } break; + + case Key.ArrowDown: changeVolume(-0.05); break; + case Key.ArrowUp: changeVolume(0.05); break; + } + } + + const keyboardShortcutsUp = (e: React.KeyboardEvent) => { + e.preventDefault() + + switch (e.key) { + case ' ': togglePlay(); break; + case 'm': toggleMute(); break; + + case 'f': enterFullscreen(); break; + case Key.Escape: exitFullscreen(); break; + + case '0': setProgressAbsolute(0); break; + case '1': setProgressAbsolute(10); break; + case '2': setProgressAbsolute(20); break; + case '3': setProgressAbsolute(30); break; + case '4': setProgressAbsolute(40); break; + case '5': setProgressAbsolute(50); break; + case '6': setProgressAbsolute(60); break; + case '7': setProgressAbsolute(70); break; + case '8': setProgressAbsolute(80); break; + case '9': setProgressAbsolute(90); break; + } + } + + useEffect(()=> { + if(element){ + let oldElement = document.getElementById('videoPlayer'); + if(oldElement && oldElement?.parentNode){ + oldElement?.parentNode.replaceChild(element, oldElement); + videoRef.current = element + setPlaying(true) + setCanPlay(true) + setStartPlay(true) + videoRef?.current?.addEventListener('click', ()=> {}) + videoRef?.current?.addEventListener('timeupdate', updateProgress) + videoRef?.current?.addEventListener('ended', handleEnded) + + } + + } +}, [element]) + + return ( + +

+ + { + dispatch(setVideoPlaying(null)) + }} sx={{ + cursor: 'pointer', + backgroundColor: 'rgba(0,0,0,.5)' + }}> +

+ +

+ + {isMobileView && canPlay ? ( + <> + + {playing ? : } + + + + + + + + + + + ) : canPlay ? ( + <> + + {playing ? : } + + + + + + + {progress && videoRef.current?.duration && formatTime(progress)}/ + {progress && + videoRef.current?.duration && + formatTime(videoRef.current?.duration)} + + + {isMuted ? : } + + + increaseSpeed()} + > + Speed: {playbackRate}x + + + + + + + + + + ) : null} + + + ) +} diff --git a/src/components/layout/Navbar/Navbar-styles.tsx b/src/components/layout/Navbar/Navbar-styles.tsx new file mode 100644 index 0000000..02b4ef1 --- /dev/null +++ b/src/components/layout/Navbar/Navbar-styles.tsx @@ -0,0 +1,117 @@ +import { AppBar, Button, Typography, Box } from '@mui/material'; +import { styled } from '@mui/system'; +import { LightModeSVG } from '../../../assets/svgs/LightModeSVG'; +import { DarkModeSVG } from '../../../assets/svgs/DarkModeSVG'; + +export const CustomAppBar = styled(AppBar)(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + padding: '40px 25px', + backgroundImage: 'none', + boxShadow: 'none', + [theme.breakpoints.only('xs')]: { + gap: '15px', + }, + height: '55px', +})); + +export const LogoContainer = styled('img')({ + width: '12%', + minWidth: '52px', + height: 'auto', + padding: '2px 0', + userSelect: 'none', + objectFit: 'contain', + cursor: 'pointer', +}); + +export const CustomTitle = styled(Typography)({ + fontWeight: 600, + color: '#000000', +}); + +export const AuthenticateButton = styled(Button)(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + padding: '8px 15px', + borderRadius: '40px', + gap: '4px', + backgroundColor: theme.palette.secondary.main, + color: '#fff', + fontFamily: 'Raleway', + transition: 'all 0.3s ease-in-out', + boxShadow: 'none', + '&:hover': { + cursor: 'pointer', + boxShadow: 'rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;', + backgroundColor: theme.palette.secondary.dark, + filter: 'brightness(1.1)', + }, +})); + +export const AvatarContainer = styled(Box)({ + display: 'flex', + alignItems: 'center', + gap: '5px', +}); + +export const DropdownContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: '5px', + backgroundColor: theme.palette.background.paper, + padding: '10px 15px', + transition: 'all 0.4s ease-in-out', + '&:hover': { + cursor: 'pointer', + filter: + theme.palette.mode === 'light' ? 'brightness(0.95)' : 'brightness(1.1)', + }, +})); + +export const DropdownText = styled(Typography)(({ theme }) => ({ + fontFamily: 'Raleway', + fontSize: '16px', + color: theme.palette.text.primary, + userSelect: 'none', +})); + +export const NavbarName = styled(Typography)(({ theme }) => ({ + fontFamily: 'Raleway', + fontSize: '18px', + userSelect: 'none', +})); + +export const ThemeSelectRow = styled(Box)({ + display: 'flex', + alignItems: 'center', + gap: '10px', + flexBasis: 0, + height: '100%', +}); + +export const LightModeIcon = styled(LightModeSVG)(({ theme }) => ({ + transition: 'all 0.1s ease-in-out', + '&:hover': { + cursor: 'pointer', + filter: + theme.palette.mode === 'dark' + ? 'drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))' + : 'drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))', + }, +})); + +export const DarkModeIcon = styled(DarkModeSVG)(({ theme }) => ({ + transition: 'all 0.1s ease-in-out', + '&:hover': { + cursor: 'pointer', + filter: + theme.palette.mode === 'dark' + ? 'drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))' + : 'drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))', + }, +})); diff --git a/src/components/layout/Navbar/Navbar.tsx b/src/components/layout/Navbar/Navbar.tsx new file mode 100644 index 0000000..6793aca --- /dev/null +++ b/src/components/layout/Navbar/Navbar.tsx @@ -0,0 +1,129 @@ +import React from "react"; +import { Box, useTheme } from "@mui/material"; +import { + CustomAppBar, + ThemeSelectRow, + LogoContainer, + LightModeIcon, + DarkModeIcon, + AuthenticateButton, + NavbarName, + AvatarContainer, +} from "./Navbar-styles"; +import { useNavigate } from "react-router-dom"; +import { useDispatch, useSelector } from "react-redux"; +import ExitToAppIcon from "@mui/icons-material/ExitToApp"; +import QFundLogo from "../../../assets/images/QFundDarkLogo.png"; +import QFundLogoLight from "../../../assets/images/QFundLightLogo.png"; +import { RootState } from "../../../state/store"; +import { AccountCircleSVG } from "../../../assets/svgs/AccountCircleSVG"; +interface Props { + isAuthenticated: boolean; + authenticate: () => void; + setTheme: (val: string) => void; + fixed?: boolean; +} + +const NavBar: React.FC = ({ + isAuthenticated, + authenticate, + setTheme, + fixed, +}) => { + const theme = useTheme(); + const dispatch = useDispatch(); + const navigate = useNavigate(); + + const username = useSelector((state: RootState) => state.auth.user?.name); + + const userAvatarHash = useSelector( + (state: RootState) => state.global.userAvatarHash + ); + + return ( + + + {theme.palette.mode === "dark" ? ( + setTheme("light")} + color={!fixed ? "white" : theme.palette.text.primary} + height="22" + width="22" + /> + ) : ( + setTheme("dark")} + color={!fixed ? "white" : theme.palette.text.primary} + height="22" + width="22" + /> + )} + { + navigate(`/`); + }} + /> + + + {!isAuthenticated && ( + + + Authenticate + + )} + {isAuthenticated && username && ( + <> + + + {username} + + {!userAvatarHash[username] ? ( + + ) : ( +

+ )} + + + )} + + + ); +}; + +export default NavBar; diff --git a/src/components/modals/ConsentModal.tsx b/src/components/modals/ConsentModal.tsx new file mode 100644 index 0000000..7e6c662 --- /dev/null +++ b/src/components/modals/ConsentModal.tsx @@ -0,0 +1,72 @@ +import * as React from "react"; +import Button from "@mui/material/Button"; +import Dialog from "@mui/material/Dialog"; +import DialogActions from "@mui/material/DialogActions"; +import DialogContent from "@mui/material/DialogContent"; +import DialogContentText from "@mui/material/DialogContentText"; +import DialogTitle from "@mui/material/DialogTitle"; +import localForage from "localforage"; +import { useTheme } from "@mui/material"; +const generalLocal = localForage.createInstance({ + name: "q-fund-general", +}); + +export default function ConsentModal() { + const theme = useTheme(); + + const [open, setOpen] = React.useState(false); + + const handleClose = () => { + setOpen(false); + }; + + const getIsConsented = React.useCallback(async () => { + try { + const hasConsented = await generalLocal.getItem("general-consent"); + if (hasConsented) return; + + setOpen(true); + generalLocal.setItem("general-consent", true); + } catch (error) {} + }, []); + + React.useEffect(() => { + getIsConsented(); + }, []); + return ( +

+ +

+ ); +} diff --git a/src/components/modals/ReusableModal.tsx b/src/components/modals/ReusableModal.tsx new file mode 100644 index 0000000..baec39d --- /dev/null +++ b/src/components/modals/ReusableModal.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import { Box, Modal, useTheme } from "@mui/material"; + +interface MyModalProps { + open: boolean; + onClose?: () => void; + onSubmit?: (obj: any) => Promise; + children: any; + customStyles?: any; + id?: string; +} + +export const ReusableModal: React.FC = ({ + id, + open, + onClose, + onSubmit, + children, + customStyles = {} +}) => { + const theme = useTheme(); + return ( + + + {children} + + + ); +}; diff --git a/src/constants/index.ts b/src/constants/index.ts new file mode 100644 index 0000000..0fa7f76 --- /dev/null +++ b/src/constants/index.ts @@ -0,0 +1,19 @@ +const useTestIdentifiers = false; + +export const CROWDFUND_BASE = useTestIdentifiers + ? "MYTEST_crowdfund_" + : "q-fund_crowdfund_"; + +export const ATTACHMENT_BASE = useTestIdentifiers + ? "attachments_MYTEST_" + : "attachments_q-fund_"; + +export const COMMENT_BASE = useTestIdentifiers + ? "qcomment_v1_MYTEST_" + : "qcomment_v1_q-fund_"; + +export const UPDATE_BASE = useTestIdentifiers + ? "MYTEST_update_crowdfund_" + : "q-fund_update_crowdfund_"; + +export const REVIEW_BASE = useTestIdentifiers ? "q-fund-testrw" : "q-fund-rw"; diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..37ed5ce --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,113 @@ +// src/global.d.ts + +type TransactionType = + | "GENESIS" + | "PAYMENT" + | "REGISTER_NAME" + | "UPDATE_NAME" + | "SELL_NAME" + | "CANCEL_SELL_NAME" + | "BUY_NAME" + | "CREATE_POLL" + | "VOTE_ON_POLL" + | "ARBITRARY" + | "ISSUE_ASSET" + | "TRANSFER_ASSET" + | "CREATE_ASSET_ORDER" + | "CANCEL_ASSET_ORDER" + | "MULTI_PAYMENT" + | "DEPLOY_AT" + | "MESSAGE" + | "CHAT" + | "PUBLICIZE" + | "AIRDROP" + | "AT" + | "CREATE_GROUP" + | "UPDATE_GROUP" + | "ADD_GROUP_ADMIN" + | "REMOVE_GROUP_ADMIN" + | "GROUP_BAN" + | "CANCEL_GROUP_BAN" + | "GROUP_KICK" + | "GROUP_INVITE" + | "CANCEL_GROUP_INVITE" + | "JOIN_GROUP" + | "LEAVE_GROUP" + | "GROUP_APPROVAL" + | "SET_GROUP" + | "UPDATE_ASSET" + | "ACCOUNT_FLAGS" + | "ENABLE_FORGING" + | "REWARD_SHARE" + | "ACCOUNT_LEVEL" + | "TRANSFER_PRIVS" + | "PRESENCE"; + +interface QortalRequestOptions { + action: string; + name?: string; + service?: string; + data64?: string; + title?: string; + description?: string; + category?: string; + tags?: string[] | string; + identifier?: string; + address?: string; + metaData?: string; + encoding?: string; + includeMetadata?: boolean; + limit?: number; + offset?: number; + reverse?: boolean; + resources?: any[]; + filename?: string; + list_name?: string; + item?: string; + items?: string[]; + tag1?: string; + tag2?: string; + tag3?: string; + tag4?: string; + tag5?: string; + coin?: string; + destinationAddress?: string; + amount?: number; + blob?: Blob; + mimeType?: string; + file?: File; + encryptedData?: string; + mode?: string; + query?: string; + excludeBlocked?: boolean; + exactMatchNames?: boolean; + creationBytes?: string; + type?: string; + assetId?: number; + txType?: TransactionType[]; + confirmationStatus?: string; + startBlock?: number; + blockLimit?: number; + txGroupId?: number; +} + +declare function qortalRequest(options: QortalRequestOptions): Promise; +declare function qortalRequestWithTimeout( + options: QortalRequestOptions, + time: number +): Promise; + +declare global { + interface Window { + _qdnBase: any; // Replace 'any' with the appropriate type if you know it + _qdnTheme: string; + } +} + +declare global { + interface Window { + showSaveFilePicker: ( + options?: SaveFilePickerOptions + ) => Promise; + } +} diff --git a/src/hooks/useFetchCrowdfundStatus.tsx b/src/hooks/useFetchCrowdfundStatus.tsx new file mode 100644 index 0000000..5c9d69e --- /dev/null +++ b/src/hooks/useFetchCrowdfundStatus.tsx @@ -0,0 +1,239 @@ +import { useCallback, useEffect, useRef, useState } from "react"; + +export const useFetchCrowdfundStatus = ( + crowdfundData: any, + atAddress: string, + blocksRemainingZero: boolean +) => { + const [ATDeployed, setATDeployed] = useState(false); + const [ATCompleted, setATCompleted] = useState(false); + const [ATLoadingStatus, setATLoadingStatus] = useState( + "Verifying Deployment Status..." + ); + const [ATStatus, setATStatus] = useState(""); + const [ATAmount, setATAmount] = useState(null); + const [ATEnded, setATEnded] = useState(false); + const [checkedATEnded, setCheckedATEnded] = useState(false); + + const interval = useRef(null); + + // First check if the crowdfund has been deployed. + // If it has, check if the AT is still active by making an API request with transaction/search, type AT and looking for property called "amount". If no response, then AT is still active. If there is a response, it is completed. + // We also need a useEffect in case the Q-Fund goes from in progress to completed. We do this by having a + // If it is completed, check if amount value is greater than or equal to the goal value. If it is, then the goal has been achieved. If it isn't, then the goal has not been achieved. + + // Fetch AT Deployment Status using the AT Address + const fetchQFundDeploymentStatus = useCallback(async () => { + try { + if (!atAddress) return; + const res = await qortalRequest({ + action: "SEARCH_TRANSACTIONS", + txType: ["DEPLOY_AT"], + confirmationStatus: "CONFIRMED", + address: atAddress, + limit: 1, + reverse: true, + }); + if (res?.length > 0) { + // Check if AT is sleeping and isn't finished yet + const url = `/at/${atAddress}`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + if (response.status === 200) { + const responseDataSearch = await response.json(); + // if we get a 200 response from /at/address, as well as the sleepUntilHeight property and !isFinished, then AT is deployed and we can check if it's in progress, achieved, or not achieved. + if ( + responseDataSearch?.sleepUntilHeight && + !responseDataSearch?.isFinished + ) { + setATDeployed(true); + setATLoadingStatus("Verifying Q-Fund Completion Status..."); + return res; + // if we get a 200 response from /at/address, but we're missing both the sleepUntilHeight property and isFinished, then AT is still being deployed + } else if ( + !responseDataSearch?.sleepUntilHeight && + !responseDataSearch?.isFinished + ) { + setATDeployed(false); + setATStatus("Q-Fund Being Deployed"); + return []; + // if we get a 200 response from /at/address, and we're missing the sleepUntilHeight property, but isFinished is true, then the AT is completed. + } else if ( + !responseDataSearch.sleepUntilHeight && + responseDataSearch.isFinished + ) { + setATDeployed(true); + setATLoadingStatus("Verifying Q-Fund Completion Status..."); + return res; + } + // if we get a 204 response from /at/address, then AT is not deployed yet because we still don't have the sleepUntilHeight property + } else { + setATStatus("Q-Fund Being Deployed"); + setATDeployed(false); + return []; + } + } else { + setATStatus("Q-Fund Being Deployed"); + setATDeployed(false); + return []; + } + } catch (error) { + console.error(error); + setATLoadingStatus("Error when fetching Q-Fund Deployment Status"); + } + }, [atAddress]); + + // useEffect that checks whether a Q-Fund is currently in deployment or not. If it is, we prevent the user from donating to the Q-Fund. We do polling every 30 seconds. + useEffect(() => { + if (atAddress) { + let intervalId: NodeJS.Timeout | undefined; + const checkDeploymentStatus = async () => { + const checkStatus = async () => { + const ATFound = await fetchQFundDeploymentStatus(); + if (ATFound?.length > 0) { + clearInterval(intervalId); // Stop the polling if AT becomes available + } else { + setATDeployed(false); + setATLoadingStatus(""); + } + }; + checkStatus(); + intervalId = setInterval(checkStatus, 30000); + // Clear the interval when the component unmounts + return () => { + if (intervalId) clearInterval(intervalId); + }; + }; + checkDeploymentStatus(); + } + }, [atAddress, fetchQFundDeploymentStatus]); + + // See if AT is completed + const fetchQFundCompletionStatus = useCallback(async () => { + try { + if (!atAddress) return; + const res = await qortalRequest({ + action: "SEARCH_TRANSACTIONS", + txType: ["AT"], + confirmationStatus: "CONFIRMED", + address: atAddress, + limit: 0, + reverse: true, + }); + if (res?.length > 0 && ATEnded) { + const totalAmount: number = res.reduce( + (total: number, transaction) => + total + parseFloat(transaction.amount), + 0 + ); + setATCompleted(true); + setATLoadingStatus(""); + setATAmount(totalAmount); + // Check if AT is achieved or not achieved + if (totalAmount >= crowdfundData?.deployedAT?.goalValue) { + setATStatus("Q-Fund Goal Achieved"); + } else { + setATStatus("Q-Fund Goal Not Achieved"); + } + } else if (res?.length === 0 && ATEnded) { + setATCompleted(true); + setATLoadingStatus(""); + setATStatus( + "Q-Fund Completed! Check back later to see the achievement status." + ); + } else if (res.length > 0 && !ATEnded) { + setATCompleted(true); + setATLoadingStatus(""); + setATAmount(res[0]?.amount); + // Check if AT is achieved or not achieved + if (res[0]?.amount >= crowdfundData?.deployedAT?.goalValue) { + setATStatus("Q-Fund Goal Achieved"); + } else { + setATStatus("Q-Fund Goal Not Achieved"); + } + } else { + setATCompleted(false); + setATLoadingStatus(""); + setATStatus("Q-Fund In Progress"); + } + } catch (error) { + console.error(error); + setATLoadingStatus("Error when fetching Q-Fund Completion Status"); + } + }, [atAddress, ATEnded]); + + // useEffect that check if AT is completed or not. If it is completed, we then check if it is achieved or not achieved based on the amount value. If it receives an ATEnded prop, recall the useEffect to see the achievement status of the AT. + useEffect(() => { + if (ATDeployed && atAddress) { + const checkCompletionStatus = async () => { + await fetchQFundCompletionStatus(); + }; + checkCompletionStatus(); + } + }, [ATDeployed, atAddress, fetchQFundCompletionStatus, checkedATEnded]); + + // Check if the crowdfund has ended by checking /at/address for isFinished property inside the response object + const hasQFundEnded = useCallback(async (atAddress: string) => { + try { + const url = `/at/${atAddress}`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + if (response.status === 200) { + const responseDataSearch = await response.json(); + if ( + Object.keys(responseDataSearch).length > 0 && + responseDataSearch?.isFinished + ) { + setATEnded(true); + setCheckedATEnded(true); + return responseDataSearch; + } else { + setATEnded(false); + setCheckedATEnded(true); + return responseDataSearch; + } + } + } catch (error) { + console.log(error); + } + }, []); + + // Poll every 5 seconds to check if the crowdfund has ended when blocksRemaining is 0 + useEffect(() => { + if (blocksRemainingZero && !checkedATEnded) { + let isCalling = false; + interval.current = setInterval(async () => { + if (isCalling) return; + isCalling = true; + const response = await hasQFundEnded(atAddress); + + if (response) { + clearInterval(interval.current); + } + + isCalling = false; + }, 5000); + } + return () => { + if (interval.current) { + clearInterval(interval.current); + } + }; + }, [blocksRemainingZero]); + + return { + ATDeployed, + ATCompleted, + ATLoadingStatus, + ATStatus, + ATAmount, + }; +}; diff --git a/src/hooks/useFetchCrowdfunds.tsx b/src/hooks/useFetchCrowdfunds.tsx new file mode 100644 index 0000000..de665a7 --- /dev/null +++ b/src/hooks/useFetchCrowdfunds.tsx @@ -0,0 +1,102 @@ +import React from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { + addToHashMap, + upsertCrowdfunds, + Crowdfund, +} from "../state/features/crowdfundSlice"; + +import { RootState } from "../state/store"; +import { fetchAndEvaluateCrowdfunds } from "../utils/fetchCrowdfunds"; +import { CROWDFUND_BASE } from "../constants"; + +export const useFetchCrowdfunds = () => { + const dispatch = useDispatch(); + const hashMapCrowdfund = useSelector( + (state: RootState) => state.crowdfund.hashMapCrowdfunds + ); + const crowdfunds = useSelector( + (state: RootState) => state.crowdfund.crowdfunds + ); + + const checkAndUpdateResource = React.useCallback( + (crowdfund: Crowdfund) => { + const existingCrowdfund = hashMapCrowdfund[crowdfund.id]; + if (!existingCrowdfund) { + return true; + } else if ( + crowdfund?.updated && + existingCrowdfund?.updated && + (!existingCrowdfund?.updated || crowdfund?.updated) > + existingCrowdfund?.updated + ) { + return true; + } else { + return false; + } + }, + [hashMapCrowdfund] + ); + + const getCrowdfund = async ( + user: string, + identifier: string, + content: any + ) => { + const res = await fetchAndEvaluateCrowdfunds({ + user, + identifier, + content, + }); + + dispatch(addToHashMap(res)); + }; + + const getCrowdfunds = React.useCallback(async () => { + try { + const offset = crowdfunds.length; + const listLimit = 20; + const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${CROWDFUND_BASE}&limit=${listLimit}&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseData = await response.json(); + + const structureData = responseData.map((resource: any): Crowdfund => { + return { + title: resource?.metadata?.title, + category: resource?.metadata?.category, + categoryName: resource?.metadata?.categoryName, + tags: resource?.metadata?.tags || [], + description: resource?.metadata?.description, + created: resource?.created, + updated: resource?.updated, + user: resource.name, + id: resource.identifier, + }; + }); + dispatch(upsertCrowdfunds(structureData)); + + for (const content of structureData) { + if (content.user && content.id) { + const res = checkAndUpdateResource(content); + if (res) { + getCrowdfund(content.user, content.id, content); + } + } + } + } catch (error) { + console.error(error); + } + }, [crowdfunds, hashMapCrowdfund]); + + return { + getCrowdfunds, + checkAndUpdateResource, + getCrowdfund, + hashMapCrowdfund, + }; +}; diff --git a/src/hooks/useFetchOwnerReviews.tsx b/src/hooks/useFetchOwnerReviews.tsx new file mode 100644 index 0000000..0ee9758 --- /dev/null +++ b/src/hooks/useFetchOwnerReviews.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { addToHashMapOwnerReviews } from "../state/features/globalSlice"; +import { RootState } from "../state/store"; +import { fetchAndEvaluateOwnerReviews } from "../utils/fetchOwnerReviews"; + +interface Resource { + id: string; + updated?: number; +} + +export const useFetchOwnerReviews = () => { + const dispatch = useDispatch(); + const hashMapOwnerReviews = useSelector( + (state: RootState) => state.global.hashMapOwnerReviews + ); + + // Get the review raw data from QDN + const getReview = async (owner: string, reviewId: string, content: any) => { + const res = await fetchAndEvaluateOwnerReviews({ + owner, + reviewId, + content, + }); + + dispatch(addToHashMapOwnerReviews(res)); + }; + + // Make sure that raw data isn't already present in Redux hashmap + const checkAndUpdateResource = React.useCallback( + (resource: Resource) => { + // Check if the post exists in hashMapPosts + const existingResource = hashMapOwnerReviews[resource.id]; + if (!existingResource) { + // If the post doesn't exist, add it to hashMapPosts + return true; + } else if ( + resource?.updated && + existingResource?.updated && + resource.updated > existingResource.updated + ) { + // If the post exists and its updated is more recent than the existing post's updated, update it in hashMapPosts + return true; + } else { + return false; + } + }, + [hashMapOwnerReviews] + ); + + return { + getReview, + checkAndUpdateResource, + }; +}; diff --git a/src/hooks/useWindowSize.tsx b/src/hooks/useWindowSize.tsx new file mode 100644 index 0000000..bf2b9cc --- /dev/null +++ b/src/hooks/useWindowSize.tsx @@ -0,0 +1,25 @@ +import { useState, useEffect } from 'react'; + +export function useWindowSize() { + const [windowSize, setWindowSize] = useState({ + width: undefined, + }); + + useEffect(() => { + function handleResize() { + setWindowSize({ + width: window.innerWidth, + }); + } + + window.addEventListener("resize", handleResize); + + // Call handler right away so state gets updated with initial window size + handleResize(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleResize); + }, []); // Empty array means that effect doesn't depend on any values from props or state, so it runs once when the component mounts, and never re-runs. + + return windowSize; +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..5b3f63f --- /dev/null +++ b/src/index.css @@ -0,0 +1,269 @@ +@font-face { + font-family: "Mulish"; + src: url("./styles/fonts/Mulish.ttf") format("truetype"); +} + +@font-face { + font-family: "Copse"; + src: url("./styles/fonts/Copse.ttf") format("truetype"); +} + +@font-face { + font-family: "Cambon Light"; + src: url("./styles/fonts/Cambon-Light.ttf") format("truetype"); +} + +@font-face { + font-family: "Catamaran"; + src: url("./styles/fonts/Catamaran.ttf") format("truetype"); +} + +@font-face { + font-family: "Oxygen"; + src: url("./styles/fonts/Oxygen.ttf") format("truetype"); +} + +@font-face { + font-family: "Cairo"; + src: url("./styles/fonts/Cairo.ttf") format("truetype"); +} + +:root { + padding: 0px; + margin: 0px; + box-sizing: border-box; +} + +* { + padding: 0px; + margin: 0px; +} + +p { + font-size: 18px; +} + +.line-clamp { + height: 100px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 5; /* number of lines to show */ + -webkit-box-orient: vertical; + text-overflow: ellipsis; +} + +.edit-btn:hover { + opacity: 0.75; + transition: 0.2s all; +} + +.post-image { + max-width: 100%; + border-radius: 5px; + width: 100%; + height: 100%; +} + +.test-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + min-height: 25px; +} + +.test-grid-item { + border: 1px solid powderblue; +} + +body::-webkit-scrollbar-track { + background-color: transparent; +} +body::-webkit-scrollbar-track:hover { + background-color: transparent; +} + +body::-webkit-scrollbar { + width: 16px; + height: 10px; + background-color: white; +} + +body::-webkit-scrollbar-thumb { + background-color: #838eee; + border-radius: 8px; + background-clip: content-box; + border: 4px solid transparent; +} + +body::-webkit-scrollbar-thumb:hover { + background-color: #6270f0; +} + +.MuiList-root::-webkit-scrollbar-track { + background-color: transparent; +} +.MuiList-root::-webkit-scrollbar-track:hover { + background-color: transparent; +} + +.MuiList-root::-webkit-scrollbar { + width: 14px; + height: 10px; + background-color: white; +} + +.MuiList-root::-webkit-scrollbar-thumb { + background-color: lightgray; + border-radius: 8px; + background-clip: content-box; + border: 4px solid transparent; +} + +.MuiList-root::-webkit-scrollbar-thumb:hover { + background-color: lightslategray; +} + +.my-masonry-grid { + display: -webkit-box; /* Not needed if autoprefixing */ + display: -ms-flexbox; /* Not needed if autoprefixing */ + display: flex; + margin-left: -20px; /* gutter size offset */ + width: auto; + padding: 15px 20px; +} + +.my-masonry-grid_column { + padding-left: 20px; /* gutter size */ + background-clip: padding-box; +} + +/* Style your items */ +.my-masonry-grid_column > li { + /* change div to reference your elements you put in */ + margin-bottom: 30px; +} + +.my-svg path { + fill: red; +} + +.qortal-link { + text-decoration: none; /* Removes the underline */ + color: inherit; /* Inherits the color of the parent element */ +} +.qortal-link:hover, +a:focus { + text-decoration: underline; /* Adds underline on hover and focus for accessibility */ +} + +.download-icon { + transition: all 0.5s ease-in-out; + animation: downloadIconAnimation 2s infinite; +} + +@keyframes downloadIconAnimation { + 0% { + transform: scale(1); + fill: #fff; + } + 50% { + transform: scale(1.2); + fill: #3498db; + } + 100% { + transform: scale(1); + fill: #fff; + } +} + +.closePlayer { + position: absolute; + top: 0px; + width: 100%; + transition: all 0.3s; + display: flex; + justify-content: flex-end; + z-index: 8000; +} + +/* When the screen is 600px or less, display .myClassUnder600 and hide .myClassOver600 */ +@media screen and (max-width: 600px) { + .myClassUnder600 { + display: none !important; + } +} + +@media screen and (min-width: 601px) { + .myClassOver600 { + display: none !important; + } +} + +.editor-container { + background: #fcfcfc; + color: #000000; + border-radius: 5px; + min-width: 75%; + min-height: 50vh; +} +.editor-container * { + max-width: 100%; + word-break: break-word; +} + +.audio-player { + width: 100%; + max-width: 600px; + margin: 0 auto; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} + +.audio-player .toggle-play { + display: block; + margin-bottom: 20px; + padding: 10px 20px; + border: none; + border-radius: 5px; + background: #007bff; + color: white; + cursor: pointer; +} + +.audio-player .toggle-play:hover { + background: #0056b3; +} + +.audio-player .progress-container { + width: 100%; + height: 20px; + background: #ccc; + cursor: pointer; + margin-bottom: 20px; +} + +.audio-player .progress-bar { + height: 100%; + background: #007bff; +} + +.audio-player .volume-slider { + width: 100%; + cursor: pointer; +} + +.audio-player .volume-slider { + width: 100%; + cursor: pointer; +} + +/* React Quill */ + +.ql-editor { + min-height: 100px; +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..654ad07 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,17 @@ +import ReactDOM from 'react-dom/client' +import App from './App' +import './index.css' +import { BrowserRouter } from 'react-router-dom' +interface CustomWindow extends Window { + _qdnBase: any +} + +const customWindow = window as unknown as CustomWindow + +const baseUrl = customWindow?._qdnBase || '' +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( + + +

+ +) diff --git a/src/pages/Crowdfund/Crowdfund.tsx b/src/pages/Crowdfund/Crowdfund.tsx new file mode 100644 index 0000000..b3f1962 --- /dev/null +++ b/src/pages/Crowdfund/Crowdfund.tsx @@ -0,0 +1,721 @@ +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import { useDispatch, useSelector } from "react-redux"; +import { RootState } from "../../state/store"; +import { CircularProgress, Stack, useTheme } from "@mui/material"; +import AttachFileIcon from "@mui/icons-material/AttachFile"; +import DownloadIcon from "@mui/icons-material/Download"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import { DisplayHtml } from "../../components/common/DisplayHtml"; +import FileElement from "../../components/common/FileElement"; +import { setIsLoadingGlobal } from "../../state/features/globalSlice"; +import { CROWDFUND_BASE, REVIEW_BASE, UPDATE_BASE } from "../../constants"; +import { addToHashMap } from "../../state/features/crowdfundSlice"; +import { + AboutMyCrowdfund, + BackToHomeButton, + CoverImage, + CrowdfundAccordion, + CrowdfundAccordionDetails, + CrowdfundAccordionFont, + CrowdfundAccordionSummary, + CrowdfundDescriptionRow, + CrowdfundInlineContentRow, + CrowdfundPageTitle, + CrowdfundStatusRow, + CrowdfundSubTitle, + CrowdfundSubTitleRow, + CrowdfundTitleRow, + MainCol, + MainContainer, + NoReviewsFont, + RatingContainer, + StyledRating, +} from "../../components/Crowdfund/Crowdfund-styles"; +import AudioPlayer from "../../components/common/AudioPlayer"; +import { NewCrowdfund } from "../../components/Crowdfund/NewCrowdfund"; +import { CommentSection } from "../../components/common/Comments/CommentSection"; +import { Donate } from "../../components/common/Donate/Donate"; +import { CrowdfundProgress } from "../../components/common/Progress/Progress"; +import { Countdown } from "../../components/common/Countdown/Countdown"; +import { NewUpdate } from "../../components/Crowdfund/NewUpdate"; +import { Update } from "./Update"; +import { AccountCircleSVG } from "../../assets/svgs/AccountCircleSVG"; +import moment from "moment"; +import { + FileAttachmentContainer, + FileAttachmentFont, + PlayerBox, +} from "./Update-styles"; +import CoverImageDefault from "../../assets/images/CoverImageDefault.webp"; +import { setNotification } from "../../state/features/notificationsSlice"; +import { useFetchCrowdfundStatus } from "../../hooks/useFetchCrowdfundStatus"; +import { CrowdfundLoader } from "./CrowdfundLoader"; +import { ReusableModalStyled } from "../../components/common/Reviews/QFundOwnerReviews-styles"; +import { QFundOwnerReviews } from "../../components/common/Reviews/QFundOwnerReviews"; +import DonorInfo from "../../components/common/Donate/DonorInfo"; +import { + SearchTransactionResponse, + searchTransactions, +} from "qortal-app-utils"; + +export const Crowdfund = () => { + const theme = useTheme(); + const dispatch = useDispatch(); + const { name, id } = useParams(); + const navigate = useNavigate(); + + const userAvatarHash = useSelector( + (state: RootState) => state.global.userAvatarHash + ); + + const hashMapCrowdfunds = useSelector( + (state: RootState) => state.crowdfund.hashMapCrowdfunds + ); + + const [rawDonorData, setRawDonorData] = useState( + [] + ); + const [crowdfundData, setCrowdfundData] = useState(null); + const [currentAtInfo, setCurrentAtInfo] = useState(null); + const [loadingAtInfo, setLoadingAtInfo] = useState(false); + const username = useSelector((state: RootState) => state.auth?.user?.name); + const [updatesList, setUpdatesList] = useState([]); + const [atAddressBalance, setAtAddressBalance] = useState(null); + const [nodeInfo, setNodeInfo] = useState(null); + const [openQFundOwnerReviews, setOpenQFundOwnerReviews] = + useState(false); + const [ownerAvatar, setOwnerAvatar] = useState(null); + const [averageRatingLoader, setAverageRatingLoader] = + useState(false); + const [averageOwnerRating, setAverageOwnerRating] = useState( + null + ); + const [ownerRegisteredNumber, setOwnerRegisteredNumber] = useState< + number | null + >(null); + const [blocksRemainingZero, setBlocksRemainingZero] = + useState(false); + + const interval = useRef(null); + const intervalBalance = useRef(null); + const endDateRef = useRef(null); + + // Get the AT Address from the crowdfundData + const atAddress = useMemo(() => { + return crowdfundData?.deployedAT?.aTAddress || null; + }, [crowdfundData]); + + const endDate = useMemo(() => { + if (!currentAtInfo?.sleepUntilHeight || !nodeInfo?.height) return null; + if (endDateRef.current) return endDateRef.current; + + const diff = +currentAtInfo?.sleepUntilHeight - +nodeInfo.height; + const end = moment().add(diff, "minutes"); + endDateRef.current = end; + return end; + }, [currentAtInfo, nodeInfo]); + + const blocksRemaining = useMemo(() => { + if ( + (!currentAtInfo?.sleepUntilHeight || !nodeInfo?.height) && + !currentAtInfo?.isFinished + ) { + return null; + } else if (currentAtInfo?.isFinished) { + setBlocksRemainingZero(true); + return 0; + } else { + const diff = +currentAtInfo?.sleepUntilHeight - +nodeInfo.height; + // If the difference is less than or equal to 0, then the crowdfund has ended and we must check /at/address to look for isFinished property on the response object. If it is true, then the crowdfund has ended. If it is false, then the crowdfund is still in progress, and we don't show the Q-Fund has ended status until then. + if (diff <= 0) { + setBlocksRemainingZero(true); + return 0; + } + return diff; + } + }, [currentAtInfo, nodeInfo]); + + const editContent = useMemo(() => { + if (!crowdfundData) return null; + const content = { + title: crowdfundData?.title, + inlineContent: crowdfundData?.inlineContent, + attachments: crowdfundData?.attachments, + user: crowdfundData?.user, + coverImage: crowdfundData?.coverImage || null, + }; + return content; + }, [crowdfundData]); + + const getRawDonorData = (address: string) => { + searchTransactions({ + txType: ["PAYMENT"], + address, + confirmationStatus: "BOTH", + }).then(donorResponse => { + setRawDonorData(donorResponse); + }); + }; + + const getCurrentAtInfo = React.useCallback(async atAddress => { + console.log({ atAddress }); + getRawDonorData(atAddress); + setLoadingAtInfo(true); + try { + const url = `/at/${atAddress}`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + if (response.status === 200) { + const responseDataSearch = await response.json(); + setCurrentAtInfo(responseDataSearch); + } + } catch (error) { + console.log(error); + } finally { + dispatch(setIsLoadingGlobal(false)); + setLoadingAtInfo(false); + } + }, []); + + const getNodeInfo = React.useCallback(async () => { + try { + const url = `/blocks/height`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseDataSearch = await response.json(); + setNodeInfo({ height: responseDataSearch }); + } catch (error) { + console.log(error); + } finally { + dispatch(setIsLoadingGlobal(false)); + } + }, []); + + const getAtAddressInfo = React.useCallback(async atAddress => { + try { + const url = `/addresses/balance/${atAddress}`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseDataSearch = await response.json(); + setAtAddressBalance(responseDataSearch); + } catch (error) { + console.log(error); + } finally { + dispatch(setIsLoadingGlobal(false)); + } + }, []); + + const getCrowdfundData = React.useCallback( + async (name: string, id: string) => { + try { + if (!name || !id) return; + dispatch(setIsLoadingGlobal(true)); + + // Get the resource location here + const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${CROWDFUND_BASE}&limit=1&includemetadata=true&reverse=true&excludeblocked=true&name=${name}&exactmatchnames=true&offset=0&identifier=${id}`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseDataSearch = await response.json(); + + // Always comes back as an array, so you must find the correct one using array bracket notation + if (responseDataSearch?.length > 0) { + let resourceData = responseDataSearch[0]; + resourceData = { + title: resourceData?.metadata?.title, + category: resourceData?.metadata?.category, + categoryName: resourceData?.metadata?.categoryName, + tags: resourceData?.metadata?.tags || [], + description: resourceData?.metadata?.description, + coverImage: resourceData?.metadata?.coverImage, + created: resourceData?.created, + updated: resourceData?.updated, + user: resourceData.name, + id: resourceData.identifier, + }; + + // Get raw data of the resource here + const responseData = await qortalRequest({ + action: "FETCH_QDN_RESOURCE", + name: name, + service: "DOCUMENT", + identifier: id, + }); + + if (responseData && !responseData.error) { + const combinedData = { + ...resourceData, + ...responseData, + }; + + setCrowdfundData(combinedData); + dispatch(addToHashMap(combinedData)); + console.log({ combinedData }); + if (combinedData?.deployedAT?.aTAddress) { + getCurrentAtInfo(combinedData?.deployedAT?.aTAddress); + getAtAddressInfo(combinedData?.deployedAT?.aTAddress); + } + } + } + } catch (error) { + console.log(error); + } finally { + dispatch(setIsLoadingGlobal(false)); + } + }, + [] + ); + + const getUpdates = React.useCallback(async (name: string, id: string) => { + try { + if (!name || !id) return; + const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${UPDATE_BASE}${id.slice( + -12 + )}&limit=0&includemetadata=false&reverse=true&excludeblocked=true&name=${name}&exactmatchnames=true&offset=0`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseDataSearch = await response.json(); + setUpdatesList(responseDataSearch); + } catch (error) { + console.log(error); + } + }, []); + + const QFundOwnerAvatarUrl = useCallback(async () => { + try { + if (name) { + const url = await qortalRequest({ + action: "GET_QDN_RESOURCE_URL", + name: name, + service: "THUMBNAIL", + identifier: "qortal_avatar", + }); + console.log({ url }); + setOwnerAvatar(url); + } + } catch (error) { + console.error(error); + } + }, [name]); + + // Get the Q-Fund Owner's Avatar + useEffect(() => { + QFundOwnerAvatarUrl(); + }, [name]); + + // Custom hook to get the AT Status, AT Achieved or Not, AT Amount, and AT Loading Status. We pass down the blocksRemainingZero state once blocksRemaining is 0 or less than 0. We do this to verify the completion status of the AT. + const { ATDeployed, ATCompleted, ATLoadingStatus, ATStatus, ATAmount } = + useFetchCrowdfundStatus(crowdfundData, atAddress, blocksRemainingZero); + + // We get the crowdfund's updates if hashMapCrowdfund changes. This changes when you publish a new update or modify an existing update and if the ATStatus changes inside the useFetchCrowdfundStatus hook. + useEffect(() => { + if (name && id) { + const existingCrowdfund = hashMapCrowdfunds[id]; + + if (existingCrowdfund) { + setCrowdfundData(existingCrowdfund); + getCurrentAtInfo(existingCrowdfund?.deployedAT?.aTAddress); + getAtAddressInfo(existingCrowdfund?.deployedAT?.aTAddress); + } else { + getCrowdfundData(name, id); + } + getUpdates(name, id); + getNodeInfo(); + } + }, [id, name, hashMapCrowdfunds, ATStatus]); + + // Check node info every 30 seconds + const checkNodeInfo = useCallback(() => { + let isCalling = false; + interval.current = setInterval(async () => { + if (isCalling) return; + isCalling = true; + const res = await getNodeInfo(); + if (id) { + const address = hashMapCrowdfunds[id]?.deployedAT?.aTAddress; + getRawDonorData(address); + } + isCalling = false; + }, 30000); + }, [getNodeInfo]); + + useEffect(() => { + checkNodeInfo(); + + return () => { + if (interval?.current) { + clearInterval(interval.current); + } + }; + }, [checkNodeInfo]); + + const checkBalance = useCallback( + atAddress => { + let isCalling = false; + intervalBalance.current = setInterval(async () => { + if (isCalling) return; + isCalling = true; + const res = await getAtAddressInfo(atAddress); + isCalling = false; + }, 30000); + }, + [getAtAddressInfo] + ); + + // Get 100 store reviews from QDN and calculate the average review. + const getOwnerAverageReview = useCallback(async () => { + if (!id || !name) return; + try { + let ownerNumber: number; + setAverageRatingLoader(true); + const shortQFundOwner = name.slice(0, 15); + const QFundOwnerRegistration = await qortalRequest({ + action: "GET_NAME_DATA", + name: name, + }); + // Get the owner's name registered number to be used as a unique variable when creating reviews. This will be passed down to the component + if (Object.keys(QFundOwnerRegistration).length > 0) { + ownerNumber = QFundOwnerRegistration.registered; + setOwnerRegisteredNumber(ownerNumber); + } else { + throw new Error("No registered number found for QFund owner name"); + } + // Those first three constants will remain the same no matter which crowdfund the owner made + const query = `${REVIEW_BASE}-${shortQFundOwner}-${ownerNumber}`; + // Since it the url includes /resources, you know you're fetching the resources and not the raw data + const url = `/arbitrary/resources/search?service=DOCUMENT&query=${query}&limit=100&includemetadata=false&mode=LATEST&reverse=true`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseData = await response.json(); + if (responseData.length === 0) { + setAverageOwnerRating(null); + return; + } + // Modify resource into data that is more easily used on the front end + const storeRatingsArray = responseData.map((review: any) => { + const splitIdentifier = review.identifier.split("-"); + const rating = Number(splitIdentifier[splitIdentifier.length - 1]) / 10; + return rating; + }); + + // Calculate average rating of the store + let averageRating = + storeRatingsArray.reduce((acc: number, curr: number) => { + return acc + curr; + }, 0) / storeRatingsArray.length; + + averageRating = Math.ceil(averageRating * 2) / 2; + + setAverageOwnerRating(averageRating); + } catch (error) { + console.error(error); + } finally { + setAverageRatingLoader(false); + } + }, [id, name]); + + // Get average owner rating when id and name is available, and only if the storeId is different from the currentViewedStore when it's not your store, or if storeId is different from currentStore when it is your store. Do this to avoid unnecessary QDN calls. + useEffect(() => { + if (id && name) { + getOwnerAverageReview(); + } + }, [id, name]); + + useEffect(() => { + if (!atAddress) return; + checkBalance(atAddress); + + return () => { + if (intervalBalance?.current) { + clearInterval(intervalBalance.current); + } + }; + }, [checkBalance, atAddress]); + + // Check if the crowdfund has been modified after its creation. If it has, we prevent the user from donating to the Q-Fund and redirect to homepage. + useEffect(() => { + if (crowdfundData?.created && crowdfundData?.updated) { + if (crowdfundData?.created === crowdfundData?.updated) { + return; + } else { + dispatch( + setNotification({ + msg: "Q-Fund has been modified after its creation. Please be aware of this!", + alertType: "error", + }) + ); + } + } + }, [crowdfundData?.created, crowdfundData?.updated]); + + if (!crowdfundData) return null; + return ( + <> + + + + + { + navigate("/"); + }} + > + Back To Homepage + + + + + {!ownerAvatar ? ( + + ) : ( + User Avatar

+ )} + {crowdfundData?.title} + + {averageRatingLoader ? ( + + ) : ( + { + setOpenQFundOwnerReviews(true); + }} + > + {!averageOwnerRating ? ( + + No reviews yet. Be the first to review this Q-Fund owner! + + ) : ( + + )} + + )} + {ATLoadingStatus ? ( + // Loader reusable component with status text + + ) : ( + {`Status: ${ATStatus}`} + )} + + {crowdfundData?.description} + + About My Q-Fund + + + + + + {/* Ensure the AT is still active and not being deployed to display the donate button */} + {ATLoadingStatus ? ( + // Loader reusable component with status text + + ) : ATStatus === "Q-Fund Being Deployed" || !currentAtInfo ? null : ( + <> + {crowdfundData?.deployedAT?.goalValue && + !isNaN(atAddressBalance) && ( + + )} + + + { + return; + }} + onClose={() => { + return; + }} + /> + + + + )} + + {crowdfundData?.attachments?.length > 0 && ( + Attachments + )} + + {crowdfundData?.attachments?.map(attachment => { + if (attachment?.service === "AUDIO") + return ( + + ); + + return ( + <> + + + + + {attachment?.filename} + + + + + + + + ); + })} + {name === username && ( + + )} +

+ {updatesList.map(update => { + return ( + + } + aria-controls="panel1a-content" + id="panel1a-header" + > + + Update for {moment(update.created).format("LLL")} + + + + + + + ); + })} +

+ + + {/* Comments section */} + + Comments + + + + + + + ); +}; diff --git a/src/pages/Crowdfund/CrowdfundLoader.tsx b/src/pages/Crowdfund/CrowdfundLoader.tsx new file mode 100644 index 0000000..7663102 --- /dev/null +++ b/src/pages/Crowdfund/CrowdfundLoader.tsx @@ -0,0 +1,16 @@ +import { FC } from "react"; +import { CircularProgress } from "@mui/material"; +import { CrowdfundLoaderRow } from "../../components/Crowdfund/Crowdfund-styles"; + +interface CrowdfundLoaderProps { + status: string; +} + +export const CrowdfundLoader: FC = ({ status }) => { + return ( + + + {status} + + ); +}; diff --git a/src/pages/Crowdfund/Update-styles.tsx b/src/pages/Crowdfund/Update-styles.tsx new file mode 100644 index 0000000..9c2f13e --- /dev/null +++ b/src/pages/Crowdfund/Update-styles.tsx @@ -0,0 +1,96 @@ +import { styled } from "@mui/system"; +import { Box, Button, Typography } from "@mui/material"; +import { TimesSVG } from "../../assets/svgs/TimesSVG"; + +export const PlayerBox = styled(Box)(({ theme }) => ({ + width: "340px", + outline: `1px solid ${theme.palette.primary.dark}`, + borderRadius: "3px", + minHeight: "95px", +})); + +export const UpdateLoadingBox = styled(Box)({ + width: "100%", + display: "flex", + flexDirection: "column", + alignItems: "center", +}); + +export const UpdateContainer = styled(Box)({ + width: "100%", + display: "flex", + flexDirection: "column", + alignItems: "center", +}); + +export const UpdateRow = styled(Box)({ + width: "100%", + display: "flex", + flexDirection: "row", + alignItems: "flex-start", + gap: "15px", +}); + +export const UpdateNameRow = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "row", + alignItems: "center", + gap: "10px", + fontFamily: "Mulish", + letterSpacing: 0, + fontWeight: 400, + fontSize: "18px", + userSelect: "none", + color: theme.palette.text.primary, +})); + +export const UpdateCol = styled(Box)({ + width: "100%", + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + gap: "10px", +}); + +export const CrowdfundUpdateDate = styled(Typography)(({ theme }) => ({ + fontFamily: "Mulish", + fontSize: "14px", + letterSpacing: 0, + fontWeight: 400, + userSelect: "none", + color: theme.palette.text.primary, +})); + +export const AttachmentCol = styled(Box)({ + display: "flex", + width: "100%", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + gap: "10px", +}); + +export const FileAttachmentContainer = styled(Box)({ + display: "flex", + alignItems: "center", + gap: "20px", + padding: "5px 10px", +}); + +export const FileAttachmentFont = styled(Typography)(({ theme }) => ({ + fontFamily: "Mulish", + color: theme.palette.text.primary, + fontSize: "16px", + letterSpacing: 0, + fontWeight: 400, + wordBreak: "break-word", + userSelect: "none", +})); + +export const CloseNewUpdateModal = styled(TimesSVG)(({ theme }) => ({ + transition: "all 0.2s ease-in-out", + "&:hover": { + cursor: "pointer", + transform: "scale(1.1)", + }, +})); diff --git a/src/pages/Crowdfund/Update.tsx b/src/pages/Crowdfund/Update.tsx new file mode 100644 index 0000000..7ba5b48 --- /dev/null +++ b/src/pages/Crowdfund/Update.tsx @@ -0,0 +1,216 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { useParams } from "react-router-dom"; +import { useDispatch, useSelector } from "react-redux"; +import { RootState } from "../../state/store"; +import { Avatar, Box, useTheme } from "@mui/material"; +import AttachFileIcon from "@mui/icons-material/AttachFile"; +import DownloadIcon from "@mui/icons-material/Download"; +import CircularProgress from "@mui/material/CircularProgress"; +import { formatDate } from "../../utils/time"; +import { DisplayHtml } from "../../components/common/DisplayHtml"; +import FileElement from "../../components/common/FileElement"; +import { setIsLoadingGlobal } from "../../state/features/globalSlice"; +import { addToHashMap } from "../../state/features/crowdfundSlice"; +import { + CrowdfundSubTitle, + CrowdfundTitle, +} from "../../components/Crowdfund/Crowdfund-styles"; +import AudioPlayer from "../../components/common/AudioPlayer"; +import { NewUpdate } from "../../components/Crowdfund/NewUpdate"; +import { + AttachmentCol, + CrowdfundUpdateDate, + FileAttachmentContainer, + FileAttachmentFont, + UpdateCol, + UpdateContainer, + UpdateLoadingBox, + UpdateNameRow, + UpdateRow, + PlayerBox, +} from "./Update-styles"; + +export const Update = ({ updateObj }) => { + const theme = useTheme(); + const dispatch = useDispatch(); + const { name } = useParams(); + + const userAvatarHash = useSelector( + (state: RootState) => state.global.userAvatarHash + ); + + const avatarUrl = useMemo(() => { + let url = ""; + if (name && userAvatarHash[name]) { + url = userAvatarHash[name]; + } + + return url; + }, [userAvatarHash, name]); + const [crowdfundData, setCrowdfundData] = useState(null); + const username = useSelector((state: RootState) => state.auth?.user?.name); + const hashMapCrowdfunds = useSelector( + (state: RootState) => state.crowdfund.hashMapCrowdfunds + ); + + const editContent = useMemo(() => { + if (!crowdfundData) return null; + const content = { + title: crowdfundData?.title, + inlineContent: crowdfundData?.inlineContent, + attachments: crowdfundData?.attachments, + user: crowdfundData?.user, + }; + return content; + }, [crowdfundData]); + + const getCrowdfundData = React.useCallback(async updateObj => { + try { + let resourceData = updateObj; + resourceData = { + title: resourceData?.metadata?.title, + category: resourceData?.metadata?.category, + categoryName: resourceData?.metadata?.categoryName, + tags: resourceData?.metadata?.tags || [], + description: resourceData?.metadata?.description, + created: resourceData?.created, + updated: resourceData?.updated, + user: resourceData.name, + id: resourceData.identifier, + }; + + const responseData = await qortalRequest({ + action: "FETCH_QDN_RESOURCE", + name: updateObj.name, + service: "DOCUMENT", + identifier: updateObj.identifier, + }); + + if (responseData && !responseData.error) { + const combinedData = { + ...resourceData, + ...responseData, + }; + + setCrowdfundData(combinedData); + dispatch(addToHashMap(combinedData)); + } + } catch (error) { + console.log(error); + } finally { + dispatch(setIsLoadingGlobal(false)); + } + }, []); + + useEffect(() => { + if (updateObj) { + const existingCrowdfund = hashMapCrowdfunds[updateObj.identifier]; + + if (existingCrowdfund) { + setCrowdfundData(existingCrowdfund); + } else { + getCrowdfundData(updateObj); + } + } + }, [updateObj]); + + if (!crowdfundData) + return ( + + + + ); + return ( + <> + { + setCrowdfundData(content); + }} + crowdfundName={name || ""} + /> + + + + + + {name} + + + + {crowdfundData?.title} + + {crowdfundData?.created && ( + + {formatDate(crowdfundData.created)} + + )} + + + + + + + {crowdfundData?.attachments?.length > 0 && ( + <> + Attachments + + )} + {crowdfundData?.attachments?.map(attachment => { + if (attachment?.service === "AUDIO") + return ( + + ); + + return ( + + + + + {attachment?.filename} + + + + + + + ); + })} + + + + + ); +}; diff --git a/src/pages/Home/CrowdfundList.tsx b/src/pages/Home/CrowdfundList.tsx new file mode 100644 index 0000000..3a03a28 --- /dev/null +++ b/src/pages/Home/CrowdfundList.tsx @@ -0,0 +1,188 @@ +import React, { useEffect, useRef, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useSelector } from "react-redux"; +import { RootState } from "../../state/store"; +import { Avatar, Grid, Skeleton, useTheme } from "@mui/material"; +import { useFetchCrowdfunds } from "../../hooks/useFetchCrowdfunds"; +import LazyLoad from "../../components/common/LazyLoad"; +import ResponsiveImage from "../../components/ResponsiveImage"; +import { formatDate } from "../../utils/time"; +import { + BottomWrapper, + CardContainer, + ChannelCard, + CrowdfundContainer, + CrowdfundDescription, + CrowdfundGoal, + CrowdfundGoalRow, + CrowdfundImageContainer, + CrowdfundListHeader, + CrowdfundListTitle, + CrowdfundOwner, + CrowdfundText, + CrowdfundTitle, + CrowdfundTitleCard, + DonateButton, + NameContainer, +} from "./Home-styles"; +import { + CrowdfundListWrapper, + CrowdfundUploadDate, +} from "../../components/Crowdfund/Crowdfund-styles"; +import CoverImageDefault from "../../assets/images/CoverImageDefault.webp"; +import { Crowdfund } from "../../state/features/crowdfundSlice"; +import { QortalSVG } from "../../assets/svgs/QortalSVG"; + +export const CrowdfundList = () => { + const theme = useTheme(); + const [isLoading, setIsLoading] = useState(false); + + const firstFetch = useRef(false); + const afterFetch = useRef(false); + const isFetching = useRef(false); + const hashMapCrowdfunds = useSelector( + (state: RootState) => state.crowdfund.hashMapCrowdfunds + ); + + const userAvatarHash = useSelector( + (state: RootState) => state.global.userAvatarHash + ); + + const globalCrowdfunds = useSelector( + (state: RootState) => state.crowdfund.crowdfunds + ); + const navigate = useNavigate(); + const { getCrowdfunds } = useFetchCrowdfunds(); + + const getCrowdfundsHandler = React.useCallback(async () => { + if (!firstFetch.current || !afterFetch.current) return; + if (isFetching.current) return; + isFetching.current = true; + await getCrowdfunds(); + isFetching.current = false; + }, [getCrowdfunds]); + + const getCrowdfundHandlerMount = React.useCallback(async () => { + if (firstFetch.current) return; + firstFetch.current = true; + setIsLoading(true); + + await getCrowdfunds(); + afterFetch.current = true; + setIsLoading(false); + }, [getCrowdfunds]); + + const crowdfunds = globalCrowdfunds; + + useEffect(() => { + if (!firstFetch.current && globalCrowdfunds.length === 0) { + isFetching.current = true; + getCrowdfundHandlerMount(); + } else { + firstFetch.current = true; + afterFetch.current = true; + } + }, [getCrowdfundHandlerMount, globalCrowdfunds]); + + return ( + + + Most Recent Q-Funds + + + {crowdfunds.map((crowdfund: Crowdfund) => { + const existingCrowdfund = hashMapCrowdfunds[crowdfund.id]; + let hasHash = false; + let crowdfundObj = crowdfund; + if (existingCrowdfund) { + crowdfundObj = existingCrowdfund; + hasHash = true; + } + let avatarUrl = ""; + if (userAvatarHash[crowdfundObj?.user]) { + avatarUrl = userAvatarHash[crowdfundObj?.user]; + } + return ( + + { + navigate( + `/crowdfund/${crowdfundObj.user}/${crowdfundObj.id}` + ); + }} + > + + {!hasHash ? ( + + ) : ( + + )} + + {!hasHash ? ( + + ) : ( + <> + {crowdfundObj?.title} + + + + by {crowdfundObj?.user} + + + + )} + + + {!hasHash ? ( + + ) : ( + + + {crowdfundObj?.description} + + + Campaign Goal: + + + {crowdfundObj?.deployedAT?.goalValue} + + + + {crowdfundObj?.created && ( + + {formatDate(crowdfundObj.created)} + + )} + Back this project + + + )} + + + ); + })} + + + + ); +}; diff --git a/src/pages/Home/Home-styles.tsx b/src/pages/Home/Home-styles.tsx new file mode 100644 index 0000000..47952c0 --- /dev/null +++ b/src/pages/Home/Home-styles.tsx @@ -0,0 +1,329 @@ +import { styled } from "@mui/system"; +import { Box, Grid, Typography, Checkbox, Button } from "@mui/material"; + +export const HomepageTitleRow = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + gap: "20px", +})); + +export const Logo = styled("img")(({ theme }) => ({ + width: "100px", + height: "100px", +})); + +export const SubtitleContainer = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + margin: "10px 0px", + width: "100%", +})); + +export const Subtitle = styled(Typography)({ + textAlign: "center", + fontSize: "20px", +}); + +const DoubleLine = styled(Typography)` + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +`; +export const ChannelTitle = styled(DoubleLine)(({ theme }) => ({ + fontFamily: "Cairo", + fontSize: "20px", + letterSpacing: "0.4px", + color: theme.palette.text.primary, + userSelect: "none", + marginBottom: "auto", + textAlign: "center", +})); +export const WelcomeTitle = styled(DoubleLine)(({ theme }) => ({ + fontFamily: "Cairo", + fontSize: "24px", + letterSpacing: "0.4px", + color: theme.palette.text.primary, + userSelect: "none", + textAlign: "center", +})); + +export const WelcomeContainer = styled(Box)(({ theme }) => ({ + position: "fixed", + width: "90%", + height: "90%", + backgroundColor: theme.palette.background.paper, + left: "50%", + top: "50%", + transform: "translate(-50%, -50%)", + zIndex: 500, + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", +})); + +export const ChannelCard = styled(Grid)(({ theme }) => ({ + position: "relative", + display: "flex", + flexDirection: "column", + height: "auto", + maxWidth: "100%", + minHeight: "250px", + maxHeight: "250px", + backgroundColor: theme.palette.background.paper, + borderRadius: "0 0 8px 8px", + padding: "10px 15px", + gap: "20px", + border: + theme.palette.mode === "dark" + ? "none" + : `1px solid ${theme.palette.primary.light}`, + boxShadow: + theme.palette.mode === "dark" + ? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)" + : "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px", + transition: "all 0.3s ease-in-out", + "&:hover": { + cursor: "pointer", + boxShadow: + theme.palette.mode === "dark" + ? "0px 8px 10px 1px hsla(0,0%,0%,0.14), 0px 3px 14px 2px hsla(0,0%,0%,0.12), 0px 5px 5px -3px hsla(0,0%,0%,0.2)" + : "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;", + }, +})); + +export const CrowdfundContainer = styled(Grid)(({ theme }) => ({ + position: "relative", + display: "flex", + padding: "15px", + justifyContent: "center", + alignItems: "center", +})); + +export const BottomWrapper = styled(Box)(({ theme }) => ({ + position: "relative", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + marginTop: "auto", +})); + +export const HomePageContainer = styled(Box)(({ theme }) => ({ + position: "relative", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + width: "100%", + gap: "20px", + background: "linear-gradient(135deg, #74d7c5 0%, #34bfa6 49%, #159892 100%)", +})); + +export const HomePageSubContainer = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + gap: "40px", + paddingBottom: "50px", + textAlign: "center", +})); + +export const HomepageTitle = styled(Typography)(({ theme }) => ({ + fontFamily: "Copse", + fontWeight: 400, + fontSize: "55px", + letterSpacing: "1px", + color: "white", + userSelect: "none", +})); + +export const HomepageDescription = styled(Typography)(({ theme }) => ({ + fontFamily: "Mulish", + fontSize: "25px", + letterSpacing: "0px", + color: "white", + userSelect: "none", + padding: "0 200px", +})); + +export const StepsContainer = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "row", + justifyContent: "space-evenly", + alignItems: "flex-start", + gap: "20px", + width: "100%", + padding: "0 30px", +})); + +export const StepCol = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + gap: "10px", + width: "100%", +})); + +export const StepIcon = styled(Box)(({ theme }) => ({ + width: "100px", + height: "100px", + border: "2px solid white", + borderRadius: "50%", + backgroundColor: "transparent", + display: "flex", + justifyContent: "center", + alignItems: "center", +})); + +export const StepTitle = styled(Typography)(({ theme }) => ({ + fontFamily: "Copse", + fontWeight: 400, + fontSize: "25px", + letterSpacing: "1px", + color: "white", + userSelect: "none", +})); + +export const StepDescription = styled(Typography)(({ theme }) => ({ + fontFamily: "Mulish", + fontWeight: 400, + fontSize: "19px", + letterSpacing: "0px", + color: "white", + userSelect: "none", +})); + +export const CrowdfundListHeader = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "row", + alignItems: "flex-start", + width: "100%", + padding: "25px 0 10px 45px", +})); + +export const CrowdfundListTitle = styled(Typography)(({ theme }) => ({ + fontFamily: "Copse", + fontWeight: 400, + fontSize: "25px", + letterSpacing: "0.5px", + color: theme.palette.text.primary, + userSelect: "none", +})); + +export const CardContainer = styled(Box)({ + display: "flex", + flexDirection: "column", + height: "auto", + width: "100%", +}); + +export const CrowdfundImageContainer = styled(Box)({ + display: "flex", + position: "relative", + cursor: "pointer", +}); + +export const CrowdfundTitleCard = styled(Box)(({ theme }) => ({ + position: "absolute", + bottom: 0, + display: "flex", + flexDirection: "column", + height: "auto", + width: "100%", + backgroundColor: + theme.palette.mode === "dark" + ? "rgba(142, 146, 223, 0.8)" + : "rgba(169, 217, 208, 0.8)", + color: theme.palette.text.primary, + padding: "5px 15px", + gap: "5px", +})); + +export const CrowdfundTitle = styled(Typography)({ + fontFamily: "Montserrat", + fontWeight: 400, + fontSize: "20px", + letterSpacing: "0.4px", + userSelect: "none", +}); + +export const NameContainer = styled(Box)({ + display: "flex", + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "center", + gap: "5px", +}); + +export const CrowdfundOwner = styled(Typography)({ + fontFamily: "Mulish", + fontSize: "16px", + letterSpacing: "0px", + userSelect: "none", + overflow: "hidden", + whiteSpace: "nowrap", + textOverflow: "ellipsis", + width: "100%", +}); + +export const CrowdfundDescription = styled(Typography)(({ theme }) => ({ + fontFamily: "Mulish", + fontSize: "16px", + letterSpacing: "0px", + color: theme.palette.text.primary, + userSelect: "none", +})); + +export const DonateButton = styled(Button)(({ theme }) => ({ + display: "flex", + justifyContent: "center", + alignItems: "center", + minWidth: "200px", + width: "44%", + padding: "5px 25px", + borderRadius: "20px", + backgroundColor: theme.palette.primary.main, + color: "white", + fontFamily: "Mulish", + fontSize: "14px", + fontWeight: 400, + letterSpacing: "0.4px", + textTransform: "none", + transition: "all 0.3s ease-in-out", + "&:hover": { + backgroundColor: theme.palette.primary.dark, + cursor: "pointer", + }, +})); + +export const CrowdfundGoalRow = styled(Box)({ + display: "flex", + alignItems: "center", + gap: "7px", + width: "100%", +}); + +export const CrowdfundText = styled(Typography)({ + fontFamily: "Mulish", + fontSize: "18px", + fontWeight: 400, + letterSpacing: "0.4px", + userSelect: "none", +}); + +export const CrowdfundGoal = styled(Box)({ + display: "flex", + alignItems: "center", + gap: "3px", + fontFamily: "Mulish", + fontSize: "18px", + fontWeight: 400, + letterSpacing: "0.4px", +}); diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx new file mode 100644 index 0000000..0f18139 --- /dev/null +++ b/src/pages/Home/Home.tsx @@ -0,0 +1,122 @@ +import React, { useEffect } from 'react'; +import { NewCrowdfund } from '../../components/Crowdfund/NewCrowdfund'; +import { CrowdfundList } from './CrowdfundList'; +import { + HomePageContainer, + HomePageSubContainer, + HomepageDescription, + HomepageTitle, + HomepageTitleRow, + Logo, + StepCol, + StepDescription, + StepIcon, + StepTitle, + StepsContainer, +} from './Home-styles'; +import NavBar from '../../components/layout/Navbar/Navbar'; +import { useDispatch, useSelector } from 'react-redux'; +import { addUser } from '../../state/features/authSlice'; +import { RootState } from '../../state/store'; +import { ExploreSVG } from '../../assets/svgs/ExploreSVG'; +import { DonateSVG } from '../../assets/svgs/DonateSVG'; +import { TrackSVG } from '../../assets/svgs/TrackSVG'; +import QFundLogo from '../../assets/images/QFundDarkLogo.png'; +interface Props { + setTheme: (val: string) => void; +} + +export const Home: React.FC = ({ setTheme }) => { + const dispatch = useDispatch(); + const user = useSelector((state: RootState) => state.auth.user); + + async function getNameInfo(address: string) { + const response = await qortalRequest({ + action: 'GET_ACCOUNT_NAMES', + address: address, + }); + const nameData = response; + + if (nameData?.length > 0) { + return nameData[0].name; + } else { + return ''; + } + } + + const askForAccountInformation = React.useCallback(async () => { + try { + const account = await qortalRequest({ + action: 'GET_USER_ACCOUNT', + }); + + const name = await getNameInfo(account.address); + dispatch(addUser({ ...account, name })); + } catch (error) { + console.error(error); + } + }, []); + + useEffect(() => { + if (user?.name) return; + askForAccountInformation(); + }, [user]); + + return ( + <> + + setTheme(val)} + authenticate={askForAccountInformation} + isAuthenticated={!!user?.name} + /> + + + + Q-Fund + + + Q-Fund is a decentralized crowdfunding platform built on the Qortal + blockchain. It allows users to create and contribute to crowdfunding + campaigns that are stored on the blockchain. + + + + + + + Explore Qortal Initiatives + + Read into new Q-Fund initiatives and learn about the projects + that are being proposed in the community. + + + + + + + Contribute + + Donate QORT to campaigns you want to support. + + + + + + + Track Your Support + + Track the progress of the Q-Funds you've donated to, and keep + track of other people's comments and the latest updates from the + campaign owner. + + + + + + + + + ); +}; diff --git a/src/state/features/authSlice.ts b/src/state/features/authSlice.ts new file mode 100644 index 0000000..8f5ee20 --- /dev/null +++ b/src/state/features/authSlice.ts @@ -0,0 +1,27 @@ +import { createSlice } from '@reduxjs/toolkit'; + + +interface AuthState { + user: { + address: string; + publicKey: string; + name?: string; + } | null; +} +const initialState: AuthState = { + user: null +}; + +export const authSlice = createSlice({ + name: 'auth', + initialState, + reducers: { + addUser: (state, action) => { + state.user = action.payload; + }, + }, +}); + +export const { addUser } = authSlice.actions; + +export default authSlice.reducer; \ No newline at end of file diff --git a/src/state/features/crowdfundSlice.ts b/src/state/features/crowdfundSlice.ts new file mode 100644 index 0000000..1c72e04 --- /dev/null +++ b/src/state/features/crowdfundSlice.ts @@ -0,0 +1,94 @@ +import { createSlice } from '@reduxjs/toolkit'; +import { RootState } from '../store' +interface GlobalState { + hashMapCrowdfunds: Record + crowdfunds: Crowdfund[] +} + +const initialState: GlobalState = { + hashMapCrowdfunds: {}, + crowdfunds: [] +} + +export interface Crowdfund { + title: string + description: string + created: number + user: string + attachments?: any[] + id: string + category?: string + categoryName?: string + tags?: string[] + inlineContent?: string + updated?: number | string + isValid?: boolean + coverImage?: string + deployedAT?: any +} +// export interface Crowdfund { +// title: string +// description: string +// created: number +// user: string +// attachments?: any[] +// id: string +// category?: string +// categoryName?: string +// tags?: string[] +// updated?: number | string +// isValid?: boolean +// inlineContent?: string +// coverImage?: string +// } + +export const crowdfundSlice = createSlice({ + name: 'crowdfund', + initialState, + reducers: { + addCrowdfundToBeginning: (state, action) => { + state.crowdfunds.unshift(action.payload) + }, + addToHashMap: (state, action) => { + const crowdfund = action.payload + state.hashMapCrowdfunds[crowdfund.id] = crowdfund + }, + updateInHashMap: (state, action) => { + const { id } = action.payload + const crowdfund = action.payload + state.hashMapCrowdfunds[id] = { ...crowdfund } + }, + removeFromHashMap: (state, action) => { + const idToDelete = action.payload + delete state.hashMapCrowdfunds[idToDelete] + }, + addArrayToHashMap: (state, action) => { + const crowdfunds = action.payload + crowdfunds.forEach((video: Crowdfund) => { + state.hashMapCrowdfunds[video.id] = video + }) + }, + upsertCrowdfunds: (state, action) => { + action.payload.forEach((crowdfund: Crowdfund) => { + const index = state.crowdfunds.findIndex((p) => p.id === crowdfund.id) + if (index !== -1) { + state.crowdfunds[index] = crowdfund + } else { + state.crowdfunds.push(crowdfund) + } + }) + }, + } +}) + +export const { + addCrowdfundToBeginning, + addToHashMap, + updateInHashMap, + removeFromHashMap, + addArrayToHashMap, + upsertCrowdfunds +} = crowdfundSlice.actions + +export default crowdfundSlice.reducer + diff --git a/src/state/features/globalSlice.ts b/src/state/features/globalSlice.ts new file mode 100644 index 0000000..1effa7e --- /dev/null +++ b/src/state/features/globalSlice.ts @@ -0,0 +1,90 @@ +import { createSlice } from "@reduxjs/toolkit"; + +export interface OwnerReview { + id: string; + name: string; + title: string; + description: string; + created: number; + rating: number; + updated?: number; +} +interface GlobalState { + isLoadingGlobal: boolean; + downloads: any; + userAvatarHash: Record; + videoPlaying: any | null; + ownerReviews: OwnerReview[]; + hashMapOwnerReviews: Record; +} + +const initialState: GlobalState = { + isLoadingGlobal: false, + downloads: {}, + userAvatarHash: {}, + videoPlaying: null, + ownerReviews: [], + hashMapOwnerReviews: {}, +}; + +export const globalSlice = createSlice({ + name: "global", + initialState, + reducers: { + setIsLoadingGlobal: (state, action) => { + state.isLoadingGlobal = action.payload; + }, + setAddToDownloads: (state, action) => { + const download = action.payload; + state.downloads[download.identifier] = download; + }, + updateDownloads: (state, action) => { + const { identifier } = action.payload; + const download = action.payload; + state.downloads[identifier] = { + ...state.downloads[identifier], + ...download, + }; + }, + setUserAvatarHash: (state, action) => { + const avatar = action.payload; + if (avatar?.name && avatar?.url) { + state.userAvatarHash[avatar?.name] = avatar?.url; + } + }, + setVideoPlaying: (state, action) => { + state.videoPlaying = action.payload; + }, + addToReviews: (state, action) => { + const newReview = action.payload; + state.ownerReviews.unshift(newReview); + }, + addToHashMapOwnerReviews: (state, action) => { + const review = action.payload; + state.hashMapOwnerReviews[review.id] = review; + }, + upsertReviews: (state, action) => { + action.payload.forEach((review: OwnerReview) => { + const index = state.ownerReviews.findIndex(p => p.id === review.id); + if (index !== -1) { + state.ownerReviews[index] = review; + } else { + state.ownerReviews.push(review); + } + }); + }, + }, +}); + +export const { + setIsLoadingGlobal, + setAddToDownloads, + updateDownloads, + setUserAvatarHash, + setVideoPlaying, + addToReviews, + addToHashMapOwnerReviews, + upsertReviews, +} = globalSlice.actions; + +export default globalSlice.reducer; diff --git a/src/state/features/notificationsSlice.ts b/src/state/features/notificationsSlice.ts new file mode 100644 index 0000000..af074e2 --- /dev/null +++ b/src/state/features/notificationsSlice.ts @@ -0,0 +1,73 @@ +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; + +interface AlertTypes { + alertSuccess: string + alertError: string + alertInfo: string +} + +interface InitialState { + alertTypes: AlertTypes +} + +const initialState: InitialState = { + alertTypes: { + alertSuccess: '', + alertError: '', + alertInfo: '' + } +} + +export const notificationsSlice = createSlice({ + name: "notifications", + initialState, + reducers: { + setNotification: ( + state: InitialState, + action: PayloadAction<{ alertType: string; msg: string }> + ) => { + if (action.payload.alertType === "success") { + return { + ...state, + alertTypes: { + ...state.alertTypes, + alertSuccess: action.payload.msg, + }, + }; + } else if (action.payload.alertType === "error") { + return { + ...state, + alertTypes: { + ...state.alertTypes, + alertError: action.payload.msg, + }, + }; + } else if (action.payload.alertType === "info") { + return { + ...state, + alertTypes: { + ...state.alertTypes, + alertInfo: action.payload.msg, + }, + }; + } + return state; + }, + removeNotification: (state: InitialState) => { + return { + ...state, + alertTypes: { + ...state.alertTypes, + alertSuccess: '', + alertError: '', + alertInfo: '' + } + } + }, + }, +}); + +export const { setNotification, removeNotification } = + notificationsSlice.actions; + +export default notificationsSlice.reducer; diff --git a/src/state/store.ts b/src/state/store.ts new file mode 100644 index 0000000..2f615f4 --- /dev/null +++ b/src/state/store.ts @@ -0,0 +1,27 @@ +import { configureStore } from '@reduxjs/toolkit' +import notificationsReducer from './features/notificationsSlice' +import authReducer from './features/authSlice' +import globalReducer from './features/globalSlice' +import crowdfundReducer from './features/crowdfundSlice' + +export const store = configureStore({ + reducer: { + notifications: notificationsReducer, + auth: authReducer, + global: globalReducer, + crowdfund: crowdfundReducer, + }, + middleware: (getDefaultMiddleware) => + getDefaultMiddleware({ + serializableCheck: false + }), + preloadedState: undefined // optional, can be any valid state object +}) + +// Define the RootState type, which is the type of the entire Redux state tree. +// This is useful when you need to access the state in a component or elsewhere. +export type RootState = ReturnType + +// Define the AppDispatch type, which is the type of the Redux store's dispatch function. +// This is useful when you need to dispatch an action in a component or elsewhere. +export type AppDispatch = typeof store.dispatch diff --git a/src/styles/fonts/Cairo.ttf b/src/styles/fonts/Cairo.ttf new file mode 100644 index 0000000..5bdb2a9 Binary files /dev/null and b/src/styles/fonts/Cairo.ttf differ diff --git a/src/styles/fonts/Cambon-Light.ttf b/src/styles/fonts/Cambon-Light.ttf new file mode 100644 index 0000000..e65b385 Binary files /dev/null and b/src/styles/fonts/Cambon-Light.ttf differ diff --git a/src/styles/fonts/Catamaran.ttf b/src/styles/fonts/Catamaran.ttf new file mode 100644 index 0000000..9053c6d Binary files /dev/null and b/src/styles/fonts/Catamaran.ttf differ diff --git a/src/styles/fonts/Copse.ttf b/src/styles/fonts/Copse.ttf new file mode 100644 index 0000000..d8b8937 Binary files /dev/null and b/src/styles/fonts/Copse.ttf differ diff --git a/src/styles/fonts/Karla.ttf b/src/styles/fonts/Karla.ttf new file mode 100644 index 0000000..1e1fc9d Binary files /dev/null and b/src/styles/fonts/Karla.ttf differ diff --git a/src/styles/fonts/Livvic.ttf b/src/styles/fonts/Livvic.ttf new file mode 100644 index 0000000..f477b28 Binary files /dev/null and b/src/styles/fonts/Livvic.ttf differ diff --git a/src/styles/fonts/Merriweather Sans.ttf b/src/styles/fonts/Merriweather Sans.ttf new file mode 100644 index 0000000..dea514c Binary files /dev/null and b/src/styles/fonts/Merriweather Sans.ttf differ diff --git a/src/styles/fonts/Montserrat.ttf b/src/styles/fonts/Montserrat.ttf new file mode 100644 index 0000000..656db66 Binary files /dev/null and b/src/styles/fonts/Montserrat.ttf differ diff --git a/src/styles/fonts/Mulish.ttf b/src/styles/fonts/Mulish.ttf new file mode 100644 index 0000000..74a3dbd Binary files /dev/null and b/src/styles/fonts/Mulish.ttf differ diff --git a/src/styles/fonts/Oxygen.ttf b/src/styles/fonts/Oxygen.ttf new file mode 100644 index 0000000..d03f43a Binary files /dev/null and b/src/styles/fonts/Oxygen.ttf differ diff --git a/src/styles/fonts/ProximaNova.otf b/src/styles/fonts/ProximaNova.otf new file mode 100644 index 0000000..27c8d8f Binary files /dev/null and b/src/styles/fonts/ProximaNova.otf differ diff --git a/src/styles/fonts/Raleway.ttf b/src/styles/fonts/Raleway.ttf new file mode 100644 index 0000000..424fb0e Binary files /dev/null and b/src/styles/fonts/Raleway.ttf differ diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx new file mode 100644 index 0000000..1e0e54a --- /dev/null +++ b/src/styles/theme.tsx @@ -0,0 +1,236 @@ +import { createTheme } from "@mui/material/styles"; + +const commonThemeOptions = { + typography: { + fontFamily: [ + "Mulish", + "Copse", + "Cambon Light", + "Raleway, sans-serif", + "Montserrat", + "Proxima Nova", + "Oxygen", + "Catamaran", + "Cairo", + "Arial", + ].join(","), + h1: { + fontSize: "2rem", + fontWeight: 600, + }, + h2: { + fontSize: "1.75rem", + fontWeight: 500, + }, + h3: { + fontSize: "1.5rem", + fontWeight: 500, + }, + h4: { + fontSize: "1.25rem", + fontWeight: 500, + }, + h5: { + fontSize: "1rem", + fontWeight: 500, + }, + h6: { + fontSize: "0.875rem", + fontWeight: 500, + }, + body1: { + fontSize: "23px", + fontFamily: "Raleway", + fontWeight: 400, + lineHeight: 1.5, + letterSpacing: "0.5px", + }, + + body2: { + fontSize: "18px", + fontFamily: "Raleway, Arial", + fontWeight: 400, + lineHeight: 1.4, + letterSpacing: "0.2px", + }, + margin: 0, + }, + spacing: 8, + shape: { + borderRadius: 4, + }, + breakpoints: { + values: { + xs: 0, + sm: 600, + md: 900, + lg: 1200, + xl: 1536, + }, + }, + components: { + MuiButton: { + styleOverrides: { + root: { + backgroundColor: "inherit", + transition: "filter 0.3s ease-in-out", + "&:hover": { + filter: "brightness(1.1)", + }, + }, + }, + defaultProps: { + disableElevation: true, + disableRipple: true, + }, + }, + }, +}; + +const lightTheme = createTheme({ + ...commonThemeOptions, + palette: { + mode: "light", + primary: { + main: "#34BFA6", + dark: "#2c9d88", + light: "#A9D9D0", + }, + secondary: { + main: "#57AAF2", + dark: "#2E83F2", + }, + background: { + default: "#ffffff", + paper: "#F2F2F2", + }, + text: { + primary: "#000000", + secondary: "#525252", + }, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + "body::-webkit-scrollbar-track": { + backgroundColor: "#ffffff", + }, + "body::-webkit-scrollbar-track:hover": { + backgroundColor: "#ffffff", + }, + "body::-webkit-scrollbar": { + width: "16px", + height: "10px", + backgroundColor: "#ffffff", + }, + "body::-webkit-scrollbar-thumb": { + backgroundColor: "#34BFA6", + borderRadius: "8px", + backgroundClip: "content-box", + border: "4px solid transparent", + transition: "all 0.3s ease-in-out", + }, + "body::-webkit-scrollbar-thumb:hover": { + backgroundColor: "#2c9d88", + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + boxShadow: + "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;", + borderRadius: "8px", + transition: "all 0.3s ease-in-out", + "&:hover": { + cursor: "pointer", + boxShadow: + "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;", + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + style: { + color: "#000000", + }, + }, + }, + }, +}); + +const darkTheme = createTheme({ + ...commonThemeOptions, + palette: { + mode: "dark", + primary: { + main: "#6B6FBF", + dark: "#5a5da7", + light: "#979be0", + }, + secondary: { + main: "#F2A74B", + dark: "#e39e3a", + }, + + background: { + default: "#1C1A26", + paper: "#434259", + }, + text: { + primary: "#ffffff", + secondary: "#b3b3b3", + }, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + "body::-webkit-scrollbar-track": { + backgroundColor: "#1C1A26", + }, + "body::-webkit-scrollbar-track:hover": { + backgroundColor: "#1C1A26", + }, + "body::-webkit-scrollbar": { + width: "16px", + height: "10px", + backgroundColor: "#1C1A26", + }, + "body::-webkit-scrollbar-thumb": { + backgroundColor: "#6B6FBF", + borderRadius: "8px", + backgroundClip: "content-box", + border: "4px solid transparent", + transition: "all 0.3s ease-in-out", + }, + "body::-webkit-scrollbar-thumb:hover": { + backgroundColor: "#5a5da7", + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + boxShadow: "none", + borderRadius: "8px", + transition: "all 0.3s ease-in-out", + "&:hover": { + cursor: "pointer", + boxShadow: + " 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);", + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + style: { + color: "#ffffff", + }, + }, + }, + }, +}); + +export { lightTheme, darkTheme }; diff --git a/src/test/download.gif b/src/test/download.gif new file mode 100644 index 0000000..cf602ed Binary files /dev/null and b/src/test/download.gif differ diff --git a/src/test/mockimg.jpg b/src/test/mockimg.jpg new file mode 100644 index 0000000..6ed4812 Binary files /dev/null and b/src/test/mockimg.jpg differ diff --git a/src/utils/BoundedNumericTextField.tsx b/src/utils/BoundedNumericTextField.tsx new file mode 100644 index 0000000..70bcdfb --- /dev/null +++ b/src/utils/BoundedNumericTextField.tsx @@ -0,0 +1,142 @@ +import { + IconButton, + InputAdornment, + TextField, + TextFieldProps, +} from "@mui/material"; +import React, { useRef, useState } from "react"; +import { + isAllZerosNum, + isFloatNum, + isIntegerNum, + removeTrailingZeros, + setNumberWithinBounds, + sigDigitsExceeded, + stringIsEmpty, +} from "qortal-app-utils"; +import AddIcon from "@mui/icons-material/Add"; +import RemoveIcon from "@mui/icons-material/Remove"; + +type eventType = React.ChangeEvent; +type BoundedNumericTextFieldProps = { + minValue: number; + maxValue: number; + addIconButtons?: boolean; + allowDecimals?: boolean; + allowNegatives?: boolean; + onChange?: (s: string) => void; + initialValue?: string; + maxSigDigits?: number; +} & TextFieldProps; + +export const BoundedNumericTextField = ({ + minValue, + maxValue, + addIconButtons = true, + allowDecimals = true, + allowNegatives = false, + initialValue, + maxSigDigits = 6, + ...props +}: BoundedNumericTextFieldProps) => { + const [textFieldValue, setTextFieldValue] = useState( + initialValue || "" + ); + const ref = useRef(null); + + const skipMinMaxCheck = (value: string) => { + const lastIndexIsDecimal = value.charAt(value.length - 1) === "."; + const isEmpty = stringIsEmpty(value); + const isAllZeros = isAllZerosNum.test(value); + const isInteger = isIntegerNum.test(value); + // skipping minMax on all 0s allows values less than 1 to be entered + + return lastIndexIsDecimal || isEmpty || (isAllZeros && !isInteger); + }; + + const setMinMaxValue = (value: string): string => { + if (skipMinMaxCheck(value)) return value; + const valueNum = Number(value); + + const boundedNum = setNumberWithinBounds(valueNum, minValue, maxValue); + + const numberInBounds = boundedNum === valueNum; + return numberInBounds ? value : boundedNum.toString(); + }; + + const filterTypes = (value: string) => { + if (allowDecimals === false) value = value.replace(".", ""); + if (allowNegatives === false) value = value.replace("-", ""); + if (sigDigitsExceeded(value, maxSigDigits)) { + value = value.substring(0, value.length - 1); + } + return value; + }; + const filterValue = (value: string) => { + if (stringIsEmpty(value)) return ""; + value = filterTypes(value); + if (isFloatNum.test(value)) { + return setMinMaxValue(value); + } + return textFieldValue; + }; + + const listeners = (e: eventType) => { + // console.log("changeEvent:", e); + const newValue = filterValue(e.target.value); + setTextFieldValue(newValue); + if (props?.onChange) props.onChange(newValue); + }; + + const changeValueWithIncDecButton = (e, changeAmount: number) => { + const changedValue = (+textFieldValue + changeAmount).toString(); + const inBoundsValue = setMinMaxValue(changedValue); + setTextFieldValue(inBoundsValue); + if (props?.onChange) props.onChange(inBoundsValue); + }; + + const formatValueOnBlur = (e: eventType) => { + let value = e.target.value; + if (stringIsEmpty(value) || value === ".") { + setTextFieldValue(""); + return; + } + + value = setMinMaxValue(value); + value = removeTrailingZeros(value); + if (isAllZerosNum.test(value)) value = minValue.toString(); + + setTextFieldValue(value); + }; + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { onChange, ...noChangeProps } = { ...props }; + return ( + + changeValueWithIncDecButton(e, 1)}> + {" "} + + changeValueWithIncDecButton(e, -1)}> + {" "} + + + ) : ( + <> + ), + }} + onChange={e => listeners(e as eventType)} + onBlur={e => { + formatValueOnBlur(e as eventType); + }} + autoComplete="off" + value={textFieldValue} + inputRef={ref} + /> + ); +}; + +export default BoundedNumericTextField; diff --git a/src/utils/checkStructure.ts b/src/utils/checkStructure.ts new file mode 100644 index 0000000..ed331b5 --- /dev/null +++ b/src/utils/checkStructure.ts @@ -0,0 +1,18 @@ +export const checkStructure = (content: any) => { + const isValid = true + + return isValid +} + +export const checkStructureOwnerReviews = (content: any) => { + let isValid = true; + if (!content?.title) isValid = false; + if (!content?.created) isValid = false; + if (!content?.description) isValid = false; + if (!content?.rating) isValid = false; + + return isValid; +}; + + + diff --git a/src/utils/convertQortalAnchor.ts b/src/utils/convertQortalAnchor.ts new file mode 100644 index 0000000..115e025 --- /dev/null +++ b/src/utils/convertQortalAnchor.ts @@ -0,0 +1,12 @@ +export function convertQortalLinks(inputHtml) { + // Regular expression to match 'qortal://...' URLs. + // This will stop at the first whitespace, comma, or HTML tag + var regex = /(qortal:\/\/[^\s,<]+)/g; + + // Replace matches in inputHtml with formatted anchor tag + var outputHtml = inputHtml.replace(regex, function (match) { + return `${match}`; + }); + + return outputHtml; +} \ No newline at end of file diff --git a/src/utils/extractTextFromSlate.ts b/src/utils/extractTextFromSlate.ts new file mode 100644 index 0000000..7686787 --- /dev/null +++ b/src/utils/extractTextFromSlate.ts @@ -0,0 +1,14 @@ +export function extractTextFromSlate(nodes: any) { + if(!Array.isArray(nodes)) return "" + let text = ""; + + for (const node of nodes) { + if (node.text) { + text += node.text; + } else if (node.children) { + text += extractTextFromSlate(node.children); + } + } + + return text; + } \ No newline at end of file diff --git a/src/utils/fetchCrowdfunds.ts b/src/utils/fetchCrowdfunds.ts new file mode 100644 index 0000000..642902a --- /dev/null +++ b/src/utils/fetchCrowdfunds.ts @@ -0,0 +1,36 @@ +import { checkStructure } from './checkStructure' + +export const fetchAndEvaluateCrowdfunds = async (data: any) => { + const getCrowdfund = async () => { + const { user, identifier, content } = data + let obj: any = { + ...content, + isValid: false + } + + if (!user || !identifier) return obj + + try { + + const responseData = await qortalRequest({ + action: 'FETCH_QDN_RESOURCE', + name: user, + service: 'DOCUMENT', + identifier: identifier + }) + if (checkStructure(responseData)) { + obj = { + ...content, + ...responseData, + isValid: true + } + } + return obj + } catch (error) { + console.error(error) + } + } + + const res = await getCrowdfund() + return res +} diff --git a/src/utils/fetchOwnerReviews.ts b/src/utils/fetchOwnerReviews.ts new file mode 100644 index 0000000..13aeb86 --- /dev/null +++ b/src/utils/fetchOwnerReviews.ts @@ -0,0 +1,38 @@ +import { checkStructureOwnerReviews } from "./checkStructure"; + +export const fetchAndEvaluateOwnerReviews = async (data: any) => { + const getOwnerReviews = async () => { + const { owner, reviewId, content } = data; + let obj: any = { + ...content, + isValid: false + }; + + if (!owner || !reviewId) return obj; + // Fetch review rawdata from QDN based on resource's location (need name, service type and identifier) + try { + const url = `/arbitrary/DOCUMENT/${owner}/${reviewId}`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json" + } + }); + + const responseData = await response.json(); + if (checkStructureOwnerReviews(responseData)) { + obj = { + ...responseData, + id: reviewId, + isValid: true + }; + } + return obj; + } catch (error) { + console.error(error); + } + }; + + const res = await getOwnerReviews(); + return res; +}; diff --git a/src/utils/generateReviewId.ts b/src/utils/generateReviewId.ts new file mode 100644 index 0000000..ed4e364 --- /dev/null +++ b/src/utils/generateReviewId.ts @@ -0,0 +1,12 @@ +import ShortUniqueId from "short-unique-id"; +import { REVIEW_BASE } from "../constants"; + +export function generateReviewId(QFundOwner: string, QFundId: string, ownerRegistrationNumber: number, rating: number): string { + const uid = new ShortUniqueId({ length: 10 }); + const uidGenerator = uid(); + const shortQFundOwner = QFundOwner.slice(0, 15); + const shortQFundId = QFundId.slice(-12); + // Change for production + const reviewId = `${REVIEW_BASE}-${shortQFundOwner}-${ownerRegistrationNumber}-${uidGenerator}-${shortQFundId}-${Number(rating) * 10}`; + return reviewId; +} \ No newline at end of file diff --git a/src/utils/queue.ts b/src/utils/queue.ts new file mode 100644 index 0000000..4869da6 --- /dev/null +++ b/src/utils/queue.ts @@ -0,0 +1,43 @@ +type QueueItem = { + request: () => Promise; + resolve: (value: any | PromiseLike) => void; + reject: (reason?: any) => void; +}; + +export class RequestQueue { + private queue: QueueItem[]; + private maxConcurrent: number; + private currentConcurrent: number; + + constructor(maxConcurrent = 5) { + this.queue = []; + this.maxConcurrent = maxConcurrent; + this.currentConcurrent = 0; + } + + async push(request: () => Promise): Promise { + return new Promise((resolve, reject) => { + this.queue.push({ + request, + resolve, + reject, + }); + this.checkQueue(); + }); + } + + private checkQueue(): void { + if (this.queue.length === 0 || this.currentConcurrent >= this.maxConcurrent) return; + + const { request, resolve, reject } = this.queue.shift() as QueueItem; + this.currentConcurrent++; + + request() + .then(resolve) + .catch(reject) + .finally(() => { + this.currentConcurrent--; + this.checkQueue(); + }); + } +} diff --git a/src/utils/time.ts b/src/utils/time.ts new file mode 100644 index 0000000..7425aea --- /dev/null +++ b/src/utils/time.ts @@ -0,0 +1,46 @@ +import moment from 'moment' + +export function formatTimestamp(timestamp: number): string { + const now = moment() + const timestampMoment = moment(timestamp) + const elapsedTime = now.diff(timestampMoment, 'minutes') + + if (elapsedTime < 1) { + return 'Just now' + } else if (elapsedTime < 60) { + return `${elapsedTime}m` + } else if (elapsedTime < 1440) { + return `${Math.floor(elapsedTime / 60)}h` + } else { + return timestampMoment.format('MMM D') + } +} + +export function formatTimestampSeconds(timestamp: number): string { + const now = moment() + const timestampMoment = moment.unix(timestamp) + const elapsedTime = now.diff(timestampMoment, 'minutes') + + if (elapsedTime < 1) { + return 'Just now' + } else if (elapsedTime < 60) { + return `${elapsedTime}m` + } else if (elapsedTime < 1440) { + return `${Math.floor(elapsedTime / 60)}h` + } else { + return timestampMoment.format('MMM D') + } +} + + + +export const formatDate = (unixTimestamp: number): string => { + const date = moment(unixTimestamp, 'x').fromNow() + + return date +} +export const formatDateSeconds = (unixTimestamp: number): string => { + const date = moment.unix(unixTimestamp).fromNow(); + + return date +} \ No newline at end of file diff --git a/src/utils/toBase64.ts b/src/utils/toBase64.ts new file mode 100644 index 0000000..3ab61ad --- /dev/null +++ b/src/utils/toBase64.ts @@ -0,0 +1,174 @@ +export const toBase64 = (file: File): Promise => + new Promise((resolve, reject) => { + const reader = new FileReader() + reader.readAsDataURL(file) + + reader.onload = () => { + const result = reader.result + reader.onload = null // remove onload handler + reader.onerror = null // remove onerror handler + resolve(result) + } + + reader.onerror = (error) => { + reader.onload = null // remove onload handler + reader.onerror = null // remove onerror handler + reject(error) + } + }) + +export function objectToBase64(obj: any) { + // Step 1: Convert the object to a JSON string + const jsonString = JSON.stringify(obj) + + // Step 2: Create a Blob from the JSON string + const blob = new Blob([jsonString], { type: 'application/json' }) + + // Step 3: Create a FileReader to read the Blob as a base64-encoded string + return new Promise((resolve, reject) => { + const reader = new FileReader() + reader.onloadend = () => { + if (typeof reader.result === 'string') { + // Remove 'data:application/json;base64,' prefix + const base64 = reader.result.replace( + 'data:application/json;base64,', + '' + ) + resolve(base64) + } else { + reject(new Error('Failed to read the Blob as a base64-encoded string')) + } + } + reader.onerror = () => { + reject(reader.error) + } + reader.readAsDataURL(blob) + }) +} + +export function objectToUint8Array(obj: any) { + // Convert the object to a JSON string + const jsonString = JSON.stringify(obj) + + // Encode the JSON string as a byte array using TextEncoder + const encoder = new TextEncoder() + const byteArray = encoder.encode(jsonString) + + // Create a new Uint8Array and set its content to the encoded byte array + const uint8Array = new Uint8Array(byteArray) + + return uint8Array +} + +export function uint8ArrayToBase64(uint8Array: Uint8Array): string { + const length = uint8Array.length + let binaryString = '' + const chunkSize = 1024 * 1024 // Process 1MB at a time + + for (let i = 0; i < length; i += chunkSize) { + const chunkEnd = Math.min(i + chunkSize, length) + const chunk = uint8Array.subarray(i, chunkEnd) + binaryString += Array.from(chunk, (byte) => String.fromCharCode(byte)).join( + '' + ) + } + + return btoa(binaryString) +} + +export function objectToUint8ArrayFromResponse(obj: any) { + const len = Object.keys(obj).length + const result = new Uint8Array(len) + + for (let i = 0; i < len; i++) { + result[i] = obj[i] + } + + return result +} +// export function uint8ArrayToBase64(arrayBuffer: Uint8Array): string { +// let binary = '' +// const bytes = new Uint8Array(arrayBuffer) +// const len = bytes.length + +// for (let i = 0; i < len; i++) { +// binary += String.fromCharCode(bytes[i]) +// } + +// return btoa(binary) +// } + +export function base64ToUint8Array(base64: string) { + const binaryString = atob(base64) + const len = binaryString.length + const bytes = new Uint8Array(len) + + for (let i = 0; i < len; i++) { + bytes[i] = binaryString.charCodeAt(i) + } + + return bytes +} + +export function uint8ArrayToObject(uint8Array: Uint8Array) { + // Decode the byte array using TextDecoder + const decoder = new TextDecoder() + const jsonString = decoder.decode(uint8Array) + + // Convert the JSON string back into an object + const obj = JSON.parse(jsonString) + + return obj +} + +export function processFileInChunks(file: File): Promise { + return new Promise( + (resolve: (value: Uint8Array) => void, reject: (reason?: any) => void) => { + const reader = new FileReader() + + reader.onload = function (event: ProgressEvent) { + const arrayBuffer = event.target?.result as ArrayBuffer + const uint8Array = new Uint8Array(arrayBuffer) + resolve(uint8Array) + } + + reader.onerror = function (error: ProgressEvent) { + reject(error) + } + + reader.readAsArrayBuffer(file) + } + ) +} + +// export async function processFileInChunks(file: File, chunkSize = 1024 * 1024): Promise { +// const fileStream = file.stream(); +// const reader = fileStream.getReader(); +// const totalLength = file.size; + +// if (totalLength <= 0 || isNaN(totalLength)) { +// throw new Error('Invalid file size'); +// } + +// const combinedArray = new Uint8Array(totalLength); +// let offset = 0; + +// while (offset < totalLength) { +// const { value, done } = await reader.read(); + +// if (done) { +// break; +// } + +// const chunk = new Uint8Array(value.buffer, value.byteOffset, value.byteLength); + +// // Set elements one by one instead of using combinedArray.set(chunk, offset) +// for (let i = 0; i < chunk.length; i++) { +// combinedArray[offset + i] = chunk[i]; +// } + +// offset += chunk.length; +// } + +// return combinedArray; +// } diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/wrappers/DownloadWrapper.tsx b/src/wrappers/DownloadWrapper.tsx new file mode 100644 index 0000000..f2c0efb --- /dev/null +++ b/src/wrappers/DownloadWrapper.tsx @@ -0,0 +1,198 @@ +import React from "react"; +import { useDispatch } from "react-redux"; + +import { + setAddToDownloads, + updateDownloads, +} from "../state/features/globalSlice"; + +import { DownloadTaskManager } from "../components/common/DownloadTaskManager"; + +interface Props { + children: React.ReactNode; +} + +const defaultValues: MyContextInterface = { + downloadVideo: () => {}, +}; +interface IDownloadVideoParams { + name: string; + service: string; + identifier: string; + properties: any; +} +interface MyContextInterface { + downloadVideo: ({ + name, + service, + identifier, + properties, + }: IDownloadVideoParams) => void; +} +export const MyContext = React.createContext(defaultValues); + +const DownloadWrapper: React.FC = ({ children }) => { + const dispatch = useDispatch(); + + const fetchResource = async ({ name, service, identifier }: any) => { + try { + await qortalRequest({ + action: "GET_QDN_RESOURCE_PROPERTIES", + name, + service, + identifier, + }); + } catch (error) { + console.error(error); + } + }; + + const fetchVideoUrl = async ({ name, service, identifier }: any) => { + try { + fetchResource({ name, service, identifier }); + const url = await qortalRequest({ + action: "GET_QDN_RESOURCE_URL", + service: service, + name: name, + identifier: identifier, + }); + if (url) { + dispatch( + updateDownloads({ + name, + service, + identifier, + url, + }) + ); + } + } catch (error) { + console.error(error); + } + }; + + const performDownload = ({ + name, + service, + identifier, + properties, + }: IDownloadVideoParams) => { + dispatch( + setAddToDownloads({ + name, + service, + identifier, + properties, + }) + ); + + let isCalling = false; + let percentLoaded = 0; + let timer = 24; + const intervalId = setInterval(async () => { + if (isCalling) return; + isCalling = true; + const res = await qortalRequest({ + action: "GET_QDN_RESOURCE_STATUS", + name: name, + service: service, + identifier: identifier, + }); + isCalling = false; + if (res.localChunkCount) { + if (res.percentLoaded) { + if ( + res.percentLoaded === percentLoaded && + res.percentLoaded !== 100 + ) { + timer = timer - 5; + } else { + timer = 24; + } + if (timer < 0) { + timer = 24; + isCalling = true; + dispatch( + updateDownloads({ + name, + service, + identifier, + status: { + ...res, + status: "REFETCHING", + }, + }) + ); + setTimeout(() => { + isCalling = false; + fetchResource({ + name, + service, + identifier, + }); + }, 25000); + return; + } + percentLoaded = res.percentLoaded; + } + dispatch( + updateDownloads({ + name, + service, + identifier, + status: res, + }) + ); + } + + // check if progress is 100% and clear interval if true + if (res?.status === "READY") { + clearInterval(intervalId); + dispatch( + updateDownloads({ + name, + service, + identifier, + status: res, + }) + ); + } + }, 5000); // 1 second interval + + fetchVideoUrl({ + name, + service, + identifier, + }); + }; + + const downloadVideo = async ({ + name, + service, + identifier, + properties, + }: IDownloadVideoParams) => { + try { + performDownload({ + name, + service, + identifier, + properties, + }); + return "addedToList"; + } catch (error) { + console.error(error); + } + }; + + return ( + <> + + {/* */} + {children} + + + ); +}; + +export default DownloadWrapper; diff --git a/src/wrappers/GlobalWrapper.tsx b/src/wrappers/GlobalWrapper.tsx new file mode 100644 index 0000000..5d083ba --- /dev/null +++ b/src/wrappers/GlobalWrapper.tsx @@ -0,0 +1,100 @@ +import React, { useEffect } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { addUser } from "../state/features/authSlice"; +import NavBar from "../components/layout/Navbar/Navbar"; +import PageLoader from "../components/common/PageLoader"; +import { RootState } from "../state/store"; +import { setUserAvatarHash } from "../state/features/globalSlice"; +import { useLocation } from "react-router-dom"; +import ConsentModal from "../components/modals/ConsentModal"; + +interface Props { + children: React.ReactNode; + setTheme: (val: string) => void; +} + +const GlobalWrapper: React.FC = ({ children, setTheme }) => { + const dispatch = useDispatch(); + const user = useSelector((state: RootState) => state.auth.user); + const location = useLocation(); + + useEffect(() => { + if (!user?.name) return; + + getAvatar(user?.name); + }, [user?.name]); + + // Get avatar for user to use in different places in the app + const getAvatar = React.useCallback(async (author: string) => { + try { + const url = await qortalRequest({ + action: "GET_QDN_RESOURCE_URL", + name: author, + service: "THUMBNAIL", + identifier: "qortal_avatar", + }); + + dispatch( + setUserAvatarHash({ + name: author, + url, + }) + ); + } catch (error) { + console.error(error); + } + }, []); + + const { isLoadingGlobal } = useSelector((state: RootState) => state.global); + + async function getNameInfo(address: string) { + const response = await qortalRequest({ + action: "GET_ACCOUNT_NAMES", + address: address, + }); + const nameData = response; + + if (nameData?.length > 0) { + return nameData[0].name; + } else { + return ""; + } + } + + const askForAccountInformation = React.useCallback(async () => { + try { + const account = await qortalRequest({ + action: "GET_USER_ACCOUNT", + }); + + const name = await getNameInfo(account.address); + dispatch(addUser({ ...account, name })); + } catch (error) { + console.error(error); + } + }, []); + + useEffect(() => { + if (location.pathname === "/" || user?.name) return; + askForAccountInformation(); + }, []); + + return ( + <> + {isLoadingGlobal && } + {/* Hide navbar on homepage for styling purposes */} + {location.pathname !== "/" && ( + setTheme(val)} + isAuthenticated={!!user?.name} + authenticate={askForAccountInformation} + fixed={true} + /> + )} + + {children} + + ); +}; + +export default GlobalWrapper; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..247ae4b --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "allowImportingTsExtensions": true, + + "jsx": "react-jsx", + "noImplicitAny": false, + /* Linting */ + "noUnusedLocals": false, + "noUnusedParameters": false, + "noFallthroughCasesInSwitch": true, + "sourceMap": true + }, + "include": [ + "src/**/*" + ], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..42872c5 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..5c33a21 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], + base: "" +})