Add block/contract + page-views

Hyle-org · Dec 11, 2024 · 26d16dc · 26d16dc
1 parent 188d738
commit 26d16dc
Show file tree

Hide file tree

Showing 14 changed files with 225 additions and 50 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
diff --git a/index.html b/index.html
@@ -8,10 +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=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap"
-            rel="stylesheet"
-        />
+        <link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap" rel="stylesheet" />
     </head>
     <body>
         <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -6,7 +6,7 @@
 
 <style>
 html {
-    @apply font-garamond font-normal leading-snug;
+    @apply font-text font-normal leading-snug;
 }
 
 h1,
@@ -26,12 +26,8 @@ h2 {
     @apply text-xl;
 }
 
-p {
-    @apply font-garamond text-xl leading-6;
-}
-
 body {
-    @apply bg-primary text-white font-garamond;
+    @apply bg-primary;
 }
 
 button {

diff --git a/src/explorer/Block.vue b/src/explorer/Block.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import Header from "@/explorer/Header.vue";
+import { blockStore } from "@/state/data";
+import { computed, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const block_hash = computed(() => route.params.block_hash as string);
+
+watchEffect(() => {
+    if (!blockStore.value.data[block_hash.value]) {
+        blockStore.value.load(block_hash.value);
+    }
+});
+
+const data = computed(() => blockStore.value.data?.[block_hash.value]);
+</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">Tx 0x{{ 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>
+        </div>
+    </div>
+</template>
diff --git a/src/explorer/Contract.vue b/src/explorer/Contract.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Header from "@/explorer/Header.vue";
+import { contractStore } from "@/state/data";
+import { computed, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const contract_name = computed(() => route.params.contract_name as string);
+
+watchEffect(() => {
+    if (!contractStore.value.data[contract_name.value]) {
+        contractStore.value.load(contract_name.value);
+    }
+});
+
+const data = computed(() => contractStore.value.data?.[contract_name.value]);
+</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">Contract {{ contract_name }}</h2>
+            <div class="mt-4">
+                <pre class="bg-gray-100 p-4 rounded-xl text-xs font-mono">{{ JSON.stringify(data, null, 4) }}</pre>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/explorer/Header.vue b/src/explorer/Header.vue
@@ -5,7 +5,7 @@ import NetworkSelector from "@/explorer/NetworkSelector.vue";
 
 <template>
     <div class="border-b border-secondary flex items-center mb-4">
-        <div class="flex items-center gap-4">
+        <div class="flex items-center gap-4 mr-4">
             <RouterLink :to="{ name: 'Home' }">
                 <h3 class="my-1"><img :src="Logo" alt="Hylé logo" class="h-16" /></h3>
             </RouterLink>

diff --git a/src/explorer/Home.vue b/src/explorer/Home.vue
@@ -1,35 +1,54 @@
 <script setup lang="ts">
 import Header from "@/explorer/Header.vue";
-import { blockStore, transactionStore } from "@/state/data";
+import { blockStore, contractStore, transactionStore } from "@/state/data";
 </script>
 
 <template>
     <div class="container m-auto">
         <Header></Header>
-        <div class="px-4">
+        <div>
+            <div class="bg-white p-8 py-4 text-gray-700 rounded-xl mb-4">
+                <h2>Smart Contracts</h2>
+                <hr />
+                <div class="flex flex-col">
+                    <RouterLink
+                        :to="{ name: 'Contract', params: { contract_name } }"
+                        v-for="contract_name in Object.keys(contractStore.data)"
+                        :key="contract_name"
+                    >
+                        <div>
+                            <p class="capitalize">- {{ contract_name }}</p>
+                        </div>
+                    </RouterLink>
+                </div>
+            </div>
             <div class="grid grid-cols-2 gap-4">
-                <div class="bg-white p-4 text-gray-700 rounded-xl">
+                <div class="bg-white px-8 py-4 text-gray-700 rounded-xl">
                     <h2>Latest blocks</h2>
                     <hr />
                     <div class="flex flex-col">
-                        <div v-for="block in blockStore.blocks">
-                            <h4>Block {{ block.height }}</h4>
-                            <p class="whitespace-pre font-mono text-xs">{{ block.hash }}</p>
-                        </div>
+                        <RouterLink :to="{ name: 'Block', params: { block_hash: hash } }" v-for="hash in blockStore.latest" :key="hash">
+                            <div v-for="hash in blockStore.latest">
+                                <h4>Block {{ blockStore.data[hash].height }}</h4>
+                                <p class="whitespace-pre text-xs">{{ hash }}</p>
+                            </div>
+                        </RouterLink>
                     </div>
                 </div>
-                <div class="bg-white p-4 text-gray-700 rounded-xl">
+                <div class="bg-white px-8 py-4 text-gray-700 rounded-xl">
                     <h2>Latest transactions</h2>
                     <hr />
                     <div class="flex flex-col">
-                        <div v-for="tx_hash in transactionStore.latest_transactions" :key="tx_hash">
-                            <h4>TX 0x{{ tx_hash }}</h4>
-                            <p class="whitespace-pre font-mono text-xs">
-                                {{ transactionStore.transaction[tx_hash].transaction_type }} ({{
-                                    transactionStore.transaction[tx_hash].transaction_status
-                                }})
-                            </p>
-                        </div>
+                        <RouterLink :to="`/tx/${tx_hash}`" v-for="tx_hash in transactionStore.latest" :key="tx_hash">
+                            <div>
+                                <h4>TX 0x{{ tx_hash }}</h4>
+                                <p class="whitespace-pre text-xs">
+                                    {{ transactionStore.data[tx_hash].transaction_type }} ({{
+                                        transactionStore.data[tx_hash].transaction_status
+                                    }})
+                                </p>
+                            </div>
+                        </RouterLink>
                     </div>
                 </div>
             </div>

diff --git a/src/explorer/Transaction.vue b/src/explorer/Transaction.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import Header from "@/explorer/Header.vue";
+import { transactionStore } from "@/state/data";
+import { computed, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const tx_hash = computed(() => route.params.tx_hash as string);
+
+watchEffect(() => {
+    if (!transactionStore.value.data[tx_hash.value]) {
+        transactionStore.value.load(tx_hash.value);
+    }
+});
+
+const data = computed(() => transactionStore.value.data?.[tx_hash.value]);
+</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">Tx 0x{{ tx_hash }}</h2>
+            <p>Block: {{ data?.block_hash }}</p>
+            <p>Type: {{ data?.transaction_type }}</p>
+            <p>Status: {{ data?.transaction_status }}</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>
+        </div>
+    </div>
+</template>
diff --git a/src/main.ts b/src/main.ts
@@ -3,8 +3,28 @@ import { createRouter, createWebHistory } from "vue-router";
 import "@/style.css";
 import App from "@/App.vue";
 import Home from "@/explorer/Home.vue";
+import Transaction from "./explorer/Transaction.vue";
+import Block from "./explorer/Block.vue";
+import Contract from "./explorer/Contract.vue";
 
-const routes = [{ path: "/", component: Home, name: "Home" }];
+const routes = [
+    { path: "/", component: Home, name: "Home" },
+    {
+        path: "/tx/:tx_hash",
+        component: Transaction,
+        name: "Transaction",
+    },
+    {
+        path: "/block/:block_hash",
+        component: Block,
+        name: "Block",
+    },
+    {
+        path: "/contract/:contract_name",
+        component: Contract,
+        name: "Contract",
+    },
+];
 
 const router = createRouter({
     history: createWebHistory(),

diff --git a/src/state/blocks.ts b/src/state/blocks.ts
@@ -10,15 +10,28 @@ export type BlockInfo = {
 
 export class BlockStore {
     network: string;
-    blocks: BlockInfo[];
+    data: Record<string, BlockInfo> = {};
+    latest: string[] = [];
 
     constructor(network: string) {
         this.network = network;
-        this.blocks = [];
     }
 
-    async loadBlocks() {
+    async loadLatest() {
         const response = await fetch(`${getNetworkApiUrl(this.network)}/v1/indexer/blocks?no_cache=${Date.now()}`);
-        this.blocks = await response.json();
+        let resp = await response.json();
+        this.latest = resp.map((block: BlockInfo) => block.hash);
+        for (let item of resp) {
+            this.data[item.hash] = item;
+        }
+    }
+
+    async load(hash: string) {
+        if (this.data[hash]) {
+            return;
+        }
+        const response = await fetch(`${getNetworkApiUrl(this.network)}/v1/indexer/block/hash/${hash}`);
+        let item = await response.json();
+        this.data[item.hash] = item;
     }
 }
diff --git a/src/state/contracts.ts b/src/state/contracts.ts
@@ -0,0 +1,31 @@
+import { getNetworkApiUrl } from "@/state/network";
+
+export type ContractInfo = {
+    contract_name: string;
+};
+
+export class ContractStore {
+    network: string;
+    data: Record<string, ContractInfo> = {};
+
+    constructor(network: string) {
+        this.network = network;
+    }
+
+    async loadAll() {
+        const response = await fetch(`${getNetworkApiUrl(this.network)}/v1/indexer/contracts?no_cache=${Date.now()}`);
+        let resp = await response.json();
+        for (let item of resp) {
+            this.data[item.contract_name] = item;
+        }
+    }
+
+    async load(contract_name: string) {
+        if (this.data[contract_name]) {
+            return;
+        }
+        const response = await fetch(`${getNetworkApiUrl(this.network)}/v1/indexer/contract/${contract_name}`);
+        let item = await response.json();
+        this.data[item.contract_name] = item;
+    }
+}
diff --git a/src/state/data.ts b/src/state/data.ts
@@ -2,17 +2,18 @@ import { reactive, ref, watchEffect } from "vue";
 import { BlockStore } from "@/state/blocks";
 import { network } from "@/state/network";
 import { TransactionStore } from "./transactions";
+import { ContractStore } from "./contracts";
 
 export const blockStore = ref(reactive(new BlockStore(network.value)));
-//export const contractsStore = ref(reactive(new ContractsStore(network.value)));
 export const transactionStore = ref(reactive(new TransactionStore(network.value)));
+export const contractStore = ref(reactive(new ContractStore(network.value)));
 
 watchEffect(() => {
     blockStore.value = reactive(new BlockStore(network.value));
     transactionStore.value = reactive(new TransactionStore(network.value));
-    //contractsStore.value = reactive(new ContractsStore(network.value));
+    contractStore.value = reactive(new ContractStore(network.value));
 
-    blockStore.value.loadBlocks();
-    transactionStore.value.loadLatestTransactions();
-    //contractsStore.value.loadContract();
+    blockStore.value.loadLatest();
+    transactionStore.value.loadLatest();
+    contractStore.value.loadAll();
 });
diff --git a/src/state/transactions.ts b/src/state/transactions.ts
@@ -9,20 +9,28 @@ export type TransactionInfo = {
 
 export class TransactionStore {
     network: string;
-    transaction: Record<string, TransactionInfo> = {};
-    latest_transactions: string[] = [];
+    data: Record<string, TransactionInfo> = {};
+    latest: string[] = [];
 
     constructor(network: string) {
         this.network = network;
     }
 
-    async loadLatestTransactions() {
+    async loadLatest() {
         const response = await fetch(`${getNetworkApiUrl(this.network)}/v1/indexer/transactions?no_cache=${Date.now()}`);
         let resp = await response.json();
-        this.latest_transactions = resp.map((tx: TransactionInfo) => tx.tx_hash);
-        for (let tx of resp) {
-            this.transaction[tx.tx_hash] = tx;
+        this.latest = resp.map((tx: TransactionInfo) => tx.tx_hash);
+        for (let item of resp) {
+            this.data[item.tx_hash] = item;
         }
-        console.log(this);
+    }
+
+    async load(tx_hash: string) {
+        if (this.data[tx_hash]) {
+            return;
+        }
+        const response = await fetch(`${getNetworkApiUrl(this.network)}/v1/indexer/transaction/hash/${tx_hash}`);
+        let item = await response.json();
+        this.data[item.tx_hash] = item;
     }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,11 +6,10 @@ export default {
             colors: {
                 primary: "rgb(var(--color-primary) / <alpha-value>)",
                 secondary: "rgb(var(--color-secondary) / <alpha-value>)",
-                "secondary-darker":
-                    "rgb(var(--color-secondary-darker) / <alpha-value>)",
+                "secondary-darker": "rgb(var(--color-secondary-darker) / <alpha-value>)",
             },
             fontFamily: {
-                garamond: ['"EB Garamond"', "serif"],
+                text: ["Roboto", "sans-serif"],
                 anton: ['"Anton"', "sans-serif"],
             },
         },