From 3ba5fe60e1c89c513434ed4b5b463c1987204bae Mon Sep 17 00:00:00 2001
From: Alex <panturu.alexandru@gmail.com>
Date: Mon, 13 May 2024 11:13:23 +0300
Subject: [PATCH] fix linting

---
 .../lib/components/__tests__/DataCard.spec.js | 10 ++++-----
 .../lib/components/world-map/WorldMap.svelte  |  5 +++--
 .../statistics-panel/StatisticsPanel.svelte   |  4 +++-
 explorer/src/routes/+page.svelte              | 14 +++++++-----
 explorer/src/routes/blocks/block/+page.svelte | 22 ++++++++++---------
 .../transactions/transaction/+page.svelte     | 16 ++++++++------
 6 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/explorer/src/lib/components/__tests__/DataCard.spec.js b/explorer/src/lib/components/__tests__/DataCard.spec.js
index c0e99da992..0ada288dc2 100644
--- a/explorer/src/lib/components/__tests__/DataCard.spec.js
+++ b/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 () => {
diff --git a/explorer/src/lib/components/world-map/WorldMap.svelte b/explorer/src/lib/components/world-map/WorldMap.svelte
index 767eaa80cb..864c12e0a8 100644
--- a/explorer/src/lib/components/world-map/WorldMap.svelte
+++ b/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>
 
diff --git a/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte b/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte
index eb76b573ef..fdce2a1878 100644
--- a/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte
+++ b/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>
diff --git a/explorer/src/routes/+page.svelte b/explorer/src/routes/+page.svelte
index e7c03ac5ef..fc3ea9a359 100644
--- a/explorer/src/routes/+page.svelte
+++ b/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>
 
diff --git a/explorer/src/routes/blocks/block/+page.svelte b/explorer/src/routes/blocks/block/+page.svelte
index 8244cf0bd9..3f6a0c50d9 100644
--- a/explorer/src/routes/blocks/block/+page.svelte
+++ b/explorer/src/routes/blocks/block/+page.svelte
@@ -1,10 +1,10 @@
 <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);
 
@@ -12,26 +12,28 @@
     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>
diff --git a/explorer/src/routes/transactions/transaction/+page.svelte b/explorer/src/routes/transactions/transaction/+page.svelte
index 63b35a9f1b..9616cc703e 100644
--- a/explorer/src/routes/transactions/transaction/+page.svelte
+++ b/explorer/src/routes/transactions/transaction/+page.svelte
@@ -1,10 +1,10 @@
 <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);
 
@@ -12,16 +12,18 @@
     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>