web-wallet: Add Link to Block Explorer on Wallet

Resolves #2882

web-wallet/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added gas settings validation on Unstake / Widthdraw Rewards flows [#2000]
+- Add temporary link to the block explorer on the dashboard [#2882]
 
 ### Changed
 
@@ -333,6 +334,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2878]: https://github.com/dusk-network/rusk/issues/2878
 [#2879]: https://github.com/dusk-network/rusk/issues/2879
 [#2880]: https://github.com/dusk-network/rusk/issues/2880
+[#2882]: https://github.com/dusk-network/rusk/issues/2882
 [#2888]: https://github.com/dusk-network/rusk/issues/2888
 [#2920]: https://github.com/dusk-network/rusk/issues/2920
 

web-wallet/src/routes/(app)/dashboard/+page.svelte

@@ -6,16 +6,20 @@
     mdiArrowTopRight,
     mdiContain,
     mdiDatabaseOutline,
+    mdiListBoxOutline,
     mdiSwapHorizontal,
     mdiSwapVertical,
     mdiSync,
   } from "@mdi/js";
-  import { Icon } from "$lib/dusk/components";
+  import { AnchorButton, Icon } from "$lib/dusk/components";
   import { DashboardNav, Transactions } from "$lib/components";
-  import { settingsStore, walletStore } from "$lib/stores";
+  import { networkStore, settingsStore, walletStore } from "$lib/stores";
   import { contractDescriptors } from "$lib/contracts";
+  import IconHeadingCard from "$lib/containers/Cards/IconHeadingCard.svelte";
+  import { page } from "$app/stores";
 
   const { dashboardTransactionLimit, language } = $settingsStore;
+  const { networkName } = $networkStore;
 
   /** @param {string} contract */
   function getIconsForContract(contract) {
@@ -48,6 +52,20 @@
     return icons;
   }
 
+  function getExplorerPath() {
+    const isStaging = $page.url.href.includes("staging");
+    const baseUrl = isStaging ? "https://apps.staging" : "https://apps";
+
+    switch (networkName) {
+      case "devnet":
+        return `${baseUrl}.devnet.dusk.network/explorer`;
+      case "testnet":
+        return `${baseUrl}.testnet.dusk.network/explorer`;
+      default:
+        return `${baseUrl}.dusk.network/explorer`;
+    }
+  }
+
   /** @type {ContractDescriptor[]} */
   const enabledContracts = contractDescriptors.filter(
     (contract) => contract.enabled === true
@@ -93,6 +111,25 @@
     isSyncing={syncStatus.isInProgress}
     syncError={syncStatus.error}
   />
+{:else}
+  <IconHeadingCard
+    gap="medium"
+    icons={[mdiListBoxOutline]}
+    heading="Transactions"
+  >
+    <p>
+      Transaction history will be available in an upcoming release. Meanwhile,
+      you can check the status of your transactions on the Dusk Block Explorer.
+    </p>
+
+    <AnchorButton
+      variant="tertiary"
+      href={getExplorerPath()}
+      text="Block Explorer"
+      rel="noopener noreferrer"
+      target="_blank"
+    />
+  </IconHeadingCard>
 {/if}
 
 <style lang="postcss">