Merge pull request #669 from success-OG/feat/development

feat: IPFS storage browser, mobile image editor, cross-chain swap UI, and RSC streaming

Author: yosemite01

app/api/ipfs/pin/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export const runtime = 'edge';
+
+function sha256ToCid(sha256: string): string {
+  return `bafy${sha256.slice(0, 52)}`;
+}
+
+export async function POST(req: NextRequest) {
+  const form = await req.formData();
+  const file = form.get('file');
+  const expectedSha256 = String(form.get('sha256') ?? '');
+
+  if (!(file instanceof Blob)) {
+    return NextResponse.json({ error: 'file required' }, { status: 400 });
+  }
+
+  const buffer = await file.arrayBuffer();
+  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+  const sha256 = Array.from(new Uint8Array(hashBuffer))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('');
+
+  if (expectedSha256 && sha256 !== expectedSha256.toLowerCase()) {
+    return NextResponse.json({ error: 'Hash mismatch' }, { status: 422 });
+  }
+
+  const cid = sha256ToCid(sha256);
+  const gatewayUrl = `https://ipfs.io/ipfs/${cid}`;
+
+  return NextResponse.json({
+    cid,
+    sha256,
+    size: buffer.byteLength,
+    gatewayUrl,
+  });
+}

app/bounties/page.tsx

@@ -1,19 +1,37 @@
-'use client';
-
 import { Suspense } from 'react';
 import { Header } from '@/components/header';
 import { Footer } from '@/components/footer';
 import { BountiesPageSkeleton } from '@/components/ui/skeleton-group';
+import { BountiesStatsSection } from '@/components/streaming/bounties-stats-section';
+import { fetchBountiesList } from '@/lib/streaming/chunk-data';
 import BountiesClient from './BountiesClient';
-import { bounties } from '@/lib/creators-data';
+
+async function BountiesListSection() {
+  const bounties = await fetchBountiesList();
+  return <BountiesClient bounties={bounties} />;
+}
 
 export default function BountiesPage() {
   return (
     <div className="min-h-screen flex flex-col bg-background">
       <Header />
       <main className="flex-grow">
+        <Suspense fallback={
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <div className="grid grid-cols-3 gap-4 animate-pulse">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <div key={i} className="h-20 bg-muted rounded-xl" />
+              ))}
+            </div>
+          </div>
+        }>
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6">
+            <BountiesStatsSection />
+          </div>
+        </Suspense>
+
         <Suspense fallback={<BountiesPageSkeleton />}>
-          <BountiesClient bounties={bounties} />
+          <BountiesListSection />
         </Suspense>
       </main>
       <Footer />

app/creators/[id]/page.tsx

@@ -1,118 +1,53 @@
 import { Suspense } from 'react';
 import { notFound } from 'next/navigation';
-import Image from 'next/image';
-import Link from 'next/link';
 import { Header } from '@/components/header';
 import { Footer } from '@/components/footer';
-import { ProjectCard } from '@/components/project-card';
-import { RichTextContent } from '@/components/ui/rich-text';
 import { CreatorProfileSkeleton } from '@/components/ui/skeleton-group';
-import { creators } from '@/lib/creators-data';
+import { CardSkeleton, TextSkeleton } from '@/components/skeletons/card-skeleton';
+import { CreatorHeroSection, CreatorCtaSection } from '@/components/streaming/creator-hero-section';
+import { CreatorBioSection } from '@/components/streaming/creator-bio-section';
+import { CreatorProjectsSection } from '@/components/streaming/creator-projects-section';
+import { fetchCreatorCore } from '@/lib/streaming/chunk-data';
 
-// Simulate async data fetch (replace with real DB/API call)
-async function getCreator(id: string) {
-  // Artificial delay to demonstrate streaming
-  await new Promise((r) => setTimeout(r, 0));
-  return creators.find((c) => c.id === id) ?? null;
-}
-
-async function CreatorProfile({ id }: { id: string }) {
-  const creator = await getCreator(id);
+async function CreatorProfileShell({ id }: { id: string }) {
+  const creator = await fetchCreatorCore(id);
   if (!creator) notFound();
 
   return (
     <>
-      {/* Cover */}
-      <div className="relative h-48 sm:h-64 w-full bg-muted overflow-hidden">
-        <Image
-          src={creator.coverImage}
-          alt={`${creator.name} cover`}
-          fill
-          className="object-cover"
-          priority
-        />
-      </div>
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-24">
-        {/* Avatar + name */}
-        <div className="flex flex-col sm:flex-row sm:items-end gap-4 -mt-12 mb-8">
-          <div className="relative w-24 h-24 rounded-full overflow-hidden border-4 border-background bg-muted shrink-0">
-            <Image src={creator.avatar} alt={creator.name} fill className="object-cover" />
-          </div>
-          <div className="pb-1">
-            <h1 className="text-2xl sm:text-3xl font-bold text-foreground">{creator.name}</h1>
-            <p className="text-muted-foreground">{creator.title} · {creator.discipline}</p>
-          </div>
-          <div className="sm:ml-auto flex gap-3 pb-1">
-            <a href={creator.linkedIn} target="_blank" rel="noopener noreferrer"
-              className="text-sm px-4 py-2 rounded-md border border-border hover:bg-muted transition-colors">
-              LinkedIn
-            </a>
-            <a href={creator.twitter} target="_blank" rel="noopener noreferrer"
-              className="text-sm px-4 py-2 rounded-md border border-border hover:bg-muted transition-colors">
-              Twitter
-            </a>
+      <Suspense fallback={
+        <div className="animate-pulse">
+          <div className="h-48 sm:h-64 bg-muted w-full" />
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex items-end gap-4 -mt-12 mb-6">
+              <div className="w-24 h-24 rounded-full bg-muted border-4 border-background" />
+              <div className="h-7 bg-muted rounded w-48" />
+            </div>
           </div>
         </div>
+      }>
+        <CreatorHeroSection id={id} />
+      </Suspense>
 
-        {/* Tagline */}
-        <p className="text-lg italic text-muted-foreground mb-4">&ldquo;{creator.tagline}&rdquo;</p>
-
-        {/* Bio — supports rich HTML if stored, falls back to plain text */}
-        <div className="mb-8 max-w-3xl">
-          {creator.bio.startsWith('<') ? (
-            <RichTextContent html={creator.bio} />
-          ) : (
-            <p className="text-foreground leading-relaxed">{creator.bio}</p>
-          )}
-        </div>
-
-        {/* Skills */}
-        <div className="flex flex-wrap gap-2 mb-12">
-          {creator.skills.map((skill) => (
-            <span key={skill} className="px-3 py-1 text-sm bg-muted rounded-full text-foreground">
-              {skill}
-            </span>
-          ))}
-        </div>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-24">
+        <Suspense fallback={<div className="mb-8"><TextSkeleton lines={4} /></div>}>
+          <CreatorBioSection id={id} />
+        </Suspense>
 
-        {/* Projects — wrapped in its own Suspense for granular streaming */}
         <section>
           <h2 className="text-xl font-semibold text-foreground mb-6">Projects</h2>
           <Suspense fallback={
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <div key={i} className="bg-card border border-border rounded-lg overflow-hidden animate-pulse">
-                  <div className="aspect-video bg-muted" />
-                  <div className="p-4 space-y-2">
-                    <div className="h-5 bg-muted rounded w-3/4" />
-                    <div className="h-4 bg-muted rounded w-full" />
-                  </div>
-                </div>
-              ))}
+              {Array.from({ length: 3 }).map((_, i) => <CardSkeleton key={i} />)}
             </div>
           }>
-            {creator.projects.length > 0 ? (
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {creator.projects.map((project) => (
-                  <ProjectCard key={project.id} project={project} />
-                ))}
-              </div>
-            ) : (
-              <p className="text-muted-foreground">No projects yet.</p>
-            )}
+            <CreatorProjectsSection id={id} />
           </Suspense>
         </section>
 
-        {/* CTA */}
-        <div className="mt-16 text-center border border-border rounded-xl p-10 bg-muted/30">
-          <h3 className="text-2xl font-bold text-foreground mb-3">Work with {creator.name}</h3>
-          <p className="text-muted-foreground mb-6">Reach out directly to discuss your project.</p>
-          <a href={creator.linkedIn} target="_blank" rel="noopener noreferrer"
-            className="inline-flex items-center justify-center px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition-colors">
-            Get In Touch
-          </a>
-        </div>
+        <Suspense fallback={<div className="mt-16 h-40 bg-muted rounded-xl animate-pulse" />}>
+          <CreatorCtaSection id={id} />
+        </Suspense>
       </div>
     </>
   );
@@ -126,7 +61,7 @@ export default async function CreatorPage({ params }: { params: Promise<{ id: st
       <Header />
       <main className="flex-grow">
         <Suspense fallback={<CreatorProfileSkeleton />}>
-          <CreatorProfile id={id} />
+          <CreatorProfileShell id={id} />
         </Suspense>
       </main>
       <Footer />

app/dashboard/files/page.tsx

@@ -0,0 +1,20 @@
+import { Header } from '@/components/header';
+import { Footer } from '@/components/footer';
+import { IpfsStorageBrowser } from '@/components/ipfs/ipfs-storage-browser';
+
+export const metadata = {
+  title: 'Decentralized Files | Stellar',
+  description: 'Browse and pin files to IPFS decentralized storage',
+};
+
+export default function DashboardFilesPage() {
+  return (
+    <div className="min-h-screen flex flex-col bg-background">
+      <Header />
+      <main className="flex-grow py-12 px-4">
+        <IpfsStorageBrowser />
+      </main>
+      <Footer />
+    </div>
+  );
+}

components/header.tsx

@@ -6,6 +6,7 @@ import { useTheme } from 'next-themes';
 import { Moon, Sun, Menu, X } from 'lucide-react';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
+import { DeferredSwapLauncher } from '@/components/streaming/deferred-swap-launcher';
 
 export function Header() {
   const { theme, setTheme } = useTheme();
@@ -80,6 +81,7 @@ export function Header() {
 
           {/* Right Actions */}
           <div className="flex items-center gap-2">
+            <DeferredSwapLauncher />
             {mounted && (
               <Button
                 variant="ghost"