Update layout item my data

Author: longphu25

app/marketplace/my-data/page.tsx

@@ -1,16 +1,25 @@
 'use client';
 
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import Link from 'next/link';
 import { useCurrentAccount, useSignAndExecuteTransaction } from '@mysten/dapp-kit';
-import { useAllListings, useAccountBalance } from '@/hooks/useMarketplace';
+import { useOwnedListings, useAccountBalance } from '@/hooks/useMarketplace';
 import { formatSize, bytesToHex, formatPrice } from '@/lib/marketplace';
 import { getFullnodeUrl } from '@mysten/sui/client';
 import { SuiJsonRpcClient } from '@mysten/sui/jsonRpc';
 import { Transaction } from '@mysten/sui/transactions';
 import { marketplaceConfig, MIST_PER_SUI } from '@/config/marketplace';
 import { getMarketplaceTarget } from '@/lib/marketplace';
 
+// Type for Walrus write files flow
+interface WalrusWriteFlow {
+  encode: () => Promise<void>;
+  register: (opts: { epochs: number; owner: string; deletable: boolean }) => Transaction;
+  upload: (opts: { digest: string }) => Promise<void>;
+  certify: () => Transaction;
+  listFiles: () => Promise<Array<{ blobId?: string; id?: string }>>;
+}
+
 const walrusModule = {
   walrus: null as null | typeof import('@mysten/walrus').walrus,
 };
@@ -46,7 +55,7 @@ const STEPS: { key: Step; label: string; icon: string }[] = [
 export default function MyDataPage() {
   const account = useCurrentAccount();
   const { mutate: signAndExecute, isPending: isSigning } = useSignAndExecuteTransaction();
-  const { data: listings, isLoading, refetch } = useAllListings();
+  const { data: listings, isLoading, refetch } = useOwnedListings(account?.address);
   const { data: balance } = useAccountBalance();
 
   const [activeTab, setActiveTab] = useState<Tab>('uploads');
@@ -98,7 +107,7 @@ export default function MyDataPage() {
           sendTip: { max: 1_000_000 },
         },
       })
-    );
+    ) as unknown as { walrus: { writeFilesFlow: (opts: { files: unknown[] }) => WalrusWriteFlow } };
 
     const walrusFile = WalrusFile.from({
       contents: data,
@@ -427,28 +436,128 @@ export default function MyDataPage() {
               {isLoading && (
                 <>
                   {[1, 2, 3].map(i => (
-                    <div key={i} className="rounded-xl border-2 border-ink bg-white p-6 min-h-[340px] animate-pulse">
-                      <div className="h-6 bg-gray-200 rounded w-3/4 mb-4"></div>
-                      <div className="h-4 bg-gray-200 rounded w-full mb-2"></div>
-                      <div className="h-4 bg-gray-200 rounded w-2/3"></div>
-                    </div>
+                    <article key={i} className="flex flex-col rounded-xl border-2 border-ink bg-white overflow-hidden animate-pulse">
+                      <div className="h-36 bg-gray-200" />
+                      <div className="p-4 flex flex-col flex-1">
+                        <div className="h-5 bg-gray-200 rounded w-3/4 mb-2" />
+                        <div className="h-3 bg-gray-100 rounded w-1/2 mb-3" />
+                        <div className="grid grid-cols-2 gap-4 py-3 border-t border-gray-200">
+                          <div>
+                            <div className="h-2 bg-gray-100 rounded w-12 mb-1" />
+                            <div className="h-4 bg-gray-200 rounded w-16" />
+                          </div>
+                          <div>
+                            <div className="h-2 bg-gray-100 rounded w-12 mb-1" />
+                            <div className="h-4 bg-gray-200 rounded w-16" />
+                          </div>
+                        </div>
+                        <div className="flex gap-2 mt-auto pt-3 border-t border-gray-200">
+                          <div className="flex-1 h-9 bg-gray-200 rounded-lg" />
+                          <div className="flex-1 h-9 bg-gray-200 rounded-lg" />
+                        </div>
+                      </div>
+                    </article>
                   ))}
                 </>
               )}
 
               {listings && listings.map(listing => (
-                <article key={listing.id} className="flex flex-col rounded-xl border-2 border-ink bg-white p-4 shadow-hard-sm">
-                  <div className="flex items-start justify-between mb-4">
-                    <div className="h-12 w-12 rounded-lg border-2 border-ink bg-accent-blue flex items-center justify-center">
-                      <span className="material-symbols-outlined text-white">dataset</span>
+                <article key={listing.id} className="flex flex-col rounded-xl border-2 border-ink bg-white overflow-hidden">
+                  {/* Image/Preview Area */}
+                  <div className="relative h-36 bg-linear-to-br from-gray-800 to-gray-900 flex items-center justify-center">
+                    <div className="absolute inset-0 opacity-20">
+                      <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
+                        <path d="M0,50 Q25,30 50,50 T100,50" stroke="currentColor" strokeWidth="0.5" fill="none" className="text-accent-lime" />
+                        <path d="M0,60 Q25,40 50,60 T100,60" stroke="currentColor" strokeWidth="0.5" fill="none" className="text-accent-lime" />
+                      </svg>
+                    </div>
+                    <span className="material-symbols-outlined text-5xl text-gray-600">dataset</span>
+                    <span className="absolute top-3 left-3 rounded bg-accent-lime text-ink px-2 py-0.5 text-[10px] font-bold border border-ink">ACTIVE</span>
+                    
+                    {/* Explorer Links */}
+                    <div className="absolute top-3 right-3 flex gap-1">
+                      <a
+                        href={`https://suiscan.xyz/testnet/object/${listing.id}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="h-7 w-7 rounded bg-white/90 hover:bg-white flex items-center justify-center transition-colors"
+                        title="View on SuiScan"
+                      >
+                        <svg className="w-4 h-4" viewBox="0 0 234 234" fill="none">
+                          <path d="M0 100C0 65 0 47.5 6.8 33C12.7 21.3 22.3 11.8 34 5.8C47.3 0 64.7 0 99.5 0H133.8C168.6 0 186 0 199.3 6.8C211 12.8 220.6 22.3 226.5 34C233.3 47.4 233.3 64.9 233.3 99.8V134.2C233.3 169.1 233.3 186.6 226.5 199.9C220.6 211.6 211 221.2 199.3 227.2C186 234 168.6 234 133.8 234H99.5C64.7 234 47.3 234 34 227.2C22.3 221.2 12.7 211.7 6.8 200C0 186.6 0 169.1 0 134.2V100Z" fill="#4C72FF"/>
+                          <path d="M177 87C178.7 85.9 180.8 85.6 182.4 86.3C183.2 86.6 183.9 87.1 184.3 87.8C184.7 88.5 185 89.4 184.9 90.2L181.4 148.2C181 155.7 178.2 163.4 173.6 170.4C160.4 190.4 133.2 200 112.8 191.8C107.1 189.5 102.5 186 99.2 181.7C100 181.8 100.8 181.7 101.5 181.7C122.4 181.7 143.5 170.3 155.1 152.7C160.7 144.1 164 134.7 164.6 125.6L166.5 93.3L177 87Z" fill="white"/>
+                          <path d="M150 63.6C151.7 62.5 153.8 62.3 155.5 62.9C156.3 63.3 156.9 63.8 157.4 64.5C157.9 65.2 158.1 66.1 158 66.9L154.5 125C154 132.5 151.3 140.1 146.7 147.1C133.5 167.2 106.3 176.7 85.9 168.5C80.1 166.2 75.6 162.7 72.3 158.4C73.1 158.4 73.9 158.4 74.6 158.4C95.6 158.4 116.6 147.1 128.2 129.4C133.9 120.8 137.1 111.4 137.7 102.3L139.6 70L150 63.6Z" fill="white"/>
+                          <path d="M123 40.3C124.7 39.2 126.8 39 128.5 39.6C129.2 39.9 129.9 40.5 130.3 41.2C130.8 41.9 131 42.7 130.9 43.5L127.4 101.6C127 109.1 124.2 116.7 119.6 123.7C106.4 143.8 79.2 153.3 58.8 145.1C38.5 136.9 32.7 114 45.9 93.9C50.5 86.9 57.1 80.7 64.6 76.1L123 40.3Z" fill="white"/>
+                        </svg>
+                      </a>
+                      <a
+                        href={`https://testnet.suivision.xyz/object/${listing.id}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="h-7 w-7 rounded bg-white/90 hover:bg-white flex items-center justify-center transition-colors"
+                        title="View on SuiVision"
+                      >
+                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none">
+                          <path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="#4DA2FF"/>
+                          <path d="M6.99748 5.28362L6.99748 11.0148L8.71768 12.0008L6.99731 12.987L6.99731 18.7182L11.9972 21.584L16.9971 18.7182L16.9971 12.9866L15.2769 12.0007L16.9973 11.0147L16.9973 5.28308L11.997 2.41732L6.99748 5.28362ZM11.6464 3.42366L11.6464 7.94789L7.69961 10.2105L7.69961 5.68623L11.6464 3.42366ZM12.3482 20.5781L12.3482 16.0535L16.2954 13.7912L16.2954 18.3159L12.3482 20.5781ZM15.9441 13.1879L11.9973 15.4501L8.05048 13.1879L9.41994 12.4031L11.9973 13.8803L14.575 12.4031L15.9441 13.1879ZM11.9973 10.1208L9.41964 11.5982L8.05048 10.8134L11.9973 8.55113L15.9445 10.8134L14.575 11.5982L11.9973 10.1208Z" fill="white"/>
+                        </svg>
+                      </a>
                     </div>
-                    <span className="rounded bg-green-100 text-green-800 px-2 py-1 text-[10px] font-bold border border-green-200">ACTIVE</span>
                   </div>
-                  <h3 className="text-lg font-bold text-ink mb-1">{listing.name}</h3>
-                  <p className="text-sm text-gray-500 mb-4 line-clamp-2">{listing.description}</p>
-                  <div className="mt-auto flex items-center justify-between">
-                    <span className="text-lg font-bold text-primary">{formatPrice(listing.price)}</span>
-                    <span className="text-xs text-gray-400">{formatSize(Number(listing.totalSize))}</span>
+                  
+                  {/* Content */}
+                  <div className="p-4 flex flex-col flex-1">
+                    <h3 className="text-base font-bold text-ink mb-1 line-clamp-2">{listing.name}</h3>
+                    
+                    {/* Object ID */}
+                    <p className="text-[10px] text-gray-400 font-mono mb-1 truncate" title={listing.id}>
+                      ID: {listing.id.slice(0, 8)}...{listing.id.slice(-6)}
+                    </p>
+                    
+                    {/* Blob ID with Walrus link */}
+                    <div className="flex items-center gap-1 mb-3">
+                      <p className="text-[10px] text-gray-400 font-mono truncate flex-1" title={listing.blobId}>
+                        Blob: {listing.blobId.slice(0, 8)}...{listing.blobId.slice(-6)}
+                      </p>
+                      <a
+                        href={`https://walruscan.com/testnet/blob/${listing.blobId}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="h-5 w-5 rounded bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors shrink-0"
+                        title="View on WalrusScan"
+                      >
+                        <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none">
+                          <circle cx="12" cy="10" r="8" fill="#36B5A8"/>
+                          <ellipse cx="12" cy="22" rx="6" ry="2" fill="#36B5A8" opacity="0.5"/>
+                          <circle cx="9" cy="8" r="1.5" fill="white"/>
+                          <circle cx="15" cy="8" r="1.5" fill="white"/>
+                          <path d="M9 13C9 13 10.5 15 12 15C13.5 15 15 13 15 13" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
+                        </svg>
+                      </a>
+                    </div>
+                    
+                    {/* Stats */}
+                    <div className="grid grid-cols-2 gap-4 py-3 border-t border-gray-200">
+                      <div>
+                        <p className="text-[10px] text-gray-400 uppercase tracking-wide">Price</p>
+                        <p className="text-sm font-bold text-ink">{formatPrice(listing.price)}</p>
+                      </div>
+                      <div>
+                        <p className="text-[10px] text-gray-400 uppercase tracking-wide">Size</p>
+                        <p className="text-sm font-bold text-accent-lime">{formatSize(Number(listing.totalSize))}</p>
+                      </div>
+                    </div>
+                    
+                    {/* Actions */}
+                    <div className="flex gap-2 mt-auto pt-3 border-t border-gray-200">
+                      <button className="flex-1 h-9 rounded-lg border-2 border-ink bg-white text-ink text-sm font-bold hover:bg-gray-50 transition-colors">
+                        Edit
+                      </button>
+                      <button className="flex-1 h-9 rounded-lg border-2 border-ink bg-gray-100 text-ink text-sm font-bold hover:bg-gray-200 transition-colors flex items-center justify-center gap-1">
+                        <span className="material-symbols-outlined text-sm">settings</span>
+                        Manage
+                      </button>
+                    </div>
                   </div>
                 </article>
               ))}

bun.lock

@@ -17,6 +17,9 @@ export default function MarketplaceSidebar() {
   const account = useCurrentAccount();
   const { mutate: disconnect } = useDisconnectWallet();
   const suiClient = useSuiClient();
+  
+  // Copy address state
+  const [copied, setCopied] = useState(false);
 
   // Get filter state from context
   const {
@@ -83,6 +86,24 @@ export default function MarketplaceSidebar() {
     disconnect();
   };
 
+  // Copy address to clipboard
+  const handleCopyAddress = async () => {
+    if (!account?.address) return;
+    try {
+      await navigator.clipboard.writeText(account.address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy address:", err);
+    }
+  };
+
+  // Open SuiVision explorer
+  const openSuiVision = () => {
+    if (!account?.address) return;
+    window.open(`https://suivision.xyz/account/${account.address}`, "_blank");
+  };
+
   // Price slider handlers
   const handleSliderMouseDown = (e: React.MouseEvent) => {
     setIsDragging(true);
@@ -347,19 +368,39 @@ export default function MarketplaceSidebar() {
         {account ? (
           <div className="flex flex-col gap-3">
             <div className="flex items-center gap-3">
-              <div className="h-10 w-10 rounded-full border-2 border-ink bg-gradient-to-br from-primary to-accent-lime flex items-center justify-center">
+              <div className="h-10 w-10 rounded-full border-2 border-ink bg-linear-to-br from-primary to-accent-lime flex items-center justify-center">
                 <span className="material-symbols-outlined text-white" style={{ fontSize: "20px" }}>
                   account_balance_wallet
                 </span>
               </div>
-              <div className="flex flex-col flex-1 min-w-0">
-                <span className="text-sm font-bold text-ink truncate">
-                  {suinsName ? `@${suinsName}` : formatAddress(account.address)}
-                </span>
+              <div 
+                className="flex flex-col flex-1 min-w-0 cursor-pointer group"
+                onClick={handleCopyAddress}
+                title="Click to copy address"
+              >
+                <div className="flex items-center gap-1">
+                  <span className="text-sm font-bold text-ink truncate group-hover:text-primary transition-colors">
+                    {suinsName ? `@${suinsName}` : formatAddress(account.address)}
+                  </span>
+                  <span className="material-symbols-outlined text-gray-400 group-hover:text-primary transition-colors" style={{ fontSize: "14px" }}>
+                    {copied ? "check" : "content_copy"}
+                  </span>
+                </div>
                 {suinsName && (
-                  <span className="text-xs text-gray-500 truncate">{formatAddress(account.address)}</span>
+                  <span className="text-xs text-gray-500 truncate group-hover:text-primary transition-colors">
+                    {formatAddress(account.address)}
+                  </span>
                 )}
               </div>
+              <button
+                onClick={openSuiVision}
+                className="h-8 w-8 rounded-lg border-2 border-ink bg-white flex items-center justify-center hover:bg-accent-lime transition-colors shrink-0"
+                title="View on SuiVision"
+              >
+                <span className="material-symbols-outlined text-ink" style={{ fontSize: "18px" }}>
+                  open_in_new
+                </span>
+              </button>
             </div>
 
             {/* Balances */}
@@ -387,7 +428,7 @@ export default function MarketplaceSidebar() {
             <p className="text-sm font-bold text-gray-600">Connect your wallet to get started</p>
             <ConnectButton
               connectText="Connect Wallet"
-              className="!w-full !rounded-lg !border-2 !border-ink !bg-primary !px-4 !py-3 !font-bold !text-white !shadow-hard-sm hover:!-translate-y-1 !transition-transform"
+              className="w-full! rounded-lg! border-2! border-ink! bg-primary! px-4! py-3! font-bold! text-white! shadow-hard-sm! hover:-translate-y-1! transition-transform!"
             />
           </div>
         )}