feat: explorer page

package.json

@@ -22,6 +22,8 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@tailwindcss/typography": "^0.5.10",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-shape": "^3.1.6",
     "@types/eslint": "^8.56.0",
     "@types/node": "^20.11.24",
     "@types/ws": "^8.5.10",
@@ -55,6 +57,11 @@
   "type": "module",
   "dependencies": {
     "@dcspark/cardano-multiplatform-lib-nodejs": "^5.2.0",
+    "d3-array": "^3.2.4",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "date-fns": "^3.6.0",
+    "layerchart": "^0.34.0",
     "translucent-cardano": "^0.0.6",
     "ws": "^8.16.0"
   }

src/app.css

@@ -1,3 +1,22 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+.hide-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.hide-scrollbar {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+}
+
+
+@property --border-angle {
+    inherits: false;
+    initial-value: 0deg;
+    syntax: '<angle>';
+}

src/lib/components/BlocksTable.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { format } from 'date-fns';
+    import MdiArrowTopRightBoldBoxOutline from '~icons/mdi/arrow-top-right-bold-box-outline';
+
+   export let data: any;
+  
+    let currentPage = 1;
+  const itemsPerPage = 15;
+  let paginatedData = [];
+
+  onMount(() => {
+    data = data.map(item => ({
+      ...item,
+      posix_time: format(new Date(item.posix_time), 'dd/MM/yyyy HH:mm:ss'),
+      rewards: (item.rewards / 100000000).toFixed(2)
+    })).sort((a, b) => b.posix_time - a.posix_time);
+
+    paginatedData = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+  });
+
+  const changePage = (delta: number) => {
+    currentPage += delta;
+    paginatedData = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+  };
+</script>
+
+  <div>
+  <div class="table w-full text-white overflow-hidden rounded-lg shadow-lg mt-4">
+    <div class="table-header-group bg-base-300">
+      <div class="table-cell p-4">Epoch</div>
+      <div class="table-cell p-4">Block</div>
+      <div class="table-cell p-4">Leading Zeroes</div>
+      <div class="table-cell p-4">Target</div>
+      <div class="table-cell p-4">Hash</div>
+      <div class="table-cell p-4">Miner</div>
+      <div class="table-cell p-4">Rewards</div>
+      <div class="table-cell p-4">Time</div>
+    </div>
+
+
+    {#each paginatedData as row (row.number)}
+      <div class="table-row-group bg-base-200">
+        <div class="table-cell p-4 border-t-2 border-gray-800">{row.epoch}</div>
+        <div class="table-cell p-4 border-t-2 border-gray-800"><div class="badge badge-primary">{row.number}</div></div>
+        <div class="table-cell p-4 border-t-2 border-gray-800">{row.leading_zeroes}</div>
+        <div class="table-cell p-4 border-t-2 border-gray-800">{row.target.toString(16)}</div>
+        <div class="table-cell p-4 border-t-2 border-gray-800">{row.target.toString(16) + row.hash.slice(row.leading_zeroes)}</div>
+        <div class="table-cell p-4 border-t-2 border-gray-800">    <a href="https://pool.pm/{row.miner}" target="_blank">
+            <span class="link link-primary link-hover flex">
+                {row.miner.slice(0, 6) + '…' + row.miner.slice(-6)} <span class="ml-2"
+                ><MdiArrowTopRightBoldBoxOutline class="size-5 shrink-0"/></span>
+            </span>
+          </a></div>
+        <div class="table-cell p-4 border-t-2 border-gray-800"><div class="badge badge-success">{row.rewards}</div></div>
+        <div class="table-cell p-4 border-t-2 border-gray-800">{row.posix_time}</div>
+      </div>
+    {/each}
+  </div>
+  <div class="w-full flex justify-center mt-5">
+    <div class="join">
+      <button class="join-item btn" on:click={() => changePage(-1)} disabled={currentPage === 1}>«</button>
+      <button class="join-item btn">Page {currentPage}</button>
+      <button class="join-item btn" on:click={() => changePage(1)} disabled={currentPage === Math.ceil(data.length / itemsPerPage)}>»</button>
+    </div>
+  </div>
+  </div>

src/lib/components/LatestBlocks.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import LatestBlocks from '$lib/components/charts/LatestBlocks.json';
+  import { format, differenceInMinutes } from 'date-fns';
+  // icons
+  import BxCommentError from '~icons/bx/comment-error'
+  import MaterialSymbolsLightBolt from '~icons/material-symbols-light/bolt'
+  import Carbon3dSoftware from '~icons/carbon/3d-software'
+  import MdiArrowTopRightBoldBoxOutline from '~icons/mdi/arrow-top-right-bold-box-outline'
+  import TdesignBlockchain from '~icons/tdesign/blockchain'
+  import MaterialSymbolsDeployedCodeAccount from '~icons/material-symbols/deployed-code-account'
+  import MaterialSymbolsFitbitArrowUpward from '~icons/material-symbols/fitbit-arrow-upward'
+  import MaterialSymbolsFitbitArrowDownwardSharp from '~icons/material-symbols/fitbit-arrow-downward-sharp'
+
+import SparklineChart from './charts/SparklineChart.svelte';
+ 
+export let marketData: any = [];
+
+let priceUp: boolean = true;
+
+// marketData should return information to be displayed not only in sparkline chart
+// but also inside the card with the market information as marketData.supply marketData.volume etc
+
+</script>
+<div role="alert" class="alert alert-error my-6">
+ <BxCommentError class="shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"/>
+  <span>WARNING: The explorer is under construction and the data here is not accurate or real for now.</span>
+</div>
+
+<div class="flex flex-col md:flex-row gap-4">
+  <div class="card bg-base-300 w-full md:w-[100vh] md:h-[45vh] p-4">
+    <div class="card-title">$TUNA Market</div>
+    <div class="card-body">
+      <div class="grid grid-cols-1 md:grid-cols-4 md:grid-rows-2 gap-2">
+        <div class="col-start-1">
+          <div class="flex-row">
+            <span class="text-sm font-light">Circulating Supply</span><br />
+            <span class="text-3xl font-bold text-primary"
+              >🐟 1.5<span class="text-primary/40">M</span></span
+            ><br />
+            <span class="text-sm font-light">of 21M: </span><span
+              class="text-sm font-light text-primary">
+              7.6%</span>
+          </div>
+        </div>
+        <div class="md:col-start-1 border-y-2 md:border-t-2 md:border-y-0 border-primary pt-2 py-5 md:py-0">
+          <div class="flex-row">
+            <span class="text-sm font-light">Volume 24h</span><br />
+            <span class="text-3xl font-bold text-primary">452.00 <span class="text-primary/50">₳</span></span><br />
+            <span class="text-sm font-light">Total Liquidity: </span><span
+              class="text-sm font-light text-primary">
+              6K ₳</span>
+          </div>
+        </div>
+        <div class=" md:col-start-2 md:col-end-5 md:row-start-1">
+          <div class="md:flex justify-between items-center">
+            <div>
+              <span class="text-sm font-light">TUNA Price</span><br />
+              <span class="md:text-6xl text-5xl font-bold text-primary">0,0905 <span class="text-primary/70 font-medium">₳</span></span><br />
+              <div class="flex items-center">
+              <span class="text-sm font-light">Price change: </span>
+              {#if priceUp}<span
+                class="text-sm font-light text-success flex items-center"><MaterialSymbolsFitbitArrowUpward class="size-6"/> 3,00%</span>
+                {:else}
+                <span
+                class="text-sm font-light text-error flex items-center"><MaterialSymbolsFitbitArrowDownwardSharp class="size-6"/> 3,00%</span>
+                {/if}
+              </div>
+            </div>
+            <div>
+              <span class="text-sm font-light"
+                >Holders: <span class="font-semibold text-primary">999</span></span
+              ><br />
+              <span class="text-sm font-light"
+                ><span class="font-semibold text-primary">1</span> ADA:
+                <span class="font-semibold text-primary">11.04 TUNA</span></span>
+            </div>
+          </div>
+        </div>
+        <div class="md:col-start-2 md:col-end-5 md:row-start-2 pt-2" >
+          <SparklineChart data={marketData} />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card bg-base-300 md:w-[70vh] md:h-[45vh] gap-2">
+    <div class="card-title my-4 ml-2 md:ml-0 md:my-0 md:mb-4 md:p-4">
+      Latest Blocks<span class="badge badge-success text-white"><MaterialSymbolsLightBolt class="shrink-0 size-5" fill="none" viewBox="0 0 24 24"/> LIVE</span>
+    </div>
+    <div class="overflow-y-auto hide-scrollbar">
+      {#each LatestBlocks as data (data.blockNumber)}
+        <div class="flex">
+          <div class="card bg-base-100 w-full m-2 py-2 md:py-0">
+            <div class="flex items-center m-2">
+              <div><Carbon3dSoftware class="shrink-0 size-10 text-white" fill="none" /> </div>
+              <div>
+                <div
+                  class="tooltip"
+                  data-tip="012366e8bdd0fe504d56c00f0fd7fd29f843ed2c69eeeb754a77acf">
+                  <div class="text-2xl font-semibold ml-2 text-accent">{data.blockNumber}</div>
+                </div>
+                <div
+                  class="tooltip"
+                  data-tip={format(new Date(data.blockTime), "dd/MM/yyyy 'at' hh:mm a")}>
+                  <div class="badge badge-neutral ml-2 text-xs md:text-sm">
+                    {differenceInMinutes(new Date(), new Date(data.blockTime))} minutes ago
+                  </div>
+                  <div class="hidden md:flex md:m-2 badge badge-warning">
+                    +{data.minted} $TUNA
+                  </div>
+                </div>
+              </div>
+              <div class="ml-auto text-right">
+                <div class="text-lg font-semibold flex">
+                  <a href="https://cardanoscan.io/transaction/{data.mintTx}" target="_blank">
+                    <span class="link link-primary link-hover flex">
+                      {data.mintTx.slice(0, 5)}...{data.mintTx.slice(-3)}<span class="ml-2"
+                        ><MdiArrowTopRightBoldBoxOutline class="size-5 shrink-0"/></span>
+                    </span>
+                  </a>
+                </div>
+                  <div class="tooltip" data-tip="Minted by a single Miner">
+                    <div class="badge badge-secondary">
+                      <MaterialSymbolsDeployedCodeAccount class="size-5 shrink-0"/>
+                      <span class="ml-1"> {data.miner.slice(0, 5)}...{data.miner.slice(-3)}</span>
+                    </div>
+                                      <div class=" md:hidden badge badge-warning">
+                    +{data.minted} $TUNA
+                  </div>
+                  </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>

src/lib/components/MinersTable.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { format } from 'date-fns';
+    import MdiArrowTopRightBoldBoxOutline from '~icons/mdi/arrow-top-right-bold-box-outline';
+  
+    export let data: any;
+  
+    let currentPage = 1;
+    const itemsPerPage = 15;
+    let paginatedData: any = [];
+  
+    onMount(() => {
+    data = data.map(item => ({
+      ...item,
+      first_block: format(new Date(item.first_block), 'dd/MM/yyyy HH:mm:ss'),
+      last_block: format(new Date(item.last_block), 'dd/MM/yyyy HH:mm:ss'),
+      total_rewards: new Intl.NumberFormat().format(item.total_rewards / 100000000)
+    })).sort((a, b) => b.first_block - a.first_block);
+
+    paginatedData = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+  });
+  
+    const changePage = (delta: number) => {
+      currentPage += delta;
+      paginatedData = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+    };
+  </script>
+
+  <div>
+    <div class="table w-full text-white overflow-hidden rounded-lg shadow-lg mt-4">
+      <div class="table-header-group bg-base-300">
+        <div class="table-cell p-4">Address</div>
+        <div class="table-cell p-4">First Block</div>
+        <div class="table-cell p-4">Last Block</div>
+        <div class="table-cell p-4">Total Blocks</div>
+        <div class="table-cell p-4">Total Rewards</div>
+      </div>
+
+      {#each paginatedData as row (row.address)}
+        <div class="table-row-group bg-base-200">
+          <div class="table-cell p-4 border-t-2 border-gray-800">
+            <a href="https://pool.pm/{row.address}" target="_blank">
+              <span class="link link-primary link-hover flex">
+                {row.address} <MdiArrowTopRightBoldBoxOutline class="size-5 shrink-0 ml-2"/>
+              </span>
+            </a>
+          </div>
+          <div class="table-cell p-4 border-t-2 border-gray-800">{row.first_block}</div>
+          <div class="table-cell p-4 border-t-2 border-gray-800">{row.last_block}</div>
+          <div class="table-cell p-4 border-t-2 border-gray-800">{row.total_blocks}</div>
+          <div class="table-cell p-4 border-t-2 border-gray-800">
+            <div class="badge badge-success">{row.total_rewards}</div>
+          </div>
+        </div>
+      {/each}
+    </div>
+
+    <div class="w-full flex justify-center mt-5">
+      <div class="join">
+        <button class="join-item btn" on:click={() => changePage(-1)} disabled={currentPage === 1}>«</button>
+        <button class="join-item btn">Page {currentPage}</button>
+        <button class="join-item btn" on:click={() => changePage(1)} disabled={currentPage === Math.ceil(data.length / itemsPerPage)}>»</button>
+      </div>
+    </div>
+  </div>

src/lib/components/charts/ArcSegments.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Chart, Svg, Arc, Group, Text } from 'layerchart';
+
+  export let value: number;
+  export let segments: number;
+  export let title: string;
+</script>
+
+<div class="card bg-base-300 size-full p-4">
+  <div class="card-title">{title}</div>
+  <div class="md:h-full md:w-full w-[41vh] h-[41vh] p-8 rounded card-body">
+    <Chart>
+      <Svg>
+        <Group center>
+          {#each { length: segments } as _, segmentIndex}
+            {@const segmentAngle = (2 * Math.PI) / segments}
+            {@const startAngle = segmentIndex * segmentAngle}
+            {@const endAngle = (segmentIndex + 1) * segmentAngle}
+            {value}
+            <Arc
+              {startAngle}
+              {endAngle}
+              innerRadius={-20}
+              cornerRadius={4}
+              padAngle={0.02}
+              class={(segmentIndex / segments) * 100 < value ? 'fill-primary' : 'fill-gray-700'}>
+              <Text
+                value={Math.round(value)}
+                textAnchor="middle"
+                verticalAnchor="middle"
+                dy={16}
+                class="text-6xl fill-white" />
+            </Arc>
+          {/each}
+        </Group>
+      </Svg>
+    </Chart>
+  </div>
+</div>