From f894751268bd432b5a312f8dfbec05248097f979 Mon Sep 17 00:00:00 2001 From: Alex Panturu Date: Mon, 27 May 2024 17:35:53 +0300 Subject: [PATCH] explorer: make relative time dynamic on detail pages --- explorer/src/routes/blocks/block/+page.svelte | 30 +- .../__tests__/__snapshots__/page.spec.js.snap | 681 +----------------- .../blocks/block/__tests__/page.spec.js | 22 +- .../transactions/transaction/+page.svelte | 22 +- .../__tests__/__snapshots__/page.spec.js.snap | 371 +--------- .../transaction/__tests__/page.spec.js | 22 +- 6 files changed, 71 insertions(+), 1077 deletions(-) diff --git a/explorer/src/routes/blocks/block/+page.svelte b/explorer/src/routes/blocks/block/+page.svelte index 49a4612347..832b3f8ead 100644 --- a/explorer/src/routes/blocks/block/+page.svelte +++ b/explorer/src/routes/blocks/block/+page.svelte @@ -3,18 +3,18 @@ import { BlockDetails, LatestTransactionsCard } from "$lib/components"; import { duskAPI } from "$lib/services"; import { appStore } from "$lib/stores"; - import { createDataStore } from "$lib/dusk/svelte-stores"; + import { createPollingDataStore } from "$lib/dusk/svelte-stores"; import { onNetworkChange } from "$lib/lifecyles"; + import { onDestroy } from "svelte"; - const dataStore = createDataStore(duskAPI.getBlock); - - const getBlock = () => { - dataStore.getData($appStore.network, $page.url.searchParams.get("id")); - }; + const pollingDataStore = createPollingDataStore( + duskAPI.getBlock, + $appStore.fetchInterval + ); const updateData = () => { - dataStore.reset(); - getBlock(); + pollingDataStore.reset(); + pollingDataStore.start($appStore.network, $page.url.searchParams.get("id")); }; onNetworkChange(updateData); @@ -26,16 +26,24 @@ $navigating.complete.then(updateData); } - $: ({ data, error, isLoading } = $dataStore); + $: ({ data, error, isLoading } = $pollingDataStore); + $: ({ network: currentNetwork } = $appStore); + + onDestroy(pollingDataStore.stop);
- + pollingDataStore.start(currentNetwork)} + {data} + {error} + loading={isLoading} + />
pollingDataStore.start(currentNetwork)} txns={data?.transactions.data} {error} loading={isLoading} 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 25515a14cd..6527fc76b1 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 @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Block Details > should render the Block Details page and query the necessary info 1`] = ` +exports[`Block Details > should render the Block Details page, start polling the block data and stop the polling when unmounted 1`] = `
should render the Block Details page and query the nece

-
- - - - -
-
- - -`; - -exports[`Block Details > should render the Block Details page and query the necessary info 2`] = ` -
-
-
-
-
-

- Block Details -

- - - -
- -
-
- - - - - - - block hash -
- -
- bd5c99bb720b03500e89f103fe66113ba62f2e124ed9651563f38fd15977719f -
- -
- - - - - - - height -
- -
- - - - - - - - - - - - - - - 495,868 - - - - - - - - - - - - - - - -
- -
- - - - - - - timestamp -
- -
- -
- -
- - - - - - - transactions -
- -
- 2 -
- -
- - - - - - - 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 -

- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Hash - - Gas - - Fee - - Status - - Type -
- - bd5c99bb72...d15977719f - - - - - - last month - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- - 0.000290866 Dusk - - - - - success - - - - - transfer - - -
- - bd5c99bb72...d15977719f - - - - - - last month - - - - PRICE: - - - 1 -
- - - LIMIT: - - - 500,000,000 - 		- - 0.000289852 Dusk - - - - - success - - - - - transfer - - -
-
- - - - -
diff --git a/explorer/src/routes/blocks/block/__tests__/page.spec.js b/explorer/src/routes/blocks/block/__tests__/page.spec.js index 8e63f14cb1..e35773debf 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 { apiBlock } from "$lib/mock-data"; +import { appStore } from "$lib/stores"; import BlockDetails from "../+page.svelte"; @@ -16,6 +18,7 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ describe("Block Details", () => { vi.useFakeTimers(); + const { fetchInterval } = get(appStore); const getBlockSpy = vi .spyOn(duskAPI, "getBlock") .mockResolvedValue(transformBlock(apiBlock.data.blocks[0])); @@ -30,16 +33,25 @@ describe("Block Details", () => { getBlockSpy.mockRestore(); }); - it("should render the Block Details page and query the necessary info", async () => { - const { container } = render(BlockDetails); + it("should render the Block Details page, start polling the block data and stop the polling when unmounted", async () => { + const { container, unmount } = render(BlockDetails); expect(container.firstChild).toMatchSnapshot(); expect(getBlockSpy).toHaveBeenCalledTimes(1); - await vi.advanceTimersByTimeAsync(1); + await vi.advanceTimersByTimeAsync(fetchInterval); - // snapshot with received data from APIs - expect(container.firstChild).toMatchSnapshot(); + expect(getBlockSpy).toHaveBeenCalledTimes(2); + + await vi.advanceTimersByTimeAsync(fetchInterval); + + expect(getBlockSpy).toHaveBeenCalledTimes(3); + + unmount(); + + await vi.advanceTimersByTimeAsync(fetchInterval * 10); + + expect(getBlockSpy).toHaveBeenCalledTimes(3); }); }); diff --git a/explorer/src/routes/transactions/transaction/+page.svelte b/explorer/src/routes/transactions/transaction/+page.svelte index f2c2bbb5c0..7a6670a2ec 100644 --- a/explorer/src/routes/transactions/transaction/+page.svelte +++ b/explorer/src/routes/transactions/transaction/+page.svelte @@ -3,21 +3,28 @@ import { TransactionDetails } from "$lib/components/"; import { duskAPI } from "$lib/services"; import { appStore } from "$lib/stores"; - import { createDataStore } from "$lib/dusk/svelte-stores"; + import { + createDataStore, + createPollingDataStore, + } from "$lib/dusk/svelte-stores"; import { onNetworkChange } from "$lib/lifecyles"; + import { onDestroy } from "svelte"; - const dataStore = createDataStore(duskAPI.getTransaction); + const pollingDataStore = createPollingDataStore( + duskAPI.getTransaction, + $appStore.fetchInterval + ); const payloadStore = createDataStore(duskAPI.getTransactionDetails); const marketStore = createDataStore(duskAPI.getMarketData); const getTransaction = () => { - dataStore.getData($appStore.network, $page.url.searchParams.get("id")); payloadStore.getData($appStore.network, $page.url.searchParams.get("id")); marketStore.getData($appStore.network); }; const updateData = () => { - dataStore.reset(); + pollingDataStore.reset(); + pollingDataStore.start($appStore.network, $page.url.searchParams.get("id")); payloadStore.reset(); getTransaction(); }; @@ -31,14 +38,17 @@ $navigating.complete.then(updateData); } - $: ({ data, error, isLoading } = $dataStore); + $: ({ data, error, isLoading } = $pollingDataStore); $: ({ data: payloadData } = $payloadStore); $: ({ data: marketData } = $marketStore); + $: ({ network: currentNetwork } = $appStore); + + onDestroy(pollingDataStore.stop);
pollingDataStore.start(currentNetwork)} {data} {error} loading={isLoading} diff --git a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap index cc8e113e94..af87c6e2b2 100644 --- a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap +++ b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Transaction Details > should render the Transaction details page and query the necessary info 1`] = ` +exports[`Transaction Details > should render the Transaction details page, start polling the transaction data and stop the polling when unmounted 1`] = `
should render the Transaction details page and qu
`; - -exports[`Transaction Details > should render the Transaction details page and query the necessary info 2`] = ` -
-
-
-
-

- Transaction Details -

- - - -
- -
-
- - - - - - - ID -
- -
- 4877687c2dbf154248d3ddee9ba0d81...431f39056f82a46819da041d4ac0e04 -
- -
- - - - - - - block height -
- -
- - 487,166 - - - -
- -
- - - - - - - Status -
- -
- - success - - -
- -
- - - - - - - timestamp -
- -
- -
- -
- - - - - - - type -
- -
- - transfer - - -
- -
- - - - - - - transaction fee -
- -
- 0.000290766 DUSK ($0.0001071037) - - - -
- -
- - - - - - - gas price -
- -
- 0.000000001 DUSK ($0.0000000004) - - - -
- -
- - - - - - - transaction gas limit -
- -
- 0.50 - DUSK -
- -
- - - - - - - gas spent -
- -
- 0.000290766 - DUSK -
- -
- - - - - - - payload - - -
- -
- -
- -
- -
- - -
- - - - -
- -
-`; diff --git a/explorer/src/routes/transactions/transaction/__tests__/page.spec.js b/explorer/src/routes/transactions/transaction/__tests__/page.spec.js index 4cf063109d..8de3878a88 100644 --- a/explorer/src/routes/transactions/transaction/__tests__/page.spec.js +++ b/explorer/src/routes/transactions/transaction/__tests__/page.spec.js @@ -1,5 +1,6 @@ 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 { transformTransaction } from "$lib/chain-info"; @@ -8,6 +9,7 @@ import { gqlTransaction, gqlTransactionDetails, } from "$lib/mock-data"; +import { appStore } from "$lib/stores"; import TransactionDetails from "../+page.svelte"; @@ -20,6 +22,7 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({ describe("Transaction Details", () => { vi.useFakeTimers(); + const { fetchInterval } = get(appStore); const getTransactionSpy = vi .spyOn(duskAPI, "getTransaction") .mockResolvedValue(transformTransaction(gqlTransaction.tx)); @@ -47,8 +50,8 @@ describe("Transaction Details", () => { getMarketDataSpy.mockRestore(); }); - it("should render the Transaction details page and query the necessary info", async () => { - const { container } = render(TransactionDetails); + it("should render the Transaction details page, start polling the transaction data and stop the polling when unmounted", async () => { + const { container, unmount } = render(TransactionDetails); expect(container.firstChild).toMatchSnapshot(); @@ -56,9 +59,18 @@ describe("Transaction Details", () => { expect(getPayloadSpy).toHaveBeenCalledTimes(1); expect(getMarketDataSpy).toHaveBeenCalledTimes(1); - await vi.advanceTimersByTimeAsync(1); + await vi.advanceTimersByTimeAsync(fetchInterval); - // snapshot with received data from APIs - expect(container.firstChild).toMatchSnapshot(); + expect(getTransactionSpy).toHaveBeenCalledTimes(2); + + await vi.advanceTimersByTimeAsync(fetchInterval); + + expect(getTransactionSpy).toHaveBeenCalledTimes(3); + + unmount(); + + await vi.advanceTimersByTimeAsync(fetchInterval * 10); + + expect(getTransactionSpy).toHaveBeenCalledTimes(3); }); });