web-wallet: Scaffold Token pages

explorer/README.md

@@ -35,6 +35,8 @@ 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/components/blocks-card/BlocksCard.svelte

@@ -50,12 +50,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,8 @@ 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 TokenListDetails } from "./token-list-details/TokenListDetails.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-list-details/TokenListDetails.svelte

@@ -0,0 +1,107 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { AppAnchor, DetailList, ListItem } from "$lib/components";
+  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
+  import { onMount } from "svelte";
+
+  /** @type {Token} */
+  export let data;
+
+  /** @type {Boolean} */
+  export let displayTooltips = false;
+
+  /** @type {number} */
+  let screenWidth = window.innerWidth;
+
+  onMount(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+
+      screenWidth = entry.contentRect.width;
+    });
+
+    resizeObserver.observe(document.body);
+
+    return () => resizeObserver.disconnect();
+  });
+
+  $: adaptiveCharCount = calculateAdaptiveCharCount(
+    screenWidth,
+    320,
+    1024,
+    4,
+    25
+  );
+  $: tokensContractID = middleEllipsis(data.contractId, adaptiveCharCount);
+</script>
+
+<DetailList>
+  <!-- TOKEN NAME -->
+  <ListItem tooltipText={displayTooltips ? "The name of the token." : ""}>
+    <svelte:fragment slot="term">Token</svelte:fragment>
+    <svelte:fragment slot="definition">
+      <AppAnchor href={`/tokens/token/${data.token}`}>{data.token}</AppAnchor>
+    </svelte:fragment>
+  </ListItem>
+
+  <!-- TOTAL CURRENT SUPPLY -->
+  <ListItem
+    tooltipText={displayTooltips
+      ? "The total amount of tokens currently in circulation."
+      : ""}
+  >
+    <svelte:fragment slot="term">Total Current Supply</svelte:fragment>
+    <svelte:fragment slot="definition">
+      {data.totalCurrentSupply}
+    </svelte:fragment>
+  </ListItem>
+
+  <!-- MAX CIRCULATING SUPPLY -->
+  <ListItem
+    tooltipText={displayTooltips
+      ? "The maximum number of tokens that can ever exist."
+      : ""}
+  >
+    <svelte:fragment slot="term">Max Circulating Supply</svelte:fragment>
+    <svelte:fragment slot="definition">
+      {data.maxCirculatingSupply}
+    </svelte:fragment>
+  </ListItem>
+
+  <!-- TICKER SYMBOL -->
+  <ListItem
+    tooltipText={displayTooltips
+      ? "The ticker symbol used to identify the token."
+      : ""}
+  >
+    <svelte:fragment slot="term">Ticker</svelte:fragment>
+    <svelte:fragment slot="definition">
+      {data.ticker}
+    </svelte:fragment>
+  </ListItem>
+
+  <!-- CONTRACT ID -->
+  <ListItem
+    tooltipText={displayTooltips
+      ? "The unique contract address of the token on the blockchain."
+      : ""}
+  >
+    <svelte:fragment slot="term">Contract ID</svelte:fragment>
+    <svelte:fragment slot="definition">
+      {tokensContractID}
+    </svelte:fragment>
+  </ListItem>
+
+  <!-- PRICE -->
+  <ListItem
+    tooltipText={displayTooltips
+      ? "The current price of the token in USD."
+      : ""}
+  >
+    <svelte:fragment slot="term">Price</svelte:fragment>
+    <svelte:fragment slot="definition">
+      {data.price}
+    </svelte:fragment>
+  </ListItem>
+</DetailList>

explorer/src/lib/components/tokens-table/TokensTable.svelte

@@ -0,0 +1,56 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { ownPairs } from "lamb";
+
+  import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+  } from "$lib/components/table";
+  import { AppAnchor } from "$lib/components";
+  import { makeClassName, middleEllipsis } from "$lib/dusk/string";
+
+  /** @type {string | undefined} */
+  export let className = undefined;
+
+  /** @type {Token[]} */
+  export let data;
+
+  const HASH_CHARS_LENGTH = 10;
+
+  $: classes = makeClassName(["tokens-table", className]);
+</script>
+
+<Table className={classes}>
+  <TableHead>
+    <TableRow>
+      <TableCell type="th">Token</TableCell>
+      <TableCell type="th">Total Current Supply</TableCell>
+      <TableCell type="th">Max Circulating Supply</TableCell>
+      <TableCell type="th">Ticker</TableCell>
+      <TableCell type="th">Contract ID</TableCell>
+      <TableCell type="th">Price ($)</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    {#each data as token (token)}
+      <TableRow>
+        <TableCell>
+          <AppAnchor href={`/tokens/token?name=${token.token}`}
+            >{token.token}</AppAnchor
+          ></TableCell
+        >
+        <TableCell>{token.totalCurrentSupply}</TableCell>
+        <TableCell>{token.maxCirculatingSupply}</TableCell>
+        <TableCell>{token.ticker}</TableCell>
+        <TableCell
+          >{middleEllipsis(token.contractId, HASH_CHARS_LENGTH)}</TableCell
+        >
+        <TableCell>{token.price}</TableCell>
+      </TableRow>
+    {/each}
+  </TableBody>
+</Table>

explorer/src/lib/components/transactions-card/TransactionsCard.svelte

@@ -7,8 +7,6 @@
     TransactionsTable,
   } from "$lib/components";
 
-  import "./TransactionsCard.css";
-
   /** @type {Transaction[] | null}*/
   export let txns;
 
@@ -54,14 +52,13 @@
       }}
 >
   {#if isSmallScreen}
-    <div class="transactions-card__list">
+    <div class="data-card__list">
       {#each displayedTxns as txn (txn)}
         <TransactionsList data={txn} mode="full" />
       {/each}
     </div>
   {:else}
     <TransactionsTable
-      className="transactions-card__table"
       data={displayedTxns}
       displayTooltips={true}
       mode="full"

explorer/src/lib/mock-data/index.js

@@ -12,3 +12,5 @@ export { default as gqlTransactionDetails } from "./gql-transaction-details.json
 export { default as gqlTransactions } from "./gql-transactions.json";
 export { default as hostProvisioners } from "./host-provisioners.json";
 export { default as nodeLocationsCount } from "./node-locations.count.json";
+
+export { default as tokens } from "./tokens.json";

explorer/src/lib/mock-data/token.d.ts

@@ -0,0 +1,8 @@
+type Token = {
+  token: string;
+  totalCurrentSupply: string;
+  maxCirculatingSupply: string;
+  ticker: string;
+  contractId: string;
+  price: string;
+};

explorer/src/lib/mock-data/tokens.json

@@ -0,0 +1,66 @@
+[
+  {
+    "token": "Ethereum",
+    "totalCurrentSupply": "120,000,000",
+    "maxCirculatingSupply": "∞",
+    "ticker": "ETH",
+    "contractId": "0x123abc456def789ghi123jkl456mno789pqr012stu345vwx678yz",
+    "price": "3,200.50"
+  },
+  {
+    "token": "Bitcoin",
+    "totalCurrentSupply": "19,500,000",
+    "maxCirculatingSupply": "21,000,000",
+    "ticker": "BTC",
+    "contractId": "N/A",
+    "price": "42,500.75"
+  },
+  {
+    "token": "Solana",
+    "totalCurrentSupply": "550,000,000",
+    "maxCirculatingSupply": "∞",
+    "ticker": "SOL",
+    "contractId": "0x789ghi123jkl456mno789pqr012stu345vwx678yzabc123def456",
+    "price": "150.25"
+  },
+  {
+    "token": "USDC",
+    "totalCurrentSupply": "32,000,000,000",
+    "maxCirculatingSupply": "∞",
+    "ticker": "USDC",
+    "contractId": "0x987xyz654mno321stu456vwx789pqr012abc345def678ghi123jkl",
+    "price": "1.00"
+  },
+  {
+    "token": "Polygon",
+    "totalCurrentSupply": "9,300,000,000",
+    "maxCirculatingSupply": "10,000,000,000",
+    "ticker": "MATIC",
+    "contractId": "0x456uvw321rst852zxc147bnd963qwe258lop357mnb741poi963lkj",
+    "price": "1.75"
+  },
+  {
+    "token": "Dai",
+    "totalCurrentSupply": "5,000,000,000",
+    "maxCirculatingSupply": "∞",
+    "ticker": "DAI",
+    "contractId": "0x321abc654def789ghi123jkl456mno789pqr012stu345vwx678yz",
+    "price": "1.00"
+  },
+  {
+    "token": "Chainlink",
+    "totalCurrentSupply": "467,000,000",
+    "maxCirculatingSupply": "1,000,000,000",
+    "ticker": "LINK",
+    "contractId": "0x963qwe852rty147bnm258lop357mnb741poi963lkj654def789ghi",
+    "price": "17.60"
+  },
+  {
+    "token": "Avalanche",
+    "totalCurrentSupply": "377,000,000",
+    "maxCirculatingSupply": "720,000,000",
+    "ticker": "AVAX",
+    "contractId": "0x852zxc147bnd963qwe258lop357mnb741poi963lkj321rst456uvw",
+    "price": "35.40"
+  }
+]

explorer/src/routes/tokens/+layout.js

@@ -0,0 +1,9 @@
+import { redirect } from "@sveltejs/kit";
+
+export const load = ({}) => {
+  const featureTokensEnabled = import.meta.env.VITE_FEATURE_TOKENS === "true";
+
+  if (!featureTokensEnabled) {
+    throw redirect(302, "/");
+  }
+};