Skip to content

Update: new tanstack state mangement #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tpSpace merged 5 commits into from
Jan 17, 2026
Merged

Update: new tanstack state mangement #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
94deb9f
remove footer
tpSpace Jan 17, 2026
ca68b86
add tanstack for state mangement & refactor design
tpSpace Jan 17, 2026
0c610be
feat: redesign footer with interactive marquee and flip animations
tpSpace Jan 17, 2026
73925ed
resolve conflicts
tpSpace Jan 17, 2026
b4c2ba0
remove footer
tpSpace Jan 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 25 additions & 6 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@
--color-primary: #00bfff;
--color-background-light: #f6f7f9;
--color-background-dark: #19202e;
--color-slush-yellow: #ffd600;
--color-slush-orange: #ff5c00;
--color-slush-purple: #9747ff;
--color-slush-green: #00d68f;
--color-slush-dark: #1a1a1a;
--color-slush-yellow: #FFD600;
--color-slush-orange: #FF5C00;
--color-slush-purple: #9747FF;
--color-slush-green: #00D68F;
--color-slush-dark: #1A1A1A;

/* Marketplace Colors */
--color-ink: #101618;
Expand Down Expand Up @@ -104,6 +104,7 @@
}

@keyframes float {

0%,
100% {
transform: translateY(0);
Expand All @@ -118,6 +119,22 @@ body {
font-family: var(--font-inter), Arial, Helvetica, sans-serif;
}

/* Global cursor pointer for clickable elements */
button,
a,
[role="button"],
[role="link"],
[role="menuitem"],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
label[for],
select,
.cursor-pointer {
cursor: pointer;
}

.text-outline-light {
-webkit-text-stroke: 2px black;
color: transparent;
Expand Down Expand Up @@ -269,6 +286,7 @@ body {
white-space: nowrap;
direction: ltr;
}

/* Cursor Hover Animation */
.cursor-animation {
animation: cursorMove 3s ease-in-out infinite;
Expand Down Expand Up @@ -426,7 +444,8 @@ body {
* {
@apply border-border outline-ring/50;
}

body {
@apply bg-background text-foreground;
}
}
}
17 changes: 11 additions & 6 deletions app/marketplace/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
'use client';

import MarketplaceSidebar from '@/components/marketplace/MarketplaceSidebar';
import { MarketplaceFilterProvider } from '@/contexts/MarketplaceFilterContext';

export default function MarketplaceLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex min-h-screen w-full flex-row overflow-hidden font-sans antialiased selection:bg-accent-lime selection:text-ink">
<MarketplaceSidebar />
<main className="flex-1 flex flex-col h-screen overflow-hidden relative bg-background-light">
{children}
</main>
</div>
<MarketplaceFilterProvider>
<div className="flex min-h-screen w-full flex-row overflow-hidden font-sans antialiased selection:bg-accent-lime selection:text-ink">
<MarketplaceSidebar />
<main className="flex-1 flex flex-col h-screen overflow-hidden relative bg-background-light">
{children}
</main>
</div>
</MarketplaceFilterProvider>
);
}
87 changes: 38 additions & 49 deletions app/marketplace/my-data/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function MyDataPage() {
const createFlow = useCallback(async (data: Uint8Array, identifier: string) => {
const walrus = await getWalrus();
const { WalrusFile } = await import('@mysten/walrus');

const client = new SuiJsonRpcClient({
url: getFullnodeUrl('testnet'),
network: 'testnet',
Expand Down Expand Up @@ -97,7 +97,7 @@ export default function MyDataPage() {

const handleStartUpload = async () => {
if (!file || !account) return;

setIsProcessing(true);
setUploadError('');

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

await flow.encode();

setEncryptedObject('0x' + bytesToHex(uint8Array).slice(0, 128));
setUploadStep('upload');
} catch (err) {
Expand Down Expand Up @@ -243,9 +243,9 @@ export default function MyDataPage() {
});

tl.to('#anim-overlay', { opacity: 1, duration: 0.2 })
.to('#anim-text', {
duration: 0.5,
onStart: () => {
.to('#anim-text', {
duration: 0.5,
onStart: () => {
document.getElementById('anim-text')!.innerText = 'ENCRYPTING METADATA';
document.getElementById('anim-subtext')!.innerText = 'Preparing asset for encryption';
}
Expand All @@ -254,14 +254,14 @@ export default function MyDataPage() {
.to('#anim-seal', { scale: 1, opacity: 1, rotation: 0, duration: 0.4, ease: 'elastic.out(1, 0.5)' })
.to('#anim-overlay', { backgroundColor: '#101618', duration: 0.1, yoyo: true, repeat: 1 }, '-=0.2')
.to('#anim-icon', { scale: 1, opacity: 1, duration: 0.3, ease: 'back.out(1.7)' })
.add(() => {
.add(() => {
document.getElementById('anim-text')!.innerText = 'VERIFYING ZK-PROOFS';
document.getElementById('anim-subtext')!.innerText = 'Generating SNARKs on Sui Network...';
})
.to('#anim-progress', { width: '90%', duration: 1 })
.to('#anim-seal', { borderColor: '#ccff00', boxShadow: '0 0 30px #ccff00', duration: 0.3 })
.to('#anim-icon', { color: '#ccff00', duration: 0.3 }, '<')
.add(() => {
.add(() => {
document.getElementById('anim-text')!.innerText = 'ASSET SECURED';
document.getElementById('anim-text')!.classList.add('text-accent-lime');
document.getElementById('anim-subtext')!.innerText = 'Listing created successfully.';
Expand All @@ -283,7 +283,7 @@ export default function MyDataPage() {
</div>
<h1 className="text-4xl font-black text-ink uppercase tracking-tight">My Data Dashboard</h1>
</div>

<div className="relative group">
<div className="absolute -inset-1 rounded-xl bg-ink opacity-100 translate-x-1 translate-y-1 blur-0"></div>
<div className="relative flex items-center gap-6 rounded-xl border-2 border-ink bg-white p-4 pr-8 shadow-sm">
Expand All @@ -309,23 +309,21 @@ export default function MyDataPage() {

<div className="px-8 mt-6">
<div className="flex gap-4 border-b-2 border-gray-200">
<button
<button
onClick={() => setActiveTab('uploads')}
className={`px-6 py-3 rounded-t-xl border-2 font-bold text-lg transition-colors relative top-[2px] z-10 ${
activeTab === 'uploads'
? 'border-ink border-b-0 bg-white text-ink shadow-[0_-2px_0_0_rgba(0,0,0,0.05)]'
: 'border-transparent hover:bg-gray-100 text-gray-500'
}`}
className={`px-6 py-3 rounded-t-xl border-2 font-bold text-lg transition-colors relative top-[2px] z-10 ${activeTab === 'uploads'
? 'border-ink border-b-0 bg-white text-ink shadow-[0_-2px_0_0_rgba(0,0,0,0.05)]'
: 'border-transparent hover:bg-gray-100 text-gray-500'
}`}
>
My Uploads
</button>
<button
<button
onClick={() => setActiveTab('purchases')}
className={`px-6 py-3 rounded-t-xl border-2 font-bold text-lg transition-colors relative top-[2px] z-10 ${
activeTab === 'purchases'
? 'border-ink border-b-0 bg-white text-ink shadow-[0_-2px_0_0_rgba(0,0,0,0.05)]'
: 'border-transparent hover:bg-gray-100 text-gray-500'
}`}
className={`px-6 py-3 rounded-t-xl border-2 font-bold text-lg transition-colors relative top-[2px] z-10 ${activeTab === 'purchases'
? 'border-ink border-b-0 bg-white text-ink shadow-[0_-2px_0_0_rgba(0,0,0,0.05)]'
: 'border-transparent hover:bg-gray-100 text-gray-500'
}`}
>
My Purchases
</button>
Expand All @@ -343,9 +341,9 @@ export default function MyDataPage() {
View Analytics <span className="material-symbols-outlined text-sm">arrow_outward</span>
</button>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<article
<article
onClick={() => setIsCreateModalOpen(true)}
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"
>
Expand Down Expand Up @@ -398,7 +396,7 @@ export default function MyDataPage() {
Recent Purchases <span className="text-gray-400 text-base font-normal ml-1">(0 items)</span>
</h2>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<article className="flex flex-col rounded-xl border-2 border-ink bg-white p-4 shadow-hard-sm opacity-60">
<div className="flex items-start justify-between mb-4">
Expand All @@ -409,7 +407,7 @@ export default function MyDataPage() {
</div>
<h3 className="text-lg font-bold text-gray-400 mb-1">No purchases yet</h3>
<p className="text-sm text-gray-400 mb-4">Start exploring the marketplace to find datasets.</p>
<Link
<Link
href="/marketplace"
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"
>
Expand All @@ -421,15 +419,6 @@ export default function MyDataPage() {
)}
</div>

<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]">
<p className="text-sm font-bold">Powered by Sui Network</p>
<div className="flex gap-4">
<span className="material-symbols-outlined">dataset</span>
<span className="material-symbols-outlined">security</span>
<span className="material-symbols-outlined">hub</span>
</div>
</footer>

{isCreateModalOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/50 backdrop-blur-sm p-4">
<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">
Expand Down Expand Up @@ -606,15 +595,14 @@ export default function MyDataPage() {
<div className="space-y-6">
<div className="bg-white border-2 border-ink rounded-xl p-6">
<h3 className="font-bold uppercase text-lg mb-4 text-ink">Upload Wizard</h3>

<div className="space-y-3 mb-6">
<div className="flex items-center gap-3 p-3 rounded-xl border-2 bg-green-100 border-green-500">
<span className="material-symbols-outlined text-green-600">check_circle</span>
<span className="font-semibold text-ink">Step 1: Encode file</span>
</div>
<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'
}`}>
<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'
}`}>
<span className={`material-symbols-outlined ${isProcessing ? 'text-blue-600' : 'text-gray-400'}`}>
{isProcessing ? 'pending' : 'radio_button_unchecked'}
</span>
Expand Down Expand Up @@ -670,7 +658,7 @@ export default function MyDataPage() {
<p className="text-sm text-gray-600">Your data is stored on Walrus</p>
</div>
</div>

<div className="bg-white rounded-lg p-4 border-2 border-ink mb-4">
<p className="text-sm text-gray-500 mb-1">Status</p>
<p className="font-semibold text-ink">Successfully uploaded to Walrus!</p>
Expand Down Expand Up @@ -729,19 +717,19 @@ export default function MyDataPage() {
)}

{processingType && (
<div
<div
id="anim-overlay"
className="fixed inset-0 z-[60] flex flex-col items-center justify-center bg-ink/95 backdrop-blur-md transition-colors opacity-0"
>
<div
<div
id="anim-seal"
className="relative flex h-64 w-64 items-center justify-center rounded-full border-[6px] border-white bg-ink shadow-2xl"
>
<div className="absolute inset-2 rounded-full border-2 border-dashed border-white/30 animate-spin" style={{ animationDuration: '10s' }}></div>
<div className="absolute inset-4 rounded-full border border-white/10 animate-spin" style={{ animationDuration: '8s', animationDirection: 'reverse' }}></div>

<span id="anim-icon" className="material-symbols-outlined text-8xl text-white relative z-10">lock</span>

<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">
<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" />
<text fill="white" fontSize="8" fontWeight="bold" letterSpacing="2">
Expand All @@ -752,8 +740,8 @@ export default function MyDataPage() {
</svg>
</div>

<h2
id="anim-text"
<h2
id="anim-text"
className="mt-12 text-3xl font-black text-white uppercase tracking-[0.2em] text-center px-4"
>
INITIALIZING
Expand All @@ -763,19 +751,20 @@ export default function MyDataPage() {
</p>

<div className="mt-8 h-4 w-64 rounded-full border-2 border-white bg-gray-800 p-1">
<div
<div
id="anim-progress"
className="h-full w-0 rounded-full bg-white shadow-[0_0_10px_rgba(255,255,255,0.5)]"
></div>
</div>
</div >

<div className="absolute bottom-10 left-0 right-0 flex justify-center gap-8 opacity-30">
<span className="font-mono text-xs text-white">BLOCK: #{listings?.[0]?.id?.slice(0, 8) || '000000'}</span>
<span className="font-mono text-xs text-white">HASH: 0x{blobId?.slice(0, 4) || '0000'}...{blobId?.slice(-4) || '0000'}</span>
<span className="font-mono text-xs text-white">NODE: SUI-TESTNET-01</span>
</div>
</div>
)}
</div >
)
}
</>
);
}
Loading