Dark Mode

This commit is contained in:
Vamsi Krishna B 2022-12-31 19:00:39 +05:30
parent d8dee71f2d
commit 284ca3d35a
32 changed files with 451 additions and 303 deletions

View File

@ -34,4 +34,43 @@ liveSocket.connect()
window.liveSocket = liveSocket
liveSocket.enableDebug()
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
themeToggleLightIcon.classList.remove('hidden');
} else {
themeToggleDarkIcon.classList.remove('hidden');
}
var themeToggleBtn = document.getElementById('theme-toggle');
themeToggleBtn.addEventListener('click', function () {
// toggle icons inside button
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');
// if set via local storage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
});

View File

@ -1,53 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Privacy Policy</title>
<link rel="stylesheet" href="/css/app.css"/>
<meta charset="UTF-8">
<script defer type="text/javascript" src="/js/app.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zcash Explorer - Privacy Policy</title>
<link rel="stylesheet" href="/css/app.css">
<meta content="EhhiDTAnERsYAX9XNwgLGTtSJkkBSgsCajZLWOuukVK0SGZjHeVz89xF" name="csrf-token">
<script defer type="text/javascript" src="/js/app.js"></script>
<script>
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head>
<body>
<header>
<nav x-data="{ open: false }" class="flex-shrink-0 bg-indigo-600">
<nav x-data="{ open: false }" class="shrink-0 bg-indigo-600 dark:bg-gray-800">
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<!-- Logo section -->
<div class="flex items-center px-2 lg:px-0 xl:w-64">
<a href="/">
<div class="flex-shrink-0">
<img class="h-8 w-auto" src="/images/zcash-icon-white.svg" alt="Block Explorer">
<div class="shrink-0">
<img class="h-8 w-auto" src="/images/zcash-icon-white.svg" alt="Zcash Block Explorer">
</div>
</a>
<a href="/">
<div class="flex-shrink-0 px-1 text-white">
Block Explorer ( beta )
<div class="shrink-0 px-1 text-white dark:text-white">
Zcash Block Explorer
</div>
</a>
</div>
<!-- Search section -->
<div class="flex-1 flex justify-center lg:justify-end">
<div class="w-full px-2 lg:px-6">
<label for="search" class="sr-only">transaction / block / address</label>
<div class="relative text-indigo-200 focus-within:text-gray-400">
<div class="relative text-gray-200 dark:text-slate-200 focus-within:text-gray-400 dark:focus-within:text-slate-800">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5" x-description="Heroicon name: solid/search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</div>
<form action="/search">
<input id="search" name="qs" class="block w-full pl-10 pr-3 py-2 bg-white border border-transparent rounded-md leading-5 bg-indigo-400 bg-opacity-25 text-indigo-100 placeholder-indigo-200 focus:outline-none focus:bg-white focus:ring-0 focus:placeholder-gray-400 focus:text-gray-900 sm:text-sm" placeholder="transaction / block / address" type="search">
<input id="search" name="qs" class="
block
w-full
pl-10
pr-3
py-2
border
border-transparent
rounded-md
leading-5
text-indigo-100
placeholder-indigo-200
focus:outline-none
focus:bg-white
focus:ring-0 focus:placeholder-gray-400
focus:text-gray-900
sm:text-sm
dark:focus:placeholder-white
dark:border-slate-600
dark:placeholder-slate-400
dark:text-white
dark:focus:ring-slate-500
dark:focus:border-slate-500
dark:hover:bg-slate-700 dark:focus:ring-slate-800
bg-white/25
dark:bg-slate-700
dark:focus:bg-slate-600
dark:placeholder-slate-200
dark:focus:text-gray-200
" placeholder="transaction / block / address" type="search">
</form>
</div>
</div>
</div>
<div class="flex lg:hidden">
<!-- Mobile menu button -->
<button type="button" class="bg-indigo-600 inline-flex items-center justify-center p-2 rounded-md text-indigo-400 hover:text-white hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-600 focus:ring-white" aria-controls="mobile-menu" @click="open = !open" aria-expanded="true" x-bind:aria-expanded="open.toString()">
<button type="button" class="bg-indigo-600 dark:bg-slate-600 inline-flex items-center justify-center p-2 rounded-md text-indigo-400 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-600 dark:focus:ring-offset-slate-600 focus:ring-white dark:focus:ring-white" aria-controls="mobile-menu" @click="open = !open" aria-expanded="true" x-bind:aria-expanded="open.toString()">
<span class="sr-only">Open main menu</span>
<svg x-description="Icon when menu is closed.
Heroicon name: outline/menu-alt-1" x-state:on="Menu open" x-state:off="Menu closed" class="h-6 w-6 hidden" :class="{ 'hidden': open, 'block': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@ -64,13 +100,13 @@ Heroicon name: outline/x" x-state:on="Menu open" x-state:off="Menu closed" class
<div class="flex items-center justify-end">
<div class="flex">
<a href="/mempool" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white">Mempool</a>
<a href="/mempool" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white dark:text-gray-400">Mempool</a>
<a href="/blocks" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white">Blocks</a>
<a href="/blocks" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white dark:text-gray-400">Blocks</a>
<div x-data="{ open: false }" @keydown.escape.stop="open = false" @click.away="open = false" class="relative inline-block text-left">
<div>
<button type="button" class=" inline-flex justify-center rounded-md px-4 py-2 text-sm font-medium focus:outline-none text-indigo-200 hover:text-white" id="options-menu" aria-expanded="true" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open">
<button type="button" class=" inline-flex justify-center rounded-md px-4 py-2 text-sm font-medium focus:outline-none text-indigo-200 hover:text-white dark:text-gray-400" id="options-menu" aria-expanded="true" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open">
Tools
<svg class="-mr-1 ml-2 h-5 w-5" x-description="Heroicon name: solid/chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
@ -78,21 +114,27 @@ Heroicon name: outline/x" x-state:on="Menu open" x-state:off="Menu closed" class
</button>
</div>
<div x-description="Dropdown menu, show/hide based on menu state." x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div x-description="Dropdown menu, show/hide based on menu state." x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-300" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1" role="none">
<a href="/nodes" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Nodes</a>
<a href="/broadcast" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Broadcast Transaction</a>
<a href="/payment-disclosure" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Payment Disclosure</a>
<a href="/nodes" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white dark:bg-gray-300 dark:hover:bg-gray-500" role="menuitem">Nodes</a>
<a href="/broadcast" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white dark:bg-gray-300 dark:hover:bg-gray-500" role="menuitem">Broadcast Transaction</a>
<a href="/payment-disclosure" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white dark:bg-gray-300 dark:hover:bg-gray-500" role="menuitem">Payment Disclosure</a>
<a href="/vk" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white dark:bg-gray-300 dark:hover:bg-gray-500" role="menuitem">Viewing Key</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
<div x-description="Mobile menu, show/hide based on menu state." class="lg:hidden" id="mobile-menu" x-show="open">
<div class="px-2 pt-2 pb-3">
@ -108,6 +150,9 @@ Heroicon name: outline/x" x-state:on="Menu open" x-state:off="Menu closed" class
<a href="/broadcast" class="text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Broadcast Transaction</a>
<a href="/payment-disclosure" class="text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Payment Disclosure</a>
<a href="/vk" class="text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Viewing Key</a>
</div>
</div>
</div>
@ -188,7 +233,8 @@ Heroicon name: outline/x" x-state:on="Menu open" x-state:off="Menu closed" class
</a>
</div>
<p class="mt-8 text-center text-base text-gray-400">
&copy; 2021 Nighthawk Apps.
&copy; <script>document.write(/\d{4}/.exec(Date())[0])</script>
Nighthawk Apps.
<span class="block sm:inline">Funded by Zcash Community Grants.</span>
</p>
</div>

View File

@ -2,6 +2,7 @@ const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
darkMode: 'class',
content: [
'../lib/**/*.ex',
'../lib/**/*.leex',

View File

@ -1,11 +1,11 @@
defmodule ZcashExplorerWeb.BlockCountLive do
use ZcashExplorerWeb, :live_view
import Phoenix.LiveView.Helpers
@impl true
def render(assigns) do
~L"""
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-gray-900 dark:dark:bg-slate-800 dark:text-slate-100">
<%= @block_count %>
</p>
"""

View File

@ -7,65 +7,65 @@ defmodule ZcashExplorerWeb.BlockChainInfoLive do
~L"""
<div>
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6 dark:bg-gray-800">
<dt class="text-sm font-medium text-gray-500 truncate">
Blocks
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
<%= @blockchain_info["blocks"] %>
</dd>
</div>
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6 dark:bg-gray-800">
<dt class="text-sm font-medium text-gray-500 truncate">
Commitments
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
<%= @blockchain_info["commitments"] %>
</dd>
</div>
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6 dark:bg-gray-800">
<dt class="text-sm font-medium text-gray-500 truncate">
Difficulty
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
<%= @blockchain_info["difficulty"] %>
</dd>
</div>
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6 dark:bg-gray-800">
<dt class="text-sm font-medium text-gray-500 truncate">
Sprout pool
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
<%= sprout_value(@blockchain_info["valuePools"]) %> ZEC
</dd>
</div>
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6 dark:bg-gray-800">
<dt class="text-sm font-medium text-gray-500 truncate">
Sapling pool
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
<%= sapling_value(@blockchain_info["valuePools"]) %> ZEC
</dd>
</div>
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6 dark:bg-gray-800">
<dt class="text-sm font-medium text-gray-500 truncate">
Orchard pool
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
<%= orchard_value(@blockchain_info["valuePools"]) %> ZEC
</dd>
</div>
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6">
<div class="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6 dark:bg-gray-800">
<dt class="text-sm font-medium text-gray-500 truncate">
zcashd version
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
<%= @blockchain_info["build"] %>
</dd>
</div>

View File

@ -4,7 +4,7 @@ defmodule ZcashExplorerWeb.BlockChainSizeLive do
@impl true
def render(assigns) do
~L"""
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-gray-900 dark:dark:bg-slate-800 dark:text-slate-100">
<%= Sizeable.filesize(@blockchain_size) %>
</p>
"""

View File

@ -4,7 +4,7 @@ defmodule ZcashExplorerWeb.DifficultyLive do
@impl true
def render(assigns) do
~L"""
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-gray-900 dark:dark:bg-slate-800 dark:text-slate-100">
<%= Float.ceil(@difficulty,6) %>
</p>
"""

View File

@ -4,7 +4,7 @@ defmodule ZcashExplorerWeb.MempoolInfoLive do
@impl true
def render(assigns) do
~L"""
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-gray-900 dark:dark:bg-slate-800 dark:text-slate-100">
<%= @mempool_info %>
</p>
"""

View File

@ -4,7 +4,7 @@ defmodule ZcashExplorerWeb.NetworkSolpsLive do
@impl true
def render(assigns) do
~L"""
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-gray-900 dark:dark:bg-slate-800 dark:text-slate-100">
<%= @networksolps %>
</p>
"""

View File

@ -4,25 +4,25 @@ defmodule ZcashExplorerWeb.NodesLive do
@impl true
def render(assigns) do
~L"""
<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-white-500">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Address</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Version</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Block Height</th>
<div class="shadow overflow-hidden border-gray-200 rounded-lg overflow-x-auto">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">Address</th>
<th scope="col" class="px-4 py-3">Version</th>
<th scope="col" class="px-4 py-3">Block Height</th>
</tr>
</thead>
<tbody class="bg-white-500 divide-y divide-gray-200">
<%= for node <- @zcash_nodes do %>
<tr class="hover:bg-indigo-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-indigo-500">
<%= node["addr"] %>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500 animate-pulse dark:text-white dark:hover:text-white">
<%= node["addr"] %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-600">
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
<%= node["subver"] %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-600">
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
<%= node["synced_blocks"] %>
</td>
</tr>

View File

@ -4,7 +4,7 @@ defmodule ZcashExplorerWeb.OrchardPoolLive do
@impl true
def render(assigns) do
~L"""
<p class="text-2xl font-semibold text-gray-900">
<p class="text-2xl font-semibold text-gray-900 dark:dark:bg-slate-800 dark:text-slate-100">
<%= orchard_value(@blockchain_info["valuePools"]) %> ZEC
</p>
"""

View File

@ -4,35 +4,35 @@ defmodule ZcashExplorerWeb.RawMempoolLive do
@impl true
def render(assigns) do
~L"""
<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-white-500">
<div class="shadow overflow-hidden border-gray-200 rounded-lg overflow-x-auto">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Tx ID</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Block</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Time</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Fee</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Size</th>
<th scope="col" class="px-6 py-3">Tx ID</th>
<th scope="col" class="px-4 py-3">Block</th>
<th scope="col" class="px-4 py-3">Time</th>
<th scope="col" class="px-4 py-3">Fee</th>
<th scope="col" class="px-4 py-3">Size</th>
</tr>
</thead>
<tbody class="bg-white-500 divide-y divide-gray-200">
<%= for tx <- @raw_mempool do %>
<tr class="hover:bg-indigo-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500 animate-pulse">
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500 animate-pulse dark:text-white dark:hover:text-white">
<a href='/transactions/<%= tx["txid"] %>'>
<%= tx["txid"] %>
</a>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-600">
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
<%= tx["info"]["height"] %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-600">
<td class="px-4 py-4 whitespace-nowrap text-sm font-MEDI">
<%= ZcashExplorerWeb.BlockView.mined_time_rel(tx["info"]["time"]) %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-600">
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
<%= ZcashExplorerWeb.TransactionView.format_zec(tx["info"]["fee"]) %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-600">
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
<%= tx["info"]["size"] %>
</td>
</tr>

View File

@ -4,41 +4,41 @@ defmodule ZcashExplorerWeb.RecentBlocksLive do
@impl true
def render(assigns) do
~L"""
<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-white-500">
<div class="shadow overflow-hidden border-gray-200 rounded-lg overflow-x-auto">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Height</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Hash</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Mined on</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Txns</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Size</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Output (ZEC)</th>
<th scope="col" class="px-6 py-3">Height</th>
<th scope="col" class="px-4 py-3">Hash</th>
<th scope="col" class="px-4 py-3">Mined on</th>
<th scope="col" class="px-4 py-3">Txns</th>
<th scope="col" class="px-4 py-3">Size</th>
<th scope="col" class="px-4 py-3">Output (ZEC)</th>
</tr>
</thead>
<tbody class="bg-white-500 divide-y divide-gray-200">
<tbody>
<%= for block <- @block_cache do %>
<tr class="hover:bg-indigo-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500">
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500 dark:text-white dark:hover:text-white">
<a href='/blocks/<%= block["height"] %>'>
<%= block["height"] %>
</td>
</a>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-600">
<td class="px-4 py-4 whitespace-nowrap">
<a href='/blocks/<%= block["hash"] %>'>
<%= block["hash"] %>
</a>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-4 py-4 whitespace-nowrap">
<%= block["time"] %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-4 py-4 whitespace-nowrap">
<%= block["tx_count"] %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-4 py-4 whitespace-nowrap">
<%= block["size"] %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-4 py-4 whitespace-nowrap">
<%= block["output_total"] %>
</td>

View File

@ -4,38 +4,38 @@ defmodule ZcashExplorerWeb.RecentTransactionsLive do
@impl true
def render(assigns) do
~L"""
<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-white-500">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Transaction ID</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Block#</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Time (UTC )</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Output (ZEC) </th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">TX Type</th>
<div class="shadow overflow-hidden border-gray-200 rounded-lg overflow-x-auto">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">Transaction ID</th>
<th scope="col" class="px-6 py-3">Block#</th>
<th scope="col" class="px-6 py-3">Time (UTC )</th>
<th scope="col" class="px-6 py-3">Public Output (ZEC) </th>
<th scope="col" class="px-4 py-3">TX Type</th>
</tr>
</thead>
<tbody class="bg-white-500 divide-y divide-gray-200">
<tbody>
<%= for tx <- @transaction_cache do %>
<tr class="hover:bg-indigo-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500">
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500 dark:text-white dark:hover:text-white">
<a href='/transactions/<%= tx["txid"] %>'>
<%= tx["txid"] %>
</a>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-6 py-4 whitespace-nowrap">
<a href='/blocks/<%= tx["block_height"] %>'>
<%= tx["block_height"] %>
</a>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-6 py-4 whitespace-nowrap">
<%= tx["time"] %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-6 py-4 whitespace-nowrap">
<%= tx["tx_out_total"] %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="px-6 py-4 whitespace-nowrap">
<%= if tx["type"] == "coinbase" do %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-s font-medium bg-yellow-400 text-gray-900 capitalize">
💰 Coinbase
@ -66,6 +66,11 @@ defmodule ZcashExplorerWeb.RecentTransactionsLive do
Mixed
</span>
<% end %>
<%= if tx["type"] == "unknown" do %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-s font-medium bg-gray-200 text-gray-900 capitalize">
Unknown
</span>
<% end %>
</td>
</tr>
<% end %>

View File

@ -1,45 +1,47 @@
<main class="py-4">
<div class="grid grid-cols-3 gap-4 px-4">
<div class="col-span-3 md:col-span-1 lg:col-span-1 sm:col-span-3">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 sticky top-10">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 sticky top-10 dark:bg-gray-800">
<h2 id="technical-details" class="font-medium text-gray-900">Details for the Zcash address:
<h2 id="technical-details" class="font-medium text-gray-900 dark:text-white">Details for the Zcash address:
</h2>
<p class="mt-1 text-lg leading-6 max-w-2xl text-gray-500 font-mono break-words">
<p class="mt-1 text-lg leading-6 max-w-2xl text-gray-500 font-mono break-words dark:text-100">
<%= @address %>
</p>
<div class="px-0">
<div class="flex flex-row py-2">
<div class="px-0 dark:bg-gray-400 ">
<img src='data:image/png;base64, <%= @qr %>' atl="QR code for the Zcash address <%= @address %>"/>
</div>
</div>
<div>
<div class="flow-root mt-6">
<ul class="-my-5 divide-y divide-gray-200">
<li class="py-4 hover:bg-gray-50">
<ul class="my-5 divide-y divide-gray-200 dark:divide-gray-900">
<li class="py-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded">
<div class="flex items-center space-x-4">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 font-medium ">
<p class="text-sm text-gray-900 font-medium dark:text-gray-200">
Balance
</p>
</div>
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased">
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased dark:text-gray-50">
<%= ZcashExplorerWeb.TransactionView.format_zec(zatoshi_to_zec(@balance["balance"])) %>
</div>
</div>
</li>
<li class="py-4 hover:bg-gray-50">
<li class="py-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded">
<div class="flex items-center space-x-4">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 font-medium">
<p class="text-sm text-gray-900 font-medium dark:text-gray-200">
Received
</p>
</div>
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased">
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased dark:text-gray-50">
<%= ZcashExplorerWeb.TransactionView.format_zec(zatoshi_to_zec(@balance["received"])) %>
</div>
@ -47,14 +49,14 @@
</li>
<li class="py-4 hover:bg-gray-50">
<li class="py-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded">
<div class="flex items-center space-x-4">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 font-medium">
<p class="text-sm text-gray-900 font-medium dark:text-gray-200">
Spent
</p>
</div>
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased">
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased dark:text-gray-50">
<%= ZcashExplorerWeb.TransactionView.format_zec(spend_zatoshi(@balance["received"],@balance["balance"])) %>
@ -100,8 +102,8 @@
</div>
<div class="col-span-3 md:col-span-2 lg:col-span-2 sm:col-span-3">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6">
<h2 id="technical-details" class="text-lg font-medium text-gray-900">Transactions from block
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 dark:bg-gray-800">
<h2 id="technical-details" class="text-lg font-medium text-gray-900 dark:text-gray-300">Transactions from block
<%= if @capped_e == nil do%>
#<%= @end_block %>
<% else %>
@ -114,14 +116,14 @@
<!-- TX List -->
<div class="bg-white lg:min-w-0 lg:flex-1">
<div class="bg-white lg:min-w-0 lg:flex-1 dark:bg-gray-800">
<ul class="relative z-0 divide-y divide-gray-200 border-b border-gray-200">
<ul class="relative z-0 divide-y divide-gray-200 border-gray-200 dark:divide-gray-500">
<%= for delta <- @txs do %>
<li class="relative pl-4 pr-6 py-5 hover:bg-indigo-50 sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6">
<li class="relative pl-4 pr-6 py-5 hover:bg-indigo-50 sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6 dark:hover:bg-gray-700 rounded">
<div class="flex items-center justify-between space-x-4">
<div class="min-w-0 space-y-3">
@ -140,7 +142,7 @@
<% end %>
<span class="block">
<h2 class="text-sm font-medium">
<h2 class="text-sm font-medium dark:text-gray-50">
<a href='/transactions/<%= delta["txid"] %>'>
<span class="absolute inset-0" aria-hidden="true"></span>
<%= if delta["satoshis"] > 0 do %>

View File

@ -1,16 +1,18 @@
<main class="py-4">
<main class="py-4 h-screen">
<div class="grid grid-cols-3 gap-4 px-4">
<div class="col-span-3 md:col-span-1 lg:col-span-1 sm:col-span-3">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 sticky top-10">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 sticky top-10 dark:bg-gray-800">
<h2 id="technical-details" class="font-medium text-gray-900">Details for the Zcash Unified Address:
<h2 id="technical-details" class="font-medium text-gray-900 dark:text-white">Details for the Zcash Unified Address:
</h2>
<p class="mt-1 text-lg leading-6 max-w-2xl text-gray-500 font-mono break-words select-all">
<p class="mt-1 text-lg leading-6 max-w-2xl text-gray-500 font-mono break-words select-all dark:text-100">
<%= @address %>
</p>
<div class="px-0 py-2">
<div class="flex flex-row py-2">
<div class="px-0 dark:bg-gray-400 ">
<img src={'data:image/png;base64, #{ @qr }'} atl={"QR code for the Zcash Unified Address #{ @address }"}/>
</div>
</div>
<div>
@ -19,18 +21,18 @@
</div>
<div class="col-span-3 md:col-span-2 lg:col-span-2 sm:col-span-3
">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6">
<div class="bg-white lg:min-w-0 lg:flex-1">
<h2 class="text-2xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-2xl">
<span class="block xl:inline">You are viewing the details of a </span>
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 dark:bg-gray-800">
<div class="bg-white lg:min-w-0 lg:flex-1 dark:bg-gray-800">
<h2 class="text-2xl tracking-tight text-gray-900 sm:text-2xl md:text-2xl">
<span class="block xl:inline dark:text-gray-200">You are viewing the details of a </span>
<!-- space -->
<span class="block text-indigo-600 inline">Zcash Unified Address.</span>
<span class="block text-indigo-600 inline dark:text-indigo-300">Zcash Unified Address.</span>
</h2>
</div>
<div class="mt-8">
<ul role="list" class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
<ul role="list" class="mt-2 border-t divide-y divide-gray-200 dark:divide-gray-900 dark:border-red-600">
<li class="relative py-6 flex space-x-4">
<div class="shrink-0">
@ -43,7 +45,7 @@
</div>
<div class="min-w-0 flex-1">
<h3 class="text-gray-900 text-xl">
<span class="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
<span class="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500 dark:text-gray-200">
<span class="inset-0" aria-hidden="true"></span>
Orchard Address
@ -68,7 +70,7 @@
</span>
</div>
<div class="min-w-0 flex-1">
<h3 class="text-gray-900 text-xl">
<h3 class="text-gray-900 text-xl dark:text-gray-200">
<span class="inset-0" aria-hidden="true"></span>
Sapling Address
</h3>
@ -91,7 +93,7 @@
</span>
</div>
<div class="min-w-0 flex-1">
<h3 class="text-gray-900 text-xl">
<h3 class="text-gray-900 text-xl dark:text-gray-200">
<span class="inset-0" aria-hidden="true"></span>
Transparent Address

View File

@ -1,29 +1,33 @@
<main class="py-4">
<main class="py-4 h-screen">
<div class="grid grid-cols-3 gap-4 px-4">
<div class="col-span-3 md:col-span-1 lg:col-span-1 sm:col-span-3">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 sticky top-10">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 sticky top-10 dark:bg-gray-800">
<h2 id="technical-details" class="font-medium text-gray-900">Details for the Zcash address:
</h2>
<p class="mt-1 text-lg leading-6 max-w-2xl text-gray-500 font-mono break-words">
<h2 id="technical-details" class="font-medium text-gray-900 dark:text-white">Details for the Zcash address:
</h2>
<p class="mt-1 text-lg leading-6 max-w-2xl text-gray-500 font-mono break-words dark:text-100">
<%= @address %>
</p>
<div class="px-0">
<img src={'data:image/png;base64, #{ @qr }'} atl={"QR code for the Zcash address #{ @address }"}/>
<div class="flex flex-row py-2">
<div class="px-0 dark:bg-gray-400 ">
<img src={'data:image/png;base64, #{ @qr }'} atl={"QR code for the Zcash address #{ @address }"}/>
</div>
</div>
<div>
<div class="flow-root mt-6">
<ul class="-my-5 divide-y divide-gray-200">
<li class="py-4 hover:bg-gray-50">
<ul class="my-5 divide-y divide-gray-200 dark:divide-gray-900">
<li class="py-4 hover:bg-gray-50 dark:hover:bg-gray-700 rounded">
<div class="flex items-center space-x-4">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 font-medium ">
<p class="text-sm text-gray-900 font-medium dark:text-gray-200">
Balance
</p>
</div>
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased">
Private
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased dark:text-gray-50"> Private
</div>
</div>
</li>
@ -32,11 +36,11 @@
<li class="py-4 hover:bg-gray-50">
<div class="flex items-center space-x-4">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 font-medium">
<p class="text-sm text-gray-900 font-medium dark:text-gray-200">
Received
</p>
</div>
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased">
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased dark:text-gray-50">
Private
</div>
</div>
@ -45,12 +49,11 @@
<li class="py-4 hover:bg-gray-50">
<div class="flex items-center space-x-4">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 font-medium">
<p class="text-sm text-gray-900 font-medium dark:text-gray-200">
Spent
</p>
</div>
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased">
Private
<div class="inline-flex items-center px-2.5 py-0.5 text-sm leading-5 font-medium text-gray-700 tabular-nums antialiased dark:text-gray-50"> Private
</div>
</div>
</li>
@ -61,7 +64,7 @@
</div>
<div class="col-span-3 md:col-span-2 lg:col-span-2 sm:col-span-3
">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 ">
<div class="bg-white lg:min-w-0 lg:flex-1">
<h2 class="text-2xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-2xl">
<span class="block xl:inline">Transactions using Z addresses are</span>

View File

@ -7,9 +7,9 @@
<div class="space-y-6 lg:col-start-1 lg:col-span-2">
<section aria-labelledby="block-details-title">
<div class="bg-white shadow sm:rounded-lg">
<div class="bg-white shadow sm:rounded-lg dark:bg-gray-800">
<div class="px-4 py-5 sm:px-6">
<h2 id="block-details-title" class="text-lg leading-6 font-medium text-gray-900">
<h2 id="block-details-title" class="text-lg leading-6 font-medium text-gray-900 dark:bg-gray-200">
Details for the Zcash block #<%= @block_data["height"] %>
</h2>
</div>

View File

@ -5,8 +5,8 @@
Zcash blocks mined on <%= @date %>
</h3>
<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-white-500">
<table class="min-w-full dark:text-gray-400">
<thead class="bg-white-500 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Height</th>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Hash</th>
@ -17,8 +17,8 @@
</thead>
<tbody class="bg-white-500 divide-y divide-gray-200">
<%= for block <- @blocks_data do %>
<tr class="hover:bg-indigo-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500">
<tr class="hover:bg-indigo-50 dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500 dark:text-white dark:hover:text-white">
<a href={'/blocks/#{block["height"]}'}>
@ -26,19 +26,19 @@
</a>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-4 py-4 whitespace-nowrap">
<a href={'/blocks/#{block["hash"] }'}>
<%= block["hash"] %>
</a>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-4 py-4 whitespace-nowrap">
<%= mined_time_without_rel(block["time"]) %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-4 py-4 whitespace-nowrap">
<%= block["confirmations"] %>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="px-4 py-4 whitespace-nowrap">
<%= block["difficulty"] %>
</td>

View File

@ -2,96 +2,96 @@
<div class="grid gap-4 grid-cols-1 mx-8">
<div class="space-y-6 lg:col-start-1 lg:col-span-2">
<section aria-labelledby="block-details-title">
<div class="bg-white shadow rounded-lg">
<div class="bg-white shadow rounded-lg dark:bg-gray-800">
<div class="px-4 py-5 sm:px-6">
<h2 id="block-details-title" class="text-lg leading-6 font-medium text-gray-900 inline-block">
<h2 id="block-details-title" class="text-lg leading-6 font-medium text-gray-900 inline-block dark:text-gray-50">
Details for the Zcash block</h2>
<h2 class="inline-block text-gun-powder-500"> #<%= @block_data.height %></h2>
<h2 class="inline-block text-gun-powder-500 dark:text-stone-300"> #<%= @block_data.height %></h2>
</div>
<div class="border-t border-gray-200 px-4 py-5 sm:px-6">
<dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
<div class="sm:col-span-2">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Hash
</dt>
<dd class="mt-1 text-sm text-gray-900 break-words">
<dd class="mt-1 text-sm text-gray-900 break-words dark:text-gray-50">
<%= @block_data.hash %>
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Mined on
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= mined_time @block_data.time %>
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Miner
</dt>
<a href={'/address/#{mined_by(@block_data.tx)}'}>
<dd class="mt-1 text-sm text-indigo-600 hover:text-indigo-500 break-words">
<dd class="mt-1 text-sm text-indigo-600 hover:text-indigo-400 break-words dark:text-indigo-200">
<%= mined_by @block_data.tx %>
</dd>
</a>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Height
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= @block_data.height %>
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Transaction count
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= transaction_count @block_data.tx %>
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Input count
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= vin_count @block_data.tx %>
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Output count
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= vout_count @block_data.tx %>
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Input total
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= input_total @block_data.tx %> ZEC
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Output total
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= output_total @block_data.tx %> ZEC
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-300">
Output total
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= output_total @block_data.tx %> ZEC
</dd>
</div>
@ -102,51 +102,51 @@
</section>
</div>
<section aria-labelledby="technical-details-title" class="lg:col-start-3 lg:col-span-1">
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6">
<h2 id="technical-details-" class="text-lg font-medium text-gray-900">Technical Details
<div class="bg-white px-4 py-5 shadow rounded-lg sm:px-6 dark:bg-gray-800">
<h2 id="technical-details-" class="text-lg font-medium text-gray-900 dark:text-gray-50">Technical Details
</h2>
<dl class="mt-4 border-t border-b border-gray-200 divide-y divide-gray-200 ">
<dl class="mt-4 border-t border-gray-200 divide-y divide-gray-200 divide-gray-600">
<div class="py-3 flex justify-between text-sm font-medium">
<dt class="text-gray-500">Difficulty</dt>
<dd class="text-gray-900"><%= @block_data.difficulty %></dd>
<dt class="text-gray-500 dark:text-gray-300">Difficulty</dt>
<dd class="text-gray-900 dark:text-gray-400"><%= @block_data.difficulty %></dd>
</div>
<div class="py-3 flex justify-between text-sm font-medium">
<dt class="text-gray-500">Size</dt>
<dd class="text-gray-900"><%= @block_data.size %> bytes</dd>
<dt class="text-gray-500 dark:text-gray-300">Size</dt>
<dd class="text-gray-900 dark:text-gray-400"><%= @block_data.size %> bytes</dd>
</div>
<div class="py-3 flex justify-between text-sm font-medium">
<dt class="text-gray-500">Version</dt>
<dd class="text-gray-900"><%= @block_data.version %></dd>
<dt class="text-gray-500 dark:text-gray-300">Version</dt>
<dd class="text-gray-900 dark:text-gray-50"><%= @block_data.version %></dd>
</div>
<div class="py-3 flex justify-between text-sm font-medium">
<dt class="text-gray-500">Confirmations</dt>
<dd class="text-gray-900"><%= @block_data.confirmations %></dd>
<dt class="text-gray-500 dark:text-gray-300">Confirmations</dt>
<dd class="text-gray-900 dark:text-gray-100"><%= @block_data.confirmations %></dd>
</div>
<div class="py-3 flex justify-between text-sm font-medium">
<dt class="text-gray-500">Bits</dt>
<dd class="text-gray-900"><%= @block_data.bits %></dd>
<dt class="text-gray-500 dark:text-gray-300">Bits</dt>
<dd class="text-gray-900 dark:text-gray-500"><%= @block_data.bits %></dd>
</div>
<div class="sm:col-span-2">
<div class="py-3 text-sm font-medium">
<dt class="text-gray-500">Merkle root</dt>
<dd class="text-gray-900 py-1 select-all break-words">
<dt class="text-gray-500 dark:text-gray-300">Merkle root</dt>
<dd class="text-gray-900 py-1 select-all break-words dark:text-gray-500">
<%= @block_data.merkleroot %>
</dd>
</div>
</div>
<div class="sm:col-span-2">
<div class="py-3 text-sm font-medium">
<dt class="text-gray-500">Chainwork</dt>
<dd class="text-gray-900 py-1 select-all break-words">
<dt class="text-gray-500 dark:text-gray-300">Chainwork</dt>
<dd class="text-gray-900 py-1 select-all break-words dark:text-gray-500">
<%= @block_data.chainwork %>
</dd>
</div>
</div>
<div class="sm:col-span-2">
<div class="py-3 text-sm font-medium">
<dt class="text-gray-500">Nonce</dt>
<dd class="text-gray-900 py-1 select-all break-words">
<dt class="text-gray-500 dark:text-gray-300">Nonce</dt>
<dd class="text-gray-900 py-1 select-all break-words dark:text-gray-500">
<%= @block_data.nonce %>
</dd>
</div>
@ -157,14 +157,14 @@
<div class="space-y-6 lg:col-start-1 lg:col-span-4">
<h4 class="font-medium text-gray-900">Transactions included in this block
</h4>
<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 bg-white shadow rounded-lg">
<thead class="bg-white">
<div class="shadow overflow-hidden rounded-lg overflow-x-auto">
<table class="min-w-full bg-white shadow rounded-lg dark:text-gray-400">
<thead class="bg-white dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ">
Block#
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ">
Hash
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@ -173,7 +173,7 @@
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Outputs
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Output (ZEC)
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@ -184,23 +184,23 @@
<tbody>
<%= for transaction <- @block_data.tx do %>
<tr class="bg-white hover:bg-indigo-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500 dark:text-white dark:hover:text-white">
<%= @block_data.height %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-200 dark:hover:text-indigo-400">
<a href={'/transactions/#{transaction.txid}'}>
<%= transaction.txid %>
</a>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-50">
<%= length(transaction.vin) %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-50">
<%= length(transaction.vout) %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-50">
<%= tx_out_total transaction %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@ -234,6 +234,11 @@
Mixed
</span>
<% end %>
<%= if tx_type(transaction) == "unknown" do %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-s font-medium bg-gray-200 text-gray-900 capitalize">
Unknown
</span>
<% end %>
</td>
</tr>
<% end %>

View File

@ -1,5 +1,5 @@
<%= render ZcashExplorerWeb.LayoutView, "header.html", assigns %>
<div class="bg-gray-50">
<div class="bg-gray-50 dark:bg-gray-900">
<%= @inner_content %>
</div>
<%= render ZcashExplorerWeb.LayoutView, "footer.html", assigns %>

View File

@ -1,14 +1,14 @@
<footer class="bg-gray-50">
<footer class="bg-gray-50 dark:bg-gray-900 isolate">
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
<div class="px-5 py-2">
<a href="/privacy.html" class="text-base text-gray-500 hover:text-gray-900">
<a href="/privacy.html" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-slate-100">
Privacy Policy
</a>
</div>
<div class="px-5 py-2">
<a href="http://zcashfgzdzxwiy7yq74uejvo2ykppu4pzgioplcvdnpmc6gcu5k6vwyd.onion/" class="text-base text-gray-500 hover:text-gray-900">
<a href="http://zcashfgzdzxwiy7yq74uejvo2ykppu4pzgioplcvdnpmc6gcu5k6vwyd.onion/" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-slate-100">
Onion V3
</a>
</div>

View File

@ -1,5 +1,5 @@
<header>
<nav x-data="{ open: false }" class="shrink-0 bg-indigo-600">
<nav x-data="{ open: false }" class="shrink-0 bg-indigo-600 dark:bg-gray-800">
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<!-- Logo section -->
@ -10,7 +10,7 @@
</div>
</a>
<a href="/">
<div class="shrink-0 px-1 text-white">
<div class="shrink-0 px-1 text-white dark:text-white">
Zcash Block Explorer
</div>
</a>
@ -19,21 +19,50 @@
<div class="flex-1 flex justify-center lg:justify-end">
<div class="w-full px-2 lg:px-6">
<label for="search" class="sr-only">transaction / block / address</label>
<div class="relative text-indigo-200 focus-within:text-gray-400">
<div class="relative text-gray-200 dark:text-slate-200 focus-within:text-gray-400 dark:focus-within:text-slate-800">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5" x-description="Heroicon name: solid/search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</div>
<form action="/search">
<input id="search" name="qs" class="block w-full pl-10 pr-3 py-2 bg-white/25 border border-transparent rounded-md leading-5 bg-indigo-400/25 text-indigo-100 placeholder-indigo-200 focus:outline-none focus:bg-white focus:ring-0 focus:placeholder-gray-400 focus:text-gray-900 sm:text-sm" placeholder="transaction / block / address" type="search">
<input id="search" name="qs" class="
block
w-full
pl-10
pr-3
py-2
border
border-transparent
rounded-md
leading-5
text-indigo-100
placeholder-indigo-200
focus:outline-none
focus:bg-white
focus:ring-0 focus:placeholder-gray-400
focus:text-gray-900
sm:text-sm
dark:focus:placeholder-white
dark:border-slate-600
dark:placeholder-slate-400
dark:text-white
dark:focus:ring-slate-500
dark:focus:border-slate-500
dark:hover:bg-slate-700 dark:focus:ring-slate-800
bg-white/25
dark:bg-slate-700
dark:focus:bg-slate-600
dark:placeholder-slate-200
dark:focus:text-gray-200
" placeholder="transaction / block / address" type="search">
</form>
</div>
</div>
</div>
<div class="flex lg:hidden">
<!-- Mobile menu button -->
<button type="button" class="bg-indigo-600 inline-flex items-center justify-center p-2 rounded-md text-indigo-400 hover:text-white hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-600 focus:ring-white" aria-controls="mobile-menu" @click="open = !open" aria-expanded="true" x-bind:aria-expanded="open.toString()">
<button type="button" class="bg-indigo-600 dark:bg-slate-600 inline-flex items-center justify-center p-2 rounded-md text-indigo-400 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-600 dark:focus:ring-offset-slate-600 focus:ring-white dark:focus:ring-white" aria-controls="mobile-menu" @click="open = !open" aria-expanded="true" x-bind:aria-expanded="open.toString()">
<span class="sr-only">Open main menu</span>
<svg x-description="Icon when menu is closed.
Heroicon name: outline/menu-alt-1" x-state:on="Menu open" x-state:off="Menu closed" class="h-6 w-6 hidden" :class="{ 'hidden': open, 'block': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@ -50,13 +79,13 @@ Heroicon name: outline/x" x-state:on="Menu open" x-state:off="Menu closed" class
<div class="flex items-center justify-end">
<div class="flex">
<a href="/mempool" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white">Mempool</a>
<a href="/mempool" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white dark:text-gray-400">Mempool</a>
<a href="/blocks" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white">Blocks</a>
<a href="/blocks" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white dark:text-gray-400">Blocks</a>
<div x-data="{ open: false }" @keydown.escape.stop="open = false" @click.away="open = false" class="relative inline-block text-left">
<div>
<button type="button" class=" inline-flex justify-center rounded-md px-4 py-2 text-sm font-medium focus:outline-none text-indigo-200 hover:text-white" id="options-menu" aria-expanded="true" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open">
<button type="button" class=" inline-flex justify-center rounded-md px-4 py-2 text-sm font-medium focus:outline-none text-indigo-200 hover:text-white dark:text-gray-400" id="options-menu" aria-expanded="true" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open">
Tools
<svg class="-mr-1 ml-2 h-5 w-5" x-description="Heroicon name: solid/chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
@ -64,18 +93,25 @@ Heroicon name: outline/x" x-state:on="Menu open" x-state:off="Menu closed" class
</button>
</div>
<div x-description="Dropdown menu, show/hide based on menu state." x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div x-description="Dropdown menu, show/hide based on menu state." x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-300" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1" role="none">
<a href="/nodes" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Nodes</a>
<a href="/broadcast" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Broadcast Transaction</a>
<a href="/payment-disclosure" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Payment Disclosure</a>
<a href="/vk" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Viewing Key</a>
<a href="/nodes" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white dark:bg-gray-300 dark:hover:bg-gray-500" role="menuitem">Nodes</a>
<a href="/broadcast" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white dark:bg-gray-300 dark:hover:bg-gray-500" role="menuitem">Broadcast Transaction</a>
<a href="/payment-disclosure" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white dark:bg-gray-300 dark:hover:bg-gray-500" role="menuitem">Payment Disclosure</a>
<a href="/vk" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white dark:bg-gray-300 dark:hover:bg-gray-500" role="menuitem">Viewing Key</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<div x-description="Mobile menu, show/hide based on menu state." class="lg:hidden" id="mobile-menu" x-show="open">

View File

@ -7,7 +7,14 @@
<%= live_title_tag assigns[:page_title] || " " %>
<link rel="stylesheet" href={"#{Routes.static_path(@conn, "/css/app.css")}"}/>
<%= csrf_meta_tag() %>
<script defer type="text/javascript" src={"#{Routes.static_path(@conn, "/js/app.js")}"}></script>
<script defer type="text/javascript" src={"#{Routes.static_path(@conn, "/js/app.js")}"}></script>
<script>
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head>
<body>
<%= @inner_content %>

View File

@ -1,4 +1,4 @@
<main class="py-4">
<main class="py-4 h-screen">
<div class="grid grid-cols-1 mx-8">
<%= live_render(@conn, ZcashExplorerWeb.BlockChainInfoLive) %>
</div>

View File

@ -1,6 +1,6 @@
<div class="mx-8 my-4">
<div class="mx-8 h-screen">
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3">
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3 dark:text-white">
Broadcast Zcash Transaction
</h3>
@ -43,7 +43,7 @@
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-green-800">
<h3 class="text-sm font-medium text-green-800 dark:text-slate-100">
Transaction broadcasted
</h3>
@ -71,13 +71,13 @@
<form class="space-y-8" action="/broadcast" method="post">
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600">
<div class="space-y-8 divide-slate-400 sm:space-y-5">
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600 dark:text-slate-50">
Paste the raw transaction here in hex format to broadcast it over the Zcash network.
</p>
<input type="hidden" value={@csrf_token} name="_csrf_token"/>
<textarea id="broadcast" name="tx-hex" rows="22" class="w-full shadow-sm bg-indigo-400/5 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border border-gray-300 rounded-md font-mono text-green-400 ">
</textarea>
<textarea id="broadcast" name="tx-hex" rows="22" class="w-full shadow-sm bg-slate-400/5 sm:text-sm border border-gray-300 rounded-md font-mono text-green-400 ">
</textarea>
<div class="pt-5 pb-5">
<div class="flex justify-center">

View File

@ -1,6 +1,6 @@
<div class="mx-8 my-4">
<div class="mx-8 h-screen">
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3">
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3 dark:text-white">
Payment Disclosure
</h3>
@ -41,7 +41,7 @@
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-green-800">
<h3 class="text-sm font-medium text-green-800 dark:text-white">
Details of the payment disclosure successfully retrieved from zcashd.
</h3>
</div>
@ -171,12 +171,12 @@
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600 py-4">
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600 py-4 dark:text-slate-100">
Paste the Zcash payment disclosure hexdata here to reveal details of a shielded payment.
</p>
<form class="space-y-8" action="/payment-disclosure" method="post">
<div class="space-y-8 divide-y divide-red-200 sm:space-y-5">
<div class="space-y-8 sm:space-y-5">
<input type="hidden" value={@csrf_token} name="_csrf_token"/>

View File

@ -3,7 +3,7 @@
<div>
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden dark:bg-gray-800">
<dt>
<div class="absolute bg-green-500 rounded-md p-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -14,16 +14,16 @@
</dt>
<dd class="ml-16 pb-6 flex items-baseline sm:pb-7">
<%= live_render(@conn, ZcashExplorerWeb.OrchardPoolLive) %>
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6 dark:bg-gray-700">
<div class="text-sm">
<a href="/blockchain-info" class="font-medium text-indigo-600 hover:text-indigo-500">View blockchain info<span class="sr-only"> View blockchain info</span></a>
<a href="/blockchain-info" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-white dark:hover:text-slate-50">View blockchain info<span class="sr-only"> View blockchain info</span></a>
</div>
</div>
</dd>
</div>
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden dark:bg-gray-800">
<dt>
<div class="absolute bg-green-500 rounded-md p-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@ -36,15 +36,15 @@
<%= live_render(@conn, ZcashExplorerWeb.BlockCountLive) %>
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6 dark:bg-gray-700">
<div class="text-sm">
<a href="/blocks" class="font-medium text-indigo-600 hover:text-indigo-500"> View blocks<span class="sr-only"> View blocks</span></a>
<a href="/blocks" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-white dark:hover:text-slate-50"> View blocks<span class="sr-only"> View blocks</span></a>
</div>
</div>
</dd>
</div>
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden dark:bg-gray-800">
<dt>
<div class="absolute bg-indigo-500 rounded-md p-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -55,15 +55,15 @@
</dt>
<dd class="ml-16 pb-6 flex items-baseline sm:pb-7">
<%= live_render(@conn, ZcashExplorerWeb.MempoolInfoLive) %>
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6 dark:bg-gray-700">
<div class="text-sm">
<a href="/mempool" class="font-medium text-indigo-600 hover:text-indigo-500">View mempool transactions<span class="sr-only"> View mempool transactions</span></a>
<a href="/mempool" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-white dark:hover:text-slate-50">View mempool transactions<span class="sr-only"> View mempool transactions</span></a>
</div>
</div>
</dd>
</div>
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden dark:bg-gray-800">
<dt>
<div class="absolute bg-green-500 rounded-md p-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -74,9 +74,9 @@
</dt>
<dd class="ml-16 pb-6 flex items-baseline sm:pb-7">
<%= live_render(@conn, ZcashExplorerWeb.BlockChainSizeLive) %>
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6 dark:bg-gray-700">
<div class="text-sm">
<a href="/blockchain-info" class="font-medium text-indigo-600 hover:text-indigo-500">View blockchain info<span class="sr-only"> View blockchain info</span></a>
<a href="/blockchain-info" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-white dark:hover:text-slate-50">View blockchain info<span class="sr-only"> View blockchain info</span></a>
</div>
</div>
</dd>
@ -86,7 +86,7 @@
<div class="grid gap-4 grid-cols-1 md:grid-cols-1 mx-4 my-2">
<div>
<h3 class="text-lg leading-6 font-medium text-midnight-500 py-3">
<h3 class="text-lg leading-6 font-medium text-midnight-500 py-3 dark:text-white">
Recent Blocks
</h3>
<%= live_render(@conn, ZcashExplorerWeb.RecentBlocksLive) %>
@ -94,7 +94,7 @@
</div>
<div>
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3">
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3 dark:text-white">
Recent Transactions
</h3>
<%= live_render(@conn, ZcashExplorerWeb.RecentTransactionsLive) %>

View File

@ -1,4 +1,4 @@
<main class="py-4">
<main class="py-4 h-screen">
<div class="grid grid-cols-1 mx-8">
<h3 class="text-lg leading-6 font-medium text-gray-500 py-2">
Network nodes connected to Zcash Block Explorer:

View File

@ -1,6 +1,6 @@
<main class="py-4">
<main class="py-4 h-screen">
<div class="grid grid-cols-1 mx-8">
<h3 class="text-lg leading-6 font-medium text-gray-500 py-2">
<h3 class="text-lg leading-6 font-medium text-gray-500 py-2 dark:text-white">
Zcash Viewing Key
</h3>
<form class="space-y-8" action="/vk" method="post">
@ -32,7 +32,7 @@
</div>
<% end %>
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600">
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600 dark:text-slate-50">
Paste the viewing key, click on the "Start Importing" button and grab a coffee!
</p>
<input type="hidden" value={@csrf_token} name="_csrf_token"/>
@ -41,9 +41,9 @@
<div>
<label for="height" class="block text-sm font-medium text-gray-700">Start Height</label>
<label for="height" class="block text-sm font-medium text-gray-700 dark:text-white">Start Height</label>
<div class="mt-1">
<input type="text" name="scan-height" id="scan-height" class="shadow-sm focus:ring-indigo-500 bg-opacity-5 focus:border-indigo-500 block w-1/4 sm:text-sm border-gray-300` bg-indigo-400/25 rounded-md text-green-400 font-mono" placeholder="height" value={@height}>
<input type="text" name="scan-height" id="scan-height" class="shadow-sm focus:ring-indigo-500 bg-opacity-5 focus:border-indigo-500 block w-1/4 sm:text-sm border-gray-300 bg-indigo-400/25 rounded-md text-green-400 font-mono border dark:border-gray-100" placeholder="height" value={@height}>
</div>
</div>

View File

@ -1,4 +1,4 @@
<main class="py-4">
<main class="py-4 h-screen">
<div class="grid grid-cols-1 mx-8">
<h3 class="text-lg leading-6 font-medium text-gray-500 py-2">
Zcash Viewing Key

View File

@ -2,11 +2,11 @@
<div class="grid gap-4 mx-2 grid-cols-1 md:mx-8">
<div class="space-y-6 lg:col-start-1 lg:col-span-2">
<section aria-labelledby="block-details-title">
<div class="bg-white-500 shadow rounded-lg">
<div class="bg-white-500 shadow rounded-lg dark:bg-gray-800">
<div class="px-4 py-5 sm:px-6">
<h2 id="block-details-title" class="text-lg leading-6 font-medium text-gray-900 inline-block break-words">
<h2 id="block-details-title" class="text-lg leading-6 font-medium text-gray-900 inline-block break-words dark:text-gray-50">
Details for the Zcash Transaction ID </h2>
<h2 class="md:inline-block text-gun-powder-500 break-words"><%= @tx.txid %>
<h2 class="md:inline-block text-gun-powder-500 break-words dark:text-gray-200"><%= @tx.txid %>
</h2>
</div>
<div class="border-t border-gray-200 px-4 py-5 sm:px-6">
@ -16,7 +16,7 @@
<dt class="text-sm font-medium text-gray-500">
Confirmations
</dt>
<dd class="mt-1 text-xl font-semibold text-gray-900">
<dd class="mt-1 text-xl font-semibold text-gray-900 dark:text-gray-50">
<%= if @tx.confirmations == nil do %>
0
<% else %>
@ -30,7 +30,7 @@
<dt class="text-sm font-medium text-gray-500">
Time (UTC)
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= ZcashExplorerWeb.BlockView.mined_time(@tx.time) %>
</dd>
</div>
@ -82,7 +82,7 @@
<dt class="text-sm font-medium text-gray-500">
Block Id
</dt>
<dd class="mt-1 text-sm text-gray-900 break-words">
<dd class="mt-1 text-sm text-gray-900 break-words dark:text-gray-50">
<a href={'/blocks/#{@tx.height}'}>
<%= @tx.height %>
</a>
@ -93,7 +93,7 @@
<dt class="text-sm font-medium text-gray-500">
Public Inputs / Outputs
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= vin_vout_count @tx %>
</dd>
</div>
@ -102,7 +102,7 @@
<dt class="text-sm font-medium text-gray-500">
Shielded Inputs / Outputs
</dt>
<dd class="mt-1 text-sm text-gray-900 break-words">
<dd class="mt-1 text-sm text-gray-900 break-words dark:text-gray-50">
<%= length(@tx.vShieldedSpend) %> / <%= length(@tx.vShieldedOutput) %>
</dd>
</div>
@ -111,7 +111,7 @@
<dt class="text-sm font-medium text-gray-500">
JoinSplits ?
</dt>
<dd class="mt-1 text-sm text-gray-900 break-words">
<dd class="mt-1 text-sm text-gray-900 break-words dark:text-gray-50">
<%= if ZcashExplorerWeb.BlockView.contains_sprout(@tx) do %>
Yes -
<%= ZcashExplorerWeb.BlockView.get_joinsplit_count(@tx) %>
@ -125,7 +125,7 @@
<dt class="text-sm font-medium text-gray-500">
<%= get_shielded_pool_label(@tx) %>
</dt>
<dd class="mt-1 text-sm text-gray-900 break-words">
<dd class="mt-1 text-sm text-gray-900 break-words dark:text-gray-50">
<%= format_zec(get_shielded_pool_value(@tx)) %>
</dd>
</div>
@ -135,7 +135,7 @@
<dt class="text-sm font-medium text-gray-500">
Overwintered?
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= @tx.overwintered %>
</dd>
</div>
@ -143,7 +143,7 @@
<dt class="text-sm font-medium text-gray-500">
Size (bytes)
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= @tx.size %>
</dd>
</div>
@ -151,7 +151,7 @@
<dt class="text-sm font-medium text-gray-500">
Version
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= @tx.version %>
</dd>
</div>
@ -159,7 +159,7 @@
<dt class="text-sm font-medium text-gray-500">
Locktime
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= @tx.locktime %>
</dd>
</div>
@ -167,7 +167,7 @@
<dt class="text-sm font-medium text-gray-500">
Transaction fee
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<%= if ZcashExplorerWeb.BlockView.tx_type(@tx) == "coinbase" do %>
0.0 ZEC
<% end %>
@ -201,7 +201,7 @@
<dt class="text-sm font-medium text-gray-500">
Raw TX
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<a href={'/transactions/#{@tx.txid}/raw'} class="font-medium text-indigo-600 hover:text-indigo-500">
<span class="flex-1 w-0 break-all">
JSON
@ -215,7 +215,7 @@
<dt class="text-sm font-medium text-gray-500">
Orchard Action transfers
</dt>
<dd class="mt-1 text-sm text-gray-900">
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<span class="flex-1 w-0 break-all">
<%= orchard_actions(@tx) %>
@ -229,21 +229,21 @@
</div>
</section>
<h4 class="font-medium text-gray-900">
Transfers
<h4 class="font-medium text-gray-900 dark:text-gray-50">
PublicTransfers
</h4>
<div class="grid md:grid-cols-2 gap-4 sm:grid-cols-1 lg:grid-cols-9">
<div class="sm:col-span-9 md:col-span-9 lg:col-span-4">
Inputs (<%= vin_count(@tx.vin) %>)
<h6 class="dark:text-gray-50">Inputs (<%= vin_count(@tx.vin) %>) </h6>
<div class="py-4">
<%= if vin_count(@tx.vin) > 0 && ZcashExplorerWeb.BlockView.tx_type(@tx) != "coinbase" do %>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 py-2">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200 dark:border-gray-800 dark:divide-gray-600">
<%= for input <- @tx.vin do %>
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm hover:bg-indigo-50">
<div class="w-0 flex-1 flex items-center">
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm hover:bg-indigo-50 dark:hover:bg-gray-800">
<div class="w-0 flex-1 flex items-center dark:text-gray-50">
<a href={'/address/#{input.address}'}>
@ -290,22 +290,24 @@ Inputs (<%= vin_count(@tx.vin) %>)
<div class="lg:col-span-4">
<h6 class="dark:text-gray-50">
Outputs (<%= vout_count(@tx.vout) %>)
</h6>
<div class="py-3">
<%= if vout_count(@tx.vout) > 0 do %>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 py-2">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<ul class="border rounded-md divide-y border-gray-200 divide-gray-200 dark:border-gray-800 dark:divide-gray-600">
<%= for op <- @tx.vout do %>
<%= for address <- op.scriptPubKey.addresses do %>
<li class="pl-2 pr-4 py-3 flex items-center justify-between text-sm hover:bg-indigo-50">
<li class="pl-2 pr-4 py-3 flex items-center justify-between text-sm hover:bg-indigo-50 dark:hover:bg-gray-800">
<div class="w-0 flex-1 flex items-center">
<a href={'/address/#{address }'}>
<span class="flex-1 w-0 break-all">
<span class="flex-1 w-0 break-all dark:text-gray-50">
<%= address %>
</span>