fix linting

explorer/src/lib/components/__tests__/DataCard.spec.js

@@ -7,11 +7,11 @@ import { DataCard } from "..";
 
 describe("DataCard", () => {
   const baseProps = {
+    button: { action: () => {}, label: "Button" },
     data: null,
     error: false,
     loading: false,
     title: "Title",
-    button: { action: () => {}, label: "Button" },
   };
   const baseOptions = {
     props: baseProps,
@@ -52,23 +52,23 @@ describe("DataCard", () => {
 
   it("should render the `DataCard` in the data state", () => {
     const data = new Array(2);
-    const render = renderWithSimpleContent(DataCard, {
+    const renderWithSlots = renderWithSimpleContent(DataCard, {
       ...baseOptions,
       props: { ...baseProps, data },
     });
 
-    expect(render.container.firstChild).toMatchSnapshot();
+    expect(renderWithSlots.container.firstChild).toMatchSnapshot();
   });
 
   it("should render the `DataCard` in the data state when loading is true", () => {
     const data = new Array(2);
     const loading = true;
-    const render = renderWithSimpleContent(DataCard, {
+    const renderWithSlots = renderWithSimpleContent(DataCard, {
       ...baseOptions,
       props: { ...baseProps, data, loading },
     });
 
-    expect(render.container.firstChild).toMatchSnapshot();
+    expect(renderWithSlots.container.firstChild).toMatchSnapshot();
   });
 
   it("should pass the correct function to the button on click event", async () => {

explorer/src/lib/components/world-map/WorldMap.svelte

@@ -9,7 +9,6 @@
 
   /** @type {Array<{lat: number, lon:number}> | Error}*/
   export let nodes;
-  console.log(nodes);
 
   /** @type {import("d3-geo").GeoProjection}*/
   const projection = geoNaturalEarth1();
@@ -22,7 +21,9 @@
   const getUniqueMarkers = uniquesBy(({ lat, lon }) => `${lat}x${lon}`);
   let nodeLocations;
   $: {
-    if (nodes) nodeLocations = getUniqueMarkers(nodes);
+    if (nodes) {
+      nodeLocations = getUniqueMarkers(nodes);
+    }
   }
 </script>
 

explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte

@@ -50,6 +50,8 @@
     browser && dataStore.getData($appStore.network);
   }
 
+  $: ({ data } = $dataStore);
+
   $: statistics = [
     [
       {
@@ -130,6 +132,6 @@
     {/each}
   </div>
   <div class="statistics-panel__world-map">
-    <WorldMap nodes={$dataStore.data} />
+    <WorldMap nodes={data} />
   </div>
 </div>

explorer/src/routes/+page.svelte

@@ -12,6 +12,8 @@
   );
 
   onNetworkChange(pollingDataStore.start);
+
+  $: ({ data, error, isLoading } = $pollingDataStore);
 </script>
 
 <section class="chain-info">
@@ -22,17 +24,17 @@
   <BlocksCard
     on:retry={() => pollingDataStore.start()}
     className="tables-layout"
-    blocks={$pollingDataStore.data?.blocks}
-    error={$pollingDataStore.error}
-    loading={$pollingDataStore.isLoading}
+    blocks={data?.blocks}
+    {error}
+    loading={isLoading}
   />
 
   <TransactionsCard
     on:retry={() => pollingDataStore.start()}
     className="tables-layout"
-    txs={$pollingDataStore.data?.transactions}
-    error={$pollingDataStore.error}
-    loading={$pollingDataStore.isLoading}
+    txs={data?.transactions}
+    {error}
+    loading={isLoading}
   />
 </section>
 

explorer/src/routes/blocks/block/+page.svelte

@@ -1,37 +1,39 @@
 <script>
-  import { browser } from "$app/environment";
   import { page } from "$app/stores";
   import { BlockDetails, TransactionsCard } from "$lib/components";
   import { duskAPI } from "$lib/services";
   import { appStore } from "$lib/stores";
   import { createDataStore } from "$lib/dusk/svelte-stores";
+  import { onMount } from "svelte";
 
   const dataStore = createDataStore(duskAPI.getBlock);
 
   const getBlock = () => {
     dataStore.getData($appStore.network, $page.url.searchParams.get("id"));
   };
 
-  $: {
-    browser && getBlock();
-  }
+  $: ({ data, error, isLoading } = $dataStore);
+
+  onMount(() => {
+    getBlock();
+  });
 </script>
 
 <section class="block">
   <div class="block__details">
     <BlockDetails
       on:retry={() => getBlock()}
-      data={$dataStore.data}
-      error={$dataStore.error}
-      loading={$dataStore.isLoading}
+      {data}
+      {error}
+      loading={isLoading}
     />
   </div>
   <div class="block__transactions">
     <TransactionsCard
       on:retry={() => getBlock()}
-      txs={$dataStore.data?.transactions.data}
-      error={$dataStore.error}
-      loading={$dataStore.isLoading}
+      txs={data?.transactions.data}
+      {error}
+      loading={isLoading}
     />
   </div>
 </section>

explorer/src/routes/transactions/transaction/+page.svelte

@@ -1,27 +1,29 @@
 <script>
-  import { browser } from "$app/environment";
   import { page } from "$app/stores";
   import { TransactionDetails } from "$lib/components/";
   import { duskAPI } from "$lib/services";
   import { appStore } from "$lib/stores";
   import { createDataStore } from "$lib/dusk/svelte-stores";
+  import { onMount } from "svelte";
 
   const dataStore = createDataStore(duskAPI.getTransaction);
 
   const getTransaction = () => {
     dataStore.getData($appStore.network, $page.url.searchParams.get("id"));
   };
 
-  $: {
-    browser && getTransaction();
-  }
+  $: ({ data, error, isLoading } = $dataStore);
+
+  onMount(() => {
+    getTransaction();
+  });
 </script>
 
 <section class="transaction">
   <TransactionDetails
     on:retry={() => getTransaction()}
-    data={$dataStore.data}
-    error={$dataStore.error}
-    loading={$dataStore.isLoading}
+    {data}
+    {error}
+    loading={isLoading}
   />
 </section>