Broker contact flow for Punk marketplace status

punks.auction/.env.example

@@ -10,3 +10,9 @@ NUXT_PUBLIC_EVM_WALLET_CONNECT_PROJECT_ID=
 # Public indexer base URL (Ponder/Postgres GraphQL endpoint). Defaults to the
 # shared production indexer in nuxt.config.ts; override per environment.
 NUXT_PUBLIC_INDEXER_URL=https://indexer.punksmarket.app
+
+# Broker brand shown in the "branded" Contact-broker preview. Defaults to
+# "Canon" in nuxt.config.ts. NUXT_PUBLIC_BROKER_LOGO is inline SVG markup —
+# use fill="currentColor" so it inherits the surrounding text color.
+NUXT_PUBLIC_BROKER_NAME=Canon
+NUXT_PUBLIC_BROKER_LOGO=<svg viewBox="0 0 234 45" xmlns="http://www.w3.org/2000/svg"><path d="..." fill="currentColor"/></svg>

punks.auction/app/components/Punk/Detail/Market.vue

@@ -15,6 +15,35 @@
         class="market-panel"
       >
         <dl class="state-grid">
+          <div class="state-cell">
+            <dt class="label">Top bid</dt>
+            <dd v-if="activeBid">
+              <EthAmount :wei="activeBid.valueWei" />
+              <span class="dim"> by </span>
+              <NuxtLink :to="`/profile/${activeBid.bidder}`">
+                <Account :address="activeBid.bidder" />
+              </NuxtLink>
+            </dd>
+            <dd
+              v-else
+              class="muted"
+            >
+              None
+            </dd>
+
+            <div
+              v-if="!isOwner"
+              class="cell-action"
+            >
+              <LazyPunkDetailMarketBidForm
+                :punk-id="punkId"
+                :current-bid="activeBid"
+                :primary="!liveListing"
+                @placed="onChanged"
+              />
+            </div>
+          </div>
+
           <div class="state-cell">
             <dt class="label">Listing</dt>
             <dd v-if="liveListing">
@@ -32,23 +61,17 @@
             >
               Not for sale
             </dd>
-          </div>
 
-          <div class="state-cell">
-            <dt class="label">Top bid</dt>
-            <dd v-if="activeBid">
-              <EthAmount :wei="activeBid.valueWei" />
-              <span class="dim"> by </span>
-              <NuxtLink :to="`/profile/${activeBid.bidder}`">
-                <Account :address="activeBid.bidder" />
-              </NuxtLink>
-            </dd>
-            <dd
-              v-else
-              class="muted"
+            <p
+              v-if="ownerLastActiveAgo"
+              class="last-active"
             >
-              None
-            </dd>
+              Wallet last active {{ ownerLastActiveAgo }}
+            </p>
+
+            <div class="cell-action">
+              <LazyPunkDetailMarketBrokerContact :punk-id="punkId" />
+            </div>
           </div>
         </dl>
 
@@ -123,20 +146,12 @@
               .
             </p>
 
-            <div class="action-group">
-              <LazyPunkDetailMarketBidForm
-                :punk-id="punkId"
-                :current-bid="activeBid"
-                :primary="!liveListing"
-                @placed="onChanged"
-              />
-              <Button
-                v-if="isHighBidder"
-                @click="actWithdrawBid"
-              >
-                Withdraw bid
-              </Button>
-            </div>
+            <Button
+              v-if="isHighBidder"
+              @click="actWithdrawBid"
+            >
+              Withdraw bid
+            </Button>
           </template>
         </div>
       </div>
@@ -228,6 +243,26 @@ const canBuy = computed(() => {
   )
 })
 
+// Owner's wallet last-active, sourced from the indexer's tx-from tracking, so a
+// broker can gauge how reachable the holder is. Custody set covers vault/stash;
+// the EOA drives the last-active lookup.
+const ownerAddresses = computed<Address[]>(() => {
+  const set = new Set<Address>()
+  if (resolvedOwner.value) set.add(resolvedOwner.value)
+  if (nativeOwner.value) set.add(nativeOwner.value)
+  return [...set]
+})
+const { stats: ownerStats } = useAccountStats({
+  addresses: ownerAddresses,
+  eoa: () => resolvedOwner.value ?? undefined,
+})
+const ownerLastActiveIso = computed(() =>
+  ownerStats.value.lastActiveAt
+    ? new Date(ownerStats.value.lastActiveAt * 1000).toISOString()
+    : undefined,
+)
+const ownerLastActiveAgo = useTimeAgo(ownerLastActiveIso)
+
 let refreshToken = 0
 
 async function refresh() {
@@ -386,6 +421,16 @@ function sameAddress(a?: Address | string | null, b?: Address | string | null) {
   border: 0;
 }
 
+.last-active {
+  margin: var(--size-1) 0 0;
+  font-size: var(--font-xs);
+  color: var(--text-dim);
+}
+
+.cell-action {
+  margin-top: var(--size-4);
+}
+
 .label {
   margin-bottom: var(--size-1);
   color: var(--text-dim);
@@ -404,8 +449,6 @@ function sameAddress(a?: Address | string | null, b?: Address | string | null) {
   align-items: center;
   gap: var(--size-2);
   flex-wrap: wrap;
-  padding-top: var(--size-3);
-  border-top: var(--border);
 }
 
 .action-group {