-
{project.title}
-
-
{project.description}
-
-
- {(project.githubLink &&
-
-
Github
-
- )}
-
- {(project.projectLink &&
-
-
Project
-
+
+ {(project.image &&
+
+
)}
+
+
{project.description}
+
+
+
+ {['ALL', 'IN PROGRESS', 'COMPLETED', 'ABANDONED', 'PAID'].map(tab => (
+ {
+ e.preventDefault();
+ setActiveTab(tab);
+ }}
+ >
+ {tab}
+
+ ))}
+
)
}
diff --git a/src/components/Projects/ProjectListItem.js b/src/components/Projects/ProjectListItem.js
index da17d9a..40f2713 100644
--- a/src/components/Projects/ProjectListItem.js
+++ b/src/components/Projects/ProjectListItem.js
@@ -1,38 +1,75 @@
import { motion as m } from 'framer-motion'
import Image from 'next/image'
-import './ProjectListItem.scss'
import useGlobalStore from '@/store/store'
import EditButton from '../UI/Button/EditButton/EditButton'
+import './ProjectListItem.scss'
+import { truncateText } from '@/lib/truncateText'
+import RegistrationButton from '../UI/Button/RegistrationButton/RegistrationButton'
+import Grade from '../UI/Grade/Grade'
-function ProjectListItem ({ project, openHandler, id, openEditor }) {
+function ProjectListItem({ project, openHandler, id, openEditor }) {
const admin = useGlobalStore(state => state.admin)
return (
-
+ PENDING CLAIM
+ PSHENMIC.DEV
{admin
? e.stopPropagation()}>
-
+
- : null }
+ : null}
-
+
-
{project.title}
-
{project.description}
+
{project.name}
+
{truncateText(project.description, 75)}
+
+ 0 ? `${project.tasts.length} Tasks` : 'No Tasks'}
+ ariaLabel={'Tasks'}
+ disabled={project?.tasts?.length === 0}
+ />
+ {project?.pendingClaims?.length > 0 ?
+
+
+
+
)
}
diff --git a/src/components/Projects/ProjectListItem.scss b/src/components/Projects/ProjectListItem.scss
index 6ee9298..d010006 100644
--- a/src/components/Projects/ProjectListItem.scss
+++ b/src/components/Projects/ProjectListItem.scss
@@ -7,10 +7,47 @@
right: 14px;
z-index: 10;
- @media screen and ( max-width: 580px ) {
+ @media screen and (max-width: 580px) {
background-color: rgba(0, 0, 0, 0.6);
}
}
-
+
@include listItem;
+}
+
+.ProjectListItemSkeleton {
+ position: relative;
+ width: 100%;
+ height: 270px;
+ background: #1a212a;
+ margin-bottom: 12px;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 0.02) 20%,
+ rgba(255, 255, 255, 0.05) 50%,
+ rgba(255, 255, 255, 0.02) 80%,
+ rgba(255, 255, 255, 0) 100%);
+ transform: translateX(-100%);
+ animation: shimmer 1.5s infinite;
+ will-change: transform;
+ }
+}
+
+@keyframes shimmer {
+ 0% {
+ transform: translateX(-100%);
+ }
+
+ 100% {
+ transform: translateX(100%);
+ }
}
\ No newline at end of file
diff --git a/src/components/Projects/ProjectListItemSkeleton.js b/src/components/Projects/ProjectListItemSkeleton.js
new file mode 100644
index 0000000..b817b9b
--- /dev/null
+++ b/src/components/Projects/ProjectListItemSkeleton.js
@@ -0,0 +1,8 @@
+
+function ProjectListItemSkeleton() {
+ return (
+
+ )
+}
+
+export default ProjectListItemSkeleton
\ No newline at end of file
diff --git a/src/components/Projects/ProjectsList.js b/src/components/Projects/ProjectsList.js
index e77a8fb..c759440 100644
--- a/src/components/Projects/ProjectsList.js
+++ b/src/components/Projects/ProjectsList.js
@@ -1,54 +1,98 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import { motion as m, AnimatePresence } from 'framer-motion'
+import { useInView } from 'react-intersection-observer'
import ProjectListItem from './ProjectListItem'
import Project from './Project'
-import { motion as m, AnimatePresence } from 'framer-motion'
-import './ProjectsList.scss'
import useGlobalStore from '@/store/store'
-import ActionButtons from '../UI/Button/ActionButtons/ActionButtons'
-
-const defaultProjectsList = [
- {
- title: 'Electrum Dash',
- description: 'A lightweight wallet for a Desktops & Android allow you to receive and spend Dash anywhere without downloading the blockchain with a PrivateSend support.',
- imgSrc: '/assets/img/dash-electrum-icon.png',
- githubLink: '',
- projectLink: 'http://dash-electrum.org/'
- },
- {
- title: 'Platform Explorer',
- description: 'Block explorer for a brand new Dash Platform chain. Explore latest Dash Evolution data such as Identities, Data Contracts, and Documents.',
- imgSrc: '/assets/img/platform-explorer-preview-300x300.jpg',
- githubLink: 'https://github.com/pshenmic/platform-explorer',
- projectLink: 'https://platform-explorer.com/'
- },
- {
- title: 'Dashmate Contribution',
- description: 'Masternode setup tool that drastically eases node configuration and setup with a nice & easy CLI interface. Built on top of Node.Js and Docker.',
- imgSrc: '/assets/img/dashmate-preview-300x300.jpg',
- githubLink: 'https://github.com/dashpay/platform/tree/master/packages/dashmate',
- projectLink: 'https://www.dashmate.org/'
- },
- {
- title: 'Dashboards',
- description: 'Monitoring toolset that keeps track of the current state of the services deployed in the pshenmic cloud. Ensure yourself the SLA and stability of the provided services or be first to notice the fatal issues happening in cloud or blockchain network!',
- imgSrc: '/assets/img/dashboards-preview-400x400.png',
- githubLink: '',
- projectLink: 'https://dashboards.pshenmic.dev/'
- }
-]
-
-export default function ProjectsList ({ projects = defaultProjectsList }) {
+import RegistrationButton from '../UI/Button/RegistrationButton/RegistrationButton'
+import './ProjectsList.scss'
+import ProjectListItemSkeleton from './ProjectListItemSkeleton'
+
+export default function ProjectsList() {
const [openedItem, setOpenedItem] = useState(null)
const admin = useGlobalStore(state => state.admin)
const setOpenEditingWindow = useGlobalStore(state => state.setOpenEditingWindow)
+ const client = useGlobalStore(state => state.client)
+ const [documents, setDocuments] = useState([])
+ const [hasMore, setHasMore] = useState(true);
+ const [isLoading, setIsLoading] = useState(false);
+ const [uniqueIds] = useState(new Set());
+ const [lastDocument, setLastDocument] = useState(null);
+
+ const { ref, inView } = useInView({
+ threshold: 0,
+ rootMargin: '100px',
+ triggerOnce: false
+ });
+
+ const loadMoreDocuments = useCallback(async () => {
+ if (isLoading || !hasMore || !client || !client.platform) { return }
+ setIsLoading(true)
+
+ try {
+ const queryOpts = {
+ limit: 5,
+ where: [],
+ orderBy: [['$id', 'asc']]
+ };
+
+ if (lastDocument) {
+ queryOpts.startAfter = lastDocument.getId().toBuffer()
+ }
+
+ const response = await client.platform.documents.get(
+ 'pshenmic-dev-dfo.Project',
+ queryOpts
+ )
+
+ if (response && response.length > 0) {
+ setLastDocument(response[response.length - 1])
+
+ const uniqueDocuments = response.filter(doc => {
+ const id = doc.getId().toString()
+ if (uniqueIds.has(id)) return false
+ uniqueIds.add(id)
+ return true
+ })
+
+ if (uniqueDocuments.length > 0) {
+ const newDocuments = uniqueDocuments.map(doc => ({
+ ...doc.getData(),
+ id: doc.getId().toString()
+ }))
+
+ setDocuments(prev => [...prev, ...newDocuments])
+ setHasMore(response.length >= queryOpts.limit)
+ }
+ } else {
+ setHasMore(false);
+ }
+
+ } catch (error) {
+ console.error('Error loading documents:', error)
+ setHasMore(false)
+ } finally {
+ setIsLoading(false)
+ }
+ }, [isLoading, hasMore, lastDocument, uniqueIds]);
+
+ useEffect(() => {
+ loadMoreDocuments()
+ }, []);
+
+ useEffect(() => {
+ if (inView && !isLoading && hasMore) {
+ loadMoreDocuments()
+ }
+ }, [inView, isLoading, hasMore, loadMoreDocuments])
const openEditingWindow = useCallback(() => {
setOpenEditingWindow(true)
}, [setOpenEditingWindow])
- const ListItems = projects.map((project, id) =>
+ const ListItems = documents.map((project, id) =>
setOpenedItem(null)}
/>
@@ -70,14 +114,42 @@ export default function ProjectsList ({ projects = defaultProjectsList }) {
{openedItem === null && (
- {ListItems}
- {admin && openedItem === null
- ?
+
Projects
+ {admin && openedItem === null && (
+
+ {ListItems}
+ {hasMore && (
+
+ {isLoading ?
+ <>
+
+
+
+
+
+
+ : null}
+
)}
diff --git a/src/components/Projects/ProjectsList.scss b/src/components/Projects/ProjectsList.scss
index 2b8c8b4..74fa257 100644
--- a/src/components/Projects/ProjectsList.scss
+++ b/src/components/Projects/ProjectsList.scss
@@ -1,11 +1,38 @@
+@import '../../assets/styles/mixins.scss';
+
.ProjectsList {
display: flex;
flex-direction: column;
- align-items: center;
+ align-items: flex-start;
+ height: 100%;
+
+ &__Header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 37px;
+ gap: 12px;
+ width: 100%;
+
+ > h2 {
+ font-weight: 400;
+ font-size: 16px;
+ color: #fff;
+ font-family: "Press Start 2P";
+ text-transform: uppercase;
+ }
+ }
+
+ > ul {
+ width: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ height: 100%;
+ }
- @media screen and ( min-width: 500px ) and ( max-width: 680px ) {
+ @media screen and (min-width: 500px) and (max-width: 680px) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
-}
+}
\ No newline at end of file
diff --git a/src/components/Projects/Task.js b/src/components/Projects/Task.js
new file mode 100644
index 0000000..10b7d39
--- /dev/null
+++ b/src/components/Projects/Task.js
@@ -0,0 +1,33 @@
+import Image from 'next/image'
+import RegistrationButton from '../UI/Button/RegistrationButton/RegistrationButton'
+import Grade from '../UI/Grade/Grade'
+import './Task.scss'
+import { motion as m } from 'framer-motion'
+
+export default function Task() {
+ return (
+
+ PENDING CLAIM
+ PSHENMIC.DEV
+ TASK PAGE
+
+
+
+
+
Black Mirror Designer
+
+
Design a new page for the list of all tasks.
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Projects/Task.scss b/src/components/Projects/Task.scss
new file mode 100644
index 0000000..906a55b
--- /dev/null
+++ b/src/components/Projects/Task.scss
@@ -0,0 +1,114 @@
+@import '../../assets/styles/mixins.scss';
+
+.Task {
+ width: 100%;
+ position: relative;
+ background: #1a212a;
+ padding: 40px 40px 20px 40px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ > h3 {
+ font-size: 16px;
+ font-weight: 400;
+ color: #fff;
+ font-family: 'Press Start 2P';
+ text-transform: uppercase;
+ margin-bottom: 8px;
+ }
+
+ &__FooterCard {
+ width: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 20px;
+ flex-wrap: wrap;
+ }
+
+ &__OpenTaskButton {
+ color: #caf6fd !important;
+ background: #2e3845 !important;
+ }
+
+ &__Description {
+ font-size: 18px;
+ font-weight: 700;
+ color: #fff;
+ font-family: var(--font-mono);
+ margin-bottom: 20px;
+ }
+
+ &__Content {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ gap: 18px;
+ margin-bottom: 20px;
+
+ &__Button {
+ color: #ffbd07 !important;
+ background: #794c00 !important;
+ }
+
+ &__Creator {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ &__Image {
+ width: 38px;
+ height: 38px;
+ border-radius: 50%;
+ }
+
+ &__Name {
+ font-size: 18px;
+ font-weight: 700;
+ color: #62cff6;
+ font-family: var(--font-mono);
+ }
+ }
+ }
+
+ &__PendingClaim {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ color: #fff7cd;
+ letter-spacing: 0.06em;
+ font-weight: 400;
+ font-size: 8px;
+ line-height: 200%;
+ font-family: 'Press Start 2P';
+ padding: 0px 4px;
+ background: #ffbd07;
+ }
+
+ &__Domain {
+ position: absolute;
+ top: 22px;
+ right: 22px;
+ font-weight: 400;
+ font-size: 10px;
+ text-align: right;
+ color: #62cff6;
+ }
+
+ @media screen and ( max-width: 700px ) {
+ padding: 40px 20px 10px 20px;
+
+ &__Content {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ &__Domain {
+ position: relative !important;
+ top: 0 !important;
+ right: 0 !important;
+ margin-bottom: 10px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/Registration/ImportWalletWindow.js b/src/components/Registration/ImportWalletWindow.js
new file mode 100644
index 0000000..f6f74ac
--- /dev/null
+++ b/src/components/Registration/ImportWalletWindow.js
@@ -0,0 +1,156 @@
+'use client'
+
+import './ImportWalletWindow.scss'
+import { useCallback, useEffect, useState } from "react";
+import { useSpring, animated, useTransition, easings } from "@react-spring/web";
+import { showToast } from '@/lib/showToast';
+import { validateMnemonic } from 'bip39';
+import { useDash } from '@/hooks/useDashClient';
+import useGlobalStore from "@/store/store";
+import RegistrationForm from "./RegistrationForm";
+import Loading from '../UI/Loading/Loading';
+import localforage from 'localforage';
+import WrapperUserInputModal from '../UI/WrapperUserInputModal/WrapperUserInputModal';
+
+const dataSeedPhrase = {
+ description: 'Make sure your device is safe & no one is watching, don\'t show this info to anyone.',
+ inputDescription: 'Enter your 12 word Seed Phrase you want to import',
+ placeholder: 'eg. white purple lucky...',
+ buttonText: 'LOG IN'
+}
+
+const dataPrivateKey = {
+ description: 'Make sure your device is safe & no one is watching, don\'t show this info to anyone.',
+ inputDescription: 'Please enter your Private Key',
+ placeholder: 'HEX / WIF / Base64...',
+ buttonText: 'LOG IN'
+}
+
+export default function ImportWalletWindow() {
+ const { openImportWalletWindow, setOpenImportWalletWindow, setLoadingGetUser, loadingGetUser, setUserDash, setClient } = useGlobalStore();
+ const [activeButton, setActiveButton] = useState('seedPhrase');
+ const [form, setForm] = useState(Off course
)
+ const { connect } = useDash();
+ const errorCallback = () => {
+ showToast('error', 'Error retrieving account');
+ setLoadingGetUser(false);
+ setOpenImportWalletWindow(true);
+ };
+
+ const successCallback = () => {
+ showToast('success', 'Wallet imported successfully');
+ setLoadingGetUser(false);
+ };
+
+ const getNewClient = useCallback(async (mnemonic) => {
+ if (typeof window === 'undefined') return;
+ const mnemonicTrim = mnemonic.trim();
+ setLoadingGetUser(true);
+
+ const walletStore = localforage.createInstance({
+ name: 'dash-wallet',
+ storeName: 'wallet_store',
+ driver: [
+ localforage.INDEXEDDB,
+ ]
+ });
+ try {
+ if (!validateMnemonic(mnemonicTrim)) {
+ showToast('error', 'Invalid mnemonic phrase.');
+ setUserDash(null);
+ setLoadingGetUser(false);
+ return;
+ }
+ setOpenImportWalletWindow(false);
+ await connect({
+ network: 'testnet',
+ wallet: {
+ mnemonic: mnemonicTrim,
+ adapter: walletStore,
+ unsafeOptions: {
+ skipSynchronizationBeforeHeight: 1029000,
+ },
+ }
+ }).then(async (resolveClient) => {
+ if (resolveClient?.identities) {
+ setUserDash(resolveClient.identities);
+ successCallback()
+ }
+ if (resolveClient?.client) {
+ setClient(resolveClient.client)
+ }
+ }).catch((error) => {
+ errorCallback()
+ })
+ } catch (error) {
+ console.error('Error:', error);
+ showToast('error', 'Client creation failed');
+ setLoadingGetUser(false);
+ setOpenImportWalletWindow(true);
+ }
+
+ }, [setLoadingGetUser, setOpenImportWalletWindow, setUserDash, errorCallback, successCallback]);
+
+ const animationLoading = useSpring({
+ opacity: loadingGetUser ? 1 : 0,
+ pointerEvents: loadingGetUser ? 'auto' : 'none',
+ config: {
+ tension: 200,
+ friction: 30
+ }
+ });
+
+ useEffect(() => {
+ if (activeButton === 'seedPhrase') {
+ setForm(Off course
)
+ }
+ }, [activeButton])
+
+ const transitions = useTransition(form, {
+ from: { opacity: 0 },
+ enter: { opacity: 1 },
+ leave: { opacity: 0 },
+ config: { duration: 400, easing: easings.easeInOut },
+ trail: 100,
+ exitBeforeEnter: true,
+ })
+
+ return (
+
+
+
+
+ It usually takes up to 3 minutes to connect to the blockchain. You can continue using the platform, and we will notify you once the process is successful or if it fails.
+
+
+
IMPORT WALLET
+
+ setActiveButton('seedPhrase')}
+ className={`ImportWalletWindow__ButtonsContent__Button ${activeButton === 'seedPhrase' ? 'Active' : ''}`}
+ >
+ SEED PHRASE
+
+ setActiveButton('privateKey')}
+ className={`ImportWalletWindow__ButtonsContent__Button ${activeButton === 'privateKey' ? 'Active' : ''}`}
+ >
+ PRIVATE KEY
+
+
+ {transitions((style, item) =>
+
+ {item}
+
+ )}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Registration/ImportWalletWindow.scss b/src/components/Registration/ImportWalletWindow.scss
new file mode 100644
index 0000000..7cbf219
--- /dev/null
+++ b/src/components/Registration/ImportWalletWindow.scss
@@ -0,0 +1,138 @@
+.ImportWalletWindow {
+ &__ContainerLoading {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 2;
+ display: flex;
+ align-items: flex-end;
+ padding: 40px 50px;
+ gap: 15px;
+
+ > p {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 120%;
+ color: #fff;
+ font-family: var(--font-mono);
+ }
+
+ &__Loading {
+ position: relative;
+ width: 50px;
+ height: 50px;
+ flex-shrink: 0;
+ }
+ }
+
+ &__Wrapper {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ padding: 60px 100px;
+ display: flex;
+ flex-direction: column;
+ gap: 50px;
+ }
+
+ &__Title {
+ font-family: "Press Start 2P";
+ font-weight: 400;
+ font-size: 16px;
+ color: #000;
+ }
+
+ &__ButtonsContentSeedPhrase {
+ &::before {
+ transform: translateX(-100%) !important;
+ }
+ }
+
+ &__ButtonsContent {
+ position: relative;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ background: #d2e8fe;
+
+ &::before {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 50%;
+ height: calc(100% - 2px);
+ background: #fff;
+ border: 1px solid #0051a4;
+ transform: translateX(0%);
+ transition: transform .3s ease-in-out;
+ }
+
+ &__Button {
+ font-family: "Press Start 2P";
+ font-weight: 400;
+ font-size: 10px;
+ color: #016dc4;
+ padding: 13px 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 120%;
+ width: 50%;
+ cursor: pointer;
+ background-color: transparent;
+ z-index: 1;
+ transition: color .3s ease-in-out;
+ }
+ }
+
+ @media screen and ( max-width: 1100px) {
+ width: 100vw;
+
+ &__CloseButton {
+ width: 100%;
+ height: 64px;
+ left: 100%;
+ padding-top: 0;
+ justify-content: flex-end;
+ align-items: center;
+ padding-right: 20px;
+ z-index: 2;
+ }
+
+ &__Wrapper {
+ padding: 40px;
+ padding-top: 80px;
+ }
+ }
+
+ @media screen and ( max-width: 520px) {
+ &__Wrapper {
+ gap: 30px;
+ }
+ }
+}
+
+.Active {
+ color: #013984 !important;
+}
+
+@keyframes slidein {
+ from {
+ width: 0;
+ left: 0;
+ }
+
+ 50% {
+ width: 100%;
+ left: 0;
+ }
+
+ to {
+ width: 0;
+ left: 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Registration/RegistrationForm.js b/src/components/Registration/RegistrationForm.js
new file mode 100644
index 0000000..e57d1f5
--- /dev/null
+++ b/src/components/Registration/RegistrationForm.js
@@ -0,0 +1,82 @@
+'use client'
+
+import './RegistrationForm.scss'
+import RegistrationButton from '../UI/Button/RegistrationButton/RegistrationButton'
+import { useSpring, animated } from '@react-spring/web'
+import { useEffect, useRef, useState } from 'react'
+
+// type:
+// data: { description: string, inputDescription: string, placeholder: string, buttonText: string }
+// type: 'seedPhrase' | 'privateKey'
+export default function RegistrationForm({ data, handleFunction, type }) {
+ const [inputValue, setInputValue] = useState('')
+ const textareaRef = useRef(null)
+
+ const validationSeedPhrase = (value) => {
+ const words = value.trim().split(/\s+/)
+ if (words.length > 12) {
+ return false
+ }
+ return true
+ };
+
+ const validationPrivateKey = (value) => {
+ return true
+ };
+
+ const handleInputChange = (value) => {
+ const validation = type === 'seedPhrase' ? validationSeedPhrase(value) : validationPrivateKey(value)
+ if (validation) {
+ setInputValue(value)
+ }
+ };
+
+ const animation = useSpring({
+ transform: inputValue ? 'translate(0%, 20%)' : 'translate(-50%, 20%)',
+ opacity: inputValue ? 0 : 1,
+ config: {
+ tension: 200,
+ friction: 30
+ }
+ });
+
+ const handleSubmit = (e) => {
+ e.preventDefault()
+ handleFunction(inputValue)
+ setInputValue('')
+ }
+
+ useEffect(() => {
+ if (textareaRef?.current) {
+ textareaRef.current.style.minHeight = `auto`
+ textareaRef.current.style.minHeight = `${textareaRef.current.scrollHeight}px`
+ }
+ }, [inputValue]);
+
+ return (
+