feat: create/update/close listing write transactions

app/src/app/listing/[pk]/page.tsx

@@ -1,18 +1,34 @@
 'use client'
 
 import { use } from 'react'
-import { useWallet } from '@solana/connector/react'
+import { useRouter } from 'next/navigation'
+import { useWallet, useKitTransactionSigner } from '@solana/connector/react'
 import { ListingDetail } from '@/components/ListingDetail'
+import { useTx } from '@/hooks/useTx'
+import { getCloseListingInstruction } from '@solisting/sdk'
 import type { Address } from '@solisting/sdk'
 
 export default function ListingPage({ params }: { params: Promise<{ pk: string }> }) {
   const { pk } = use(params)
+  const router = useRouter()
   const { account } = useWallet()
+  const { signer } = useKitTransactionSigner()
+  const sendTx = useTx()
+
+  async function handleClose() {
+    if (!signer) return
+    const ix = getCloseListingInstruction({ seller: signer, listingAccount: pk as Address })
+    await sendTx([ix as never], [['listings'], ['listing', pk]], 'close_listing')
+    router.push('/listings')
+  }
 
   return (
     <ListingDetail
       pk={pk as Address}
       walletAddress={account ?? null}
+      onUpdate={() => router.push(`/listing/create?edit=${pk}`)}
+      onClose={handleClose}
+      onPlaceOrder={() => {}}
     />
   )
 }

app/src/app/listing/create/page.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { Suspense } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { CreateListingForm } from '@/components/CreateListingForm'
+import type { Address } from '@solisting/sdk'
+
+function CreateOrEdit() {
+  const searchParams = useSearchParams()
+  const editPk = searchParams.get('edit') as Address | null
+  return <CreateListingForm editPk={editPk ?? undefined} />
+}
+
+export default function CreateListingPage() {
+  return (
+    <Suspense>
+      <CreateOrEdit />
+    </Suspense>
+  )
+}

app/src/components/CreateListingForm.tsx

@@ -0,0 +1,255 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useKitTransactionSigner, useWallet } from '@solana/connector/react'
+import { isSome } from '@solana/kit'
+import { useTx } from '@/hooks/useTx'
+import { useListing } from '@/hooks/useListing'
+import { Button } from '@/components/ui/Button'
+import { useToast } from '@/components/ui/Toast'
+import {
+  getCreateListingInstructionAsync,
+  getUpdateListingInstruction,
+} from '@solisting/sdk'
+import type { Address } from '@solisting/sdk'
+
+interface FormState {
+  price: string
+  quantity: string
+  oracle: string
+  metadataUri: string
+}
+
+function blank(): FormState {
+  return { price: '', quantity: '', oracle: '', metadataUri: '' }
+}
+
+interface Props {
+  editPk?: Address
+}
+
+export function CreateListingForm({ editPk }: Props) {
+  const router = useRouter()
+  const { signer } = useKitTransactionSigner()
+  const { account } = useWallet()
+  const sendTx = useTx()
+  const toast = useToast()
+
+  const { data: existing } = useListing(editPk ?? ('' as Address))
+  const [form, setForm] = useState<FormState>(blank())
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [initialized, setInitialized] = useState(false)
+
+  const isUpdate = !!editPk
+
+  if (!initialized && existing && isUpdate) {
+    setInitialized(true)
+    const d = existing.data
+    setForm({
+      price: (Number(d.price) / 1e9).toString(),
+      quantity: String(d.quantity),
+      oracle: isSome(d.canonicalOracle) ? d.canonicalOracle.value : '',
+      metadataUri: d.metadataUri ?? '',
+    })
+  }
+
+  function set(key: keyof FormState) {
+    return (e: React.ChangeEvent<HTMLInputElement>) =>
+      setForm((f) => ({ ...f, [key]: e.target.value }))
+  }
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!signer || !account) {
+      setError('Connect your wallet first.')
+      return
+    }
+    setError(null)
+    setLoading(true)
+    try {
+      const priceN = parseFloat(form.price)
+      if (isNaN(priceN) || priceN <= 0) throw new Error('Invalid price')
+      const priceLamports = BigInt(Math.round(priceN * 1e9))
+      const quantityN = parseInt(form.quantity, 10)
+      if (isNaN(quantityN) || quantityN <= 0) throw new Error('Invalid quantity')
+      const canonicalOracle = form.oracle ? (form.oracle as Address) : null
+
+      if (isUpdate && editPk) {
+        const existingData = existing?.data
+        const ix = getUpdateListingInstruction({
+          seller: signer,
+          listingAccount: editPk,
+          canonicalCurrency: existingData?.canonicalCurrency ?? { __kind: 'Sol' },
+          price: priceLamports,
+          canonicalOracle,
+          altCurrencies: existingData?.altCurrencies ?? [],
+          acceptedResolvers: existingData?.acceptedResolvers ?? [],
+          quantity: quantityN,
+          metadataUri: form.metadataUri,
+        })
+        await sendTx(
+          [ix as never],
+          [['listings'], ['listing', editPk]],
+          'update_listing',
+        )
+      } else {
+        const listingId = BigInt(Date.now())
+        const ix = await getCreateListingInstructionAsync({
+          seller: signer,
+          listingId,
+          canonicalCurrency: { __kind: 'Sol' },
+          price: priceLamports,
+          canonicalOracle,
+          altCurrencies: [],
+          acceptedResolvers: [],
+          quantity: quantityN,
+          metadataUri: form.metadataUri,
+        })
+        await sendTx([ix as never], [['listings']], 'create_listing')
+        router.push('/listings')
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const LABEL_STYLE = {
+    display: 'block',
+    fontSize: 12,
+    fontWeight: 600,
+    color: 'var(--mut)',
+    marginBottom: 8,
+    letterSpacing: '.04em',
+  } as const
+  const INPUT_STYLE = {
+    width: '100%',
+    height: 42,
+    padding: '0 13px',
+    background: 'var(--bg3)',
+    border: '1px solid var(--bd)',
+    borderRadius: 10,
+    fontSize: 13,
+    outline: 'none',
+    color: 'inherit',
+    boxSizing: 'border-box' as const,
+  } as const
+
+  return (
+    <div style={{ maxWidth: 640, margin: '0 auto' }}>
+      <button
+        onClick={() => router.back()}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 6,
+          color: 'var(--mut)',
+          fontSize: 13,
+          fontWeight: 500,
+          marginBottom: 18,
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+        }}
+      >
+        ← Cancel
+      </button>
+      <h1 style={{ margin: 0, fontSize: 26, fontWeight: 700, letterSpacing: '-.02em' }}>
+        {isUpdate ? 'Update Listing' : 'Create Listing'}
+      </h1>
+      <p style={{ margin: '6px 0 26px', fontSize: 13, color: 'var(--mut)' }}>
+        {isUpdate
+          ? `Editing listing ${editPk?.slice(0, 8)}…`
+          : 'New SOL-priced listing on the solisting program'}
+      </p>
+
+      <form
+        onSubmit={submit}
+        style={{
+          background: 'var(--bg2)',
+          border: '1px solid var(--bd)',
+          borderRadius: 'var(--radius)',
+          padding: '26px 28px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 22,
+        }}
+      >
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+          <div>
+            <label style={LABEL_STYLE}>PRICE (SOL)</label>
+            <input value={form.price} onChange={set('price')} placeholder="0.00" style={INPUT_STYLE} />
+          </div>
+          <div>
+            <label style={LABEL_STYLE}>QUANTITY</label>
+            <input value={form.quantity} onChange={set('quantity')} placeholder="0" style={INPUT_STYLE} />
+          </div>
+        </div>
+
+        <div>
+          <label style={LABEL_STYLE}>
+            CANONICAL ORACLE{' '}
+            <span style={{ fontWeight: 400, textTransform: 'none' }}>(optional · Pyth V2 feed)</span>
+          </label>
+          <input
+            value={form.oracle}
+            onChange={set('oracle')}
+            placeholder="Pyth price feed pubkey — leave empty for $1.00 stablecoin"
+            style={INPUT_STYLE}
+          />
+        </div>
+
+        <div>
+          <label style={LABEL_STYLE}>
+            METADATA URI{' '}
+            <span style={{ fontWeight: 400, textTransform: 'none' }}>(max 256 chars)</span>
+          </label>
+          <input
+            value={form.metadataUri}
+            onChange={set('metadataUri')}
+            placeholder="ipfs://… or https://…"
+            style={INPUT_STYLE}
+          />
+        </div>
+
+        {error && (
+          <div
+            style={{
+              color: 'var(--danger)',
+              fontSize: 13,
+              padding: '10px 12px',
+              background: 'var(--dangerSoft)',
+              borderRadius: 8,
+            }}
+          >
+            {error}
+          </div>
+        )}
+
+        <div
+          style={{
+            display: 'flex',
+            gap: 10,
+            borderTop: '1px solid var(--bdSoft)',
+            paddingTop: 20,
+          }}
+        >
+          <Button type="submit" disabled={loading} style={{ flex: 1, padding: 13, fontSize: 14 }}>
+            {loading ? 'Sending…' : isUpdate ? 'Update Listing' : 'Create Listing'}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => router.back()}
+            style={{ padding: '13px 22px', fontSize: 14 }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  )
+}