+
- Block Details
+
+
+
-
+
+
diff --git a/src/explorer/Blocks.vue b/src/explorer/Blocks.vue
new file mode 100644
index 0000000..7be4304
--- /dev/null
+++ b/src/explorer/Blocks.vue
@@ -0,0 +1,159 @@
+
+
+
+ Transactions:
-
-
+
+
+
-
+
+
+
+
+
+
+ Block Hash:
+
+
+
+ {{ block_hash }}
+
+
+
+ Height:
+ #{{ data?.height || "0" }}
+
+
+
+ Parent Block:
+
+
+
+
+ {{ data?.parent_hash }}
+
+
+
+
+ Timestamp:
+ {{ data?.timestamp ? formatTimestamp(data.timestamp) : "..." }}
+
+
+
+ Transactions:
+
+ {{ blockStore.tx_hashes_by_block?.[block_hash]?.length || 0 }} transactions
+
+
+
+
- Transactions
+
+
+
-
+
+
+
+ TX
+
+ {{ tx_hash }}
+ {{
- JSON.stringify(blockStore.tx_hashes_by_block?.[block_hash], null, 4)
- }}
+
+
Block Data
+
+ {{ JSON.stringify(data, null, 2) }}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/explorer/Contract.vue b/src/explorer/Contract.vue
index dda4ddd..0efb87b 100644
--- a/src/explorer/Contract.vue
+++ b/src/explorer/Contract.vue
@@ -14,16 +14,99 @@ watchEffect(() => {
});
const data = computed(() => contractStore.value.data?.[contract_name.value]);
+
+const tabs = [
+ { name: 'Overview', active: true },
+ { name: 'Raw JSON', active: false }
+];
-
+
+
+
+ All Blocks
+Explore all blocks in the Hylé blockchain
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Block #{{ block.height }}
+
+
+ {{ block.hash.slice(0, 10) }}...{{ block.hash.slice(-6) }}
+
+
+ {{ getTimeAgo(block.timestamp) }}
+
+
+
+ Parent: {{ block.parent_hash.slice(0, 8) }}...
+
+
+ Finalized
+
+
+
+
+
+
+ Page {{ currentPage }} of {{ totalPages }}
+
+
+
+
-
-
Contract {{ contract_name }}
-
-
+
+
diff --git a/src/explorer/Header.vue b/src/explorer/Header.vue
index b6a3b4e..8c12c47 100644
--- a/src/explorer/Header.vue
+++ b/src/explorer/Header.vue
@@ -1,24 +1,9 @@
- {{ JSON.stringify(data, null, 4) }}
+
+
+
+
+
+
+
+ Contract Details
+
+
+
+
+
+
+
+
+
+
+
+ Contract Name:
+
+
+
+ {{ contract_name }}
+
+
+
+ Transaction Hash:
+ {{ data?.tx_hash }}
+
+
+
+ Verifier:
+ {{ data?.verifier }}
+
+
+
+ Program ID:
+ {{ data?.program_id }}
+
+
+
+ State Digest:
+
+
+
+
+ Total Transactions:
+ {{ data?.total_transactions || '0' }}
+
+
+
- Contract Data
+
+{{ JSON.stringify(data, null, 2) }}
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
\ No newline at end of file
diff --git a/src/explorer/components/NetworkChart.vue b/src/explorer/components/NetworkChart.vue
new file mode 100644
index 0000000..0d214aa
--- /dev/null
+++ b/src/explorer/components/NetworkChart.vue
@@ -0,0 +1,97 @@
+
+
+
+ )",
- secondary: "rgb(var(--color-secondary) / )",
- "secondary-darker": "rgb(var(--color-secondary-darker) / )",
+ background: "var(--background)",
+ foreground: "var(--foreground)",
+ primary: "#DF6445", // Coral/Orange
+ secondary: "#1E2933", // Dark Blue/Navy
+ neutral: "#516273", // Gray/Slate
+ black: "#000000", // Pure Black
+ white: "#FFFFFF", // Pure White
},
fontFamily: {
- text: ["Roboto", "sans-serif"],
- anton: ['"Anton"', "sans-serif"],
+ text: ["Inter", "sans-serif"],
+ display: ["Montserrat", "sans-serif"],
},
+ borderRadius: {
+ 'xl': '1rem',
+ '2xl': '1.5rem',
+ },
+ boxShadow: {
+ 'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+ }
},
},
plugins: [],
Tx 0x{{ tx_hash }}
-
- Block:
Type: {{ data?.transaction_type }}
-Status: {{ data?.transaction_status }}
-
-
+
+
diff --git a/src/explorer/Transactions.vue b/src/explorer/Transactions.vue
new file mode 100644
index 0000000..a2fa838
--- /dev/null
+++ b/src/explorer/Transactions.vue
@@ -0,0 +1,27 @@
+
+
+
+ {{ JSON.stringify(data, null, 4) }}
+
+
+
+
+
+
+
+
+
+ Transaction Details
+
+
+
+
+
+
+
+
+
+
+ Transaction Hash:
+
+
+
+ {{ tx_hash }}
+
+
+
+ Block:
+
+ #{{ data?.block_hash?.slice(0, 8) || "..." }}
+
+
+
+ Transaction Type:
+ {{ data?.transaction_type || "BlobTransaction" }}
+
+
+
+ Status:
+
+
+
+
+ {{ data?.transaction_status || "Pending" }}
+
+
+ Timestamp:
+ {{ block?.timestamp ? formatTimestamp(block.timestamp) : "?" }}
+
+
+
-
+
+ Version:
+ {{ data?.version || 1 }}
+
+
+
+ Fee:
+ ?
+
+
+
+
Transaction Data
+{{ JSON.stringify(data, null, 2) }}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/explorer/components/Navbar.vue b/src/explorer/components/Navbar.vue
new file mode 100644
index 0000000..2901c0a
--- /dev/null
+++ b/src/explorer/components/Navbar.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+ All Transactions
+Explore all transactions in the Hylé blockchain
+
+
+
+
+
+ Coming Soon
+Transaction history page is under development
+
+
+
+
+
+ Hylé Explorer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 83a978c..bc9fe36 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,8 @@ import Home from "@/explorer/Home.vue";
import Transaction from "./explorer/Transaction.vue";
import Block from "./explorer/Block.vue";
import Contract from "./explorer/Contract.vue";
+import Blocks from "./explorer/Blocks.vue";
+import Transactions from "./explorer/Transactions.vue";
const routes = [
{ path: "/", component: Home, name: "Home" },
@@ -19,6 +21,16 @@ const routes = [
component: Block,
name: "Block",
},
+ {
+ path: "/blocks",
+ component: Blocks,
+ name: "Blocks",
+ },
+ {
+ path: "/transactions",
+ component: Transactions,
+ name: "Transactions",
+ },
{
path: "/contract/:contract_name",
component: Contract,
diff --git a/src/state/transactions.ts b/src/state/transactions.ts
index ee9bd19..f9a4bd1 100644
--- a/src/state/transactions.ts
+++ b/src/state/transactions.ts
@@ -32,5 +32,6 @@ export class TransactionStore {
const response = await fetch(`${getNetworkApiUrl(this.network)}/v1/indexer/transaction/hash/${tx_hash}?no_cache=${Date.now()}`);
let item = await response.json();
this.data[item.tx_hash] = item;
+ return item;
}
}
diff --git a/src/style.css b/src/style.css
index 5f16e3c..f3b6392 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,8 +4,40 @@
@layer base {
:root {
+ --background: #F8F9FA;
+ --foreground: #1E2933;
--color-primary: 224 72 46;
--color-secondary: 245 245 245;
--color-secondary-darker: 225 225 225;
}
}
+
+@layer components {
+ .card {
+ @apply bg-white rounded-2xl shadow-card p-6 transition-all duration-200 hover:shadow-lg;
+ }
+
+ .section-title {
+ @apply text-2xl font-display font-bold text-secondary mb-4;
+ }
+
+ .link-item {
+ @apply p-4 rounded-xl transition-all duration-200 hover:bg-neutral/5;
+ }
+
+ .hash-text {
+ @apply font-mono text-xs text-neutral hover:text-primary transition-colors;
+ }
+
+ .stat-card {
+ @apply bg-white/50 backdrop-blur-sm p-4 rounded-xl border border-white/20 shadow-sm;
+ }
+
+ .data-grid {
+ @apply grid gap-4 md:grid-cols-2 lg:grid-cols-3;
+ }
+
+ .list-item {
+ @apply flex items-center space-x-3 p-3 rounded-lg hover:bg-secondary/5 transition-colors;
+ }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index ad8527f..f2010b9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,14 +4,25 @@ export default {
theme: {
extend: {
colors: {
- primary: "rgb(var(--color-primary) /
+
+ {{ title }}
+ + {{ period || 'Last 6 Hours' }} + +
+
+