x/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
nebula/_migrate/nfts.html

851 lines
30 KiB
HTML
Raw Permalink Normal View History

chore(init): Setup Makefile for build and test automation
2026-01-05 13:28:43 -05:00
<!DOCTYPE html>
<!--
================================================================================
TEMPL MIGRATION GUIDE: nfts.html → views/nfts.templ
================================================================================
PAGE OVERVIEW:
- NFT gallery view with grid layout and collection grouping
- Stats: Total NFTs, Estimated Value, Floor Value, Best Performer
- Collection cards showing grouped NFT holdings
- Filter tabs (All, Listed, Unlisted) with collection/sort dropdowns
- NFT cards with hover actions (Send, Hide) and badges (Listed, Rare)
- Grid/List view toggle
MAIN TEMPL COMPONENT:
templ NFTsPage(data NFTsData) {
@layouts.DashboardLayout("nfts") {
@PageHeader("NFTs", "Your digital collectibles portfolio")
@NFTsStatsGrid(data.Stats)
@CollectionsCard(data.Collections)
@NFTsGalleryCard(data.NFTs, data.Filter)
}
}
HTMX INTEGRATION:
- Filter tabs: hx-get="/nfts?filter=listed" hx-target="#nft-grid" hx-push-url="true"
- Collection filter: hx-get="/nfts?collection=bayc" hx-target="#nft-grid"
- Sort dropdown: hx-get="/nfts?sort=value-high" hx-target="#nft-grid"
- View toggle: hx-get="/nfts?view=list" hx-target="#nft-grid" (grid vs list)
- NFT card click: hx-get="/nfts/{id}/detail" hx-target="#dialog-container" (detail modal)
- Send NFT: hx-get="/drawers/send-nft?id={nft.ID}" hx-target="#drawer-container"
- Hide NFT: hx-post="/api/nfts/{id}/hide" hx-target="closest .nft-card" hx-swap="outerHTML"
- Import NFT: hx-get="/dialogs/import-nft" hx-target="#dialog-container"
SUB-COMPONENTS TO EXTRACT:
- NFTsStatsGrid(stats NFTStats)
- BestPerformerStat(nft NFTItem)
- CollectionsCard(collections []Collection)
- CollectionCard(collection Collection)
- NFTsGalleryCard(nfts []NFTItem, filter NFTFilter)
- NFTFilterBar(filter NFTFilter)
- ViewToggle(currentView string)
- NFTGrid(nfts []NFTItem)
- NFTCard(nft NFTItem)
- NFTBadge(type string) // "listed", "rare", etc.
- NFTActions(nftID string)
- NFTDetailDialog(nft NFTItem)
STATE/PROPS:
type NFTsData struct {
Stats NFTStats
Collections []Collection
NFTs []NFTItem
Filter NFTFilter
}
type NFTStats struct {
TotalNFTs int
EstimatedUSD float64
FloorETH float64
FloorUSD float64
BestPerformer *NFTItem
BestChange float64
}
type Collection struct {
ID string
Name string
ImageURL string
ItemCount int
FloorETH float64
TotalUSD float64
IsVerified bool
}
type NFTItem struct {
ID string
Name string
ImageURL string
CollectionName string
CollectionID string
IsVerified bool
FloorETH float64
ValueETH float64
IsListed bool
Rarity string // "rare", "common", etc.
}
type NFTFilter struct {
Tab string // "all", "listed", "unlisted"
Collection string
Sort string // "recent", "value-high", "value-low", "name"
View string // "grid", "list"
}
HTMX PATTERNS:
// Filter tabs with URL state
<wa-tab-group hx-on:wa-tab-show="
htmx.ajax('GET', '/nfts?filter=' + event.detail.name, {target: '#nft-grid', pushUrl: true})
">
// Collection filter dropdown
<wa-select hx-get="/nfts"
hx-target="#nft-grid"
hx-include="[name='filter'],[name='sort']"
name="collection">
// NFT card with hover actions
<div class="nft-card"
hx-get="/nfts/{nft.ID}/detail"
hx-target="#dialog-container"
hx-trigger="click">
<div class="nft-actions" hx-on:click="event.stopPropagation()">
<wa-icon-button hx-get="/drawers/send-nft?id={nft.ID}" hx-target="#drawer-container">
<wa-icon-button hx-post="/api/nfts/{nft.ID}/hide" hx-target="closest .nft-card" hx-swap="delete">
</div>
</div>
// View toggle (grid/list)
<wa-icon-button hx-get="/nfts?view=grid"
hx-target="#nft-grid"
hx-include="[name='filter'],[name='collection'],[name='sort']">
================================================================================
-->
<html lang="en" class="wa-cloak">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NFTs - Sonr Motr Wallet</title>
<script src="https://cdn.sonr.org/wa/autoloader.js"></script>
<style>
:root {
--wa-color-primary: #17c2ff;
}
html, body {
min-height: 100%;
padding: 0;
margin: 0;
}
.dashboard-layout {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
@media (max-width: 768px) {
.dashboard-layout {
grid-template-columns: 1fr;
}
.sidebar {
display: none;
}
}
.sidebar {
border-right: 1px solid var(--wa-color-neutral-200);
padding: var(--wa-space-m);
background: var(--wa-color-surface);
}
.sidebar-header {
padding: var(--wa-space-s) var(--wa-space-xs);
margin-bottom: var(--wa-space-m);
}
.sidebar-nav {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-nav li {
margin-bottom: var(--wa-space-2xs);
}
.sidebar-nav a {
display: flex;
align-items: center;
gap: var(--wa-space-s);
padding: var(--wa-space-s) var(--wa-space-m);
border-radius: var(--wa-radius-m);
text-decoration: none;
color: var(--wa-color-neutral-700);
font-size: var(--wa-font-size-s);
transition: background 0.15s;
}
.sidebar-nav a:hover {
background: var(--wa-color-surface-alt);
}
.sidebar-nav a.active {
background: var(--wa-color-primary-subtle);
color: var(--wa-color-primary);
font-weight: 500;
}
.main-content {
padding: var(--wa-space-xl);
background: var(--wa-color-surface-alt);
overflow-y: auto;
}
.page-header {
margin-bottom: var(--wa-space-xl);
}
.stats-grid {
--min-column-size: 180px;
margin-bottom: var(--wa-space-xl);
}
.stat-card {
background: var(--wa-color-surface);
}
.filter-bar {
display: flex;
align-items: center;
gap: var(--wa-space-m);
margin-bottom: var(--wa-space-l);
flex-wrap: wrap;
}
.view-toggle {
display: flex;
gap: var(--wa-space-2xs);
}
.nft-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--wa-space-l);
}
.nft-card {
background: var(--wa-color-surface);
border-radius: var(--wa-radius-l);
overflow: hidden;
transition: transform 0.15s, box-shadow 0.15s;
cursor: pointer;
}
.nft-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.nft-image {
position: relative;
aspect-ratio: 1;
background: var(--wa-color-neutral-100);
overflow: hidden;
}
.nft-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nft-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--wa-color-neutral-200), var(--wa-color-neutral-100));
}
.nft-badge {
position: absolute;
top: var(--wa-space-s);
right: var(--wa-space-s);
}
.nft-actions {
position: absolute;
bottom: var(--wa-space-s);
right: var(--wa-space-s);
display: flex;
gap: var(--wa-space-2xs);
opacity: 0;
transition: opacity 0.15s;
}
.nft-card:hover .nft-actions {
opacity: 1;
}
.nft-actions wa-icon-button {
background: var(--wa-color-surface);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.nft-info {
padding: var(--wa-space-m);
}
.nft-collection {
display: flex;
align-items: center;
gap: var(--wa-space-2xs);
margin-bottom: var(--wa-space-2xs);
}
.nft-collection-name {
font-size: var(--wa-font-size-xs);
color: var(--wa-color-neutral-500);
}
.nft-name {
font-weight: 600;
margin-bottom: var(--wa-space-s);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nft-price-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.nft-floor {
font-size: var(--wa-font-size-xs);
color: var(--wa-color-neutral-500);
}
.nft-value {
font-weight: 600;
color: var(--wa-color-primary);
}
.collection-card {
display: flex;
align-items: center;
gap: var(--wa-space-m);
padding: var(--wa-space-m);
background: var(--wa-color-surface);
border-radius: var(--wa-radius-m);
cursor: pointer;
transition: background 0.15s;
}
.collection-card:hover {
background: var(--wa-color-surface-alt);
}
.collection-avatar {
width: 48px;
height: 48px;
border-radius: var(--wa-radius-m);
overflow: hidden;
background: var(--wa-color-neutral-100);
}
.collection-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.empty-state {
text-align: center;
padding: var(--wa-space-3xl);
color: var(--wa-color-neutral-500);
}
.hidden-badge {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
</head>
<body>
<wa-page>
<div class="dashboard-layout">
<aside class="sidebar">
<div class="sidebar-header">
<div class="wa-cluster wa-gap-s">
<wa-avatar initials="S" style="--size: 32px; background: var(--wa-color-primary);"></wa-avatar>
<div class="wa-stack wa-gap-0">
<span class="wa-heading-s">Sonr Wallet</span>
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">sonr1x9f...7k2m</span>
</div>
</div>
</div>
<nav>
<ul class="sidebar-nav">
<li>
<a href="accounts.html">
<wa-icon name="wallet"></wa-icon>
Accounts
</a>
</li>
<li>
<a href="transactions.html">
<wa-icon name="arrow-right-arrow-left"></wa-icon>
Transactions
</a>
</li>
<li>
<a href="tokens.html">
<wa-icon name="coins"></wa-icon>
Tokens
</a>
</li>
<li>
<a href="nfts.html" class="active">
<wa-icon name="image"></wa-icon>
NFTs
</a>
</li>
<li>
<a href="activity.html">
<wa-icon name="chart-line"></wa-icon>
Activity
</a>
</li>
</ul>
</nav>
<wa-divider style="margin: var(--wa-space-l) 0;"></wa-divider>
<ul class="sidebar-nav">
<li>
<a href="connections.html">
<wa-icon name="plug"></wa-icon>
Connections
</a>
</li>
<li>
<a href="device.html">
<wa-icon name="mobile"></wa-icon>
Devices
</a>
</li>
<li>
<a href="service.html">
<wa-icon name="server"></wa-icon>
Services
</a>
</li>
<li>
<a href="settings.html">
<wa-icon name="gear"></wa-icon>
Settings
</a>
</li>
</ul>
</aside>
<main class="main-content">
<header class="page-header">
<div class="wa-flank">
<div class="wa-stack wa-gap-2xs">
<span class="wa-heading-xl">NFTs</span>
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Your digital collectibles portfolio</span>
</div>
<div class="wa-cluster wa-gap-s">
<wa-button variant="neutral" appearance="outlined" size="small">
<wa-icon slot="start" name="eye-slash"></wa-icon>
Hidden (2)
</wa-button>
<wa-button variant="brand" size="small">
<wa-icon slot="start" name="plus"></wa-icon>
Import NFT
</wa-button>
</div>
</div>
</header>
<div class="wa-grid stats-grid">
<wa-card class="stat-card">
<div class="wa-stack wa-gap-3xs">
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Total NFTs</span>
<span class="wa-heading-2xl">12</span>
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">across 5 collections</span>
</div>
</wa-card>
<wa-card class="stat-card">
<div class="wa-stack wa-gap-3xs">
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Estimated Value</span>
<span class="wa-heading-2xl">
<wa-format-number type="currency" currency="USD" value="8420.50" lang="en-US"></wa-format-number>
</span>
<span class="wa-caption-s" style="color: var(--wa-color-success);">
<wa-icon name="arrow-trend-up" style="font-size: 12px;"></wa-icon>
+12.4% this week
</span>
</div>
</wa-card>
<wa-card class="stat-card">
<div class="wa-stack wa-gap-3xs">
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Floor Value</span>
<span class="wa-heading-2xl">4.2 ETH</span>
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">$9,851.40</span>
</div>
</wa-card>
<wa-card class="stat-card">
<div class="wa-stack wa-gap-3xs">
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Best Performer</span>
<div class="wa-cluster wa-gap-xs">
<wa-avatar initials="B" style="--size: 24px; background: #ff6b6b;"></wa-avatar>
<span class="wa-heading-s">Bored Ape #4521</span>
</div>
<span class="wa-caption-s" style="color: var(--wa-color-success);">+45% this month</span>
</div>
</wa-card>
</div>
<wa-card style="margin-bottom: var(--wa-space-xl);">
<div slot="header" class="wa-flank">
<span class="wa-heading-m">Collections</span>
<a href="#" class="wa-caption-s" style="color: var(--wa-color-primary);">View All</a>
</div>
<div class="wa-grid" style="--min-column-size: 280px;">
<div class="collection-card">
<div class="collection-avatar">
<img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=100&h=100&fit=crop" alt="Bored Apes">
</div>
<div class="wa-stack wa-gap-0" style="flex: 1;">
<div class="wa-cluster wa-gap-2xs">
<span class="wa-heading-s">Bored Ape Yacht Club</span>
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 14px;"></wa-icon>
</div>
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">3 items • Floor: 28.5 ETH</span>
</div>
<span class="wa-heading-s">$198,450</span>
</div>
<div class="collection-card">
<div class="collection-avatar">
<img src="https://images.unsplash.com/photo-1634973357973-f2ed2657db3c?w=100&h=100&fit=crop" alt="Azuki">
</div>
<div class="wa-stack wa-gap-0" style="flex: 1;">
<div class="wa-cluster wa-gap-2xs">
<span class="wa-heading-s">Azuki</span>
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 14px;"></wa-icon>
</div>
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">2 items • Floor: 8.2 ETH</span>
</div>
<span class="wa-heading-s">$38,420</span>
</div>
<div class="collection-card">
<div class="collection-avatar">
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=100&h=100&fit=crop" alt="Sonr Genesis">
</div>
<div class="wa-stack wa-gap-0" style="flex: 1;">
<div class="wa-cluster wa-gap-2xs">
<span class="wa-heading-s">Sonr Genesis</span>
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 14px;"></wa-icon>
</div>
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">5 items • Floor: 0.8 ETH</span>
</div>
<span class="wa-heading-s">$9,380</span>
</div>
<div class="collection-card">
<div class="collection-avatar" style="display: flex; align-items: center; justify-content: center;">
<wa-icon name="palette" style="color: var(--wa-color-neutral-400);"></wa-icon>
</div>
<div class="wa-stack wa-gap-0" style="flex: 1;">
<span class="wa-heading-s">Art Blocks Curated</span>
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">2 items • Floor: 1.2 ETH</span>
</div>
<span class="wa-heading-s">$5,620</span>
</div>
</div>
</wa-card>
<wa-card>
<div class="filter-bar">
<wa-tab-group style="flex: 1;">
<wa-tab panel="all">All NFTs</wa-tab>
<wa-tab panel="listed">Listed</wa-tab>
<wa-tab panel="unlisted">Unlisted</wa-tab>
</wa-tab-group>
<wa-select placeholder="All Collections" size="small" style="min-width: 160px;" clearable>
<wa-option value="bayc">Bored Ape Yacht Club</wa-option>
<wa-option value="azuki">Azuki</wa-option>
<wa-option value="sonr">Sonr Genesis</wa-option>
<wa-option value="artblocks">Art Blocks Curated</wa-option>
</wa-select>
<wa-select placeholder="Sort by" value="recent" size="small" style="min-width: 140px;">
<wa-option value="recent">Recently Added</wa-option>
<wa-option value="value-high">Value: High to Low</wa-option>
<wa-option value="value-low">Value: Low to High</wa-option>
<wa-option value="name">Name A-Z</wa-option>
</wa-select>
<div class="view-toggle">
<wa-tooltip content="Grid View">
<wa-icon-button name="grid-2" label="Grid view" variant="solid"></wa-icon-button>
</wa-tooltip>
<wa-tooltip content="List View">
<wa-icon-button name="list" label="List view"></wa-icon-button>
</wa-tooltip>
</div>
</div>
<div class="nft-grid">
<div class="nft-card">
<div class="nft-image">
<img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=400&h=400&fit=crop" alt="Bored Ape #4521">
<div class="nft-badge">
<wa-badge variant="success" pill>Listed</wa-badge>
</div>
<div class="nft-actions">
<wa-tooltip content="Send">
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
</wa-tooltip>
<wa-tooltip content="Hide">
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
</wa-tooltip>
</div>
</div>
<div class="nft-info">
<div class="nft-collection">
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
<span class="nft-collection-name">Bored Ape Yacht Club</span>
</div>
<div class="nft-name">Bored Ape #4521</div>
<div class="nft-price-row">
<span class="nft-floor">Floor: 28.5 ETH</span>
<span class="nft-value">32.0 ETH</span>
</div>
</div>
</div>
<div class="nft-card">
<div class="nft-image">
<img src="https://images.unsplash.com/photo-1634973357973-f2ed2657db3c?w=400&h=400&fit=crop" alt="Azuki #8234">
<div class="nft-actions">
<wa-tooltip content="Send">
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
</wa-tooltip>
<wa-tooltip content="Hide">
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
</wa-tooltip>
</div>
</div>
<div class="nft-info">
<div class="nft-collection">
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
<span class="nft-collection-name">Azuki</span>
</div>
<div class="nft-name">Azuki #8234</div>
<div class="nft-price-row">
<span class="nft-floor">Floor: 8.2 ETH</span>
<span class="nft-value">9.5 ETH</span>
</div>
</div>
</div>
<div class="nft-card">
<div class="nft-image">
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=400&fit=crop" alt="Sonr Genesis #001">
<div class="nft-badge">
<wa-badge variant="brand" pill>Rare</wa-badge>
</div>
<div class="nft-actions">
<wa-tooltip content="Send">
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
</wa-tooltip>
<wa-tooltip content="Hide">
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
</wa-tooltip>
</div>
</div>
<div class="nft-info">
<div class="nft-collection">
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
<span class="nft-collection-name">Sonr Genesis</span>
</div>
<div class="nft-name">Sonr Genesis #001</div>
<div class="nft-price-row">
<span class="nft-floor">Floor: 0.8 ETH</span>
<span class="nft-value">2.5 ETH</span>
</div>
</div>
</div>
<div class="nft-card">
<div class="nft-image">
<img src="https://images.unsplash.com/photo-1642388738915-eb2c06012af6?w=400&h=400&fit=crop" alt="Sonr Genesis #042">
<div class="nft-actions">
<wa-tooltip content="Send">
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
</wa-tooltip>
<wa-tooltip content="Hide">
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
</wa-tooltip>
</div>
</div>
<div class="nft-info">
<div class="nft-collection">
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
<span class="nft-collection-name">Sonr Genesis</span>
</div>
<div class="nft-name">Sonr Genesis #042</div>
<div class="nft-price-row">
<span class="nft-floor">Floor: 0.8 ETH</span>
<span class="nft-value">0.95 ETH</span>
</div>
</div>
</div>
<div class="nft-card">
<div class="nft-image">
<img src="https://images.unsplash.com/photo-1633101585272-9511440abd03?w=400&h=400&fit=crop" alt="Art Blocks #7821">
<div class="nft-actions">
<wa-tooltip content="Send">
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
</wa-tooltip>
<wa-tooltip content="Hide">
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
</wa-tooltip>
</div>
</div>
<div class="nft-info">
<div class="nft-collection">
<span class="nft-collection-name">Art Blocks Curated</span>
</div>
<div class="nft-name">Chromie Squiggle #7821</div>
<div class="nft-price-row">
<span class="nft-floor">Floor: 1.2 ETH</span>
<span class="nft-value">1.8 ETH</span>
</div>
</div>
</div>
<div class="nft-card">
<div class="nft-image">
<img src="https://images.unsplash.com/photo-1639762681485-074b7f938ba0?w=400&h=400&fit=crop" alt="Bored Ape #2187">
<div class="nft-actions">
<wa-tooltip content="Send">
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
</wa-tooltip>
<wa-tooltip content="Hide">
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
</wa-tooltip>
</div>
</div>
<div class="nft-info">
<div class="nft-collection">
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
<span class="nft-collection-name">Bored Ape Yacht Club</span>
</div>
<div class="nft-name">Bored Ape #2187</div>
<div class="nft-price-row">
<span class="nft-floor">Floor: 28.5 ETH</span>
<span class="nft-value">30.2 ETH</span>
</div>
</div>
</div>
<div class="nft-card">
<div class="nft-image">
<img src="https://images.unsplash.com/photo-1644361567152-8a09a9a3fbfb?w=400&h=400&fit=crop" alt="Azuki #5102">
<div class="nft-actions">
<wa-tooltip content="Send">
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
</wa-tooltip>
<wa-tooltip content="Hide">
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
</wa-tooltip>
</div>
</div>
<div class="nft-info">
<div class="nft-collection">
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
<span class="nft-collection-name">Azuki</span>
</div>
<div class="nft-name">Azuki #5102</div>
<div class="nft-price-row">
<span class="nft-floor">Floor: 8.2 ETH</span>
<span class="nft-value">8.5 ETH</span>
</div>
</div>
</div>
<div class="nft-card">
<div class="nft-image">
<img src="https://images.unsplash.com/photo-1635322966219-b75ed372eb01?w=400&h=400&fit=crop" alt="Sonr Genesis #128">
<div class="nft-actions">
<wa-tooltip content="Send">
<wa-icon-button name="paper-plane" label="Send"></wa-icon-button>
</wa-tooltip>
<wa-tooltip content="Hide">
<wa-icon-button name="eye-slash" label="Hide"></wa-icon-button>
</wa-tooltip>
</div>
</div>
<div class="nft-info">
<div class="nft-collection">
<wa-icon name="badge-check" variant="solid" style="color: var(--wa-color-primary); font-size: 12px;"></wa-icon>
<span class="nft-collection-name">Sonr Genesis</span>
</div>
<div class="nft-name">Sonr Genesis #128</div>
<div class="nft-price-row">
<span class="nft-floor">Floor: 0.8 ETH</span>
<span class="nft-value">0.85 ETH</span>
</div>
</div>
</div>
</div>
</wa-card>
</main>
</div>
</wa-page>
<script>
document.querySelectorAll('.sidebar-nav a').forEach(link => {
link.addEventListener('click', function(e) {
if (this.getAttribute('href') === '#') {
e.preventDefault();
}
});
});
document.querySelectorAll('.nft-card').forEach(card => {
card.addEventListener('click', function(e) {
if (e.target.closest('wa-icon-button')) return;
console.log('Open NFT detail view');
});
});
</script>
</body>
</html>
Reference in New Issue Copy Permalink