509 lines
26 KiB
Vue
509 lines
26 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="mb-8">
|
||
|
|
<h1 class="text-3xl font-bold text-white mb-2">Web5</h1>
|
||
|
|
<p class="text-white/70">Decentralized identity and data protocols</p>
|
||
|
|
<p class="text-sm text-white/60 mt-2">Earn networking profits by hosting decentralized services</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Quick Actions Container -->
|
||
|
|
<div class="glass-card p-6 mb-6">
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
|
|
<!-- Networking Profits -->
|
||
|
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="relative">
|
||
|
|
<span class="text-2xl text-orange-500 font-bold">₿</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-sm font-medium text-white">Networking Profits</p>
|
||
|
|
<p class="text-xs text-orange-500 font-medium">₿0.024</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- DID Status -->
|
||
|
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="relative">
|
||
|
|
<div class="w-3 h-3 rounded-full" :class="didStatus === 'active' ? 'bg-green-400' : 'bg-yellow-400'"></div>
|
||
|
|
<div v-if="didStatus === 'active'" class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-sm font-medium text-white">DID Status</p>
|
||
|
|
<p class="text-xs text-white/60 capitalize">{{ didStatus }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
@click="manageDIDs"
|
||
|
|
class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
|
||
|
|
>
|
||
|
|
Manage
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Wallet Connection -->
|
||
|
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="relative">
|
||
|
|
<div class="w-3 h-3 rounded-full" :class="walletConnected ? 'bg-green-400' : 'bg-red-400'"></div>
|
||
|
|
<div v-if="walletConnected" class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-sm font-medium text-white">Wallet</p>
|
||
|
|
<p class="text-xs text-white/60">{{ walletConnected ? 'Connected' : 'Disconnected' }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
@click="connectWallet"
|
||
|
|
class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
|
||
|
|
:disabled="connectingWallet"
|
||
|
|
>
|
||
|
|
{{ connectingWallet ? 'Connecting...' : walletConnected ? 'Disconnect' : 'Connect' }}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Nostr Relay Status -->
|
||
|
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="relative">
|
||
|
|
<div class="w-3 h-3 rounded-full" :class="nostrRelaysConnected > 0 ? 'bg-green-400' : 'bg-red-400'"></div>
|
||
|
|
<div v-if="nostrRelaysConnected > 0" class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-sm font-medium text-white">Nostr Relays</p>
|
||
|
|
<p class="text-xs text-white/60">{{ nostrRelaysConnected }} connected</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
@click="manageRelays"
|
||
|
|
class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
|
||
|
|
>
|
||
|
|
Manage
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Core Services Overview Cards -->
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||
|
|
<!-- Bitcoin Domain Name Portfolio -->
|
||
|
|
<div class="glass-card p-6">
|
||
|
|
<div class="flex items-start gap-4 mb-4">
|
||
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h2 class="text-xl font-semibold text-white mb-2">Bitcoin Domain Names</h2>
|
||
|
|
<p class="text-white/70 text-sm mb-4">Manage your .btc domain portfolio</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Domains Owned</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">5 domains</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Registration Status</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-green-400 text-sm font-medium">Active</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Expiring Soon</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">1 domain</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
|
||
|
|
Manage Domains
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Web5 Wallet -->
|
||
|
|
<div class="glass-card p-6">
|
||
|
|
<div class="flex items-start gap-4 mb-4">
|
||
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h2 class="text-xl font-semibold text-white mb-2">Web5 Wallet</h2>
|
||
|
|
<p class="text-white/70 text-sm mb-4">Decentralized wallet for Web5 assets</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<span class="text-lg text-orange-500 font-bold">₿</span>
|
||
|
|
<span class="text-white/80 text-sm">Balance</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm text-orange-500">₿0.025</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Wallet Status</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-green-400 text-sm font-medium">Connected</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Transactions</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">12 pending</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
|
||
|
|
Open Wallet
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Nostr Relays -->
|
||
|
|
<div class="glass-card p-6">
|
||
|
|
<div class="flex items-start gap-4 mb-4">
|
||
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h2 class="text-xl font-semibold text-white mb-2">Nostr Relays</h2>
|
||
|
|
<p class="text-white/70 text-sm mb-4">Decentralized social networking relays</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Relays Connected</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">8 active</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Relay Status</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-green-400 text-sm font-medium">Syncing</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Events Stored</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">1.2M events</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
|
||
|
|
Manage Relays
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Protocol Overview Cards -->
|
||
|
|
<div v-if="false" class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||
|
|
<!-- Decentralized Identifiers (DIDs) -->
|
||
|
|
<div class="glass-card p-6">
|
||
|
|
<div class="flex items-start gap-4 mb-4">
|
||
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h2 class="text-xl font-semibold text-white mb-2">Decentralized Identifiers</h2>
|
||
|
|
<p class="text-white/70 text-sm mb-4">Self-owned identifiers for verifiable digital identity</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Active DIDs</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">3 created</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Verification Status</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-green-400 text-sm font-medium">Verified</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Key Management</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">Secure</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
|
||
|
|
Manage DIDs
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Decentralized Web Nodes (DWNs) -->
|
||
|
|
<div class="glass-card p-6">
|
||
|
|
<div class="flex items-start gap-4 mb-4">
|
||
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h2 class="text-xl font-semibold text-white mb-2">Decentralized Web Nodes</h2>
|
||
|
|
<p class="text-white/70 text-sm mb-4">Personal data stores you control</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Data Stores</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">2 active</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Storage Used</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">1.2 GB</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Sync Status</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-green-400 text-sm font-medium">Synced</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
|
||
|
|
Manage DWNs
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Self-Sovereign Identity Service -->
|
||
|
|
<div class="glass-card p-6">
|
||
|
|
<div class="flex items-start gap-4 mb-4">
|
||
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h2 class="text-xl font-semibold text-white mb-2">Self-Sovereign Identity</h2>
|
||
|
|
<p class="text-white/70 text-sm mb-4">Create and manage decentralized identities</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Identities</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">2 managed</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Service Status</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-green-400 text-sm font-medium">Running</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Credentials</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">5 issued</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
|
||
|
|
Manage SSI Service
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Self-Sovereign Identity SDK -->
|
||
|
|
<div class="glass-card p-6">
|
||
|
|
<div class="flex items-start gap-4 mb-4">
|
||
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h2 class="text-xl font-semibold text-white mb-2">SSI SDK</h2>
|
||
|
|
<p class="text-white/70 text-sm mb-4">Developer toolkit for Web5 applications</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">SDK Version</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">v1.2.0</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">Active Apps</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-white/60 text-sm">4 integrated</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
|
|
</svg>
|
||
|
|
<span class="text-white/80 text-sm">API Status</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-green-400 text-sm font-medium">Available</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
|
||
|
|
View SDK Documentation
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
// DID Status: 'active' | 'inactive' | 'pending'
|
||
|
|
const didStatus = ref<'active' | 'inactive' | 'pending'>('active')
|
||
|
|
|
||
|
|
// DWN Sync Status: 'synced' | 'syncing' | 'error'
|
||
|
|
const dwnSyncStatus = ref<'synced' | 'syncing' | 'error'>('synced')
|
||
|
|
const syncingDWNs = ref(false)
|
||
|
|
|
||
|
|
// Wallet Connection
|
||
|
|
const walletConnected = ref(true)
|
||
|
|
const connectingWallet = ref(false)
|
||
|
|
|
||
|
|
// Nostr Relays
|
||
|
|
const nostrRelaysConnected = ref(8)
|
||
|
|
|
||
|
|
function manageDIDs() {
|
||
|
|
// TODO: Navigate to DID management or open modal
|
||
|
|
console.log('Managing DIDs...')
|
||
|
|
}
|
||
|
|
|
||
|
|
// @ts-ignore - Function kept for future use
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
function _syncDWNs() {
|
||
|
|
syncingDWNs.value = true
|
||
|
|
dwnSyncStatus.value = 'syncing'
|
||
|
|
// TODO: Implement DWN sync API call
|
||
|
|
console.log('Syncing DWNs...')
|
||
|
|
setTimeout(() => {
|
||
|
|
syncingDWNs.value = false
|
||
|
|
dwnSyncStatus.value = 'synced'
|
||
|
|
}, 2000)
|
||
|
|
}
|
||
|
|
|
||
|
|
function connectWallet() {
|
||
|
|
if (walletConnected.value) {
|
||
|
|
walletConnected.value = false
|
||
|
|
// TODO: Implement wallet disconnect API call
|
||
|
|
console.log('Disconnecting wallet...')
|
||
|
|
} else {
|
||
|
|
connectingWallet.value = true
|
||
|
|
// TODO: Implement wallet connect API call
|
||
|
|
console.log('Connecting wallet...')
|
||
|
|
setTimeout(() => {
|
||
|
|
connectingWallet.value = false
|
||
|
|
walletConnected.value = true
|
||
|
|
}, 2000)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function manageRelays() {
|
||
|
|
// TODO: Navigate to relay management or open modal
|
||
|
|
console.log('Managing Nostr relays...')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|