From 3e350c59c92a0f27744c2e043bdc28d46425258d Mon Sep 17 00:00:00 2001 From: Alex Panturu Date: Mon, 5 Aug 2024 11:55:55 +0300 Subject: [PATCH] explorer: Add conditional rendering for desktop mobile layouts --- .../components/__tests__/BlocksCard.spec.js | 3 +- .../__tests__/TransactionsCard.spec.js | 2 + .../__snapshots__/BlocksCard.spec.js.snap | 1079 +--------- .../TransactionsCard.spec.js.snap | 1178 +---------- .../components/blocks-card/BlocksCard.svelte | 25 +- .../LatestBlocksCard.svelte | 11 +- .../LatestTransactionsCard.svelte | 17 +- .../transactions-card/TransactionsCard.svelte | 27 +- explorer/src/lib/dusk/mocks/MediaQueryList.js | 38 + explorer/src/lib/dusk/mocks/index.js | 1 + .../src/lib/stores/__tests__/appStore.spec.js | 26 + explorer/src/lib/stores/appStore.js | 17 + explorer/src/lib/stores/stores.d.ts | 1 + explorer/src/routes/+page.svelte | 2 + explorer/src/routes/blocks/+page.svelte | 1 + .../__tests__/__snapshots__/page.spec.js.snap | 1568 +-------------- explorer/src/routes/blocks/block/+page.svelte | 1 + .../__tests__/__snapshots__/page.spec.js.snap | 438 +--- explorer/src/routes/transactions/+page.svelte | 1 + .../__tests__/__snapshots__/page.spec.js.snap | 1763 +---------------- explorer/src/style/main.css | 18 - explorer/vite-setup.js | 10 +- 22 files changed, 190 insertions(+), 6037 deletions(-) create mode 100644 explorer/src/lib/dusk/mocks/MediaQueryList.js diff --git a/explorer/src/lib/components/__tests__/BlocksCard.spec.js b/explorer/src/lib/components/__tests__/BlocksCard.spec.js index ad5e97b08e..7c752b643f 100644 --- a/explorer/src/lib/components/__tests__/BlocksCard.spec.js +++ b/explorer/src/lib/components/__tests__/BlocksCard.spec.js @@ -4,7 +4,7 @@ import { compose, mapWith, take } from "lamb"; import { gqlBlocks } from "$lib/mock-data"; import { transformBlock } from "$lib/chain-info"; - +import { appStore } from "$lib/stores"; import { BlocksCard } from ".."; describe("Blocks Card", () => { @@ -18,6 +18,7 @@ describe("Blocks Card", () => { blocks: null, error: null, loading: false, + appStore: appStore }; const baseOptions = { props: baseProps, diff --git a/explorer/src/lib/components/__tests__/TransactionsCard.spec.js b/explorer/src/lib/components/__tests__/TransactionsCard.spec.js index 559573e310..56fcdcf580 100644 --- a/explorer/src/lib/components/__tests__/TransactionsCard.spec.js +++ b/explorer/src/lib/components/__tests__/TransactionsCard.spec.js @@ -4,6 +4,7 @@ import { compose, mapWith, take } from "lamb"; import { gqlTransactions } from "$lib/mock-data"; import { transformTransaction } from "$lib/chain-info"; +import { appStore } from "$lib/stores"; import { TransactionsCard } from ".."; @@ -18,6 +19,7 @@ describe("Transactions Card", () => { error: null, loading: false, txns: null, + appStore: appStore }; const baseOptions = { props: baseProps, diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap index 7b1fee6aa4..b730965b42 100644 --- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap +++ b/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" >
should disable the \`Show More\` button if there is no mo
- -
- -
-
- - block -
- -
- - 1,365,454 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,453 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,452 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,451 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,450 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,449 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,448 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,447 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,446 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,445 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
-
+ @@ -1789,5 +745,36 @@ exports[`Blocks Card > should render the \`BlocksCard\` component 1`] = ` + +`; + +exports[`Blocks Card > should render the \`BlocksCard\` component with the mobile layout 1`] = ` +
+
+

+ Blocks — 0 Displayed Items +

+ + +
+ + +
`; diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap index c21b955d63..711dfea952 100644 --- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap +++ b/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" >
should disable the \`Show More\` button if there is
- -
- -
-
- - ID -
- -
- - 070280c69500df7d1b40942981a3b5...f9f71ba62f96d63e322994efca2a0e - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 50,000,000 -
- -
- - Fee -
- -
- 0.000215552 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 534f753d5a420fddc21c84d76ff26b...48ea75b450c082759d155153259c00 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 50,000,000 -
- -
- - Fee -
- -
- 0.000215617 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - c6f13af20c23b8bc55d22a416a191e...a47128b4d7dc3ac6fce5fc68ebb102 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 50,000,000 -
- -
- - Fee -
- -
- 0.000214413 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 31c7dce26a5a6ef1392f53630b8e27...1f10eaeea2685c5a37dbbf7bcb4c04 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291769 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 4fa6e913c083aa595530b1f6c010c7...8121307c991ea6782f9e9e4dd5510d - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000290764 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - d1a7928a435021d87ea3649bff57c8...c7b5c6c68081a61fea5779ccdb2e04 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291961 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 004ca8683c315b9270e04d3768dfb5...f65d92a9469ca31a5d97cff9718b06 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000292039 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - b5a77063e45dd90b97b2c30b4cd670...4ae60c4b8e3ea9fd0d0b4496253a05 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000290406 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - b263d9d594439be92bb9349bd97f55...60956419f2f4a32925639d80b06e0b - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291537 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - b4525cb82f5cd56fcf8ceb2eb30f64...3567e82abb8265dd12daf5275d7709 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291361 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
-
+ diff --git a/explorer/src/lib/components/blocks-card/BlocksCard.svelte b/explorer/src/lib/components/blocks-card/BlocksCard.svelte index 4df5e749fe..1cbabab4cc 100644 --- a/explorer/src/lib/components/blocks-card/BlocksCard.svelte +++ b/explorer/src/lib/components/blocks-card/BlocksCard.svelte @@ -14,6 +14,9 @@ /** @type {Boolean} */ export let loading; + /** @type {AppStore} */ + export let appStore; + const ITEMS_TO_DISPLAY = 15; let itemsToDisplay = ITEMS_TO_DISPLAY; @@ -44,14 +47,16 @@ label: "Show More", }} > - - -
- {#each displayedBlocks as block (block)} - - {/each} -
+ {#if $appStore.isSmallScreen} +
+ {#each displayedBlocks as block (block)} + + {/each} +
+ {:else} + + {/if} diff --git a/explorer/src/lib/components/latest-blocks-card/LatestBlocksCard.svelte b/explorer/src/lib/components/latest-blocks-card/LatestBlocksCard.svelte index ad8ae5b0a2..99254f63bf 100644 --- a/explorer/src/lib/components/latest-blocks-card/LatestBlocksCard.svelte +++ b/explorer/src/lib/components/latest-blocks-card/LatestBlocksCard.svelte @@ -17,6 +17,9 @@ /** @type {Boolean} */ export let loading; + /** @type {AppStore} */ + export let appStore; + $: classes = makeClassName(["latest-blocks-card", className]); @@ -33,11 +36,11 @@ label: "All Blocks", }} > - - -
+ {#if $appStore.isSmallScreen} {#each blocks as block (block)} {/each} -
+ {:else} + + {/if} diff --git a/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte b/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte index d37d3744ba..0e67230975 100644 --- a/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte +++ b/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte @@ -27,6 +27,9 @@ /** @type {Boolean} */ export let displayTooltips = false; + /** @type {AppStore} */ + export let appStore; + $: classes = makeClassName(["latest-transactions-card", className]); @@ -45,12 +48,7 @@ } : undefined} > - -
+ {#if $appStore.isSmallScreen} {#each txns as txn (txn)} {/each} -
+ {:else} + + {/if} diff --git a/explorer/src/lib/components/transactions-card/TransactionsCard.svelte b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte index 14919276f7..b60e6f7556 100644 --- a/explorer/src/lib/components/transactions-card/TransactionsCard.svelte +++ b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte @@ -18,6 +18,9 @@ /** @type {Boolean} */ export let loading; + /** @type {AppStore} */ + export let appStore; + const ITEMS_TO_DISPLAY = 15; let itemsToDisplay = ITEMS_TO_DISPLAY; @@ -48,15 +51,17 @@ label: "Show More", }} > - - -
- {#each displayedTxns as txn (txn)} - - {/each} -
+ {#if $appStore.isSmallScreen} +
+ {#each displayedTxns as txn (txn)} + + {/each} +
+ {:else} + + {/if} diff --git a/explorer/src/lib/dusk/mocks/MediaQueryList.js b/explorer/src/lib/dusk/mocks/MediaQueryList.js new file mode 100644 index 0000000000..890a741bf3 --- /dev/null +++ b/explorer/src/lib/dusk/mocks/MediaQueryList.js @@ -0,0 +1,38 @@ +export default class MediaQueryList { + /** + * @param {String} query + */ + constructor(query) { + this.matches = false; + this.media = query; + this.listeners = []; + } + + /** + * @param {String} event + * @param {Function} callback + */ + addEventListener(event, callback) { + if (event === 'change') { + this.listeners.push(callback); + } + } + + /** + * @param {String} event + * @param {Function} callback + */ + removeEventListener(event, callback) { + if (event === 'change') { + this.listeners = this.listeners.filter(listener => listener !== callback); + } + } + + /** + * @param {Boolean} matches + */ + change(matches) { + this.matches = matches; + this.listeners.forEach(listener => listener({ matches })); + } + } \ No newline at end of file diff --git a/explorer/src/lib/dusk/mocks/index.js b/explorer/src/lib/dusk/mocks/index.js index bc6d671e61..cf6664d7c2 100644 --- a/explorer/src/lib/dusk/mocks/index.js +++ b/explorer/src/lib/dusk/mocks/index.js @@ -1 +1,2 @@ export { default as IntersectionObserver } from "./IntersectionObserver"; +export { default as MediaQueryList } from "./MediaQueryList"; diff --git a/explorer/src/lib/stores/__tests__/appStore.spec.js b/explorer/src/lib/stores/__tests__/appStore.spec.js index 3085cba90f..4abc951909 100644 --- a/explorer/src/lib/stores/__tests__/appStore.spec.js +++ b/explorer/src/lib/stores/__tests__/appStore.spec.js @@ -1,5 +1,6 @@ import { afterAll, beforeEach, describe, expect, it, vi } from "vitest"; import { get } from "svelte/store"; +import appStore from "../appStore"; describe("appStore", () => { const originalTouchStart = window.ontouchstart; @@ -39,6 +40,7 @@ describe("appStore", () => { chainInfoEntries: Number(env.VITE_CHAIN_INFO_ENTRIES), darkMode: false, fetchInterval: Number(env.VITE_REFETCH_INTERVAL), + isSmallScreen: false, hasTouchSupport: false, marketDataFetchInterval: Number(env.VITE_MARKET_DATA_REFETCH_INTERVAL), network: expectedNetworks[0].value, @@ -101,4 +103,28 @@ describe("appStore", () => { expect(get(appStore).darkMode).toBe(true); }); + + it.only("should update the `isSmallScreen` property when the window width changes respective to the provided media query", async () => { + let changeCallback; + + const mqAddListenerSpy = vi.spyOn(MediaQueryList.prototype, "addEventListener").mockImplementation((eventName, callback) => { + if (eventName === "change") { + changeCallback = callback; + } + }); + + + + Object.defineProperty(window, 'innerWidth', { + writable: true, + configurable: true, + value: 150, + }); + + window.dispatchEvent(new Event('resize')); + + expect(mqAddListenerSpy).toHaveBeenCalledOnce(); + + mqAddListenerSpy.mockRestore(); + }); }); diff --git a/explorer/src/lib/stores/appStore.js b/explorer/src/lib/stores/appStore.js index 366c540ee2..d2a5aa2309 100644 --- a/explorer/src/lib/stores/appStore.js +++ b/explorer/src/lib/stores/appStore.js @@ -6,6 +6,8 @@ const networks = [ { label: "Testnet", value: import.meta.env.VITE_DUSK_TESTNET_NODE }, ]; +const mql = window.matchMedia("(max-width: 1024px)"); + const browserDefaults = browser ? { darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches, @@ -21,6 +23,7 @@ const initialState = { chainInfoEntries: Number(import.meta.env.VITE_CHAIN_INFO_ENTRIES), fetchInterval: Number(import.meta.env.VITE_REFETCH_INTERVAL) || 1000, hasTouchSupport: "ontouchstart" in window || navigator.maxTouchPoints > 0, + isSmallScreen: mql.matches, marketDataFetchInterval: Number(import.meta.env.VITE_MARKET_DATA_REFETCH_INTERVAL) || 120000, network: networks[0].value, @@ -35,6 +38,20 @@ const initialState = { const store = writable(initialState); const { set, subscribe } = store; +mql.addEventListener("change", (event) => { + if(event.matches){ + set({ + ...get(store), + isSmallScreen: true, + }); + } else { + set({ + ...get(store), + isSmallScreen: false, + }); + } +}); + /** @param {string} network */ const setNetwork = (network) => set({ diff --git a/explorer/src/lib/stores/stores.d.ts b/explorer/src/lib/stores/stores.d.ts index fb1b5c6efe..a4e15d35dd 100644 --- a/explorer/src/lib/stores/stores.d.ts +++ b/explorer/src/lib/stores/stores.d.ts @@ -8,6 +8,7 @@ type AppStoreContent = { chainInfoEntries: number; darkMode: boolean; fetchInterval: number; + isSmallScreen: boolean; hasTouchSupport: boolean; marketDataFetchInterval: number; network: string; diff --git a/explorer/src/routes/+page.svelte b/explorer/src/routes/+page.svelte index 125e4cb05a..de495dc968 100644 --- a/explorer/src/routes/+page.svelte +++ b/explorer/src/routes/+page.svelte @@ -39,6 +39,7 @@ blocks={data?.blocks} {error} loading={isLoading} + {appStore} /> diff --git a/explorer/src/routes/blocks/+page.svelte b/explorer/src/routes/blocks/+page.svelte index 95b2d4c966..6aa5268225 100644 --- a/explorer/src/routes/blocks/+page.svelte +++ b/explorer/src/routes/blocks/+page.svelte @@ -28,5 +28,6 @@ blocks={data} {error} loading={isLoading} + {appStore} /> diff --git a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap index 2ed48dfe30..d918ec4b31 100644 --- a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap +++ b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap @@ -79,7 +79,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a class="data-card__content" >
should render the Blocks page, start polling for blocks a
- -
- -
-
- - block -
- -
- - 1,365,454 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,453 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,452 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,451 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,450 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,449 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,448 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,447 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,446 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,445 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,444 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,443 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,442 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,441 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
- -
-
- - block -
- -
- - 1,365,440 - -
- -
- - relative time -
- -
- -
- -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
-
-
-
- -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
-
-
+ diff --git a/explorer/src/routes/blocks/block/+page.svelte b/explorer/src/routes/blocks/block/+page.svelte index dbcfd7d036..7423dc2169 100644 --- a/explorer/src/routes/blocks/block/+page.svelte +++ b/explorer/src/routes/blocks/block/+page.svelte @@ -46,6 +46,7 @@ loading={isLoading} isOnHomeScreen={false} displayTooltips={true} + {appStore} /> diff --git a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap index 94914a8e6c..108776d9ab 100644 --- a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap +++ b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap @@ -460,7 +460,7 @@ exports[`Block Details > should render the Block Details page and query the nece class="data-card__content" >
should render the Block Details page and query the nece
- -
- -
-
- - - - - - ID -
- -
- - 3a3f6f90a1012ae751b4448bcb8e98...ba2b18170239bd69fcf8e2e37f0602 - -
- -
- - - - - - relative time -
- -
- -
- -
- - - - - - Gas Price -
- -
- 1 -
- -
- - - - - - Gas Limit -
- -
- 500,000,000 -
- -
- - - - - - Fee -
- -
- 0.000290866 - DUSK -
- -
- - - - - - Status -
- -
- - success - - -
- -
- - - - - - Type -
- -
- - transfer - - -
-
- -
-
- - - - - - ID -
- -
- - 07bfabea1d94c16f2dc3697fa642f6...a6e81bf76b9644efbb6e2723b76d00 - -
- -
- - - - - - relative time -
- -
- -
- -
- - - - - - Gas Price -
- -
- 1 -
- -
- - - - - - Gas Limit -
- -
- 500,000,000 -
- -
- - - - - - Fee -
- -
- 0.000289852 - DUSK -
- -
- - - - - - Status -
- -
- - success - - -
- -
- - - - - - Type -
- -
- - transfer - - -
-
-
+ diff --git a/explorer/src/routes/transactions/+page.svelte b/explorer/src/routes/transactions/+page.svelte index dd969691bd..b55be87908 100644 --- a/explorer/src/routes/transactions/+page.svelte +++ b/explorer/src/routes/transactions/+page.svelte @@ -29,5 +29,6 @@ txns={data} {error} loading={isLoading} + {appStore} /> diff --git a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap index 56f67198f4..1d3519ff85 100644 --- a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap +++ b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap @@ -79,7 +79,7 @@ exports[`Transactions page > should render the Transactions page, start polling class="data-card__content" >
should render the Transactions page, start polling
- -
- -
-
- - ID -
- -
- - 070280c69500df7d1b40942981a3b5...f9f71ba62f96d63e322994efca2a0e - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 50,000,000 -
- -
- - Fee -
- -
- 0.000215552 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 534f753d5a420fddc21c84d76ff26b...48ea75b450c082759d155153259c00 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 50,000,000 -
- -
- - Fee -
- -
- 0.000215617 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - c6f13af20c23b8bc55d22a416a191e...a47128b4d7dc3ac6fce5fc68ebb102 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 50,000,000 -
- -
- - Fee -
- -
- 0.000214413 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 31c7dce26a5a6ef1392f53630b8e27...1f10eaeea2685c5a37dbbf7bcb4c04 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291769 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 4fa6e913c083aa595530b1f6c010c7...8121307c991ea6782f9e9e4dd5510d - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000290764 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - d1a7928a435021d87ea3649bff57c8...c7b5c6c68081a61fea5779ccdb2e04 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291961 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 004ca8683c315b9270e04d3768dfb5...f65d92a9469ca31a5d97cff9718b06 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000292039 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - b5a77063e45dd90b97b2c30b4cd670...4ae60c4b8e3ea9fd0d0b4496253a05 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000290406 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - b263d9d594439be92bb9349bd97f55...60956419f2f4a32925639d80b06e0b - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291537 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - b4525cb82f5cd56fcf8ceb2eb30f64...3567e82abb8265dd12daf5275d7709 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291361 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 40fb9d20eb9e6ffb27be4914f49cdf...e2fdcc88a7b17f9499ff516584df08 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000290385 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - b5ad0ec014ac415dc8ea214f9baf55...126558afc8e142f8223504f807910b - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000290795 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 56504a6d6236fbd64671d86e6f60f2...e1ce09f7ee9ebc13b593ba14520c00 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000290449 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - d65e4ebe379d0d67142e80b377b41e...fa7d6e9acd3e034e6d63d5026ea001 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000290555 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
- -
-
- - ID -
- -
- - 6c0ac7828bd57ddf18834505b0cd64...91ed6504dd7224a3094e10b1febf06 - -
- -
- - relative time -
- -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291983 - DUSK -
- -
- - Status -
- -
- - success - - -
- -
- - Type -
- -
- - transfer - - -
-
-
+ diff --git a/explorer/src/style/main.css b/explorer/src/style/main.css index 911ac872b1..db77532ae8 100644 --- a/explorer/src/style/main.css +++ b/explorer/src/style/main.css @@ -79,26 +79,8 @@ svg { min-width: 100px; } -.mobile-hidden { - display: block; -} - -.desktop-hidden { - display: none; -} - @media (max-width: 768px) { body { padding: 0 1.25rem; } } - -@media (max-width: 1024px) { - .mobile-hidden { - display: none; - } - - .desktop-hidden { - display: block; - } -} diff --git a/explorer/vite-setup.js b/explorer/vite-setup.js index 72bc5bf9b5..1d1ac682f4 100644 --- a/explorer/vite-setup.js +++ b/explorer/vite-setup.js @@ -8,7 +8,7 @@ import { readable } from "svelte/store"; import { ResizeObserver } from "@juggle/resize-observer"; import "jsdom-worker"; -import { IntersectionObserver } from "./src/lib/dusk/mocks"; +import { IntersectionObserver, MediaQueryList } from "./src/lib/dusk/mocks"; /* * Mocking deprecated `atob` and `btoa` functions in Node. @@ -24,9 +24,11 @@ vi.spyOn(global, "btoa").mockImplementation((data) => // Adding missing bits in JSDOM vi.mock("./src/lib/dusk/mocks/IntersectionObserver"); +vi.mock("./src/lib/dusk/mocks/MediaQueryList"); global.IntersectionObserver = IntersectionObserver; global.ResizeObserver = ResizeObserver; +global.MediaQueryList = MediaQueryList; const elementMethods = ["scrollBy", "scrollTo", "scrollIntoView"]; @@ -117,3 +119,9 @@ vi.mock("$app/stores", () => { updated, }; }); + +// Define matchMedia property +Object.defineProperty(window, 'matchMedia', { + writable: true, + value: query => new MediaQueryList(query), +}); \ No newline at end of file