Skip to content

Commit 995f3bf

Browse files
tpSpacetpSpace
authored
Merge pull request #7 from TaskOpenSystem/landing
Update: new tanstack state mangement
2 parents d293b0e + b4c2ba0 commit 995f3bf

14 files changed

Lines changed: 812 additions & 225 deletions

File tree

‎app/globals.css‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717
--color-primary: #00bfff;
1818
--color-background-light: #f6f7f9;
1919
--color-background-dark: #19202e;
20-
--color-slush-yellow: #ffd600;
21-
--color-slush-orange: #ff5c00;
22-
--color-slush-purple: #9747ff;
23-
--color-slush-green: #00d68f;
24-
--color-slush-dark: #1a1a1a;
20+
--color-slush-yellow: #FFD600;
21+
--color-slush-orange: #FF5C00;
22+
--color-slush-purple: #9747FF;
23+
--color-slush-green: #00D68F;
24+
--color-slush-dark: #1A1A1A;
2525

2626
/* Marketplace Colors */
2727
--color-ink: #101618;
@@ -104,6 +104,7 @@
104104
}
105105

106106
@keyframes float {
107+
107108
0%,
108109
100% {
109110
transform: translateY(0);
@@ -118,6 +119,22 @@ body {
118119
font-family: var(--font-inter), Arial, Helvetica, sans-serif;
119120
}
120121

122+
/* Global cursor pointer for clickable elements */
123+
button,
124+
a,
125+
[role="button"],
126+
[role="link"],
127+
[role="menuitem"],
128+
input[type="submit"],
129+
input[type="button"],
130+
input[type="checkbox"],
131+
input[type="radio"],
132+
label[for],
133+
select,
134+
.cursor-pointer {
135+
cursor: pointer;
136+
}
137+
121138
.text-outline-light {
122139
-webkit-text-stroke: 2px black;
123140
color: transparent;
@@ -269,6 +286,7 @@ body {
269286
white-space: nowrap;
270287
direction: ltr;
271288
}
289+
272290
/* Cursor Hover Animation */
273291
.cursor-animation {
274292
animation: cursorMove 3s ease-in-out infinite;
@@ -426,7 +444,8 @@ body {
426444
* {
427445
@apply border-border outline-ring/50;
428446
}
447+
429448
body {
430449
@apply bg-background text-foreground;
431450
}
432-
}
451+
}

‎app/marketplace/layout.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
1+
'use client';
2+
13
import MarketplaceSidebar from '@/components/marketplace/MarketplaceSidebar';
4+
import { MarketplaceFilterProvider } from '@/contexts/MarketplaceFilterContext';
25

36
export default function MarketplaceLayout({
47
children,
58
}: {
69
children: React.ReactNode;
710
}) {
811
return (
9-
<div className="flex min-h-screen w-full flex-row overflow-hidden font-sans antialiased selection:bg-accent-lime selection:text-ink">
10-
<MarketplaceSidebar />
11-
<main className="flex-1 flex flex-col h-screen overflow-hidden relative bg-background-light">
12-
{children}
13-
</main>
14-
</div>
12+
<MarketplaceFilterProvider>
13+
<div className="flex min-h-screen w-full flex-row overflow-hidden font-sans antialiased selection:bg-accent-lime selection:text-ink">
14+
<MarketplaceSidebar />
15+
<main className="flex-1 flex flex-col h-screen overflow-hidden relative bg-background-light">
16+
{children}
17+
</main>
18+
</div>
19+
</MarketplaceFilterProvider>
1520
);
1621
}

‎app/marketplace/my-data/page.tsx‎

Lines changed: 38 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function MyDataPage() {
5656
const createFlow = useCallback(async (data: Uint8Array, identifier: string) => {
5757
const walrus = await getWalrus();
5858
const { WalrusFile } = await import('@mysten/walrus');
59-
59+
6060
const client = new SuiJsonRpcClient({
6161
url: getFullnodeUrl('testnet'),
6262
network: 'testnet',
@@ -97,7 +97,7 @@ export default function MyDataPage() {
9797

9898
const handleStartUpload = async () => {
9999
if (!file || !account) return;
100-
100+
101101
setIsProcessing(true);
102102
setUploadError('');
103103

@@ -110,7 +110,7 @@ export default function MyDataPage() {
110110
flowRef.current = flow;
111111

112112
await flow.encode();
113-
113+
114114
setEncryptedObject('0x' + bytesToHex(uint8Array).slice(0, 128));
115115
setUploadStep('upload');
116116
} catch (err) {
@@ -243,9 +243,9 @@ export default function MyDataPage() {
243243
});
244244

245245
tl.to('#anim-overlay', { opacity: 1, duration: 0.2 })
246-
.to('#anim-text', {
247-
duration: 0.5,
248-
onStart: () => {
246+
.to('#anim-text', {
247+
duration: 0.5,
248+
onStart: () => {
249249
document.getElementById('anim-text')!.innerText = 'ENCRYPTING METADATA';
250250
document.getElementById('anim-subtext')!.innerText = 'Preparing asset for encryption';
251251
}
@@ -254,14 +254,14 @@ export default function MyDataPage() {
254254
.to('#anim-seal', { scale: 1, opacity: 1, rotation: 0, duration: 0.4, ease: 'elastic.out(1, 0.5)' })
255255
.to('#anim-overlay', { backgroundColor: '#101618', duration: 0.1, yoyo: true, repeat: 1 }, '-=0.2')
256256
.to('#anim-icon', { scale: 1, opacity: 1, duration: 0.3, ease: 'back.out(1.7)' })
257-
.add(() => {
257+
.add(() => {
258258
document.getElementById('anim-text')!.innerText = 'VERIFYING ZK-PROOFS';
259259
document.getElementById('anim-subtext')!.innerText = 'Generating SNARKs on Sui Network...';
260260
})
261261
.to('#anim-progress', { width: '90%', duration: 1 })
262262
.to('#anim-seal', { borderColor: '#ccff00', boxShadow: '0 0 30px #ccff00', duration: 0.3 })
263263
.to('#anim-icon', { color: '#ccff00', duration: 0.3 }, '<')
264-
.add(() => {
264+
.add(() => {
265265
document.getElementById('anim-text')!.innerText = 'ASSET SECURED';
266266
document.getElementById('anim-text')!.classList.add('text-accent-lime');
267267
document.getElementById('anim-subtext')!.innerText = 'Listing created successfully.';
@@ -283,7 +283,7 @@ export default function MyDataPage() {
283283
</div>
284284
<h1 className="text-4xl font-black text-ink uppercase tracking-tight">My Data Dashboard</h1>
285285
</div>
286-
286+
287287
<div className="relative group">
288288
<div className="absolute -inset-1 rounded-xl bg-ink opacity-100 translate-x-1 translate-y-1 blur-0"></div>
289289
<div className="relative flex items-center gap-6 rounded-xl border-2 border-ink bg-white p-4 pr-8 shadow-sm">
@@ -309,23 +309,21 @@ export default function MyDataPage() {
309309

310310
<div className="px-8 mt-6">
311311
<div className="flex gap-4 border-b-2 border-gray-200">
312-
<button
312+
<button
313313
onClick={() => setActiveTab('uploads')}
314-
className={`px-6 py-3 rounded-t-xl border-2 font-bold text-lg transition-colors relative top-[2px] z-10 ${
315-
activeTab === 'uploads'
316-
? 'border-ink border-b-0 bg-white text-ink shadow-[0_-2px_0_0_rgba(0,0,0,0.05)]'
317-
: 'border-transparent hover:bg-gray-100 text-gray-500'
318-
}`}
314+
className={`px-6 py-3 rounded-t-xl border-2 font-bold text-lg transition-colors relative top-[2px] z-10 ${activeTab === 'uploads'
315+
? 'border-ink border-b-0 bg-white text-ink shadow-[0_-2px_0_0_rgba(0,0,0,0.05)]'
316+
: 'border-transparent hover:bg-gray-100 text-gray-500'
317+
}`}
319318
>
320319
My Uploads
321320
</button>
322-
<button
321+
<button
323322
onClick={() => setActiveTab('purchases')}
324-
className={`px-6 py-3 rounded-t-xl border-2 font-bold text-lg transition-colors relative top-[2px] z-10 ${
325-
activeTab === 'purchases'
326-
? 'border-ink border-b-0 bg-white text-ink shadow-[0_-2px_0_0_rgba(0,0,0,0.05)]'
327-
: 'border-transparent hover:bg-gray-100 text-gray-500'
328-
}`}
323+
className={`px-6 py-3 rounded-t-xl border-2 font-bold text-lg transition-colors relative top-[2px] z-10 ${activeTab === 'purchases'
324+
? 'border-ink border-b-0 bg-white text-ink shadow-[0_-2px_0_0_rgba(0,0,0,0.05)]'
325+
: 'border-transparent hover:bg-gray-100 text-gray-500'
326+
}`}
329327
>
330328
My Purchases
331329
</button>
@@ -343,9 +341,9 @@ export default function MyDataPage() {
343341
View Analytics <span className="material-symbols-outlined text-sm">arrow_outward</span>
344342
</button>
345343
</div>
346-
344+
347345
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
348-
<article
346+
<article
349347
onClick={() => setIsCreateModalOpen(true)}
350348
className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-ink bg-gray-50 p-6 min-h-[340px] hover:bg-blue-50 hover:border-primary transition-all duration-200 cursor-pointer group"
351349
>
@@ -398,7 +396,7 @@ export default function MyDataPage() {
398396
Recent Purchases <span className="text-gray-400 text-base font-normal ml-1">(0 items)</span>
399397
</h2>
400398
</div>
401-
399+
402400
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
403401
<article className="flex flex-col rounded-xl border-2 border-ink bg-white p-4 shadow-hard-sm opacity-60">
404402
<div className="flex items-start justify-between mb-4">
@@ -409,7 +407,7 @@ export default function MyDataPage() {
409407
</div>
410408
<h3 className="text-lg font-bold text-gray-400 mb-1">No purchases yet</h3>
411409
<p className="text-sm text-gray-400 mb-4">Start exploring the marketplace to find datasets.</p>
412-
<Link
410+
<Link
413411
href="/marketplace"
414412
className="mt-auto w-full h-10 rounded-lg border-2 border-ink bg-gray-100 text-gray-500 font-bold transition-colors flex items-center justify-center gap-2"
415413
>
@@ -421,15 +419,6 @@ export default function MyDataPage() {
421419
)}
422420
</div>
423421

424-
<footer className="mt-auto border-t-2 border-ink pt-8 flex flex-col items-center gap-4 text-center opacity-60 pb-8 bg-[#f6f7f9]">
425-
<p className="text-sm font-bold">Powered by Sui Network</p>
426-
<div className="flex gap-4">
427-
<span className="material-symbols-outlined">dataset</span>
428-
<span className="material-symbols-outlined">security</span>
429-
<span className="material-symbols-outlined">hub</span>
430-
</div>
431-
</footer>
432-
433422
{isCreateModalOpen && (
434423
<div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/50 backdrop-blur-sm p-4">
435424
<div className="w-full max-w-2xl bg-white rounded-2xl border-2 border-ink shadow-hard-lg p-6 relative max-h-[90vh] overflow-y-auto">
@@ -606,15 +595,14 @@ export default function MyDataPage() {
606595
<div className="space-y-6">
607596
<div className="bg-white border-2 border-ink rounded-xl p-6">
608597
<h3 className="font-bold uppercase text-lg mb-4 text-ink">Upload Wizard</h3>
609-
598+
610599
<div className="space-y-3 mb-6">
611600
<div className="flex items-center gap-3 p-3 rounded-xl border-2 bg-green-100 border-green-500">
612601
<span className="material-symbols-outlined text-green-600">check_circle</span>
613602
<span className="font-semibold text-ink">Step 1: Encode file</span>
614603
</div>
615-
<div className={`flex items-center gap-3 p-3 rounded-xl border-2 ${
616-
isProcessing ? 'bg-blue-100 border-blue-500' : 'bg-gray-100 border-gray-300'
617-
}`}>
604+
<div className={`flex items-center gap-3 p-3 rounded-xl border-2 ${isProcessing ? 'bg-blue-100 border-blue-500' : 'bg-gray-100 border-gray-300'
605+
}`}>
618606
<span className={`material-symbols-outlined ${isProcessing ? 'text-blue-600' : 'text-gray-400'}`}>
619607
{isProcessing ? 'pending' : 'radio_button_unchecked'}
620608
</span>
@@ -670,7 +658,7 @@ export default function MyDataPage() {
670658
<p className="text-sm text-gray-600">Your data is stored on Walrus</p>
671659
</div>
672660
</div>
673-
661+
674662
<div className="bg-white rounded-lg p-4 border-2 border-ink mb-4">
675663
<p className="text-sm text-gray-500 mb-1">Status</p>
676664
<p className="font-semibold text-ink">Successfully uploaded to Walrus!</p>
@@ -729,19 +717,19 @@ export default function MyDataPage() {
729717
)}
730718

731719
{processingType && (
732-
<div
720+
<div
733721
id="anim-overlay"
734722
className="fixed inset-0 z-[60] flex flex-col items-center justify-center bg-ink/95 backdrop-blur-md transition-colors opacity-0"
735723
>
736-
<div
724+
<div
737725
id="anim-seal"
738726
className="relative flex h-64 w-64 items-center justify-center rounded-full border-[6px] border-white bg-ink shadow-2xl"
739727
>
740728
<div className="absolute inset-2 rounded-full border-2 border-dashed border-white/30 animate-spin" style={{ animationDuration: '10s' }}></div>
741729
<div className="absolute inset-4 rounded-full border border-white/10 animate-spin" style={{ animationDuration: '8s', animationDirection: 'reverse' }}></div>
742-
730+
743731
<span id="anim-icon" className="material-symbols-outlined text-8xl text-white relative z-10">lock</span>
744-
732+
745733
<svg className="absolute inset-0 h-full w-full animate-spin" style={{ animationDuration: '20s', animationDirection: 'reverse' }} viewBox="0 0 100 100" width="100" height="100">
746734
<path id="circlePathCommon" d="M 50, 50 m -35, 0 a 35,35 0 1,1 70,0 a 35,35 0 1,1 -70,0" fill="transparent" />
747735
<text fill="white" fontSize="8" fontWeight="bold" letterSpacing="2">
@@ -752,8 +740,8 @@ export default function MyDataPage() {
752740
</svg>
753741
</div>
754742

755-
<h2
756-
id="anim-text"
743+
<h2
744+
id="anim-text"
757745
className="mt-12 text-3xl font-black text-white uppercase tracking-[0.2em] text-center px-4"
758746
>
759747
INITIALIZING
@@ -763,19 +751,20 @@ export default function MyDataPage() {
763751
</p>
764752

765753
<div className="mt-8 h-4 w-64 rounded-full border-2 border-white bg-gray-800 p-1">
766-
<div
754+
<div
767755
id="anim-progress"
768756
className="h-full w-0 rounded-full bg-white shadow-[0_0_10px_rgba(255,255,255,0.5)]"
769757
></div>
770-
</div>
758+
</div >
771759

772760
<div className="absolute bottom-10 left-0 right-0 flex justify-center gap-8 opacity-30">
773761
<span className="font-mono text-xs text-white">BLOCK: #{listings?.[0]?.id?.slice(0, 8) || '000000'}</span>
774762
<span className="font-mono text-xs text-white">HASH: 0x{blobId?.slice(0, 4) || '0000'}...{blobId?.slice(-4) || '0000'}</span>
775763
<span className="font-mono text-xs text-white">NODE: SUI-TESTNET-01</span>
776764
</div>
777-
</div>
778-
)}
765+
</div >
766+
)
767+
}
779768
</>
780769
);
781770
}

0 commit comments

Comments
 (0)