feat: dashboard with my listings and my orders
This commit is contained in:
thesn10
5
app/src/app/dashboard/page.tsx
Normal file
5
app/src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { Dashboard } from '@/components/Dashboard'
|
||||
|
||||
export default function DashboardPage() {
|
||||
return <Dashboard />
|
||||
}
|
||||
280
app/src/components/Dashboard.tsx
Normal file
280
app/src/components/Dashboard.tsx
Normal file
@@ -0,0 +1,280 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useWallet } from '@solana/connector/react'
|
||||
import { useMyListings } from '@/hooks/useMyListings'
|
||||
import { useMyOrders } from '@/hooks/useMyOrders'
|
||||
import { Badge, STATUS_COLORS } from '@/components/ui/Badge'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { abbrev, fmtSol } from '@/lib/format'
|
||||
|
||||
export function Dashboard() {
|
||||
const router = useRouter()
|
||||
const { account } = useWallet()
|
||||
const [tab, setTab] = useState<'listings' | 'orders'>('listings')
|
||||
const { data: myListings = [], isLoading: loadingL } = useMyListings()
|
||||
const { data: myOrders = [], isLoading: loadingO } = useMyOrders()
|
||||
|
||||
if (!account) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
maxWidth: 420,
|
||||
margin: '80px auto',
|
||||
textAlign: 'center',
|
||||
background: 'var(--bg2)',
|
||||
border: '1px solid var(--bd)',
|
||||
borderRadius: 'var(--radius)',
|
||||
padding: '40px 32px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 14,
|
||||
background: 'var(--accSoft)',
|
||||
border: '1px solid var(--accBd)',
|
||||
margin: '0 auto 18px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 16,
|
||||
height: 16,
|
||||
borderRadius: 5,
|
||||
background: 'linear-gradient(135deg, var(--acc), var(--acc2))',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<h2 style={{ margin: '0 0 8px', fontSize: 20, fontWeight: 700 }}>Wallet required</h2>
|
||||
<p style={{ margin: '0 0 22px', fontSize: 13.5, color: 'var(--mut)', lineHeight: 1.55 }}>
|
||||
Connect a wallet to view your listings and orders.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'space-between',
|
||||
gap: 16,
|
||||
marginBottom: 22,
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h1 style={{ margin: 0, fontSize: 26, fontWeight: 700, letterSpacing: '-.02em' }}>
|
||||
My Dashboard
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
margin: '6px 0 0',
|
||||
fontSize: 13,
|
||||
fontFamily: 'var(--font-mono)',
|
||||
color: 'var(--mut)',
|
||||
}}
|
||||
>
|
||||
{abbrev(account)}
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => router.push('/listing/create')}>+ Create Listing</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 4,
|
||||
background: 'var(--bg2)',
|
||||
border: '1px solid var(--bd)',
|
||||
borderRadius: 11,
|
||||
padding: 4,
|
||||
width: 'max-content',
|
||||
marginBottom: 20,
|
||||
}}
|
||||
>
|
||||
{(
|
||||
[
|
||||
{ key: 'listings' as const, label: `My Listings · ${myListings.length}` },
|
||||
{ key: 'orders' as const, label: `My Orders · ${myOrders.length}` },
|
||||
] as const
|
||||
).map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setTab(t.key)}
|
||||
style={{
|
||||
padding: '9px 18px',
|
||||
borderRadius: 8,
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
color: tab === t.key ? 'var(--tx)' : 'var(--mut)',
|
||||
background: tab === t.key ? 'var(--bg3)' : 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === 'listings' && (
|
||||
<div>
|
||||
{loadingL && (
|
||||
<div style={{ padding: 48, textAlign: 'center', color: 'var(--mut)' }}>Loading…</div>
|
||||
)}
|
||||
{!loadingL && myListings.length === 0 && (
|
||||
<div
|
||||
style={{
|
||||
padding: 48,
|
||||
textAlign: 'center',
|
||||
color: 'var(--mut)',
|
||||
background: 'var(--bg2)',
|
||||
border: '1px solid var(--bd)',
|
||||
borderRadius: 'var(--radius)',
|
||||
}}
|
||||
>
|
||||
You have no listings yet.
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{myListings.map((l) => {
|
||||
const sc = STATUS_COLORS[l.data.isActive ? 'active' : 'inactive']
|
||||
const avail = l.data.quantity - l.data.quantityReserved
|
||||
return (
|
||||
<div
|
||||
key={l.address}
|
||||
style={{
|
||||
background: 'var(--bg2)',
|
||||
border: '1px solid var(--bd)',
|
||||
borderRadius: 'var(--radius)',
|
||||
padding: '18px 20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 18,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={() => router.push(`/listing/${l.address}`)}
|
||||
style={{ flex: 1, minWidth: 0, cursor: 'pointer' }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{ fontWeight: 600, fontSize: 15 }}>
|
||||
{l.data.metadataUri || abbrev(l.address)}
|
||||
</span>
|
||||
<Badge color={sc.color} bg={sc.bg}>
|
||||
{l.data.isActive ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: 'var(--mut)',
|
||||
marginTop: 4,
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}
|
||||
>
|
||||
#{String(l.data.listingId)} · {fmtSol(l.data.price)} · {avail}/
|
||||
{String(l.data.quantity)} avail · {String(l.data.quantityReserved)} pending
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
style={{ padding: '8px 14px', fontSize: 12.5 }}
|
||||
onClick={() => router.push(`/listing/create?edit=${l.address}`)}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
style={{ padding: '8px 14px', fontSize: 12.5 }}
|
||||
onClick={() => router.push(`/listing/${l.address}`)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'orders' && (
|
||||
<div>
|
||||
{loadingO && (
|
||||
<div style={{ padding: 48, textAlign: 'center', color: 'var(--mut)' }}>Loading…</div>
|
||||
)}
|
||||
{!loadingO && myOrders.length === 0 && (
|
||||
<div
|
||||
style={{
|
||||
padding: 48,
|
||||
textAlign: 'center',
|
||||
color: 'var(--mut)',
|
||||
background: 'var(--bg2)',
|
||||
border: '1px solid var(--bd)',
|
||||
borderRadius: 'var(--radius)',
|
||||
}}
|
||||
>
|
||||
You have no orders as a buyer.
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{myOrders.map((o) => (
|
||||
<div
|
||||
key={o.address}
|
||||
onClick={() => router.push(`/order/${o.address}`)}
|
||||
style={{
|
||||
background: 'var(--bg2)',
|
||||
border: '1px solid var(--bd)',
|
||||
borderRadius: 'var(--radius)',
|
||||
padding: '18px 20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 18,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: 15 }}>{abbrev(o.data.listing)}</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: 'var(--mut)',
|
||||
marginTop: 4,
|
||||
fontFamily: 'var(--font-mono)',
|
||||
}}
|
||||
>
|
||||
#{String(o.data.orderId)} · {fmtSol(o.data.amount)}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 11.5,
|
||||
fontWeight: 600,
|
||||
padding: '5px 13px',
|
||||
borderRadius: 999,
|
||||
background: 'var(--bg3)',
|
||||
color: 'var(--mut)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
#{String(o.data.escrowId)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
8
app/src/hooks/useMyListings.ts
Normal file
8
app/src/hooks/useMyListings.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { useWallet } from '@solana/connector/react'
|
||||
import { useListings } from './useListings'
|
||||
|
||||
export function useMyListings() {
|
||||
const { account } = useWallet()
|
||||
const { data: all = [], ...rest } = useListings()
|
||||
return { data: all.filter((l) => l.data.seller === account), ...rest }
|
||||
}
|
||||
19
app/src/hooks/useMyOrders.ts
Normal file
19
app/src/hooks/useMyOrders.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useCluster, useWallet } from '@solana/connector/react'
|
||||
import { createSolanaRpc } from '@solana/kit'
|
||||
import { fetchOrdersByBuyer } from '@solisting/sdk'
|
||||
import type { Address } from '@solisting/sdk'
|
||||
|
||||
export function useMyOrders() {
|
||||
const { account } = useWallet()
|
||||
const { cluster } = useCluster()
|
||||
return useQuery({
|
||||
queryKey: ['myOrders', account, cluster?.id],
|
||||
queryFn: () => {
|
||||
const rpc = createSolanaRpc(cluster!.url)
|
||||
return fetchOrdersByBuyer(rpc, account as Address)
|
||||
},
|
||||
enabled: !!account && !!cluster,
|
||||
refetchInterval: 30_000,
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user