diff --git a/explorer/CHANGELOG.md b/explorer/CHANGELOG.md index 9e7b7b447b..429de0df31 100644 --- a/explorer/CHANGELOG.md +++ b/explorer/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Add conditional rendering for layout changes based on screen size [#2061] - Add accessible name to the gas used progress bar [#2037] - Add accessible name to the nav bar button on mobile [#2036] - Implement warning for stale market data [#1892] @@ -39,6 +40,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 [#2037]: https://github.com/dusk-network/rusk/issues/2037 [#2039]: https://github.com/dusk-network/rusk/issues/2039 [#2056]: https://github.com/dusk-network/rusk/issues/2056 +[#2061]: https://github.com/dusk-network/rusk/issues/2061 diff --git a/explorer/src/lib/components/__tests__/BlocksCard.spec.js b/explorer/src/lib/components/__tests__/BlocksCard.spec.js index ad5e97b08e..77731fcadd 100644 --- a/explorer/src/lib/components/__tests__/BlocksCard.spec.js +++ b/explorer/src/lib/components/__tests__/BlocksCard.spec.js @@ -4,7 +4,6 @@ import { compose, mapWith, take } from "lamb"; import { gqlBlocks } from "$lib/mock-data"; import { transformBlock } from "$lib/chain-info"; - import { BlocksCard } from ".."; describe("Blocks Card", () => { @@ -17,6 +16,7 @@ describe("Blocks Card", () => { const baseProps = { blocks: null, error: null, + isSmallScreen: false, loading: false, }; const baseOptions = { diff --git a/explorer/src/lib/components/__tests__/TransactionsCard.spec.js b/explorer/src/lib/components/__tests__/TransactionsCard.spec.js index 559573e310..e7f7bc10bb 100644 --- a/explorer/src/lib/components/__tests__/TransactionsCard.spec.js +++ b/explorer/src/lib/components/__tests__/TransactionsCard.spec.js @@ -16,6 +16,7 @@ describe("Transactions Card", () => { const baseProps = { error: null, + isSmallScreen: false, loading: false, txns: null, }; 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..df4f9f7f4e 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 -
-
-
+ 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..325abfe698 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 {boolean} */ + export let isSmallScreen; + const ITEMS_TO_DISPLAY = 15; let itemsToDisplay = ITEMS_TO_DISPLAY; @@ -44,14 +47,13 @@ label: "Show More", }} > - - -
- {#each displayedBlocks as block (block)} - - {/each} -
+ {#if 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..20d3099000 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 {boolean} */ + export let isSmallScreen; + $: classes = makeClassName(["latest-blocks-card", className]); @@ -33,11 +36,11 @@ label: "All Blocks", }} > - - -
+ {#if 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..108b7c4ca1 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 {boolean} */ + export let isSmallScreen; + $: classes = makeClassName(["latest-transactions-card", className]); @@ -45,12 +48,7 @@ } : undefined} > - -
+ {#if 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..b4f3ca8c36 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 {boolean} */ + export let isSmallScreen; + const ITEMS_TO_DISPLAY = 15; let itemsToDisplay = ITEMS_TO_DISPLAY; @@ -48,15 +51,17 @@ label: "Show More", }} > - - -
- {#each displayedTxns as txn (txn)} - - {/each} -
+ {#if 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..28fca92a1a --- /dev/null +++ b/explorer/src/lib/dusk/mocks/MediaQueryList.js @@ -0,0 +1,68 @@ +import { afterAll } from "vitest"; + +const controllers = new Set(); + +afterAll(() => { + controllers.forEach((controller) => { + controller.abort(); + controllers.delete(controller); + }); +}); + +/** + * Mocks the `MediaQueryList` object and listens to the + * "DuskMediaQueryMatchesChange" custom event. + * Fire one manually or with the `changeMediaQueryMatches` + * helper function to simulate media query changes. + */ +export default class MediaQueryList extends EventTarget { + #matches; + + #media; + + /** + * @param {string} mediaQuery + * @param {boolean} initialMatches + */ + constructor(mediaQuery, initialMatches) { + super(); + + this.#matches = initialMatches; + this.#media = mediaQuery; + + const abortController = new AbortController(); + + controllers.add(abortController); + + global.addEventListener("DuskMediaQueryMatchesChange", this, { + signal: abortController.signal, + }); + } + + get matches() { + return this.#matches; + } + + get media() { + return this.#media; + } + + /** @param {CustomEvent<{ media: string, matches: boolean }>} evt */ + handleEvent(evt) { + const { detail, type } = evt; + + if ( + type === "DuskMediaQueryMatchesChange" && + detail.media === this.#media + ) { + this.#matches = detail.matches; + + this.dispatchEvent( + new MediaQueryListEvent("change", { + matches: this.#matches, + media: this.#media, + }) + ); + } + } +} diff --git a/explorer/src/lib/dusk/mocks/MediaQueryListEvent.js b/explorer/src/lib/dusk/mocks/MediaQueryListEvent.js new file mode 100644 index 0000000000..6f076c1137 --- /dev/null +++ b/explorer/src/lib/dusk/mocks/MediaQueryListEvent.js @@ -0,0 +1,26 @@ +import { pickIn } from "lamb"; + +export default class MediaQueryListEvent extends Event { + #matches; + + #media; + + /** + * @param {string} type + * @param {MediaQueryListEventInit} options + */ + constructor(type, options) { + super(type, pickIn(options, ["bubbles", "cancelable", "composed"])); + + this.#matches = options.matches; + this.#media = options.media; + } + + get matches() { + return this.#matches; + } + + get media() { + return this.#media; + } +} diff --git a/explorer/src/lib/dusk/mocks/index.js b/explorer/src/lib/dusk/mocks/index.js index bc6d671e61..f31648fc8d 100644 --- a/explorer/src/lib/dusk/mocks/index.js +++ b/explorer/src/lib/dusk/mocks/index.js @@ -1 +1,3 @@ export { default as IntersectionObserver } from "./IntersectionObserver"; +export { default as MediaQueryList } from "./MediaQueryList"; +export { default as MediaQueryListEvent } from "./MediaQueryListEvent"; diff --git a/explorer/src/lib/dusk/test-helpers/__tests__/changeMediaQueryMatches.spec.js b/explorer/src/lib/dusk/test-helpers/__tests__/changeMediaQueryMatches.spec.js new file mode 100644 index 0000000000..1c0e6a3aaa --- /dev/null +++ b/explorer/src/lib/dusk/test-helpers/__tests__/changeMediaQueryMatches.spec.js @@ -0,0 +1,27 @@ +import { describe, expect, it } from "vitest"; + +import { changeMediaQueryMatches } from ".."; + +describe("changeMediaQueryMatches", () => { + it('should dispatch "DuskMediaQueryMatchesChange" custom events', () => { + const media = "(max-width: 1024px)"; + const matches = true; + + /** @param {Event} evt */ + const handler = (evt) => { + expect(evt).toBeInstanceOf(CustomEvent); + expect(evt.type).toBe("DuskMediaQueryMatchesChange"); + + // @ts-ignore see https://github.com/Microsoft/TypeScript/issues/28357 + expect(evt.detail).toStrictEqual({ matches, media }); + }; + + global.addEventListener("DuskMediaQueryMatchesChange", handler); + + changeMediaQueryMatches(media, matches); + + global.removeEventListener("DuskMediaQueryMatchesChange", handler); + + expect.assertions(3); + }); +}); diff --git a/explorer/src/lib/dusk/test-helpers/changeMediaQueryMatches.js b/explorer/src/lib/dusk/test-helpers/changeMediaQueryMatches.js new file mode 100644 index 0000000000..ec0b6e16ad --- /dev/null +++ b/explorer/src/lib/dusk/test-helpers/changeMediaQueryMatches.js @@ -0,0 +1,14 @@ +/** + * Helper to fire "DuskMediaQueryMatchesChange" custom + * events that are listened by our `MediaQueryList` mock. + * + * @param {string} media + * @param {boolean} matches + */ +export default function changeMediaQueryMatches(media, matches) { + dispatchEvent( + new CustomEvent("DuskMediaQueryMatchesChange", { + detail: { matches, media }, + }) + ); +} diff --git a/explorer/src/lib/dusk/test-helpers/index.js b/explorer/src/lib/dusk/test-helpers/index.js index 307c8f5ed6..1a8924b35f 100644 --- a/explorer/src/lib/dusk/test-helpers/index.js +++ b/explorer/src/lib/dusk/test-helpers/index.js @@ -1,3 +1,4 @@ +export { default as changeMediaQueryMatches } from "./changeMediaQueryMatches"; export { default as mockReadableStore } from "./mockReadableStore"; export { default as renderWithSimpleContent } from "./renderWithSimpleContent"; export { default as renderWithSlots } from "./renderWithSlots"; diff --git a/explorer/src/lib/stores/__tests__/appStore.spec.js b/explorer/src/lib/stores/__tests__/appStore.spec.js index 3085cba90f..1314b714d7 100644 --- a/explorer/src/lib/stores/__tests__/appStore.spec.js +++ b/explorer/src/lib/stores/__tests__/appStore.spec.js @@ -1,6 +1,8 @@ import { afterAll, beforeEach, describe, expect, it, vi } from "vitest"; import { get } from "svelte/store"; +import { changeMediaQueryMatches } from "$lib/dusk/test-helpers"; + describe("appStore", () => { const originalTouchStart = window.ontouchstart; const originalMaxTouchPoints = navigator.maxTouchPoints; @@ -40,6 +42,7 @@ describe("appStore", () => { darkMode: false, fetchInterval: Number(env.VITE_REFETCH_INTERVAL), hasTouchSupport: false, + isSmallScreen: false, marketDataFetchInterval: Number(env.VITE_MARKET_DATA_REFETCH_INTERVAL), network: expectedNetworks[0].value, networks: expectedNetworks, @@ -101,4 +104,32 @@ describe("appStore", () => { expect(get(appStore).darkMode).toBe(true); }); + + it("should set the `isSmallScreen` property to `false` when the related media query doesn't match", async () => { + const { appStore } = await import(".."); + + expect(get(appStore).isSmallScreen).toBe(false); + }); + + it("should set the `isSmallScreen` property to `true` when the related media query matches", async () => { + const mqMatchesSpy = vi + .spyOn(MediaQueryList.prototype, "matches", "get") + .mockReturnValue(true); + + const { appStore } = await import(".."); + + expect(get(appStore).isSmallScreen).toBe(true); + + mqMatchesSpy.mockRestore(); + }); + + it("should update the `isSmallScreen` property when the media query match changes", async () => { + const { appStore } = await import(".."); + + expect(get(appStore).isSmallScreen).toBe(false); + + changeMediaQueryMatches("(max-width: 1024px)", true); + + expect(get(appStore).isSmallScreen).toBe(true); + }); }); diff --git a/explorer/src/lib/stores/appStore.js b/explorer/src/lib/stores/appStore.js index 366c540ee2..5acb8f1f8c 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 maxWidthMediaQuery = 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: maxWidthMediaQuery.matches, marketDataFetchInterval: Number(import.meta.env.VITE_MARKET_DATA_REFETCH_INTERVAL) || 120000, network: networks[0].value, @@ -35,6 +38,13 @@ const initialState = { const store = writable(initialState); const { set, subscribe } = store; +maxWidthMediaQuery.addEventListener("change", (event) => { + set({ + ...get(store), + isSmallScreen: event.matches, + }); +}); + /** @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..46f2e489a1 100644 --- a/explorer/src/routes/+page.svelte +++ b/explorer/src/routes/+page.svelte @@ -21,7 +21,7 @@ onDestroy(pollingDataStore.stop); $: ({ data, error, isLoading } = $pollingDataStore); - $: ({ chainInfoEntries, network } = $appStore); + $: ({ chainInfoEntries, isSmallScreen, network } = $appStore); const retry = () => { pollingDataStore.start(network, chainInfoEntries); @@ -38,6 +38,7 @@ className="tables-layout" blocks={data?.blocks} {error} + {isSmallScreen} loading={isLoading} /> @@ -46,6 +47,7 @@ className="tables-layout" txns={data?.transactions} {error} + {isSmallScreen} loading={isLoading} /> diff --git a/explorer/src/routes/__tests__/layout.spec.js b/explorer/src/routes/__tests__/layout.spec.js index 90c4cdadf4..9302e384ee 100644 --- a/explorer/src/routes/__tests__/layout.spec.js +++ b/explorer/src/routes/__tests__/layout.spec.js @@ -112,7 +112,7 @@ describe("Main layout", () => { vi.useRealTimers(); }); - it("should use the default delay for the tooltip if the device ha touch support", async () => { + it("should use the default delay for the tooltip if the device has touch support", async () => { const defaultDelayShow = 500; vi.useFakeTimers(); diff --git a/explorer/src/routes/blocks/+page.svelte b/explorer/src/routes/blocks/+page.svelte index 95b2d4c966..f2c77070d2 100644 --- a/explorer/src/routes/blocks/+page.svelte +++ b/explorer/src/routes/blocks/+page.svelte @@ -19,7 +19,11 @@ onDestroy(pollingDataStore.stop); $: ({ data, error, isLoading } = $pollingDataStore); - $: ({ blocksListEntries, network: currentNetwork } = $appStore); + $: ({ + blocksListEntries, + isSmallScreen, + network: currentNetwork, + } = $appStore);
@@ -28,5 +32,6 @@ blocks={data} {error} loading={isLoading} + {isSmallScreen} />
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..d2de0352fd 100644 --- a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap +++ b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap @@ -1,52 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Blocks page > should render the Blocks page, start polling for blocks and stop the polling when unmounted 1`] = ` -
-
-
-

- Blocks — 0 Displayed Items -

- - -
- -
-
-
- - -
- -
-`; - -exports[`Blocks page > should render the Blocks page, start polling for blocks and stop the polling when unmounted 2`] = ` +exports[`Blocks page > should render the Blocks page with the mobile layout 1`] = `
@@ -79,943 +33,424 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a class="data-card__content" >
- - - + +
+ -
- - - - - - - - - - - - + 1,365,454 + + - - - + +
+
- - - - - - - - - - - - - - + + +
+ + average fee paid +
+ +
+ 0 + DUSK +
+ +
+ + gas used +
+ +
+
-
- - - - - - - - - - - - - - + + + +
+ + txn(s) +
+ +
+ 0 +
+ +
+ + rewards +
+ +
+ 16 + DUSK +
+ + +
+
+ + block +
+ +
+ -
- - - - - - - - - - - - - - + + +
+ + relative time +
+ +
+
- - - - - - - - - - - - - - + + +
+ + average fee paid +
+ +
+ 0 + DUSK +
+ +
+ + gas used +
+ +
+
-
- - - - - - - - - - - - - - + + + +
+ + txn(s) +
+ +
+ 0 +
+ +
+ + rewards +
+ +
+ 16 + DUSK +
+ + +
+
+ + block +
+ +
+ -
- - - - - - - - - - - - - - + + +
+ + relative time +
+ +
+
- - - - - - - - - - - - - - + + +
+ + average fee paid +
+ +
+ 0 + DUSK +
+ +
+ + gas used +
+ +
+
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +
+ + txn(s) +
+ +
+ 0 +
+ +
+ + rewards +
+ +
+ 16 + DUSK +
+ + +
+
+ + block +
+ +
+ -
- - - - - - - - - - - - - - + + +
+ + relative time +
+ +
+
- - - - - - - - - - - - - - -
- Block - - Fee (Dusk) - - Txn(s) - - Rewards (Dusk) -
- - 1,365,454 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,453 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,452 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,451 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,450 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,449 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,448 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,447 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,446 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,445 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,444 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,443 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,442 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,441 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
- - 1,365,440 - - - - yesterday - - - - AVG: - - - 0 -
- - - TOTAL: - - - 0 - 		- 0 - - 16 -
-
- -
+ yesterday + + + +
+ + average fee paid +
+ +
+ 0 + DUSK +
+ +
+ + gas used +
+ +
+
+
+
+
+ +
+ + txn(s) +
+ +
+ 0 +
+ +
+ + rewards +
+ +
+ 16 + DUSK +
+
should render the Blocks page, start polling for blocks a > - 1,365,454 + 1,365,450 @@ -1050,7 +485,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a >
- -
+ +
+ + + + +
+`; + +exports[`Blocks page > should render the Blocks page, start polling for blocks and stop the polling when unmounted 1`] = ` +
+
+
+

+ Blocks — 0 Displayed Items +

+ + +
+ +
+
+
+ + +
+ +
+`; + +exports[`Blocks page > should render the Blocks page, start polling for blocks and stop the polling when unmounted 2`] = ` +
+
+
+

+ Blocks — 15 Displayed Items +

+ + +
+ +
+
+ + - - block - + + + + + + + + + + + + + + -
- - 1,365,443 - -
- -
- - relative time -
- -
-
+ + + + + + + + + + + - yesterday - - - -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
+ + 1,365,453 + + + + yesterday + + + + +
+ + + + + + + + + + + -
-
- - -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
- - -
-
- - block -
- -
- + + 1,365,452 + + + + yesterday + + + + +
+ + + + + + + + + + + - 1,365,442 - - - -
- - relative time -
- -
-
+ + + + + + + + + + + - yesterday - - - -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
+ + 1,365,450 + + + + yesterday + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + -
-
- - -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
- - -
-
- - block -
- -
- + + 1,365,448 + + + + yesterday + + + + +
+ + + + + + + + + + + - 1,365,441 - - - -
- - relative time -
- -
-
+ + + + + + + + + + + - yesterday - - - -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
+ + 1,365,446 + + + + yesterday + + + + +
+ + + + + + + + + + + -
-
- - -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
- - -
-
- - block -
- -
- + + 1,365,445 + + + + yesterday + + + + +
+ + + + + + + + + + + - 1,365,440 - - - -
- - relative time -
- -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + - yesterday - - - -
- - average fee paid -
- -
- 0 - DUSK -
- -
- - gas used -
- -
-
+ + 1,365,442 + + + + yesterday + + + + +
+ + + + + + + + + + + -
-
- - -
- - txn(s) -
- -
- 0 -
- -
- - rewards -
- -
- 16 - DUSK -
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Block + + Fee (Dusk) + + Txn(s) + + Rewards (Dusk) +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + 1,365,449 + + + + yesterday + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + 1,365,443 + + + + yesterday + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + 1,365,441 + + + + yesterday + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+ + 1,365,440 + + + + yesterday + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + 16 +
+
diff --git a/explorer/src/routes/blocks/__tests__/page.spec.js b/explorer/src/routes/blocks/__tests__/page.spec.js index d410631647..420b0937cb 100644 --- a/explorer/src/routes/blocks/__tests__/page.spec.js +++ b/explorer/src/routes/blocks/__tests__/page.spec.js @@ -6,6 +6,7 @@ import { duskAPI } from "$lib/services"; import { transformBlock } from "$lib/chain-info"; import { appStore } from "$lib/stores"; import { gqlBlocks } from "$lib/mock-data"; +import { changeMediaQueryMatches } from "$lib/dusk/test-helpers"; import Blocks from "../+page.svelte"; @@ -57,4 +58,19 @@ describe("Blocks page", () => { expect(getBlocksSpy).toHaveBeenCalledTimes(3); }); + + it("should render the Blocks page with the mobile layout", async () => { + const { container } = render(Blocks); + + changeMediaQueryMatches("(max-width: 1024px)", true); + + expect(get(appStore).isSmallScreen).toBe(true); + + expect(getBlocksSpy).toHaveBeenCalledTimes(1); + expect(getBlocksSpy).toHaveBeenNthCalledWith(1, network, blocksListEntries); + + await vi.advanceTimersByTimeAsync(1); + + expect(container.firstChild).toMatchSnapshot(); + }); }); diff --git a/explorer/src/routes/blocks/block/+page.svelte b/explorer/src/routes/blocks/block/+page.svelte index dbcfd7d036..218b84820a 100644 --- a/explorer/src/routes/blocks/block/+page.svelte +++ b/explorer/src/routes/blocks/block/+page.svelte @@ -30,6 +30,7 @@ $navigating.complete.then(updateData); } + $: ({ isSmallScreen } = $appStore); $: ({ data, error, isLoading } = $dataStore); @@ -45,6 +46,7 @@ {error} loading={isLoading} isOnHomeScreen={false} + {isSmallScreen} displayTooltips={true} /> 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..104827c559 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
+ +
+ + + + + + +
+`; + +exports[`Block Details > should render the Transaction section of the Block Details page with the mobile layout 1`] = ` +
+
+
+
+

+ Block Details +

-
+ +
+
- -
-
- - - - - - ID -
- -
- - 3a3f6f90a1012ae751b4448bcb8e98...ba2b18170239bd69fcf8e2e37f0602 - -
- -
- - - - - - relative time -
- -
- -
+ + + -
+ +
+ - Gas Price - - -
- 1 -
- -
- - - - - Gas Limit -
- -
- 500,000,000 -
- -
- - - - - Fee -
+ -
- 0.000290866 - DUSK -
+ 495,868 -
- Status -
- -
- - success - -
- -
- - - - - Type -
+ -
- - transfer - - -
-
- -
-
+
+ - - - - - - ID -
+ + + -
+ +
+ bd5c99bb720b03500e89f103fe66113ba62f2e124ed9651563f38fd15977719f +
+
+ - - 07bfabea1d94c16f2dc3697fa642f6...a6e81bf76b9644efbb6e2723b76d00 - - + + + -
+ +
+
+
+
+ - - + + + -
+ +
+ 2 +
+
+ - - - - - - Gas Price -
+ + + + + block fees paid + + +
+ 0.000580718 + DUSK +
+
+ + + + + + block reward +
+ +
+ 16 + DUSK +
+
+ + + + + + block gas limit +
+ +
+ 5,000,000,000 +
+
+ + + + + + gas used +
+ +
+ 580,718 + +
+
+
+ +
+
+ + + + + + average fee paid +
+ +
+ 0.000000001 + DUSK +
+
+ + + + + + state root hash +
+ +
+ + 20bb0a677b93f084afadfd34bec3ac3feee33a020b81d9549afa2268e8543acb + +
+
+
+ + +
+ +
+ +
+
+
+

+ Transactions +

+ +
+ +
+ +
+
+ + + + + + ID +
+ +
+ + 3a3f6f90a1012ae751b4448bcb8e98...ba2b18170239bd69fcf8e2e37f0602 + +
+ +
+ + + + + + relative time +
+ +
+ +
+ +
+ + + + + + Gas Price +
+ +
+ 1 +
+ +
+ + + + + + Gas Limit +
+ +
+ 500,000,000 +
+ +
+ + + + -
+ +
+ 0.000290866 + DUSK +
+ +
+ - 1 - + + + -
+ +
+ - - - - - - Gas Limit - + success + + +
+ +
+ + + + + + Type +
+ +
+ + transfer + + +
+
+ +
+
+ + + + -
+ +
+ + 07bfabea1d94c16f2dc3697fa642f6...a6e81bf76b9644efbb6e2723b76d00 + +
+ +
+ - 500,000,000 - + + + -
+ +
+ +
+ +
+ + + + -
+ +
+ 1 +
+ +
+ - 0.000289852 - DUSK - + + + -
+ +
+ 500,000,000 +
+ +
+ - - - - - - Status -
+ + + -
+ +
+ 0.000289852 + DUSK +
+ +
+ - - success - - - + + + -
+ +
+ - - - - - - Type - + success + + +
+ +
+ + + + -
+ +
+ - - transfer - - -
-
-
+ transfer + + + + + +
diff --git a/explorer/src/routes/blocks/block/__tests__/page.spec.js b/explorer/src/routes/blocks/block/__tests__/page.spec.js index eab8654a56..39050fd756 100644 --- a/explorer/src/routes/blocks/block/__tests__/page.spec.js +++ b/explorer/src/routes/blocks/block/__tests__/page.spec.js @@ -1,9 +1,11 @@ import { afterAll, afterEach, describe, expect, it, vi } from "vitest"; import { cleanup, render } from "@testing-library/svelte"; +import { get } from "svelte/store"; import { duskAPI } from "$lib/services"; import { transformBlock } from "$lib/chain-info"; import { gqlBlock } from "$lib/mock-data"; +import { changeMediaQueryMatches } from "$lib/dusk/test-helpers"; import BlockDetails from "../+page.svelte"; @@ -37,4 +39,19 @@ describe("Block Details", () => { // snapshot with received data from APIs expect(container.firstChild).toMatchSnapshot(); }); + + it("should render the Transaction section of the Block Details page with the mobile layout", async () => { + const { appStore } = await import("$lib/stores"); + const { container } = render(BlockDetails); + + changeMediaQueryMatches("(max-width: 1024px)", true); + + expect(get(appStore).isSmallScreen).toBe(true); + + expect(getBlockSpy).toHaveBeenCalledTimes(1); + + await vi.advanceTimersByTimeAsync(1); + + expect(container.firstChild).toMatchSnapshot(); + }); }); diff --git a/explorer/src/routes/transactions/+page.svelte b/explorer/src/routes/transactions/+page.svelte index dd969691bd..dc2a0823b7 100644 --- a/explorer/src/routes/transactions/+page.svelte +++ b/explorer/src/routes/transactions/+page.svelte @@ -19,7 +19,11 @@ onDestroy(pollingDataStore.stop); $: ({ data, error, isLoading } = $pollingDataStore); - $: ({ network: currentNetwork, transactionsListEntries } = $appStore); + $: ({ + isSmallScreen, + network: currentNetwork, + transactionsListEntries, + } = $appStore);
@@ -29,5 +33,6 @@ txns={data} {error} loading={isLoading} + {isSmallScreen} />
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..4de3b3ca4c 100644 --- a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap +++ b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap @@ -1,52 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Transactions page > should render the Transactions page, start polling for blocks and stop the polling when unmounted 1`] = ` -
-
-
-

- Transactions — 0 Displayed Items -

- - -
- -
-
-
- - -
- -
-`; - -exports[`Transactions page > should render the Transactions page, start polling for blocks and stop the polling when unmounted 2`] = ` +exports[`Transactions page > should render the Transactions page with the mobile layout 1`] = `
@@ -79,1175 +33,710 @@ exports[`Transactions page > should render the Transactions page, start polling class="data-card__content" >
- - - + +
+ -
- - - - - - - - - - - - - - - + 070280c69500df7d1b40942981a3b5...f9f71ba62f96d63e322994efca2a0e + + - - - + +
+
- - - - - - - - - - - - - - - - - + + +
+ + Gas Price +
+ +
+ 1 +
+ +
+ + Gas Limit +
+ +
+ 50,000,000 +
+ +
+ + Fee +
+ +
+ 0.000215552 + DUSK +
+ +
+ + Status +
+ +
+ -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + success + - + +
+ + Type +
+ +
+ -
- - - - - - - - - - - - - - - + transfer + - + + +
+
+ + ID +
+ +
+ -
- - - - - - - - - - - - - - - - - + + +
+ + relative time +
+ +
+
- - - - - - - - - - - - - - - + 18 hours ago + + + +
+ + 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 + -
-
- ID - - Gas - - Fee (DUSK) - - Status - - Type -
- - 070280c695...94efca2a0e - - - - 18 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 50,000,000 - 		- 0.000215552 - - - success - - - - transfer - -
- - 534f753d5a...5153259c00 - - - - 18 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 50,000,000 - 		- 0.000215617 - - - success - - - - transfer - -
- - c6f13af20c...fc68ebb102 - - - - 18 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 50,000,000 - 		- 0.000214413 - - - success - - - - transfer - -
- - 31c7dce26a...bf7bcb4c04 - - - - 18 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000291769 - - - success - - - - transfer - -
- - 4fa6e913c0...9e4dd5510d - - - - 18 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000290764 - - - success - - - - transfer - -
- - d1a7928a43...79ccdb2e04 - - - - 18 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000291961 - - - success - - - - transfer - -
- - 004ca8683c...cff9718b06 - - - - 18 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000292039 - - - success - - - - transfer - -
- - b5a77063e4...4496253a05 - - - - 19 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000290406 - - - success - - - - transfer - -
- - b263d9d594...9d80b06e0b - - - - 19 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000291537 - - - success - - - - transfer - -
- - b4525cb82f...f5275d7709 - - - - 19 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000291361 - - - success - - - - transfer - -
- - 40fb9d20eb...516584df08 - - - - 19 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000290385 - - - success - - - - transfer - -
- - b5ad0ec014...04f807910b - - - - 19 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000290795 - - - success - - - - transfer - -
- - 56504a6d62...ba14520c00 - - - - 19 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000290449 - - - success - - - - transfer - -
- - d65e4ebe37...d5026ea001 - - - - 19 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000290555 - - - success - - - - transfer - -
- - 6c0ac7828b...10b1febf06 - - - - 19 hours ago - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- 0.000291983 - - - success - - - - transfer - -
-
- -
+ + +
+ + Type +
+ +
+ + transfer + + +
+
should render the Transactions page, start polling > - 070280c69500df7d1b40942981a3b5...f9f71ba62f96d63e322994efca2a0e + 004ca8683c315b9270e04d3768dfb5...f65d92a9469ca31a5d97cff9718b06 @@ -1282,7 +771,7 @@ exports[`Transactions page > should render the Transactions page, start polling >
- -
+ +
+ + +
+ +
+`; + +exports[`Transactions page > should render the Transactions page, start polling for blocks and stop the polling when unmounted 1`] = ` +
+
+
+

+ Transactions — 0 Displayed Items +

+ + +
+ +
+
+
+ + +
+ +
+`; + +exports[`Transactions page > should render the Transactions page, start polling for blocks and stop the polling when unmounted 2`] = ` +
+
+
+

+ Transactions — 15 Displayed Items +

+ + +
+ +
+
+ + - - b4525cb82f5cd56fcf8ceb2eb30f64...3567e82abb8265dd12daf5275d7709 - - - -
- - relative time -
+ + + + + + + + + + + + + + + + -
- -
- -
- - Gas Price -
- -
- 1 -
- -
- - Gas Limit -
- -
- 500,000,000 -
- -
- - Fee -
- -
- 0.000291361 - DUSK -
- -
- - Status -
- -
- + + 070280c695...94efca2a0e + + + + 18 hours ago + + + + +
+ + + + + + + + + + + + + + - 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 -
- -
- + + b5ad0ec014...04f807910b + + + + 19 hours ago + + + + +
+ + + + + + + + + + + + + + - success - + + + + + + + + + + + + + + + + - - -
- - Type -
- -
- - transfer - +
+ + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + +
+ ID + + Gas + + Fee (DUSK) + + Status + + Type +
+ + PRICE: + + + 1 +
+ + + LIMIT: + + + 50,000,000 + 		+ 0.000215552 + + + success + + + + transfer + +
+ + 534f753d5a...5153259c00 + + + + 18 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 50,000,000 + 		+ 0.000215617 + + + success + + + + transfer + +
+ + c6f13af20c...fc68ebb102 + + + + 18 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 50,000,000 + 		+ 0.000214413 + + + success + + + + transfer + +
+ + 31c7dce26a...bf7bcb4c04 + + + + 18 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000291769 + + + success + + + + transfer + +
+ + 4fa6e913c0...9e4dd5510d + + + + 18 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000290764 + + + success + + + + transfer + +
+ + d1a7928a43...79ccdb2e04 + + + + 18 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000291961 + + + success + + + + transfer + +
+ + 004ca8683c...cff9718b06 + + + + 18 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000292039 + + + success + + + + transfer + +
+ + b5a77063e4...4496253a05 + + + + 19 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000290406 + + + success + + + + transfer + +
+ + b263d9d594...9d80b06e0b + + + + 19 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000291537 + + + success + + + + transfer + +
+ + b4525cb82f...f5275d7709 + + + + 19 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000291361 + + + success + + + + transfer + +
+ + 40fb9d20eb...516584df08 + + + + 19 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000290385 + + + success + + + + transfer + +
+ + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000290795 + + + success + + + + transfer + +
+ + 56504a6d62...ba14520c00 + + + + 19 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000290449 + + + success + + + + transfer + +
+ + d65e4ebe37...d5026ea001 + + + + 19 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000290555 + + + success + + + + transfer + +
+ + 6c0ac7828b...10b1febf06 + + + + 19 hours ago + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ 0.000291983 + + + success + + + + transfer + +
+
diff --git a/explorer/src/routes/transactions/__tests__/page.spec.js b/explorer/src/routes/transactions/__tests__/page.spec.js index 9f515bf5e3..8dcb40d7ea 100644 --- a/explorer/src/routes/transactions/__tests__/page.spec.js +++ b/explorer/src/routes/transactions/__tests__/page.spec.js @@ -6,6 +6,7 @@ import { duskAPI } from "$lib/services"; import { transformTransaction } from "$lib/chain-info"; import { appStore } from "$lib/stores"; import { gqlTransactions } from "$lib/mock-data"; +import { changeMediaQueryMatches } from "$lib/dusk/test-helpers"; import Transactions from "../+page.svelte"; @@ -69,4 +70,23 @@ describe("Transactions page", () => { expect(getTransactionSpy).toHaveBeenCalledTimes(3); }); + + it("should render the Transactions page with the mobile layout", async () => { + const { container } = render(Transactions); + + changeMediaQueryMatches("(max-width: 1024px)", true); + + expect(get(appStore).isSmallScreen).toBe(true); + + expect(getTransactionSpy).toHaveBeenCalledTimes(1); + expect(getTransactionSpy).toHaveBeenNthCalledWith( + 1, + network, + transactionsListEntries + ); + + await vi.advanceTimersByTimeAsync(1); + + expect(container.firstChild).toMatchSnapshot(); + }); }); 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..9baada8813 100644 --- a/explorer/vite-setup.js +++ b/explorer/vite-setup.js @@ -8,7 +8,11 @@ import { readable } from "svelte/store"; import { ResizeObserver } from "@juggle/resize-observer"; import "jsdom-worker"; -import { IntersectionObserver } from "./src/lib/dusk/mocks"; +import { + IntersectionObserver, + MediaQueryList, + MediaQueryListEvent, +} from "./src/lib/dusk/mocks"; /* * Mocking deprecated `atob` and `btoa` functions in Node. @@ -27,6 +31,8 @@ vi.mock("./src/lib/dusk/mocks/IntersectionObserver"); global.IntersectionObserver = IntersectionObserver; global.ResizeObserver = ResizeObserver; +global.MediaQueryListEvent = MediaQueryListEvent; +global.MediaQueryList = MediaQueryList; const elementMethods = ["scrollBy", "scrollTo", "scrollIntoView"]; @@ -117,3 +123,9 @@ vi.mock("$app/stores", () => { updated, }; }); + +// Define matchMedia property +Object.defineProperty(window, "matchMedia", { + value: (query) => new MediaQueryList(query, false), + writable: true, +});