851 lines
30 KiB
HTML
851 lines
30 KiB
HTML
<!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>
|