explorer: Scaffold Token pages

Resolves #3415

explorer/README.md

@@ -35,6 +35,7 @@ VITE_REFETCH_INTERVAL=10000
 VITE_RUSK_PATH="" # Optional, set to '/rusk' for dev mode
 VITE_STATS_REFETCH_INTERVAL=1000
 VITE_TRANSACTIONS_LIST_ENTRIES=100
+VITE_FEATURE_TOKENS=true
 ```
 
 ## Environment variables and dev mode

explorer/src/lib/chain-info/__tests__/transformBlock.spec.js

@@ -30,12 +30,14 @@ describe("transformBlock", () => {
           blockheight: 495868,
           date: new Date(blockData.transactions[0].blockTimestamp * 1000),
           feepaid: 290866,
+          from: undefined,
           gaslimit: 500000000,
           gasprice: 1,
           gasspent: 290866,
           memo: blockData.transactions[0].tx.memo,
           method: "transfer",
           success: true,
+          to: undefined,
           txerror: "",
           txid: "3a3f6f90a1012ae751b4448bcb8e98def0ba2b18170239bd69fcf8e2e37f0602",
           txtype: "Moonlight",
@@ -46,12 +48,14 @@ describe("transformBlock", () => {
           blockheight: 495868,
           date: new Date(blockData.transactions[1].blockTimestamp * 1000),
           feepaid: 289852,
+          from: undefined,
           gaslimit: 500000000,
           gasprice: 1,
           gasspent: 289852,
           memo: blockData.transactions[1].tx.memo,
           method: "transfer",
           success: true,
+          to: undefined,
           txerror: "",
           txid: "07bfabea1d94c16f2dc3697fa642f6cecea6e81bf76b9644efbb6e2723b76d00",
           txtype: "Phoenix",

explorer/src/lib/chain-info/__tests__/transformTransaction.spec.js

@@ -12,12 +12,14 @@ describe("transformTransaction", () => {
     blockheight: 487166,
     date: new Date(txData.blockTimestamp * 1000),
     feepaid: 290766,
+    from: undefined,
     gaslimit: 500000000,
     gasprice: 1,
     gasspent: 290766,
     memo: gqlTransaction.tx.tx.memo,
     method: "transfer",
     success: true,
+    to: undefined,
     txerror: "",
     txid: "4877687c2dbf154248d3ddee9ba0d81e3431f39056f82a46819da041d4ac0e04",
     txtype: "Moonlight",

explorer/src/lib/chain-info/chain-info.d.ts

@@ -35,6 +35,8 @@ type SearchResult = {
 };
 
 type Transaction = {
+  from: string | undefined;
+  to: string | undefined;
   blockhash: string;
   blockheight: number;
   date: Date;

explorer/src/lib/chain-info/transformTransaction.js

@@ -6,12 +6,14 @@ const transformTransaction = (tx) => ({
   blockheight: tx.blockHeight,
   date: unixTsToDate(tx.blockTimestamp),
   feepaid: tx.gasSpent * tx.tx.gasPrice,
+  from: undefined,
   gaslimit: tx.tx.gasLimit,
   gasprice: tx.tx.gasPrice,
   gasspent: tx.gasSpent,
   memo: tx.tx.memo ?? "",
   method: tx.tx.isDeploy ? "deploy" : tx.tx.callData?.fnName ?? "transfer",
   success: tx.err === null,
+  to: undefined,
   txerror: tx.err ?? "",
   txid: tx.id,
   txtype: tx.tx.txType,

explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap

@@ -31,7 +31,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
     class="data-card__content"
   >
     <div
-      class="table-container blocks-table blocks-card__table"
+      class="table-container blocks-table data-card__table"
     >
       <table
         class="table"

explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap

@@ -78,6 +78,13 @@ exports[`Navbar > renders the Navbar component 1`] = `
       >
         Provisioners
       </a>
+      
+      <a
+        class="dusk-anchor dusk-anchor--off-surface dusk-nav-list__link"
+        href="/some-base-path/tokens"
+      >
+        Tokens
+      </a>
     </nav>
     
      

explorer/src/lib/components/__tests__/__snapshots__/ProvisionersCard.spec.js.snap

@@ -31,7 +31,7 @@ exports[`Provisioners Card > should disable the \`Show More\` button if there is
     class="data-card__content"
   >
     <div
-      class="table-container provisioners-table provisioners-card__table"
+      class="table-container provisioners-table data-card__table"
     >
       <table
         class="table"

explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap

@@ -72,7 +72,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
     class="data-card__content"
   >
     <div
-      class="table-container transactions-table transactions-card__table"
+      class="table-container transactions-table"
     >
       <table
         class="table"

explorer/src/lib/components/blocks-card/BlocksCard.svelte

@@ -3,8 +3,6 @@
 <script>
   import { BlocksList, BlocksTable, DataCard } from "$lib/components";
 
-  import "./BlocksCard.css";
-
   /** @type {Block[] | null}*/
   export let blocks;
 
@@ -50,12 +48,12 @@
       }}
 >
   {#if isSmallScreen}
-    <div class="blocks-card__list">
+    <div class="data-card__list">
       {#each displayedBlocks as block (block)}
         <BlocksList data={block} />
       {/each}
     </div>
   {:else}
-    <BlocksTable data={displayedBlocks} className="blocks-card__table" />
+    <BlocksTable data={displayedBlocks} className="data-card__table" />
   {/if}
 </DataCard>

explorer/src/lib/components/data-card/DataCard.css

@@ -37,3 +37,8 @@
 .data-card__progress-bar .dusk-progress-bar__filler {
   background-color: var(--primary-color);
 }
+
+.data-card__table,
+.data-card__list {
+  overflow-y: auto;
+}

explorer/src/lib/components/data-card/DataCard.svelte

@@ -7,7 +7,7 @@
 
   import "./DataCard.css";
 
-  /** @type {Block[] | Transaction[] | HostProvisioner[] | Block | Transaction | null}*/
+  /** @type {Block[] | Transaction[] | HostProvisioner[] | Block | Transaction | Token[] | null}*/
   export let data;
 
   /** @type {Error | null}*/

explorer/src/lib/components/index.js

@@ -25,6 +25,12 @@ export { default as TransactionsCard } from "./transactions-card/TransactionsCar
 export { default as TransactionDetails } from "./transaction-details/TransactionDetails.svelte";
 export { default as TransactionsList } from "./transactions-list/TransactionsList.svelte";
 export { default as TransactionsTable } from "./transactions-table/TransactionsTable.svelte";
+export { default as TokensTable } from "./tokens-table/TokensTable.svelte";
+export { default as TokenOverview } from "./token-overview/TokenOverview.svelte";
+export { default as TokenDetailItem } from "./token-detail-item/TokenDetailItem.svelte";
+export { default as TokenDetailsTable } from "./token-details-table/TokenDetailsTable.svelte";
+export { default as TokenListDetails } from "./token-list-details/TokenListDetails.svelte";
+export { default as TokenTransactionsList } from "./token-transactions-list/TokenTransactionsList.svelte";
 export { default as TransactionType } from "./transaction-type/TransactionType.svelte";
 export { default as TransactionStatus } from "./transaction-status/TransactionStatus.svelte";
 export { default as WorldMap } from "./world-map/WorldMap.svelte";

explorer/src/lib/components/navbar/Navbar.svelte

@@ -22,7 +22,7 @@
   /** @type {*} */
   let notificationData;
 
-  const navigation = [
+  let navigation = [
     {
       link: "/",
       title: "Chain Info",
@@ -41,6 +41,11 @@
     },
   ];
 
+  $: if (import.meta.env.VITE_FEATURE_TOKENS === "true") {
+    navigation.push({ link: "/tokens", title: "Tokens" });
+    navigation = navigation;
+  }
+
   const dispatch = createEventDispatcher();
 
   async function createEmptySpace() {

explorer/src/lib/components/provisioners-card/ProvisionersCard.svelte

@@ -55,15 +55,15 @@
       }}
 >
   {#if isSmallScreen}
-    <div class="provisioners-card__list">
+    <div class="data-card__list">
       {#each displayedProvisioner as provisioner (provisioner)}
         <ProvisionersList data={provisioner} displayTooltips={true} />
       {/each}
     </div>
   {:else}
     <ProvisionersTable
       data={displayedProvisioner}
-      className="provisioners-card__table"
+      className="data-card__table"
     />
   {/if}
 </DataCard>

explorer/src/lib/components/token-detail-item/TokenDetailItem.css

@@ -0,0 +1,24 @@
+.token-overview-panel__details-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-width: max-content;
+  margin: 0 1rem;
+}
+
+@media (min-width: 1024px) {
+  .token-overview-panel__details-item:not(:last-child) {
+    border-right: 1px solid var(--taupe-grey);
+  }
+}
+
+.token-overview-panel__details-item-title {
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin-bottom: 0.3125rem;
+}
+
+.token-overview-panel__details-item-subtitle {
+  font-size: 0.875rem;
+}

explorer/src/lib/components/token-detail-item/TokenDetailItem.svelte

@@ -0,0 +1,11 @@
+<script>
+  import "./TokenDetailItem.css";
+
+  export let title;
+  export let subtitle;
+</script>
+
+<div class="token-overview-panel__details-item">
+  <p class="token-overview-panel__details-item-title">{title}</p>
+  <p class="token-overview-panel__details-item-subtitle">{subtitle}</p>
+</div>

explorer/src/lib/components/token-details-table/TokenDetailsTable.svelte

@@ -0,0 +1,70 @@
+<svelte:options immutable={true} />
+
+<script>
+  import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+  } from "$lib/components/table";
+  import { TransactionStatus, TransactionType } from "$lib/components";
+  import { makeClassName, middleEllipsis } from "$lib/dusk/string";
+
+  /** @type {string | undefined} */
+  export let className = undefined;
+
+  /** @type {Transaction[]} */
+  export let data;
+
+  /** @type {boolean} */
+  export let displayTooltips = false;
+
+  const HASH_CHARS_LENGTH = 10;
+
+  $: classes = makeClassName(["tokens-table", className]);
+</script>
+
+<Table className={classes}>
+  <TableHead>
+    <TableRow>
+      <TableCell type="th">From</TableCell>
+      <TableCell type="th">To</TableCell>
+      <TableCell type="th">ID</TableCell>
+      <TableCell type="th">Fee (Dusk)</TableCell>
+      <TableCell type="th">Status</TableCell>
+      <TableCell type="th">Type</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    {#each data as transaction (transaction)}
+      <TableRow>
+        <TableCell
+          >{middleEllipsis(
+            transaction.from ? transaction.from : "",
+            HASH_CHARS_LENGTH
+          )}</TableCell
+        >
+        <TableCell
+          >{middleEllipsis(
+            transaction.to ? transaction.to : "",
+            HASH_CHARS_LENGTH
+          )}</TableCell
+        >
+        <TableCell
+          >{middleEllipsis(transaction.txid, HASH_CHARS_LENGTH)}</TableCell
+        >
+        <TableCell>{transaction.gasprice}</TableCell>
+        <TableCell>
+          <TransactionStatus
+            errorMessage={transaction.txerror}
+            showErrorTooltip={false}
+          />
+        </TableCell>
+        <TableCell>
+          <TransactionType data={transaction} {displayTooltips} />
+        </TableCell>
+      </TableRow>
+    {/each}
+  </TableBody>
+</Table>