Repository: dusk-network/rusk (language: rust)

Issue:
explorer: Build account page
#### Summary
We need to build the new token page.

#### Possible solution design or implementation
https://www.figma.com/design/INYlGpXEc8tIHCEPNlPyfd/Explorer-2.0?node-id=2550-53108&t=Lmjytj2dEHms7VbX-0


Discussion / hints:
There's already an issue for that: https://github.com/dusk-network/rusk/issues/3363
> There's already an issue for that: [#3363](https://github.com/dusk-network/rusk/issues/3363)

That was for the UX design work that needed to be done in Figma and possibly for the backend team to create another child issue from for the API changes.  I added this as a child issue to #3363 to cover the web development.

Fix patch:
diff --git a/explorer/CHANGELOG.md b/explorer/CHANGELOG.md
index b2ff90bc25..b1629b97c1 100644
--- a/explorer/CHANGELOG.md
+++ b/explorer/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to
 ### Added
 
 - Add Tokens page [#3415]
+- Add Account page [#3454]
 
 ### Changed
 
@@ -151,6 +152,7 @@ and this project adheres to
 [#3377]: https://github.com/dusk-network/rusk/issues/3377
 [#3425]: https://github.com/dusk-network/rusk/issues/3425
 [#3415]: https://github.com/dusk-network/rusk/issues/3415
+[#3454]: https://github.com/dusk-network/rusk/issues/3454
 
 <!-- VERSIONS -->
 
diff --git a/explorer/src/lib/chain-info/chain-info.d.ts b/explorer/src/lib/chain-info/chain-info.d.ts
index 97cee13ee6..622f648fc1 100644
--- a/explorer/src/lib/chain-info/chain-info.d.ts
+++ b/explorer/src/lib/chain-info/chain-info.d.ts
@@ -35,6 +35,7 @@ type SearchResult = {
 };
 
 type Transaction = {
+  amount: number | undefined;
   from: string | undefined;
   to: string | undefined;
   blockhash: string;
diff --git a/explorer/src/lib/chain-info/transformTransaction.js b/explorer/src/lib/chain-info/transformTransaction.js
index 00e803775e..d19cf333da 100644
--- a/explorer/src/lib/chain-info/transformTransaction.js
+++ b/explorer/src/lib/chain-info/transformTransaction.js
@@ -2,6 +2,7 @@ import { unixTsToDate } from "$lib/dusk/date";
 
 /** @type {(v: GQLTransaction) => Transaction} */
 const transformTransaction = (tx) => ({
+  amount: undefined,
   blockhash: tx.blockHash,
   blockheight: tx.blockHeight,
   date: unixTsToDate(tx.blockTimestamp),
diff --git a/explorer/src/lib/components/account-overview/AccountOverview.css b/explorer/src/lib/components/account-overview/AccountOverview.css
new file mode 100644
index 0000000000..9c68c6b439
--- /dev/null
+++ b/explorer/src/lib/components/account-overview/AccountOverview.css
@@ -0,0 +1,36 @@
+.account-overview-panel {
+  display: flex;
+  padding: 1rem 1.375rem;
+  flex-direction: column;
+  row-gap: 0.75rem;
+  border-radius: 1.5rem;
+  background-color: var(--surface-color);
+  width: 100%;
+  text-transform: uppercase;
+  position: relative;
+  margin-bottom: 1.25rem;
+}
+
+.account-overview-panel__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 3.9375rem;
+  font-size: 1.125rem;
+}
+
+.account-overview-panel__address {
+  font-weight: 500;
+}
+
+.account-overview-panel__separator {
+  border: none;
+  border-top: 1px solid var(--taupe-grey);
+  margin: 0.5rem 0;
+}
+
+.account-overview-panel__details {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
diff --git a/explorer/src/lib/components/account-overview/AccountOverview.svelte b/explorer/src/lib/components/account-overview/AccountOverview.svelte
new file mode 100644
index 0000000000..51b2e20b84
--- /dev/null
+++ b/explorer/src/lib/components/account-overview/AccountOverview.svelte
@@ -0,0 +1,58 @@
+<script>
+  import { createValueFormatter } from "$lib/dusk/value";
+  import { luxToDusk } from "$lib/dusk/currency";
+  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
+  import { OverviewPanelDetailsItem } from "$lib/components";
+  import { addressCharPropertiesDefaults } from "$lib/constants";
+
+  import "./AccountOverview.css";
+
+  export let data;
+  export let screenWidth;
+
+  const { minScreenWidth, maxScreenWidth, minCharCount, maxCharCount } =
+    addressCharPropertiesDefaults;
+
+  const formatter = createValueFormatter("en");
+</script>
+
+<section class="account-overview-panel">
+  <p class="account-overview-panel__header">
+    Account:
+    <b class="account-overview-panel__address">
+      {middleEllipsis(
+        data.address,
+        calculateAdaptiveCharCount(
+          screenWidth,
+          minScreenWidth,
+          maxScreenWidth,
+          minCharCount,
+          maxCharCount
+        )
+      )}
+    </b>
+  </p>
+  <hr class="account-overview-panel__separator" />
+  <div class="account-overview-panel__details">
+    <OverviewPanelDetailsItem
+      title={`${formatter(luxToDusk(data.balance))} DUSK`}
+      subtitle="Current Balance"
+    />
+    <OverviewPanelDetailsItem
+      title={`${formatter(luxToDusk(data.staked_balance))} DUSK`}
+      subtitle="Staked Balance"
+    />
+    <OverviewPanelDetailsItem
+      title={`${formatter(luxToDusk(data.active_stake))} DUSK`}
+      subtitle="Active Balance"
+    />
+    <OverviewPanelDetailsItem
+      title={`${formatter(luxToDusk(data.inactive_stake))} DUSK`}
+      subtitle="Inactive Stake"
+    />
+    <OverviewPanelDetailsItem
+      title={`${formatter(luxToDusk(data.inactive_stake))} DUSK`}
+      subtitle="Rewards"
+    />
+  </div>
+</section>
diff --git a/explorer/src/lib/components/index.js b/explorer/src/lib/components/index.js
index e53a7cafd5..87a0ebecd4 100644
--- a/explorer/src/lib/components/index.js
+++ b/explorer/src/lib/components/index.js
@@ -1,3 +1,4 @@
+export { default as AccountOverview } from "./account-overview/AccountOverview.svelte";
 export { default as AppAnchor } from "./app-anchor/AppAnchor.svelte";
 export { default as AppAnchorButton } from "./app-anchor-button/AppAnchorButton.svelte";
 export { default as AppImage } from "./app-image/AppImage.svelte";
@@ -27,7 +28,7 @@ export { default as TransactionsList } from "./transactions-list/TransactionsLis
 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 OverviewPanelDetailsItem } from "./overview-panel-details-item/OverviewPanelDetailsItem.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";
diff --git a/explorer/src/lib/components/overview-panel-details-item/OverviewPanelDetailsItem.css b/explorer/src/lib/components/overview-panel-details-item/OverviewPanelDetailsItem.css
new file mode 100644
index 0000000000..49877436b6
--- /dev/null
+++ b/explorer/src/lib/components/overview-panel-details-item/OverviewPanelDetailsItem.css
@@ -0,0 +1,18 @@
+.overview-panel__details-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-width: max-content;
+  margin: 0 1rem;
+}
+
+.overview-panel__details-item-title {
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin-bottom: 0.3125rem;
+}
+
+.overview-panel__details-item-subtitle {
+  font-size: 0.875rem;
+}
diff --git a/explorer/src/lib/components/overview-panel-details-item/OverviewPanelDetailsItem.svelte b/explorer/src/lib/components/overview-panel-details-item/OverviewPanelDetailsItem.svelte
new file mode 100644
index 0000000000..4cd10751f0
--- /dev/null
+++ b/explorer/src/lib/components/overview-panel-details-item/OverviewPanelDetailsItem.svelte
@@ -0,0 +1,11 @@
+<script>
+  import "./OverviewPanelDetailsItem.css";
+
+  export let title;
+  export let subtitle;
+</script>
+
+<div class="overview-panel__details-item">
+  <p class="overview-panel__details-item-title">{title}</p>
+  <p class="overview-panel__details-item-subtitle">{subtitle}</p>
+</div>
diff --git a/explorer/src/lib/components/token-detail-item/TokenDetailItem.css b/explorer/src/lib/components/token-detail-item/TokenDetailItem.css
deleted file mode 100644
index 33537cf902..0000000000
--- a/explorer/src/lib/components/token-detail-item/TokenDetailItem.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.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;
-}
diff --git a/explorer/src/lib/components/token-detail-item/TokenDetailItem.svelte b/explorer/src/lib/components/token-detail-item/TokenDetailItem.svelte
deleted file mode 100644
index 19477d1a68..0000000000
--- a/explorer/src/lib/components/token-detail-item/TokenDetailItem.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<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>
diff --git a/explorer/src/lib/components/token-details-table/TokenDetailsTable.svelte b/explorer/src/lib/components/token-details-table/TokenDetailsTable.svelte
index b02ba1758d..bbf499ffa6 100644
--- a/explorer/src/lib/components/token-details-table/TokenDetailsTable.svelte
+++ b/explorer/src/lib/components/token-details-table/TokenDetailsTable.svelte
@@ -1,6 +1,7 @@
 <svelte:options immutable={true} />
 
 <script>
+  import { makeClassName, middleEllipsis } from "$lib/dusk/string";
   import {
     Table,
     TableBody,
@@ -8,8 +9,13 @@
     TableHead,
     TableRow,
   } from "$lib/components/table";
-  import { TransactionStatus, TransactionType } from "$lib/components";
-  import { makeClassName, middleEllipsis } from "$lib/dusk/string";
+  import { createValueFormatter } from "$lib/dusk/value";
+  import { luxToDusk } from "$lib/dusk/currency";
+  import {
+    AppAnchor,
+    TransactionStatus,
+    TransactionType,
+  } from "$lib/components";
 
   /** @type {string | undefined} */
   export let className = undefined;
@@ -22,6 +28,8 @@
 
   const HASH_CHARS_LENGTH = 10;
 
+  const formatter = createValueFormatter("en");
+
   $: classes = makeClassName(["tokens-table", className]);
 </script>
 
@@ -31,6 +39,7 @@
       <TableCell type="th">From</TableCell>
       <TableCell type="th">To</TableCell>
       <TableCell type="th">ID</TableCell>
+      <TableCell type="th">Amount (Dusk)</TableCell>
       <TableCell type="th">Fee (Dusk)</TableCell>
       <TableCell type="th">Status</TableCell>
       <TableCell type="th">Type</TableCell>
@@ -39,22 +48,31 @@
   <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>
+          <AppAnchor href={`/account/?account=${transaction.from}`}>
+            {middleEllipsis(
+              transaction.from ? transaction.from : "",
+              HASH_CHARS_LENGTH
+            )}
+          </AppAnchor>
+        </TableCell>
+        <TableCell>
+          <AppAnchor href={`/account/?account=${transaction.to}`}>
+            {middleEllipsis(
+              transaction.to ? transaction.to : "",
+              HASH_CHARS_LENGTH
+            )}
+          </AppAnchor>
+        </TableCell>
         <TableCell
           >{middleEllipsis(transaction.txid, HASH_CHARS_LENGTH)}</TableCell
         >
-        <TableCell>{transaction.gasprice}</TableCell>
+        <TableCell>
+          {transaction.amount
+            ? formatter(luxToDusk(transaction.amount))
+            : "N/A"}
+        </TableCell>
+        <TableCell>{formatter(luxToDusk(transaction.gasprice))}</TableCell>
         <TableCell>
           <TransactionStatus
             errorMessage={transaction.txerror}
diff --git a/explorer/src/lib/components/token-list-details/TokenListDetails.svelte b/explorer/src/lib/components/token-list-details/TokenListDetails.svelte
index bcdb7bf5aa..c1b859f9e7 100644
--- a/explorer/src/lib/components/token-list-details/TokenListDetails.svelte
+++ b/explorer/src/lib/components/token-list-details/TokenListDetails.svelte
@@ -41,7 +41,9 @@
   <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>
+      <AppAnchor href={`/tokens/token?name=${data.token}`}
+        >{data.token}</AppAnchor
+      >
     </svelte:fragment>
   </ListItem>
 
diff --git a/explorer/src/lib/components/token-overview/TokenOverview.css b/explorer/src/lib/components/token-overview/TokenOverview.css
index 256d72d99b..1a160922af 100644
--- a/explorer/src/lib/components/token-overview/TokenOverview.css
+++ b/explorer/src/lib/components/token-overview/TokenOverview.css
@@ -47,10 +47,7 @@
 }
 
 .token-overview-panel__details {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
-  width: 100%;
 }
diff --git a/explorer/src/lib/components/token-overview/TokenOverview.svelte b/explorer/src/lib/components/token-overview/TokenOverview.svelte
index 43db48739f..cebc256fb5 100644
--- a/explorer/src/lib/components/token-overview/TokenOverview.svelte
+++ b/explorer/src/lib/components/token-overview/TokenOverview.svelte
@@ -1,13 +1,17 @@
 <script>
   import { Icon } from "$lib/dusk/components";
-  import { TokenDetailItem } from "$lib/components";
   import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
+  import { OverviewPanelDetailsItem } from "$lib/components";
+  import { addressCharPropertiesDefaults } from "$lib/constants";
 
   import "./TokenOverview.css";
 
   export let data;
   export let iconPath;
   export let screenWidth;
+
+  const { minScreenWidth, maxScreenWidth, minCharCount, maxCharCount } =
+    addressCharPropertiesDefaults;
 </script>
 
 <section class="token-overview-panel">
@@ -20,7 +24,13 @@
         <b class="token-overview-panel__token-address">
           {middleEllipsis(
             data.contractId,
-            calculateAdaptiveCharCount(screenWidth, 320, 1024, 4, 30)
+            calculateAdaptiveCharCount(
+              screenWidth,
+              minScreenWidth,
+              maxScreenWidth,
+              minCharCount,
+              maxCharCount
+            )
           )}
         </b>
       </p>
@@ -28,14 +38,14 @@
   </div>
   <hr class="token-overview-panel__separator" />
   <div class="token-overview-panel__details">
-    <TokenDetailItem
+    <OverviewPanelDetailsItem
       title="{data.totalCurrentSupply} {data.ticker}"
       subtitle="Current Total Supply"
     />
-    <TokenDetailItem
+    <OverviewPanelDetailsItem
       title={data.maxCirculatingSupply}
       subtitle="Max Circulating Supply"
     />
-    <TokenDetailItem title="${data.price}" subtitle="Price" />
+    <OverviewPanelDetailsItem title="${data.price}" subtitle="Price" />
   </div>
 </section>
diff --git a/explorer/src/lib/components/token-transactions-list/TokenTransactionsList.svelte b/explorer/src/lib/components/token-transactions-list/TokenTransactionsList.svelte
index 9ffa1231e1..1a0da765e7 100644
--- a/explorer/src/lib/components/token-transactions-list/TokenTransactionsList.svelte
+++ b/explorer/src/lib/components/token-transactions-list/TokenTransactionsList.svelte
@@ -1,6 +1,11 @@
 <svelte:options immutable={true} />
 
 <script>
+  import { onMount } from "svelte";
+  import { createValueFormatter } from "$lib/dusk/value";
+  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
+  import { luxToDusk } from "$lib/dusk/currency";
+  import { addressCharPropertiesDefaults } from "$lib/constants";
   import {
     AppAnchor,
     DataGuard,
@@ -9,11 +14,6 @@
     TransactionStatus,
     TransactionType,
   } from "$lib/components";
-  import { createValueFormatter } from "$lib/dusk/value";
-  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
-  import { RelativeTime } from "$lib/dusk/components";
-  import { luxToDusk } from "$lib/dusk/currency";
-  import { onMount } from "svelte";
 
   /** @type {boolean} */
   export let autoRefreshTime = false;
@@ -29,6 +29,9 @@
 
   const formatter = createValueFormatter("en");
 
+  const { minScreenWidth, maxScreenWidth, minCharCount, maxCharCount } =
+    addressCharPropertiesDefaults;
+
   onMount(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
@@ -49,10 +52,18 @@
     >
       <svelte:fragment slot="term">From</svelte:fragment>
       <svelte:fragment slot="definition">
-        {middleEllipsis(
-          data.from,
-          calculateAdaptiveCharCount(screenWidth, 320, 1024, 4, 25)
-        )}
+        <AppAnchor href={`/account/?account=${data.from}`}>
+          {middleEllipsis(
+            data.from,
+            calculateAdaptiveCharCount(
+              screenWidth,
+              minScreenWidth,
+              maxScreenWidth,
+              minCharCount,
+              maxCharCount
+            )
+          )}
+        </AppAnchor>
       </svelte:fragment>
     </ListItem>
   {/if}
@@ -62,10 +73,18 @@
     >
       <svelte:fragment slot="term">To</svelte:fragment>
       <svelte:fragment slot="definition">
-        {middleEllipsis(
-          data.to,
-          calculateAdaptiveCharCount(screenWidth, 320, 1024, 4, 25)
-        )}
+        <AppAnchor href={`/account/?account=${data.to}`}>
+          {middleEllipsis(
+            data.to,
+            calculateAdaptiveCharCount(
+              screenWidth,
+              minScreenWidth,
+              maxScreenWidth,
+              minCharCount,
+              maxCharCount
+            )
+          )}
+        </AppAnchor>
       </svelte:fragment>
     </ListItem>
   {/if}
@@ -79,26 +98,27 @@
         href={`/transactions/transaction?id=${data.txid}`}
         >{middleEllipsis(
           data.txid,
-          calculateAdaptiveCharCount(screenWidth, 320, 1024, 4, 25)
+          calculateAdaptiveCharCount(
+            screenWidth,
+            minScreenWidth,
+            maxScreenWidth,
+            minCharCount,
+            maxCharCount
+          )
         )}</AppAnchor
       >
     </svelte:fragment>
   </ListItem>
 
-  <!-- TIMESTAMP -->
-  <ListItem
-    tooltipText={displayTooltips
-      ? "Time elapsed since the transaction was created"
-      : ""}
-  >
-    <svelte:fragment slot="term">relative time</svelte:fragment>
-    <RelativeTime
-      autoRefresh={autoRefreshTime}
-      date={data.date}
-      className="transaction-details__list-timestamp"
-      slot="definition"
-    />
-  </ListItem>
+  <!-- AMOUNT -->
+  {#if data.amount}
+    <ListItem tooltipText={displayTooltips ? "The transaction amount" : ""}>
+      <svelte:fragment slot="term">Amount</svelte:fragment>
+      <svelte:fragment slot="definition">
+        {formatter(luxToDusk(data.amount))} DUSK
+      </svelte:fragment>
+    </ListItem>
+  {/if}
 
   <!-- TX FEE -->
   <ListItem tooltipText={displayTooltips ? "The transaction fee amount" : ""}>
diff --git a/explorer/src/lib/components/transactions-list/TransactionsList.svelte b/explorer/src/lib/components/transactions-list/TransactionsList.svelte
index 6b3b54ccda..cf62cc88f9 100644
--- a/explorer/src/lib/components/transactions-list/TransactionsList.svelte
+++ b/explorer/src/lib/components/transactions-list/TransactionsList.svelte
@@ -1,6 +1,11 @@
 <svelte:options immutable={true} />
 
 <script>
+  import { onMount } from "svelte";
+  import { RelativeTime } from "$lib/dusk/components";
+  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
+  import { createValueFormatter } from "$lib/dusk/value";
+  import { luxToDusk } from "$lib/dusk/currency";
   import {
     AppAnchor,
     DataGuard,
@@ -9,11 +14,7 @@
     TransactionStatus,
     TransactionType,
   } from "$lib/components";
-  import { createValueFormatter } from "$lib/dusk/value";
-  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
-  import { RelativeTime } from "$lib/dusk/components";
-  import { luxToDusk } from "$lib/dusk/currency";
-  import { onMount } from "svelte";
+  import { addressCharPropertiesDefaults } from "$lib/constants";
 
   import "./TransactionsList.css";
 
@@ -34,6 +35,9 @@
 
   const formatter = createValueFormatter("en");
 
+  const { minScreenWidth, maxScreenWidth, minCharCount, maxCharCount } =
+    addressCharPropertiesDefaults;
+
   onMount(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
@@ -57,7 +61,13 @@
         href={`/transactions/transaction?id=${data.txid}`}
         >{middleEllipsis(
           data.txid,
-          calculateAdaptiveCharCount(screenWidth, 320, 1024, 4, 25)
+          calculateAdaptiveCharCount(
+            screenWidth,
+            minScreenWidth,
+            maxScreenWidth,
+            minCharCount,
+            maxCharCount
+          )
         )}</AppAnchor
       >
     </svelte:fragment>
diff --git a/explorer/src/lib/constants/addressCharPropertiesDefaults.js b/explorer/src/lib/constants/addressCharPropertiesDefaults.js
new file mode 100644
index 0000000000..2b7aec7cf3
--- /dev/null
+++ b/explorer/src/lib/constants/addressCharPropertiesDefaults.js
@@ -0,0 +1,6 @@
+export const addressCharPropertiesDefaults = {
+  maxCharCount: 25,
+  maxScreenWidth: 1024,
+  minCharCount: 4,
+  minScreenWidth: 320,
+};
diff --git a/explorer/src/lib/constants/index.js b/explorer/src/lib/constants/index.js
new file mode 100644
index 0000000000..2d5a75bd4a
--- /dev/null
+++ b/explorer/src/lib/constants/index.js
@@ -0,0 +1,1 @@
+export { addressCharPropertiesDefaults } from "./addressCharPropertiesDefaults.js";
diff --git a/explorer/src/lib/mock-data/accounts.json b/explorer/src/lib/mock-data/accounts.json
new file mode 100644
index 0000000000..2b0b5bec74
--- /dev/null
+++ b/explorer/src/lib/mock-data/accounts.json
@@ -0,0 +1,82 @@
+[
+  {
+    "address": "0xe5601aae15c846ead69dab4c86a049405",
+    "balance": 90993,
+    "staked_balance": 13802,
+    "active_stake": 9795,
+    "inactive_stake": 4007,
+    "rewards": 987
+  },
+  {
+    "address": "0xea8bdd8e92be744e843c644bf581455ea",
+    "balance": 83097,
+    "staked_balance": 13179,
+    "active_stake": 4469,
+    "inactive_stake": 8710,
+    "rewards": 3561
+  },
+  {
+    "address": "0x883c4c22510df65fe29ebf6dd0ed710f6",
+    "balance": 93610,
+    "staked_balance": 49767,
+    "active_stake": 39775,
+    "inactive_stake": 9992,
+    "rewards": 3616
+  },
+  {
+    "address": "0x39aae05835f723cc8a7152b63f7d73ffc",
+    "balance": 12804,
+    "staked_balance": 5582,
+    "active_stake": 4737,
+    "inactive_stake": 845,
+    "rewards": 4834
+  },
+  {
+    "address": "0xad36bbf36e1cca4b3997abf14f611c2de",
+    "balance": 92044,
+    "staked_balance": 9446,
+    "active_stake": 2944,
+    "inactive_stake": 6502,
+    "rewards": 1766
+  },
+  {
+    "address": "0xdd211bb967327a5edd05592c5e44816e8",
+    "balance": 84539,
+    "staked_balance": 79912,
+    "active_stake": 37637,
+    "inactive_stake": 42275,
+    "rewards": 2528
+  },
+  {
+    "address": "0x1a229291051ec42a3e8abcfb7e9400cb0f",
+    "balance": 61410,
+    "staked_balance": 1460,
+    "active_stake": 1324,
+    "inactive_stake": 136,
+    "rewards": 1399
+  },
+  {
+    "address": "0xdc7f07a38332a73b6d3eb456c57548509",
+    "balance": 35094,
+    "staked_balance": 7814,
+    "active_stake": 4616,
+    "inactive_stake": 3198,
+    "rewards": 972
+  },
+  {
+    "address": "0x156a5e0592cfba9e2d6c9fe95d6f6bbbed",
+    "balance": 85970,
+    "staked_balance": 44119,
+    "active_stake": 12865,
+    "inactive_stake": 31254,
+    "rewards": 4555
+  },
+  {
+    "address": "0x127de00849726e14bb7e889f42fb1cc4d5",
+    "balance": 32429,
+    "staked_balance": 26072,
+    "active_stake": 18899,
+    "inactive_stake": 7173,
+    "rewards": 849
+  }
+]
diff --git a/explorer/src/lib/mock-data/gql-token-transactions.json b/explorer/src/lib/mock-data/gql-token-transactions.json
index ff16e7966b..ab3b91b85f 100644
--- a/explorer/src/lib/mock-data/gql-token-transactions.json
+++ b/explorer/src/lib/mock-data/gql-token-transactions.json
@@ -1,342 +1,362 @@
 [
   {
-    "from": "0x7ab85e62a0bf6f0010d3cbac6e3dbb504d007251",
-    "to": "0x525647a539acb0a8371d212d5412e91ee01e8f1a",
-    "blockhash": "e34e5b790158ac9c0cf1c52a86e09438e7c28daba01b3785e129927c93f63086",
-    "blockheight": 6901,
-    "date": "2025-02-04T21:10:22.373891Z",
-    "feepaid": 0.003444,
-    "gaslimit": 42542814,
-    "gasprice": 77,
-    "gasspent": 8821395,
-    "memo": "",
-    "method": "transfer",
+    "from": "0xf1c4230aca3ca19199d0f9665bbd9cff8",
+    "to": "0x189f8d571b05adc6a35ef1bb0e3b458184",
+    "blockhash": "103749d1e8990cdda301b2c4efd6c50735548dd2fff511d9d99c75",
+    "blockheight": 6670,
+    "date": "2025-02-04T21:15:22.373891Z",
+    "feepaid": 364,
+    "gaslimit": 40133828,
+    "gasprice": 21,
+    "gasspent": 8255387,
+    "memo": "Mock transaction",
+    "method": "stake",
     "success": true,
-    "txerror": "",
-    "txid": "6706996b9984b704048e915765c37389b1bceb84381d9dc8288340982d144117",
-    "txtype": "Phoenix"
+    "txerror": "Out of gas",
+    "txid": "15fb0001ed66bb0dacc02ec003de09e31a3de10e810fa8bb384175",
+    "txtype": "Phoenix",
+    "amount": 4359
   },
   {
-    "from": "0x8c367a21f7f06189cce49edb924e2e42c0d5bca0",
-    "to": "0x21f3f68853668d3ec8f9d6032788a4a3458599e4",
-    "blockhash": "d9ffcb7ac66b38c5d0371534463abedec7b2c093daf31b78aab10628f67318d4",
-    "blockheight": 6413,
-    "date": "2025-02-04T21:11:22.373891Z",
-    "feepaid": 0.004467,
-    "gaslimit": 50683489,
-    "gasprice": 42,
-    "gasspent": 8701776,
+    "from": "0xbf4f15a7d36cbf5b07e574f0b06676c25",
+    "to": "0x18bd5d2a1421ba060ed32ed1b82d7ac5ca",
+    "blockhash": "14941e79f8c61aaf6e90c1f0854d9a04a13c424a72b63b4f3317e9",
+    "blockheight": 6525,
+    "date": "2025-02-04T21:41:22.373891Z",
+    "feepaid": 288,
+    "gaslimit": 47539631,
+    "gasprice": 30,
+    "gasspent": 8287040,
     "memo": "Mock transaction",
-    "method": "transfer",
-    "success": true,
+    "method": "contractCall",
+    "success": false,
     "txerror": "",
-    "txid": "b84da884b05ef2e051e857364764c922223c5b4821bdb590f79e7ca14e5f99b9",
-    "txtype": "Phoenix"
+    "txid": "13abb4204c478da2d3c206d29b3a4f852a4b3a2a584029d82021ef",
+    "txtype": "Phoenix",
+    "amount": 4782
   },
   {
-    "from": "0xc8758dc9aeee7dca0bd2d5c8dfc413ee93584d38",
-    "to": "0x3ca7359b84916e8889d0bcf0db5c381c49e05c4a",
-    "blockhash": "25226fde83f64a5789c0f4b8babaaa58b429f529fd0f00b0f124916a358c6b90",
-    "blockheight": 6413,
-    "date": "2025-02-04T21:12:22.373891Z",
-    "feepaid": 0.002862,
-    "gaslimit": 43732823,
-    "gasprice": 22,
-    "gasspent": 8895516,
+    "from": "0x124a6ba220639e9303101f954d0cb40ca3",
+    "to": "0x151d52029ef789660498ba6b351229b2a9",
+    "blockhash": "89e4a87d621fd4983831a56bd0e100cbda4d663b143515ac68b14",
+    "blockheight": 6812,
+    "date": "2025-02-04T21:25:22.373891Z",
+    "feepaid": 397,
+    "gaslimit": 46936511,
+    "gasprice": 66,
+    "gasspent": 8494918,
     "memo": "",
-    "method": "swap",
+    "method": "stake",
     "success": false,
-    "txerror": "Out of gas",
-    "txid": "430e0f3cdda30f729e2637c32b2152950aeac9203a0b2ff7fc6c946557c48a9b",
-    "txtype": "Phoenix"
+    "txerror": "",
+    "txid": "12456a149120bdb5df064f891f1934717b90a87fecda00c97819f",
+    "txtype": "Moonlight",
+    "amount": 2685
   },
   {
-    "from": "0xb043ef8e502c5883fcf92be17ddcb4c1533b333f",
-    "to": "0x968c95bbd2ed8ada0b342903ea5e97bfdc2fefdf",
-    "blockhash": "06a980d5640a69ad0f4d2a07ca7d32cbabb81d2bcbb9504f6940ac27eca00603",
-    "blockheight": 6744,
-    "date": "2025-02-04T21:13:22.373891Z",
-    "feepaid": 0.000661,
-    "gaslimit": 46497961,
-    "gasprice": 4,
-    "gasspent": 8525644,
+    "from": "0xe2bbdf3f064040445912cbf07b498e583",
+    "to": "0x1d4975e39fe54a4aaafdf3df75d7c51307",
+    "blockhash": "1582d4d253ae8ea3c6526760f6d82a38db2ccbf87c236b3cf36075",
+    "blockheight": 6896,
+    "date": "2025-02-04T21:46:22.373891Z",
+    "feepaid": 280,
+    "gaslimit": 51821530,
+    "gasprice": 79,
+    "gasspent": 8613306,
     "memo": "",
     "method": "contractCall",
-    "success": false,
+    "success": true,
     "txerror": "Out of gas",
-    "txid": "704e946556e6541cb33afd10599e8e7b082adf240b712c1f2ca67b1aaf0a6eae",
-    "txtype": "Phoenix"
+    "txid": "2fc4ef8e4d3612bafe291a1c5bfe5865aa4f9b56e90b437cf09c0",
+    "txtype": "Phoenix",
+    "amount": 4787
   },
   {
-    "from": "0xb58b5aee843f29c2d4d57732aa7bdfc0a76e6ced",
-    "to": "0x0b9f95dc70d3a16f9134946569c9b05a1892e6cc",
-    "blockhash": "3889232fb664881c8889d68a51f83121ef85fe3e1a3d8a9545ed256a1ea1a330",
-    "blockheight": 6092,
-    "date": "2025-02-04T21:14:22.373891Z",
-    "feepaid": 0.000556,
-    "gaslimit": 49491251,
-    "gasprice": 56,
-    "gasspent": 8458173,
+    "from": "0xf1e04f4f5b6e47fc0c098b252069b8fef",
+    "to": "0x13c0b286afa82e82b482f4da78e7d57880",
+    "blockhash": "fe72d948e7e40fccb5de454edea2586e35e7333bcdb5433f8e46",
+    "blockheight": 6282,
+    "date": "2025-02-04T21:10:22.373891Z",
+    "feepaid": 261,
+    "gaslimit": 41813590,
+    "gasprice": 83,
+    "gasspent": 8860738,
     "memo": "",
-    "method": "stake",
+    "method": "transfer",
     "success": true,
+    "txerror": "Out of gas",
+    "txid": "888ca336110c3e46092801aca13b352ccc57e7d4c4b8e15547455",
+    "txtype": "Moonlight",
+    "amount": 486
+  },
+  {
+    "from": "0x1a7b6eb452ce3681b58a2094f0847e1143",
+    "to": "0xec77d88ae1ecd85e60f673dfba0f541a6",
+    "blockhash": "c8363541f0d78db9cda93057eca5b705be899302420dfc3c6425f",
+    "blockheight": 6707,
+    "date": "2025-02-04T21:48:22.373891Z",
+    "feepaid": 145,
+    "gaslimit": 59719838,
+    "gasprice": 100,
+    "gasspent": 8009858,
+    "memo": "Mock transaction",
+    "method": "contractCall",
+    "success": false,
     "txerror": "",
-    "txid": "4d61503201c74835f26996084ec69c59d3dd0116bce18b454c92668c91ae2ea6",
-    "txtype": "Moonlight"
+    "txid": "38018d113c51c5fe948486bc3fdd3441372acb5b6fa5341eaf0c2",
+    "txtype": "Moonlight",
+    "amount": 1663
   },
   {
-    "from": "0xdb002f43e3ff2170991d039e0be0a7847085d619",
-    "to": "0xd80c0ef4d5da1c0ce0c3ebcb0b890ef5b63446bd",
-    "blockhash": "c2711dd4045427c3c8bfb71bc29146a5c9af2afdbe7b9438c2e62613fe553bc1",
-    "blockheight": 6324,
-    "date": "2025-02-04T21:15:22.373891Z",
-    "feepaid": 0.00102,
-    "gaslimit": 54489684,
-    "gasprice": 99,
-    "gasspent": 8777099,
+    "from": "0x3bee12dcd862070f184e17e073e35f242",
+    "to": "0xf1b8b742ccf4c23c50475d745c450cda6",
+    "blockhash": "16bdc895f3b497683a6463cbd0f8cde7f04ddf94fd53909cbc1a74",
+    "blockheight": 6368,
+    "date": "2025-02-04T21:26:22.373891Z",
+    "feepaid": 426,
+    "gaslimit": 59493704,
+    "gasprice": 52,
+    "gasspent": 8580194,
     "memo": "",
-    "method": "contractCall",
+    "method": "stake",
     "success": true,
     "txerror": "",
-    "txid": "c5fd9cecc49a72d7be3bf94777bde9346c54fa34451f96f7a0adffb76b3101c3",
-    "txtype": "Moonlight"
+    "txid": "53f439c79b1537add61de7b64829bc77793cebf44c0497a14ede9",
+    "txtype": "Starlight",
+    "amount": 2624
   },
   {
-    "from": "0x1a8bc7cc615ef12483b1cdfe7041446acd0a2739",
-    "to": "0xd4d9c9d1b00649fcf329634c38b237fda977dff4",
-    "blockhash": "ababd8b75a935930b1234b19f764920480c1d349e080cdec41ca58d45ddb59cf",
-    "blockheight": 6627,
-    "date": "2025-02-04T21:16:22.373891Z",
-    "feepaid": 0.00194,
-    "gaslimit": 49336296,
-    "gasprice": 12,
-    "gasspent": 8570851,
+    "from": "0x125c7d13804541a8b2e1e9574376643304",
+    "to": "0x11b5108c20419b793d0f67981d9e0df932",
+    "blockhash": "16430f407b94e7e7c8a944a85afab9aa5081fc3b6492183605e558",
+    "blockheight": 6091,
+    "date": "2025-02-04T21:27:22.373891Z",
+    "feepaid": 83,
+    "gaslimit": 44063503,
+    "gasprice": 68,
+    "gasspent": 8437324,
     "memo": "",
-    "method": "swap",
+    "method": "contractCall",
     "success": true,
     "txerror": "",
-    "txid": "6792f3ad9de7008f32ef18c41a9e920cf4e4dcd12a3f310444a3894054b7fb84",
-    "txtype": "Phoenix"
+    "txid": "159d71ff41ffa399ab806b2de49226865cfcc5707e1f3f76233c25",
+    "txtype": "Starlight",
+    "amount": 3502
   },
   {
-    "from": "0xc134a54c4120db46ba2e570bbae1349bcb429312",
-    "to": "0x0aad0f2dc83c810ce13dcb8660afb46f3c3b8fc9",
-    "blockhash": "3a87ac863bd53c4e1dfdcd6ecd592e1bfc05011fda2de5c7cc69fd100d2e5c05",
-    "blockheight": 6765,
-    "date": "2025-02-04T21:17:22.373891Z",
-    "feepaid": 0.002848,
-    "gaslimit": 53561274,
-    "gasprice": 70,
-    "gasspent": 8523728,
+    "from": "0xcf107d78454c4a25a464f2940d3e8bf04",
+    "to": "0xb7afe307f6c12457b4b0d113425798fae",
+    "blockhash": "135f85580bb6217a990ded3d35fe94ef38620044660fa74203355",
+    "blockheight": 6408,
+    "date": "2025-02-04T21:46:22.373891Z",
+    "feepaid": 6,
+    "gaslimit": 48718361,
+    "gasprice": 53,
+    "gasspent": 8045800,
     "memo": "Mock transaction",
     "method": "transfer",
     "success": false,
-    "txerror": "Out of gas",
-    "txid": "38359558762af6cd8339d1cddbf2a84e34f87393c32f8f449b2944ede1364e3f",
-    "txtype": "Phoenix"
+    "txerror": "",
+    "txid": "2f1c8ca12b9257903ecfbd81df2cc17aa23e113f6323e2a851fc4",
+    "txtype": "Starlight",
+    "amount": 756
   },
   {
-    "from": "0x96c5b5e79f8b8633451558d4a731894d53ab81e7",
-    "to": "0x045fbb44b85f4350ce6d486fb774849705d4d735",
-    "blockhash": "1da9637818b86541ac64631aa02f55ce0315b86d1493f9a5c333a0d8fa0fc25c",
-    "blockheight": 6855,
-    "date": "2025-02-04T21:18:22.373891Z",
-    "feepaid": 0.002643,
-    "gaslimit": 59163243,
-    "gasprice": 10,
-    "gasspent": 8277123,
+    "from": "0xcbf02842125fb52a93139d958b6db0780",
+    "to": "0x1375b887d12e2c93bf6a724af4bcc064f",
+    "blockhash": "13220fced4ac2f91662819d96c2ed47a581282e93f2469bdfb08de",
+    "blockheight": 6134,
+    "date": "2025-02-04T21:25:22.373891Z",
+    "feepaid": 53,
+    "gaslimit": 53394005,
+    "gasprice": 11,
+    "gasspent": 8563852,
     "memo": "",
     "method": "swap",
-    "success": false,
-    "txerror": "Out of gas",
-    "txid": "24fe8bbeb1449952cc766153fc8dac8d750871ccc77bfb84e274e97b5c7175c9",
-    "txtype": "Phoenix"
+    "success": true,
+    "txerror": "",
+    "txid": "1314cc21ae06cb1041b3aba60f5ec1251de7399454a40959558bc2",
+    "txtype": "Phoenix",
+    "amount": 4455
   },
   {
-    "from": "0x31fa849ec41353504df67d59555f6cbe4ea7aece",
-    "to": "0xe8f9e2121c53a4a404cd9398bf796266faabaceb",
-    "blockhash": "2aa052d493546c12c34ccfdd563111692249f2a7c7392a47fdb86bae9af37a9b",
-    "blockheight": 6666,
-    "date": "2025-02-04T21:19:22.373891Z",
-    "feepaid": 0.000602,
-    "gaslimit": 47095881,
-    "gasprice": 55,
-    "gasspent": 8943790,
+    "from": "0xd9477e33deda4e389f57bf7830465ec50",
+    "to": "0x1ae86a7815511aaab69469a07be405b369",
+    "blockhash": "411ecd90a04a6e9199b8e7eb01ad8660ee340879aa63af54b9331",
+    "blockheight": 6623,
+    "date": "2025-02-04T21:48:22.373891Z",
+    "feepaid": 160,
+    "gaslimit": 52112559,
+    "gasprice": 3,
+    "gasspent": 8788320,
     "memo": "Mock transaction",
-    "method": "swap",
-    "success": false,
-    "txerror": "Out of gas",
-    "txid": "eba3c9f1210e47ca59dea09e28fcae6cb630729ea140ce6c7a337315239fdf18",
-    "txtype": "Moonlight"
-  },
-  {
-    "from": "0xd6d9deacde6553dde57972c969e9661a4dc0e503",
-    "to": "0xb6b5f138dd456265f601c6e1edb3c929078ca65c",
-    "blockhash": "764f14a8dd7de38c88743ac8bb0b16dd56caa59ffae99df0e39349bac52613a9",
-    "blockheight": 6609,
-    "date": "2025-02-04T21:20:22.373891Z",
-    "feepaid": 0.001905,
-    "gaslimit": 44394939,
-    "gasprice": 86,
-    "gasspent": 8535794,
-    "memo": "",
-    "method": "swap",
+    "method": "contractCall",
     "success": false,
-    "txerror": "Out of gas",
-    "txid": "9b8b2fa3252d76d9a4e1603d3e327bf15d0bdd69c56720c6e8e0d8dec2791de1",
-    "txtype": "Phoenix"
+    "txerror": "",
+    "txid": "4db272d3b8b7a5eaca3569ab1f059da02bf1d5dae4023e87d1d1a",
+    "txtype": "Starlight",
+    "amount": 3426
   },
   {
-    "from": "0xf509d29122dec180b6f92488bbc4d681ad330acd",
-    "to": "0x0d517c1021042eadc0f24cb47d20bed8ad5e20c8",
-    "blockhash": "33fa79679ae3d97a3c0480a688ecc7281c7d2034b4b795164d66fd49f425e8e6",
-    "blockheight": 6452,
-    "date": "2025-02-04T21:21:22.373891Z",
-    "feepaid": 0.004348,
-    "gaslimit": 56947207,
-    "gasprice": 96,
-    "gasspent": 8363212,
+    "from": "0x1a2e4a118f192aace7a738bd900687ee97",
+    "to": "0xca3969900632ae67cb07f4fb12bfaa867",
+    "blockhash": "13d27a40e4b226bd5a4706cd2c07e8a34e1b7b9de612d0a9373e38",
+    "blockheight": 6796,
+    "date": "2025-02-04T21:43:22.373891Z",
+    "feepaid": 221,
+    "gaslimit": 50435832,
+    "gasprice": 7,
+    "gasspent": 8181297,
     "memo": "Mock transaction",
-    "method": "swap",
+    "method": "stake",
     "success": false,
-    "txerror": "Out of gas",
-    "txid": "6a422818dfe21e1767dda3aa715a471d35254567d8f52cbaf1af5f2329dbd1df",
-    "txtype": "Phoenix"
+    "txerror": "",
+    "txid": "1383ff8c14858bb180d90524e106e4859a5b82f4ad16130260ca70",
+    "txtype": "Starlight",
+    "amount": 751
   },
   {
-    "from": "0x773cc3210e83d86611056709d7a661865596d890",
-    "to": "0xe54a1a12882f849443297c41449d96579f941a35",
-    "blockhash": "21a783b6548d7cf2f3616c8ab22aab20cc0495e300ba32ff04553c2e066637a7",
-    "blockheight": 6997,
-    "date": "2025-02-04T21:22:22.373891Z",
-    "feepaid": 0.004695,
-    "gaslimit": 40303794,
-    "gasprice": 48,
-    "gasspent": 8409866,
+    "from": "0x14a95b91d7d522fc5f82349d4d19dc0787",
+    "to": "0x4a7d12b29a0d5fecf8d1f64baad3217f7",
+    "blockhash": "172024594f709d9ff4a981f2b5a951fd09b6adfc019de0a26b438",
+    "blockheight": 6899,
+    "date": "2025-02-04T21:39:22.373891Z",
+    "feepaid": 278,
+    "gaslimit": 48049176,
+    "gasprice": 85,
+    "gasspent": 8124888,
     "memo": "",
     "method": "swap",
-    "success": false,
+    "success": true,
     "txerror": "Out of gas",
-    "txid": "224709caba957308b162a75ce8b75eb47a958b30c2706bbae6312be893d586ef",
-    "txtype": "Phoenix"
+    "txid": "1281212f190ba0031ec625e2c1cf1c8f4fa507fa2a54fce15e0ce4",
+    "txtype": "Moonlight",
+    "amount": 3161
   },
   {
-    "from": "0x6d6747f5e1b7453005c8db3fee6f382cca0b85b3",
-    "to": "0x5bb30392a743b4b0876da74f8d2c9e933ba95dd3",
-    "blockhash": "5bb5130020b7139022709647d79acbb7060a5dacb4fbac7138415c85e73d4c2f",
-    "blockheight": 6731,
-    "date": "2025-02-04T21:23:22.373891Z",
-    "feepaid": 0.004159,
-    "gaslimit": 51711058,
-    "gasprice": 52,
-    "gasspent": 8321942,
-    "memo": "",
-    "method": "transfer",
+    "from": "0xccd4a776a12ea7324e56f9abd8a982e7",
+    "to": "0x16411a926157babbcd0f66126b02375a0c",
+    "blockhash": "e7f8c7ce22f3855d0731da2e48380a6d58d25d3c96ae10b0f046f",
+    "blockheight": 6897,
+    "date": "2025-02-04T21:59:22.373891Z",
+    "feepaid": 406,
+    "gaslimit": 47848000,
+    "gasprice": 4,
+    "gasspent": 8875710,
+    "memo": "Mock transaction",
+    "method": "contractCall",
     "success": false,
-    "txerror": "Out of gas",
-    "txid": "5bd7fe82f6e9d9183de05b7d569ab552983d71a2bd8a211098a20fd2c39170b3",
-    "txtype": "Moonlight"
+    "txerror": "",
+    "txid": "14c57311f59c3bc1a6ccada7d206d22d3283953bb138918af0bdc3",
+    "txtype": "Starlight",
+    "amount": 856
   },
   {
-    "from": "0x1f2586890205b7ef9e609fcd075c6e23b01e2f1b",
-    "to": "0xaa5d853ce5924f16d1cd31155454c608956e07d5",
-    "blockhash": "29f0b1959f07c00282df351b17024b9de0818bc2b812b563b5fa40e059c0790c",
-    "blockheight": 6941,
-    "date": "2025-02-04T21:24:22.373891Z",
-    "feepaid": 0.003257,
-    "gaslimit": 46838518,
-    "gasprice": 74,
-    "gasspent": 8217953,
+    "from": "0x28ffc302218d0fda3413dd6cc4449c5af",
+    "to": "0x1a11a307ce175112ce3324008090cfcf75",
+    "blockhash": "cb685365e8255a7de01cca624ed5d3d72dc787f011ed65af6c4c8",
+    "blockheight": 6650,
+    "date": "2025-02-04T21:35:22.373891Z",
+    "feepaid": 46,
+    "gaslimit": 40698581,
+    "gasprice": 9,
+    "gasspent": 8017032,
     "memo": "",
-    "method": "stake",
+    "method": "transfer",
     "success": false,
     "txerror": "Out of gas",
-    "txid": "c63512658663b8f7a57871430eb723cc27344ebebbf791aafce6d169fa0de486",
-    "txtype": "Starlight"
+    "txid": "100a579e48bf6774ac9e598ef752a651edb55bfdaa9bddffd722f6",
+    "txtype": "Moonlight",
+    "amount": 3754
   },
   {
-    "from": "0x9c5878303ac60e0bf8da235d91a60654322670a8",
-    "to": "0xd9478996a491e529fbc8bc5028bd53c743017276",
-    "blockhash": "fb1cec29a76fcec89ccfc51efac54b2827987c6a564b67fb504da4757fb1b3e9",
-    "blockheight": 6389,
-    "date": "2025-02-04T21:25:22.373891Z",
-    "feepaid": 0.001288,
-    "gaslimit": 41856498,
-    "gasprice": 58,
-    "gasspent": 8883919,
-    "memo": "Mock transaction",
+    "from": "0x67c928f9f49f643af5696a00e0f05c1cc",
+    "to": "0xfb58089383ae2de810e45fef5c18ac0ff",
+    "blockhash": "2b3c589afc4c631f6f035ce418c64f14a3d929c918436662d99cd",
+    "blockheight": 6260,
+    "date": "2025-02-04T21:19:22.373891Z",
+    "feepaid": 437,
+    "gaslimit": 55130616,
+    "gasprice": 23,
+    "gasspent": 8811330,
+    "memo": "",
     "method": "swap",
     "success": true,
     "txerror": "",
-    "txid": "aee203eeaf6262bb765d99f6c7031ec740a21e66c65960daf163913ee92a4c5f",
-    "txtype": "Moonlight"
+    "txid": "1215ac022c195603e65cb6dc35e641f7463a0e090e237f7a52e03b",
+    "txtype": "Starlight",
+    "amount": 2863
   },
   {
-    "from": "0x42fed88884d246d3da4829ea2dfc577e6e246813",
-    "to": "0x3f6ced7537bd15eb7ac2ced5a19707d3745d1423",
-    "blockhash": "d280d322bf6d8b4a601876997562755ec2c179bc60d121c9749c6ff7741afd5d",
-    "blockheight": 6148,
-    "date": "2025-02-04T21:26:22.373891Z",
-    "feepaid": 0.002895,
-    "gaslimit": 40329493,
-    "gasprice": 87,
-    "gasspent": 8148241,
-    "memo": "",
-    "method": "transfer",
-    "success": true,
-    "txerror": "",
-    "txid": "271010c92a2b6779f2016d2cba45395b87b1d8883d2a1684f1162ed0afbffe9e",
-    "txtype": "Moonlight"
+    "from": "0x4fb541bcb726b723472f00444a2728e29",
+    "to": "0x1d43d7a9d75258e60e59e2a942b85d128c",
+    "blockhash": "a238cb4c20187d727ed21382367d28b62e81297a9c46d76e8483e",
+    "blockheight": 6670,
+    "date": "2025-02-04T21:58:22.373891Z",
+    "feepaid": 372,
+    "gaslimit": 58237444,
+    "gasprice": 98,
+    "gasspent": 8689388,
+    "memo": "Mock transaction",
+    "method": "swap",
+    "success": false,
+    "txerror": "Out of gas",
+    "txid": "91c72c45c691950de47e0ccfd171c0f649b9c4e564c25f70d59e9",
+    "txtype": "Moonlight",
+    "amount": 1454
   },
   {
-    "from": "0xddea1b938286128b69a2eddc02c161d28e5191f7",
-    "to": "0xbd55f49bc47b8eb27c7a0e3ef1e04456445f13bc",
-    "blockhash": "0edc50d6c48b2e06667f5c59861682de36df9c568488a87cbcb0230c6db113e8",
-    "blockheight": 6212,
-    "date": "2025-02-04T21:27:22.373891Z",
-    "feepaid": 0.001956,
-    "gaslimit": 44839470,
-    "gasprice": 32,
-    "gasspent": 8407905,
+    "from": "0x7d3324adc78f4c1ba90326b61f4c263b6",
+    "to": "0x14f6820433a39701565d74607bc86e9b77",
+    "blockhash": "72df0f0edd37b3f47ebaee22dcdca2b59fac17c72de22ee0c5a23",
+    "blockheight": 6327,
+    "date": "2025-02-04T21:46:22.373891Z",
+    "feepaid": 459,
+    "gaslimit": 50657888,
+    "gasprice": 46,
+    "gasspent": 8181583,
     "memo": "",
-    "method": "transfer",
-    "success": false,
+    "method": "contractCall",
+    "success": true,
     "txerror": "Out of gas",
-    "txid": "fb6a9998631293c68f6f897b7cb1edd29f152b9927775de5be77c30281c59549",
-    "txtype": "Moonlight"
+    "txid": "12085af91406c2e8faf525be61624072d4ef6cc41180596a10c338",
+    "txtype": "Moonlight",
+    "amount": 4293
   },
   {
-    "from": "0xc79c4932b82c59f3c0ccbf48f53f6860f1c00724",
-    "to": "0x5ac786685e6bd6f7867bf7f8998831de0f079ad4",
-    "blockhash": "077ebd107d2f9e05e735480c7ea7cf2c944f43f03f76ecfd949431ba15255d5c",
-    "blockheight": 6929,
-    "date": "2025-02-04T21:28:22.373891Z",
-    "feepaid": 0.001711,
-    "gaslimit": 45063818,
-    "gasprice": 30,
-    "gasspent": 8839895,
-    "memo": "",
-    "method": "stake",
-    "success": false,
+    "from": "0x19ca428a0a181661e23e8d24ef6dd0bc43",
+    "to": "0xd2e3637d26c899a4f2b58ee6bc70c6184",
+    "blockhash": "16afbf3568bd4ae1dd71d65bc1d038bdd9e4023e1f41297c4a1c45",
+    "blockheight": 6928,
+    "date": "2025-02-04T21:14:22.373891Z",
+    "feepaid": 197,
+    "gaslimit": 47787382,
+    "gasprice": 28,
+    "gasspent": 8885197,
+    "memo": "Mock transaction",
+    "method": "transfer",
+    "success": true,
     "txerror": "",
-    "txid": "bdc4cb7ef9248c92ee6acb9b6f5849a33faf8e029704ebc1932a5e04a64424e8",
-    "txtype": "Moonlight"
+    "txid": "17fe153abcdccda50f3a2af37e59a806b10e48277d88ad2177954e",
+    "txtype": "Phoenix",
+    "amount": 834
   },
   {
-    "from": "0x6e2099b735b30931f70148ba5715fd3644f78087",
-    "to": "0x1021c7aa45ff7e747b2da07ae3e844a769c7bfeb",
-    "blockhash": "d24c6ccbe493cf6c7916390efc8dc40f30ab262cc01f55b55dffe30b932f1d98",
-    "blockheight": 6563,
-    "date": "2025-02-04T21:29:22.373891Z",
-    "feepaid": 0.000702,
-    "gaslimit": 42038194,
-    "gasprice": 51,
-    "gasspent": 8549373,
+    "from": "0x106f51ade99ab424f8aea814c7a2dcf847",
+    "to": "0xdd1f2a9d2fe1e5bfe9bb4721ea2902490",
+    "blockhash": "dd1a4a391efe59e03b70748ce0bcbd76a622a423700381682fdbc",
+    "blockheight": 6211,
+    "date": "2025-02-04T21:54:22.373891Z",
+    "feepaid": 494,
+    "gaslimit": 51874626,
+    "gasprice": 7,
+    "gasspent": 8479486,
     "memo": "Mock transaction",
-    "method": "swap",
+    "method": "stake",
     "success": true,
     "txerror": "Out of gas",
-    "txid": "6d66f18d564d87a183b97da902863a64ce9dbfb14d27db3fb8cc34932cdb1e91",
-    "txtype": "Moonlight"
+    "txid": "5d98863e339bce2059eb627960a9db89e7863765c08eddffa89c",
+    "txtype": "Moonlight",
+    "amount": 1766
   }
 ]
diff --git a/explorer/src/lib/mock-data/index.js b/explorer/src/lib/mock-data/index.js
index aaba3dc098..bf20061e1a 100644
--- a/explorer/src/lib/mock-data/index.js
+++ b/explorer/src/lib/mock-data/index.js
@@ -13,5 +13,6 @@ 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 accounts } from "./accounts.json";
 export { default as tokens } from "./tokens.json";
 export { default as gqlTokenTransactions } from "./gql-token-transactions.json";
diff --git a/explorer/src/routes/account/+layout.js b/explorer/src/routes/account/+layout.js
new file mode 100644
index 0000000000..51520ef65d
--- /dev/null
+++ b/explorer/src/routes/account/+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, "/");
+  }
+};
diff --git a/explorer/src/routes/account/+page.svelte b/explorer/src/routes/account/+page.svelte
new file mode 100644
index 0000000000..0318beeeaa
--- /dev/null
+++ b/explorer/src/routes/account/+page.svelte
@@ -0,0 +1,91 @@
+<script>
+  import { onMount } from "svelte";
+  import { appStore } from "$lib/stores";
+  import {
+    AccountOverview,
+    DataCard,
+    TokenDetailsTable,
+    TokenTransactionsList,
+  } from "$lib/components";
+  import { accounts, gqlTokenTransactions } from "$lib/mock-data";
+
+  const ITEMS_TO_DISPLAY = import.meta.env.VITE_CHAIN_INFO_ENTRIES;
+  let itemsToDisplay = ITEMS_TO_DISPLAY;
+
+  const accountData = accounts[0];
+
+  const transactions = gqlTokenTransactions.map((transaction) => {
+    return {
+      ...transaction,
+      date: new Date(transaction.date),
+    };
+  });
+
+  const error = null;
+  const loading = false;
+
+  const loadMoreItems = () => {
+    if (transactions && itemsToDisplay < transactions.length) {
+      itemsToDisplay += ITEMS_TO_DISPLAY;
+    }
+  };
+
+  $: ({ isSmallScreen } = $appStore);
+
+  /** @type {number} */
+  let screenWidth = window.innerWidth;
+
+  /** @type {Transaction[]}*/
+  let displayedTxns;
+  $: displayedTxns = transactions ? transactions.slice(0, itemsToDisplay) : [];
+
+  $: isLoadMoreDisabled =
+    (transactions && itemsToDisplay >= transactions.length) ||
+    (loading && transactions === null);
+
+  onMount(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+
+      screenWidth = entry.contentRect.width;
+    });
+
+    resizeObserver.observe(document.body);
+
+    return () => resizeObserver.disconnect();
+  });
+</script>
+
+<section>
+  {#if accountData}
+    <article>
+      <AccountOverview {screenWidth} data={accountData} />
+    </article>
+    <DataCard
+      on:retry
+      data={transactions}
+      {error}
+      {loading}
+      title="Transactions — {displayedTxns.length} Displayed Items"
+      headerButtonDetails={error
+        ? undefined
+        : {
+            action: () => loadMoreItems(),
+            disabled: isLoadMoreDisabled,
+            label: "Show More",
+          }}
+    >
+      {#if isSmallScreen}
+        <div class="data-card__list">
+          {#each displayedTxns as txn (txn)}
+            <TokenTransactionsList data={txn} />
+          {/each}
+        </div>
+      {:else}
+        <TokenDetailsTable data={displayedTxns} />
+      {/if}
+    </DataCard>
+  {:else}
+    <p>Account data not found</p>
+  {/if}
+</section>


Test patch:
diff --git a/explorer/src/lib/chain-info/__tests__/transformBlock.spec.js b/explorer/src/lib/chain-info/__tests__/transformBlock.spec.js
index cd15e216d0..a7f96080e8 100644
--- a/explorer/src/lib/chain-info/__tests__/transformBlock.spec.js
+++ b/explorer/src/lib/chain-info/__tests__/transformBlock.spec.js
@@ -25,6 +25,7 @@ describe("transformBlock", () => {
     transactions: {
       data: [
         {
+          amount: undefined,
           blockhash:
             "bd5c99bb720b03500e89f103fe66113ba62f2e124ed9651563f38fd15977719f",
           blockheight: 495868,
@@ -43,6 +44,7 @@ describe("transformBlock", () => {
           txtype: "Moonlight",
         },
         {
+          amount: undefined,
           blockhash:
             "bd5c99bb720b03500e89f103fe66113ba62f2e124ed9651563f38fd15977719f",
           blockheight: 495868,
diff --git a/explorer/src/lib/chain-info/__tests__/transformTransaction.spec.js b/explorer/src/lib/chain-info/__tests__/transformTransaction.spec.js
index c5bc250f72..150ae6ca92 100644
--- a/explorer/src/lib/chain-info/__tests__/transformTransaction.spec.js
+++ b/explorer/src/lib/chain-info/__tests__/transformTransaction.spec.js
@@ -7,6 +7,7 @@ import { transformTransaction } from "..";
 describe("transformTransaction", () => {
   const txData = gqlTransaction.tx;
   const expectedTx = {
+    amount: undefined,
     blockhash:
       "3c6e4018cfa86723e50644e33d3990bc27fc794f6b49fbf6290e4d308e07bd2d",
     blockheight: 487166,