861 lines
33 KiB
HTML
861 lines
33 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--
|
||
|
|
================================================================================
|
||
|
|
TEMPL MIGRATION GUIDE: connections.html → views/connections.templ
|
||
|
|
================================================================================
|
||
|
|
|
||
|
|
PAGE OVERVIEW:
|
||
|
|
- Connected apps management with detailed analytics cards
|
||
|
|
- Stats: Connected Apps count, Signatures (30d), Transactions (30d), Last Activity
|
||
|
|
- App cards showing session activity %, signatures, permission usage, scopes
|
||
|
|
- Manage dialog for editing permissions
|
||
|
|
- Disconnect confirmation dialog
|
||
|
|
|
||
|
|
MAIN TEMPL COMPONENT:
|
||
|
|
templ ConnectionsPage(data ConnectionsData) {
|
||
|
|
@layouts.DashboardLayout("connections") {
|
||
|
|
@PageHeader("Connections", "Manage applications connected to your wallet")
|
||
|
|
@ConnectionsStatsGrid(data.Stats)
|
||
|
|
@ConnectedAppsGrid(data.Apps)
|
||
|
|
}
|
||
|
|
@ManageConnectionDialog()
|
||
|
|
@DisconnectConfirmDialog()
|
||
|
|
}
|
||
|
|
|
||
|
|
HTMX INTEGRATION:
|
||
|
|
- Disconnect app: hx-delete="/api/connections/{app.ID}" hx-target="closest .app-card" hx-swap="delete"
|
||
|
|
- Manage dialog: hx-get="/connections/{app.ID}/manage" hx-target="#manage-dialog-content"
|
||
|
|
- Update permissions: hx-post="/api/connections/{app.ID}/permissions" hx-include="[name^='scope-']"
|
||
|
|
- Revoke OAuth client: hx-delete="/api/oauth/clients/{clientID}" hx-target="closest .oauth-client-card"
|
||
|
|
- Stats refresh: hx-get="/api/connections/stats" hx-trigger="every 60s" hx-target="#stats-grid"
|
||
|
|
|
||
|
|
SUB-COMPONENTS TO EXTRACT:
|
||
|
|
- ConnectionsStatsGrid(stats ConnectionStats)
|
||
|
|
- ConnectedAppsGrid(apps []ConnectedApp)
|
||
|
|
- ConnectedAppCard(app ConnectedApp)
|
||
|
|
- AppHeader(app AppInfo, showDetails bool)
|
||
|
|
- SessionActivityRing(percent int, trend string, trendValue string)
|
||
|
|
- SignatureCount(count int, status string)
|
||
|
|
- PermissionUsage(used int, total int)
|
||
|
|
- AppMetadata(connectedAt time.Time, lastUsed time.Time, txCount int)
|
||
|
|
- ScopeTagList(scopes []Scope)
|
||
|
|
- ScopeTag(scope Scope)
|
||
|
|
- ManageConnectionDialog(app ConnectedApp)
|
||
|
|
- PermissionCheckbox(scope Scope, enabled bool)
|
||
|
|
- DisconnectConfirmDialog(appName string)
|
||
|
|
|
||
|
|
STATE/PROPS:
|
||
|
|
type ConnectionsData struct {
|
||
|
|
Stats ConnectionStats
|
||
|
|
Apps []ConnectedApp
|
||
|
|
}
|
||
|
|
|
||
|
|
type ConnectionStats struct {
|
||
|
|
ConnectedApps int
|
||
|
|
Signatures30d int
|
||
|
|
Transactions30d int
|
||
|
|
LastActivity time.Time
|
||
|
|
}
|
||
|
|
|
||
|
|
type ConnectedApp struct {
|
||
|
|
ID string
|
||
|
|
Name string
|
||
|
|
Domain string
|
||
|
|
LogoColor string
|
||
|
|
IconName string
|
||
|
|
IsVerified bool
|
||
|
|
SessionActivity int // Percentage
|
||
|
|
ActivityTrend string // "up", "down"
|
||
|
|
TrendValue string // "+15%", "-5%"
|
||
|
|
SignatureCount int
|
||
|
|
Status string // "active", "idle"
|
||
|
|
PermissionsUsed int
|
||
|
|
PermissionsTotal int
|
||
|
|
ConnectedAt time.Time
|
||
|
|
LastUsed time.Time
|
||
|
|
TxApproved int
|
||
|
|
Scopes []Scope
|
||
|
|
}
|
||
|
|
|
||
|
|
type Scope struct {
|
||
|
|
Name string // "wallet:read", "wallet:sign", etc.
|
||
|
|
Type string // "read", "write", "sign"
|
||
|
|
Description string
|
||
|
|
Enabled bool
|
||
|
|
}
|
||
|
|
|
||
|
|
HTMX PATTERNS:
|
||
|
|
// App card with expand/manage
|
||
|
|
<wa-button hx-get="/connections/{app.ID}/manage"
|
||
|
|
hx-target="#manage-dialog-content"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
onclick="document.getElementById('manage-dialog').open = true">
|
||
|
|
|
||
|
|
// Disconnect with confirmation
|
||
|
|
<wa-button hx-delete="/api/connections/{app.ID}"
|
||
|
|
hx-target="closest .app-card"
|
||
|
|
hx-swap="delete"
|
||
|
|
hx-confirm="Disconnect {app.Name}?">
|
||
|
|
|
||
|
|
// Permission toggle in manage dialog
|
||
|
|
<wa-checkbox hx-post="/api/connections/{app.ID}/scopes"
|
||
|
|
hx-include="this"
|
||
|
|
hx-target="#permission-status"
|
||
|
|
name="scope-wallet:read">
|
||
|
|
|
||
|
|
// Revoke all permissions (disconnect via dialog)
|
||
|
|
<wa-button hx-delete="/api/connections/{app.ID}"
|
||
|
|
hx-target="#manage-dialog"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
hx-on::after-request="document.getElementById('manage-dialog').open = false">
|
||
|
|
|
||
|
|
// Activity stats auto-refresh
|
||
|
|
<div id="stats-grid"
|
||
|
|
hx-get="/api/connections/stats"
|
||
|
|
hx-trigger="every 60s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
================================================================================
|
||
|
|
-->
|
||
|
|
<html lang="en" class="wa-cloak">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Connections - 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);
|
||
|
|
}
|
||
|
|
|
||
|
|
.apps-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
gap: var(--wa-space-l);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1200px) {
|
||
|
|
.apps-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-card {
|
||
|
|
background: var(--wa-color-surface);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--wa-space-m);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-logo {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
border-radius: var(--wa-radius-m);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-name-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--wa-space-2xs);
|
||
|
|
}
|
||
|
|
|
||
|
|
.verified-badge {
|
||
|
|
color: var(--wa-color-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scope-tag {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--wa-space-2xs);
|
||
|
|
padding: var(--wa-space-2xs) var(--wa-space-xs);
|
||
|
|
background: var(--wa-color-surface-alt);
|
||
|
|
border-radius: var(--wa-radius-s);
|
||
|
|
font-size: var(--wa-font-size-xs);
|
||
|
|
color: var(--wa-color-neutral-600);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scope-tag.read {
|
||
|
|
background: var(--wa-color-success-subtle);
|
||
|
|
color: var(--wa-color-success);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scope-tag.write {
|
||
|
|
background: var(--wa-color-warning-subtle);
|
||
|
|
color: var(--wa-color-warning);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scope-tag.sign {
|
||
|
|
background: var(--wa-color-primary-subtle);
|
||
|
|
color: var(--wa-color-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-state {
|
||
|
|
text-align: center;
|
||
|
|
padding: var(--wa-space-3xl) var(--wa-space-xl);
|
||
|
|
color: var(--wa-color-neutral-500);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stats-grid {
|
||
|
|
--min-column-size: 220px;
|
||
|
|
margin-bottom: var(--wa-space-xl);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-card {
|
||
|
|
background: var(--wa-color-surface);
|
||
|
|
}
|
||
|
|
</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">
|
||
|
|
<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" class="active">
|
||
|
|
<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">Connections</span>
|
||
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Manage applications connected to your wallet</span>
|
||
|
|
</div>
|
||
|
|
<wa-button variant="neutral" appearance="outlined" size="small">
|
||
|
|
<wa-icon slot="start" name="shield-check"></wa-icon>
|
||
|
|
Security Settings
|
||
|
|
</wa-button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="wa-grid stats-grid">
|
||
|
|
<wa-card class="stat-card">
|
||
|
|
<div class="wa-flank">
|
||
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-primary-subtle);">
|
||
|
|
<wa-icon slot="icon" name="plug" style="color: var(--wa-color-primary);"></wa-icon>
|
||
|
|
</wa-avatar>
|
||
|
|
<div class="wa-stack wa-gap-3xs">
|
||
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Connected Apps</span>
|
||
|
|
<span class="wa-heading-2xl">4</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</wa-card>
|
||
|
|
|
||
|
|
<wa-card class="stat-card">
|
||
|
|
<div class="wa-flank">
|
||
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-success-subtle);">
|
||
|
|
<wa-icon slot="icon" name="signature" style="color: var(--wa-color-success);"></wa-icon>
|
||
|
|
</wa-avatar>
|
||
|
|
<div class="wa-stack wa-gap-3xs">
|
||
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Signatures (30d)</span>
|
||
|
|
<span class="wa-heading-2xl">47</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</wa-card>
|
||
|
|
|
||
|
|
<wa-card class="stat-card">
|
||
|
|
<div class="wa-flank">
|
||
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-warning-subtle);">
|
||
|
|
<wa-icon slot="icon" name="paper-plane" style="color: var(--wa-color-warning);"></wa-icon>
|
||
|
|
</wa-avatar>
|
||
|
|
<div class="wa-stack wa-gap-3xs">
|
||
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Transactions (30d)</span>
|
||
|
|
<span class="wa-heading-2xl">12</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</wa-card>
|
||
|
|
|
||
|
|
<wa-card class="stat-card">
|
||
|
|
<div class="wa-flank">
|
||
|
|
<wa-avatar shape="rounded" style="background: var(--wa-color-neutral-100);">
|
||
|
|
<wa-icon slot="icon" name="clock" style="color: var(--wa-color-neutral-600);"></wa-icon>
|
||
|
|
</wa-avatar>
|
||
|
|
<div class="wa-stack wa-gap-3xs">
|
||
|
|
<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Last Activity</span>
|
||
|
|
<span class="wa-heading-2xl">2h ago</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</wa-card>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="apps-grid">
|
||
|
|
<wa-card class="app-card" style="max-width: 100%;">
|
||
|
|
<div slot="header" class="wa-split">
|
||
|
|
<div class="app-header">
|
||
|
|
<div class="app-logo" style="background: linear-gradient(135deg, #ff007a, #ff5ca0);">
|
||
|
|
<wa-icon name="arrows-rotate" style="color: white; font-size: 24px;"></wa-icon>
|
||
|
|
</div>
|
||
|
|
<div class="wa-stack wa-gap-0">
|
||
|
|
<div class="app-name-row">
|
||
|
|
<h3 class="wa-heading-l">Uniswap</h3>
|
||
|
|
<wa-icon name="badge-check" variant="solid" class="verified-badge"></wa-icon>
|
||
|
|
</div>
|
||
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">app.uniswap.org</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<wa-button appearance="plain" size="small">
|
||
|
|
<wa-icon id="uniswap-btn" name="chevron-right" label="View Details"></wa-icon>
|
||
|
|
</wa-button>
|
||
|
|
<wa-tooltip for="uniswap-btn">View Details</wa-tooltip>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="wa-stack wa-gap-xl">
|
||
|
|
<div class="wa-split wa-align-items-stretch">
|
||
|
|
<article class="wa-stack wa-align-items-start wa-gap-xs">
|
||
|
|
<h4 class="wa-caption-m">Session Activity</h4>
|
||
|
|
<div class="wa-cluster wa-heading-3xl">
|
||
|
|
<wa-progress-ring value="78" style="--size: 1em; --track-width: 0.125em"></wa-progress-ring>
|
||
|
|
<span>78%</span>
|
||
|
|
</div>
|
||
|
|
<wa-badge appearance="filled outlined" variant="success">
|
||
|
|
<wa-icon name="arrow-up"></wa-icon> up from 65%
|
||
|
|
</wa-badge>
|
||
|
|
</article>
|
||
|
|
<article class="wa-stack wa-gap-xs wa-align-items-end">
|
||
|
|
<h4 class="wa-caption-m">Total Signatures</h4>
|
||
|
|
<span class="wa-heading-3xl">23</span>
|
||
|
|
<wa-badge appearance="filled outlined" variant="success">
|
||
|
|
<wa-icon name="sparkles"></wa-icon> Active
|
||
|
|
</wa-badge>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<wa-divider></wa-divider>
|
||
|
|
|
||
|
|
<article class="wa-stack wa-gap-xl">
|
||
|
|
<div class="wa-stack wa-gap-xs">
|
||
|
|
<h4 class="wa-caption-m">Permission Usage</h4>
|
||
|
|
<div class="wa-split">
|
||
|
|
<span class="wa-heading-3xl">3</span>
|
||
|
|
<span class="wa-caption-l">of 4 scopes</span>
|
||
|
|
</div>
|
||
|
|
<wa-progress-bar value="75" label="Permissions used"></wa-progress-bar>
|
||
|
|
</div>
|
||
|
|
<dl class="wa-stack wa-caption-s">
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Connected</dt>
|
||
|
|
<dd>Dec 15, 2025</dd>
|
||
|
|
</div>
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Last Used</dt>
|
||
|
|
<dd>2 hours ago</dd>
|
||
|
|
</div>
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Transactions</dt>
|
||
|
|
<dd>8 approved</dd>
|
||
|
|
</div>
|
||
|
|
</dl>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<div class="wa-cluster wa-gap-xs" style="flex-wrap: wrap;">
|
||
|
|
<span class="scope-tag read"><wa-icon name="eye" style="font-size: 12px;"></wa-icon> wallet:read</span>
|
||
|
|
<span class="scope-tag sign"><wa-icon name="pen-nib" style="font-size: 12px;"></wa-icon> wallet:sign</span>
|
||
|
|
<span class="scope-tag write"><wa-icon name="paper-plane" style="font-size: 12px;"></wa-icon> wallet:transact</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div slot="footer" class="wa-cluster wa-gap-s" style="justify-content: flex-end;">
|
||
|
|
<wa-button variant="danger" appearance="plain" size="small">Disconnect</wa-button>
|
||
|
|
<wa-button variant="neutral" appearance="outlined" size="small">Manage</wa-button>
|
||
|
|
</div>
|
||
|
|
</wa-card>
|
||
|
|
|
||
|
|
<wa-card class="app-card" style="max-width: 100%;">
|
||
|
|
<div slot="header" class="wa-split">
|
||
|
|
<div class="app-header">
|
||
|
|
<div class="app-logo" style="background: linear-gradient(135deg, #627eea, #4c63d2);">
|
||
|
|
<wa-icon name="sailboat" style="color: white; font-size: 24px;"></wa-icon>
|
||
|
|
</div>
|
||
|
|
<div class="wa-stack wa-gap-0">
|
||
|
|
<div class="app-name-row">
|
||
|
|
<h3 class="wa-heading-l">OpenSea</h3>
|
||
|
|
<wa-icon name="badge-check" variant="solid" class="verified-badge"></wa-icon>
|
||
|
|
</div>
|
||
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">opensea.io</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<wa-button appearance="plain" size="small">
|
||
|
|
<wa-icon id="opensea-btn" name="chevron-right" label="View Details"></wa-icon>
|
||
|
|
</wa-button>
|
||
|
|
<wa-tooltip for="opensea-btn">View Details</wa-tooltip>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="wa-stack wa-gap-xl">
|
||
|
|
<div class="wa-split wa-align-items-stretch">
|
||
|
|
<article class="wa-stack wa-align-items-start wa-gap-xs">
|
||
|
|
<h4 class="wa-caption-m">Session Activity</h4>
|
||
|
|
<div class="wa-cluster wa-heading-3xl">
|
||
|
|
<wa-progress-ring value="45" style="--size: 1em; --track-width: 0.125em"></wa-progress-ring>
|
||
|
|
<span>45%</span>
|
||
|
|
</div>
|
||
|
|
<wa-badge appearance="filled outlined" variant="danger">
|
||
|
|
<wa-icon name="arrow-down"></wa-icon> down from 62%
|
||
|
|
</wa-badge>
|
||
|
|
</article>
|
||
|
|
<article class="wa-stack wa-gap-xs wa-align-items-end">
|
||
|
|
<h4 class="wa-caption-m">Total Signatures</h4>
|
||
|
|
<span class="wa-heading-3xl">15</span>
|
||
|
|
<wa-badge appearance="filled outlined" variant="neutral">
|
||
|
|
<wa-icon name="clock"></wa-icon> Idle
|
||
|
|
</wa-badge>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<wa-divider></wa-divider>
|
||
|
|
|
||
|
|
<article class="wa-stack wa-gap-xl">
|
||
|
|
<div class="wa-stack wa-gap-xs">
|
||
|
|
<h4 class="wa-caption-m">Permission Usage</h4>
|
||
|
|
<div class="wa-split">
|
||
|
|
<span class="wa-heading-3xl">2</span>
|
||
|
|
<span class="wa-caption-l">of 3 scopes</span>
|
||
|
|
</div>
|
||
|
|
<wa-progress-bar value="66" label="Permissions used"></wa-progress-bar>
|
||
|
|
</div>
|
||
|
|
<dl class="wa-stack wa-caption-s">
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Connected</dt>
|
||
|
|
<dd>Nov 28, 2025</dd>
|
||
|
|
</div>
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Last Used</dt>
|
||
|
|
<dd>3 days ago</dd>
|
||
|
|
</div>
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Transactions</dt>
|
||
|
|
<dd>2 approved</dd>
|
||
|
|
</div>
|
||
|
|
</dl>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<div class="wa-cluster wa-gap-xs" style="flex-wrap: wrap;">
|
||
|
|
<span class="scope-tag read"><wa-icon name="eye" style="font-size: 12px;"></wa-icon> wallet:read</span>
|
||
|
|
<span class="scope-tag sign"><wa-icon name="pen-nib" style="font-size: 12px;"></wa-icon> wallet:sign</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div slot="footer" class="wa-cluster wa-gap-s" style="justify-content: flex-end;">
|
||
|
|
<wa-button variant="danger" appearance="plain" size="small">Disconnect</wa-button>
|
||
|
|
<wa-button variant="neutral" appearance="outlined" size="small">Manage</wa-button>
|
||
|
|
</div>
|
||
|
|
</wa-card>
|
||
|
|
|
||
|
|
<wa-card class="app-card" style="max-width: 100%;">
|
||
|
|
<div slot="header" class="wa-split">
|
||
|
|
<div class="app-header">
|
||
|
|
<div class="app-logo" style="background: linear-gradient(135deg, #1db954, #169c46);">
|
||
|
|
<wa-icon name="leaf" style="color: white; font-size: 24px;"></wa-icon>
|
||
|
|
</div>
|
||
|
|
<div class="wa-stack wa-gap-0">
|
||
|
|
<div class="app-name-row">
|
||
|
|
<h3 class="wa-heading-l">Aave</h3>
|
||
|
|
<wa-icon name="badge-check" variant="solid" class="verified-badge"></wa-icon>
|
||
|
|
</div>
|
||
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">app.aave.com</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<wa-button appearance="plain" size="small">
|
||
|
|
<wa-icon id="aave-btn" name="chevron-right" label="View Details"></wa-icon>
|
||
|
|
</wa-button>
|
||
|
|
<wa-tooltip for="aave-btn">View Details</wa-tooltip>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="wa-stack wa-gap-xl">
|
||
|
|
<div class="wa-split wa-align-items-stretch">
|
||
|
|
<article class="wa-stack wa-align-items-start wa-gap-xs">
|
||
|
|
<h4 class="wa-caption-m">Session Activity</h4>
|
||
|
|
<div class="wa-cluster wa-heading-3xl">
|
||
|
|
<wa-progress-ring value="92" style="--size: 1em; --track-width: 0.125em"></wa-progress-ring>
|
||
|
|
<span>92%</span>
|
||
|
|
</div>
|
||
|
|
<wa-badge appearance="filled outlined" variant="success">
|
||
|
|
<wa-icon name="arrow-up"></wa-icon> up from 88%
|
||
|
|
</wa-badge>
|
||
|
|
</article>
|
||
|
|
<article class="wa-stack wa-gap-xs wa-align-items-end">
|
||
|
|
<h4 class="wa-caption-m">Total Signatures</h4>
|
||
|
|
<span class="wa-heading-3xl">5</span>
|
||
|
|
<wa-badge appearance="filled outlined" variant="success">
|
||
|
|
<wa-icon name="sparkles"></wa-icon> Active
|
||
|
|
</wa-badge>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<wa-divider></wa-divider>
|
||
|
|
|
||
|
|
<article class="wa-stack wa-gap-xl">
|
||
|
|
<div class="wa-stack wa-gap-xs">
|
||
|
|
<h4 class="wa-caption-m">Permission Usage</h4>
|
||
|
|
<div class="wa-split">
|
||
|
|
<span class="wa-heading-3xl">4</span>
|
||
|
|
<span class="wa-caption-l">of 4 scopes</span>
|
||
|
|
</div>
|
||
|
|
<wa-progress-bar value="100" label="Permissions used"></wa-progress-bar>
|
||
|
|
</div>
|
||
|
|
<dl class="wa-stack wa-caption-s">
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Connected</dt>
|
||
|
|
<dd>Jan 2, 2026</dd>
|
||
|
|
</div>
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Last Used</dt>
|
||
|
|
<dd>1 hour ago</dd>
|
||
|
|
</div>
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Transactions</dt>
|
||
|
|
<dd>2 approved</dd>
|
||
|
|
</div>
|
||
|
|
</dl>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<div class="wa-cluster wa-gap-xs" style="flex-wrap: wrap;">
|
||
|
|
<span class="scope-tag read"><wa-icon name="eye" style="font-size: 12px;"></wa-icon> wallet:read</span>
|
||
|
|
<span class="scope-tag read"><wa-icon name="user" style="font-size: 12px;"></wa-icon> profile</span>
|
||
|
|
<span class="scope-tag sign"><wa-icon name="pen-nib" style="font-size: 12px;"></wa-icon> wallet:sign</span>
|
||
|
|
<span class="scope-tag write"><wa-icon name="paper-plane" style="font-size: 12px;"></wa-icon> wallet:transact</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div slot="footer" class="wa-cluster wa-gap-s" style="justify-content: flex-end;">
|
||
|
|
<wa-button variant="danger" appearance="plain" size="small">Disconnect</wa-button>
|
||
|
|
<wa-button variant="neutral" appearance="outlined" size="small">Manage</wa-button>
|
||
|
|
</div>
|
||
|
|
</wa-card>
|
||
|
|
|
||
|
|
<wa-card class="app-card" style="max-width: 100%;">
|
||
|
|
<div slot="header" class="wa-split">
|
||
|
|
<div class="app-header">
|
||
|
|
<div class="app-logo" style="background: linear-gradient(135deg, #f7931a, #ff9500);">
|
||
|
|
<wa-icon name="cube" style="color: white; font-size: 24px;"></wa-icon>
|
||
|
|
</div>
|
||
|
|
<div class="wa-stack wa-gap-0">
|
||
|
|
<div class="app-name-row">
|
||
|
|
<h3 class="wa-heading-l">Example DApp</h3>
|
||
|
|
</div>
|
||
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">example-dapp.io</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<wa-button appearance="plain" size="small">
|
||
|
|
<wa-icon id="example-btn" name="chevron-right" label="View Details"></wa-icon>
|
||
|
|
</wa-button>
|
||
|
|
<wa-tooltip for="example-btn">View Details</wa-tooltip>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="wa-stack wa-gap-xl">
|
||
|
|
<div class="wa-split wa-align-items-stretch">
|
||
|
|
<article class="wa-stack wa-align-items-start wa-gap-xs">
|
||
|
|
<h4 class="wa-caption-m">Session Activity</h4>
|
||
|
|
<div class="wa-cluster wa-heading-3xl">
|
||
|
|
<wa-progress-ring value="12" style="--size: 1em; --track-width: 0.125em"></wa-progress-ring>
|
||
|
|
<span>12%</span>
|
||
|
|
</div>
|
||
|
|
<wa-badge appearance="filled outlined" variant="danger">
|
||
|
|
<wa-icon name="arrow-down"></wa-icon> down from 35%
|
||
|
|
</wa-badge>
|
||
|
|
</article>
|
||
|
|
<article class="wa-stack wa-gap-xs wa-align-items-end">
|
||
|
|
<h4 class="wa-caption-m">Total Signatures</h4>
|
||
|
|
<span class="wa-heading-3xl">4</span>
|
||
|
|
<wa-badge appearance="filled outlined" variant="warning">
|
||
|
|
<wa-icon name="triangle-alert"></wa-icon> Unverified
|
||
|
|
</wa-badge>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<wa-divider></wa-divider>
|
||
|
|
|
||
|
|
<article class="wa-stack wa-gap-xl">
|
||
|
|
<div class="wa-stack wa-gap-xs">
|
||
|
|
<h4 class="wa-caption-m">Permission Usage</h4>
|
||
|
|
<div class="wa-split">
|
||
|
|
<span class="wa-heading-3xl">1</span>
|
||
|
|
<span class="wa-caption-l">of 2 scopes</span>
|
||
|
|
</div>
|
||
|
|
<wa-progress-bar value="50" label="Permissions used"></wa-progress-bar>
|
||
|
|
</div>
|
||
|
|
<dl class="wa-stack wa-caption-s">
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Connected</dt>
|
||
|
|
<dd>Dec 20, 2025</dd>
|
||
|
|
</div>
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Last Used</dt>
|
||
|
|
<dd>2 weeks ago</dd>
|
||
|
|
</div>
|
||
|
|
<div class="wa-cluster">
|
||
|
|
<dt>Transactions</dt>
|
||
|
|
<dd>0 approved</dd>
|
||
|
|
</div>
|
||
|
|
</dl>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<div class="wa-cluster wa-gap-xs" style="flex-wrap: wrap;">
|
||
|
|
<span class="scope-tag read"><wa-icon name="eye" style="font-size: 12px;"></wa-icon> wallet:read</span>
|
||
|
|
<span class="scope-tag sign"><wa-icon name="pen-nib" style="font-size: 12px;"></wa-icon> wallet:sign</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div slot="footer" class="wa-cluster wa-gap-s" style="justify-content: flex-end;">
|
||
|
|
<wa-button variant="danger" appearance="plain" size="small">Disconnect</wa-button>
|
||
|
|
<wa-button variant="neutral" appearance="outlined" size="small">Manage</wa-button>
|
||
|
|
</div>
|
||
|
|
</wa-card>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<wa-dialog label="Manage Connection" id="manage-dialog" style="--width: 480px;">
|
||
|
|
<div class="wa-stack wa-gap-l">
|
||
|
|
<div class="app-header" style="padding: var(--wa-space-m); background: var(--wa-color-surface-alt); border-radius: var(--wa-radius-m);">
|
||
|
|
<div class="app-logo" style="background: linear-gradient(135deg, #ff007a, #ff5ca0);">
|
||
|
|
<wa-icon name="arrows-rotate" style="color: white; font-size: 24px;"></wa-icon>
|
||
|
|
</div>
|
||
|
|
<div class="wa-stack wa-gap-0">
|
||
|
|
<div class="app-name-row">
|
||
|
|
<span class="wa-heading-m">Uniswap</span>
|
||
|
|
<wa-icon name="badge-check" variant="solid" class="verified-badge"></wa-icon>
|
||
|
|
</div>
|
||
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">app.uniswap.org</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="wa-stack wa-gap-s">
|
||
|
|
<span class="wa-heading-s">Permissions</span>
|
||
|
|
<wa-checkbox checked>
|
||
|
|
<div class="wa-stack wa-gap-0">
|
||
|
|
<span>View wallet address</span>
|
||
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">wallet:read</span>
|
||
|
|
</div>
|
||
|
|
</wa-checkbox>
|
||
|
|
<wa-checkbox checked>
|
||
|
|
<div class="wa-stack wa-gap-0">
|
||
|
|
<span>Request signatures</span>
|
||
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">wallet:sign</span>
|
||
|
|
</div>
|
||
|
|
</wa-checkbox>
|
||
|
|
<wa-checkbox checked>
|
||
|
|
<div class="wa-stack wa-gap-0">
|
||
|
|
<span>Request transactions</span>
|
||
|
|
<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">wallet:transact</span>
|
||
|
|
</div>
|
||
|
|
</wa-checkbox>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<wa-callout variant="neutral">
|
||
|
|
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||
|
|
<span class="wa-caption-s">Changes will take effect immediately. The app may need to reconnect.</span>
|
||
|
|
</wa-callout>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div slot="footer" class="wa-flank" style="width: 100%;">
|
||
|
|
<wa-button variant="danger" appearance="outlined">
|
||
|
|
<wa-icon slot="start" name="plug"></wa-icon>
|
||
|
|
Disconnect
|
||
|
|
</wa-button>
|
||
|
|
<div style="flex: 1;"></div>
|
||
|
|
<wa-button variant="neutral" appearance="outlined" data-dialog="close">Cancel</wa-button>
|
||
|
|
<wa-button variant="brand">Save Changes</wa-button>
|
||
|
|
</div>
|
||
|
|
</wa-dialog>
|
||
|
|
|
||
|
|
<wa-dialog label="Disconnect App" id="disconnect-dialog" style="--width: 400px;">
|
||
|
|
<div class="wa-stack wa-gap-l" style="text-align: center;">
|
||
|
|
<wa-icon name="plug" style="font-size: 48px; color: var(--wa-color-danger);"></wa-icon>
|
||
|
|
<div class="wa-stack wa-gap-xs">
|
||
|
|
<span class="wa-heading-m">Disconnect Uniswap?</span>
|
||
|
|
<span class="wa-caption-m" style="color: var(--wa-color-neutral-500);">
|
||
|
|
This will revoke all permissions. You'll need to reconnect to use the app with your wallet.
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div slot="footer" class="wa-cluster wa-gap-s" style="justify-content: center; width: 100%;">
|
||
|
|
<wa-button variant="neutral" appearance="outlined" data-dialog="close">Cancel</wa-button>
|
||
|
|
<wa-button variant="danger">Disconnect</wa-button>
|
||
|
|
</div>
|
||
|
|
</wa-dialog>
|
||
|
|
</wa-page>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const manageDialog = document.getElementById('manage-dialog');
|
||
|
|
const disconnectDialog = document.getElementById('disconnect-dialog');
|
||
|
|
|
||
|
|
document.querySelectorAll('wa-button[variant="neutral"][appearance="outlined"]').forEach(btn => {
|
||
|
|
if (btn.textContent.trim() === 'Manage') {
|
||
|
|
btn.addEventListener('click', () => {
|
||
|
|
manageDialog.open = true;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll('wa-button[variant="danger"][appearance="plain"]').forEach(btn => {
|
||
|
|
if (btn.textContent.trim() === 'Disconnect') {
|
||
|
|
btn.addEventListener('click', () => {
|
||
|
|
disconnectDialog.open = true;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll('.sidebar-nav a').forEach(link => {
|
||
|
|
link.addEventListener('click', function(e) {
|
||
|
|
if (this.getAttribute('href') === '#') {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
document.querySelectorAll('.sidebar-nav a').forEach(l => l.classList.remove('active'));
|
||
|
|
this.classList.add('active');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|