Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI/UX redesign #11

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

UI/UX redesign #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dad6b8a
UI modif
MatteoMer Feb 20, 2025
46ad220
timestamp on tx page + remove some fake data
BertrandD Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

package-lock.json
node_modules
dist
dist-ssr
Expand Down
Binary file modified bun.lockb
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700&display=swap" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@
"@noir-lang/backend_barretenberg": "^0.30.0",
"@noir-lang/noir_js": "^0.30.0",
"asn1.js": "^5.4.1",
"chart.js": "^4.4.8",
"dotenv": "^16.4.5",
"face-api.js": "^0.22.2",
"pkijs": "^3.2.4",
"protobufjs": "^7.4.0",
"rollup-plugin-copy": "^3.5.0",
"vue": "^3.5.13",
"vue-chartjs": "^5.3.2",
"vue-router": "^4.5.0"
},
"devDependencies": {
Expand All @@ -31,7 +33,7 @@
"rollup-plugin-visualizer": "^5.12.0",
"tailwindcss": "^3.4.15",
"typescript": "^5.7.2",
"vite": "^5.4.11",
"vite": "^5.4.14",
"vue-tsc": "^2.1.10"
}
}
22 changes: 11 additions & 11 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ h3,
h4,
h5,
h6 {
@apply font-anton uppercase;
@apply font-display uppercase;
}

h1 {
Expand All @@ -27,27 +27,27 @@ h2 {
}

body {
@apply bg-primary;
@apply bg-background text-foreground;
}

button {
@apply bg-gray-900 font-anton uppercase rounded-lg px-4 py-2 text-white;
@apply font-display uppercase rounded-xl transition-all duration-200;
}

button:hover:not(:disabled) {
@apply tracking-widest;
button:not([class*="bg-"]) {
@apply bg-white/80 backdrop-blur-sm border border-white/20 text-secondary hover:bg-secondary/5;
}

button:active:not(:disabled) {
@apply bg-secondary text-primary;
@apply bg-primary/10 text-primary border-primary/20;
}

button:disabled {
@apply bg-gray-500 text-opacity-50;
@apply opacity-50 cursor-not-allowed;
}

p a {
@apply border-b-2 border-secondary;
@apply border-b-2 border-primary;
}

i.spinner {
Expand All @@ -58,14 +58,14 @@ i.spinner {
input,
select,
textarea {
@apply text-primary font-mono p-2 rounded-lg leading-snug;
@apply text-foreground font-text p-2 rounded-lg leading-snug;
}

input[type="file"] {
@apply text-secondary text-sm;
@apply text-neutral text-sm;
}

label {
@apply font-anton bg-opacity-50 bg-black px-2 rounded-t-lg;
@apply font-display bg-secondary/10 px-2 rounded-t-lg text-secondary;
}
</style>
159 changes: 138 additions & 21 deletions src/explorer/Block.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import Header from "@/explorer/Header.vue";
import Navbar from "@/explorer/components/Navbar.vue";
import { blockStore } from "@/state/data";
import { computed, watchEffect } from "vue";
import { useRoute } from "vue-router";
Expand All @@ -15,31 +15,148 @@ watchEffect(() => {
});

const data = computed(() => blockStore.value.data?.[block_hash.value]);

const tabs = [
{ name: "Overview", active: true },
{ name: "Raw JSON", active: false },
];

const formatTimestamp = (date: Date) => {
return `${getTimeAgo(date)} (${new Date(date).toLocaleString()})`;
};

function getTimeAgo(date: Date | string | number) {
const seconds = Math.floor((new Date().getTime() - new Date(date).getTime()) / 1000);
if (seconds < 60) return `${seconds} secs ago`;
const minutes = Math.floor(seconds / 60);
if (minutes < 60) return `${minutes} mins ago`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours} hours ago`;
const days = Math.floor(hours / 24);
return `${days} days ago`;
}
</script>

<template>
<div class="container m-auto">
<Header></Header>
<div class="px-8 py-4 bg-white rounded-xl text-gray-700">
<h2 class="mb-4">Block {{ block_hash }}</h2>
<p>
Parent: <RouterLink :to="{ name: 'Block', params: { block_hash: data?.parent_hash } }">{{ data?.parent_hash }}</RouterLink>
</p>
<p>Height: {{ data?.height }}</p>
<div class="mt-4">
<pre class="bg-gray-100 p-4 rounded-xl text-xs font-mono">{{ JSON.stringify(data, null, 4) }}</pre>
<div class="min-h-screen bg-background">
<Navbar />
<main class="container mx-auto px-4 py-6">
<div class="mb-6">
<h1 class="text-2xl font-display text-secondary mb-4">Block Details</h1>
<div class="flex gap-2">
<button
v-for="tab in tabs"
:key="tab.name"
:class="[
'px-6 py-2 text-sm font-medium transition-colors rounded-xl',
tab.active
? 'bg-primary/10 text-primary border border-primary/20'
: 'bg-white/80 backdrop-blur-sm border border-white/20 text-secondary hover:bg-secondary/5',
]"
>
{{ tab.name }}
</button>
</div>
</div>
<div class="mt-4">
<h3 class="m-0">Transactions:</h3>
<div class="flex flex-col">
<p v-for="tx_hash in blockStore.tx_hashes_by_block?.[block_hash] || []" :key="tx_hash">
<router-link :to="{ name: 'Transaction', params: { tx_hash } }"> - {{ tx_hash }} </router-link>
</p>

<!-- Basic Info Card -->
<div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-sm p-6 border border-white/20 mb-4">
<div class="space-y-4">
<div class="grid grid-cols-[200px_1fr] gap-4 py-3 border-b border-secondary/5">
<span class="text-sm text-neutral">Block Hash:</span>
<div class="flex items-center gap-2">
<span class="font-mono text-sm text-secondary">{{ block_hash }}</span>
<button class="p-2 text-primary hover:bg-primary/5 rounded-lg transition-colors" title="Copy to clipboard">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
</button>
</div>
</div>

<div class="grid grid-cols-[200px_1fr] gap-4 py-3 border-b border-secondary/5">
<span class="text-sm text-neutral">Height:</span>
<span class="text-secondary font-medium">#{{ data?.height || "0" }}</span>
</div>

<div class="grid grid-cols-[200px_1fr] gap-4 py-3 border-b border-secondary/5">
<span class="text-sm text-neutral">Parent Block:</span>
<div class="flex items-center gap-2">
<RouterLink
:to="{ name: 'Block', params: { block_hash: data?.parent_hash } }"
class="font-mono text-sm text-primary hover:text-primary/80"
>
{{ data?.parent_hash }}
</RouterLink>
<button class="p-2 text-primary hover:bg-primary/5 rounded-lg transition-colors" title="Copy to clipboard">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
</button>
</div>
</div>

<div class="grid grid-cols-[200px_1fr] gap-4 py-3 border-b border-secondary/5">
<span class="text-sm text-neutral">Timestamp:</span>
<span class="text-secondary font-medium">{{ data?.timestamp ? formatTimestamp(data.timestamp) : "..." }}</span>
</div>

<div class="grid grid-cols-[200px_1fr] gap-4 py-3 border-b border-secondary/5">
<span class="text-sm text-neutral">Transactions:</span>
<span class="text-secondary font-medium">
{{ blockStore.tx_hashes_by_block?.[block_hash]?.length || 0 }} transactions
</span>
</div>
</div>
</div>

<!-- Transactions List -->
<div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-sm p-6 border border-white/20 mb-4">
<h3 class="text-lg font-medium text-secondary mb-4">Transactions</h3>
<div class="space-y-2">
<RouterLink
v-for="tx_hash in blockStore.tx_hashes_by_block?.[block_hash] || []"
:key="tx_hash"
:to="{ name: 'Transaction', params: { tx_hash } }"
class="flex items-center justify-between p-3 hover:bg-secondary/5 rounded-lg transition-colors"
>
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-secondary/10 rounded-lg flex items-center justify-center">
<span class="text-secondary text-sm">TX</span>
</div>
<span class="font-mono text-sm text-neutral">{{ tx_hash }}</span>
</div>
<svg class="w-4 h-4 text-neutral" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</RouterLink>
</div>
<pre class="mt-2 bg-gray-100 p-4 rounded-xl text-xs font-mono">{{
JSON.stringify(blockStore.tx_hashes_by_block?.[block_hash], null, 4)
}}</pre>
</div>
</div>

<!-- Block Data -->
<div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-sm p-6 border border-white/20">
<h3 class="text-lg font-medium text-secondary mb-4">Block Data</h3>
<pre class="bg-secondary/5 p-4 rounded-xl text-xs font-mono text-neutral overflow-x-auto">
{{ JSON.stringify(data, null, 2) }}
</pre
>
</div>
</main>
</div>
</template>

<style scoped>
pre {
max-height: 400px;
}
</style>
Loading