web-wallet: Refactor dashboard to use routes

Resolves #2075
dusk-network · Aug 20, 2024 · dc5ac18 · dc5ac18
1 parent b34d758
commit dc5ac18
Show file tree

Hide file tree

Showing 14 changed files with 1,030 additions and 1,424 deletions.
diff --git a/web-wallet/README.md b/web-wallet/README.md
@@ -51,6 +51,7 @@ VITE_TESTNET_NODE="https://nodes.dusk.network/"
 VITE_TESTNET_PROVER_NODE="https://provers.dusk.network/"
 VITE_TRANSFER_CONTRACT="0100000000000000000000000000000000000000000000000000000000000000"
 VITE_GET_QUOTE_API_ENDPOINT="https://api.dusk.network/v1/quote"
+VITE_MOONLIGHT_DISABLED=true
 ```
 
 To run a local node different steps are needed, so please read the [related section](#running-a-local-rusk-node).

diff --git a/web-wallet/src/lib/components/ContractOperations/ContractOperations.svelte b/web-wallet/src/lib/components/ContractOperations/ContractOperations.svelte
@@ -4,12 +4,14 @@
   import { createEventDispatcher } from "svelte";
   import {
     mdiArrowDownBoldBoxOutline,
+    mdiArrowLeft,
     mdiArrowUpBoldBoxOutline,
     mdiDatabaseArrowDownOutline,
     mdiDatabaseOutline,
     mdiHelpCircleOutline,
   } from "@mdi/js";
 
+  import { AppAnchorButton } from "$lib/components";
   import { Button } from "$lib/dusk/components";
 
   /** @type {ContractOperation[]} */
@@ -44,6 +46,18 @@
       />
     </li>
   {/each}
+  <li class="contract-operations__operation">
+    <AppAnchorButton
+      className="contract-operations__operation-button"
+      href="/dashboard"
+      icon={{ path: mdiArrowLeft }}
+      on:click={() => {
+        dispatch("operationChange", "");
+      }}
+      text="Back"
+      variant="tertiary"
+    />
+  </li>
 </menu>
 
 <style lang="postcss">

diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/ContractOperations.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/ContractOperations.spec.js.snap
@@ -3,7 +3,37 @@
 exports[`ContractOperations > should be able to render the component without items 1`] = `
 <menu
   class="contract-operations svelte-1v0rjcd"
-/>
+>
+   
+  <li
+    class="contract-operations__operation svelte-1v0rjcd"
+  >
+    <a
+      aria-disabled="false"
+      class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--default dusk-icon-button--labeled contract-operations__operation-button"
+      href="/some-base-path/dashboard"
+    >
+      <svg
+        class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+        />
+      </svg>
+      
+       
+      <span
+        class="dusk-anchor-button__text"
+      >
+        Back
+      </span>
+      
+      
+    </a>
+  </li>
+</menu>
 `;
 
 exports[`ContractOperations > should render the \`ContractOperations\` component 1`] = `
@@ -35,7 +65,6 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
       </span>
       
     </button>
-     
   </li>
   <li
     class="contract-operations__operation svelte-1v0rjcd"
@@ -62,7 +91,6 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
       </span>
       
     </button>
-     
   </li>
   <li
     class="contract-operations__operation svelte-1v0rjcd"
@@ -90,7 +118,6 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
       </span>
       
     </button>
-     
   </li>
   <li
     class="contract-operations__operation svelte-1v0rjcd"
@@ -117,7 +144,6 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
       </span>
       
     </button>
-     
   </li>
   <li
     class="contract-operations__operation svelte-1v0rjcd"
@@ -144,7 +170,35 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
       </span>
       
     </button>
-     
+  </li>
+   
+  <li
+    class="contract-operations__operation svelte-1v0rjcd"
+  >
+    <a
+      aria-disabled="false"
+      class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--default dusk-icon-button--labeled contract-operations__operation-button"
+      href="/some-base-path/dashboard"
+    >
+      <svg
+        class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+        />
+      </svg>
+      
+       
+      <span
+        class="dusk-anchor-button__text"
+      >
+        Back
+      </span>
+      
+      
+    </a>
   </li>
 </menu>
 `;
@@ -178,7 +232,35 @@ exports[`ContractOperations > should use a default icon if the operation is not
       </span>
       
     </button>
-     
+  </li>
+   
+  <li
+    class="contract-operations__operation svelte-1v0rjcd"
+  >
+    <a
+      aria-disabled="false"
+      class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--tertiary dusk-anchor-button--size--default dusk-icon-button--labeled contract-operations__operation-button"
+      href="/some-base-path/dashboard"
+    >
+      <svg
+        class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+        />
+      </svg>
+      
+       
+      <span
+        class="dusk-anchor-button__text"
+      >
+        Back
+      </span>
+      
+      
+    </a>
   </li>
 </menu>
 `;
diff --git a/web-wallet/src/routes/(app)/dashboard/+layout.svelte b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
@@ -8,10 +8,10 @@
   } from "@mdi/js";
   import { Button, Icon, ProgressBar } from "$lib/dusk/components";
   import { settingsStore, walletStore } from "$lib/stores";
-  import { AppAnchorButton } from "$lib/components";
+  import { AddressPicker, AppAnchorButton, Balance } from "$lib/components";
 
-  $: ({ network } = $settingsStore);
-  $: ({ isSyncing, error } = $walletStore);
+  /** @type {import('./$types').LayoutData} */
+  export let data;
 
   /** @type {string} */
   let syncStatus = "";
@@ -22,6 +22,17 @@
   /** @type {string} */
   let iconVariant = "";
 
+  /** @type {number | undefined} */
+  let fiatPrice;
+
+  data.currentPrice.then((prices) => {
+    fiatPrice = prices[currency.toLowerCase()];
+  });
+
+  const { currency, language } = $settingsStore;
+
+  $: ({ network } = $settingsStore);
+  $: ({ balance, currentAddress, addresses, isSyncing, error } = $walletStore);
   $: if (isSyncing) {
     iconVariant = "warning";
     networkStatusIconPath = mdiTimerSand;
@@ -44,7 +55,21 @@
 />
 
 <section class="dashboard">
-  <slot />
+  <div class="dashboard-content">
+    <h2 class="sr-only">Dashboard</h2>
+
+    <AddressPicker {addresses} {currentAddress} />
+
+    <Balance
+      fiatCurrency={currency}
+      {fiatPrice}
+      locale={language}
+      tokenCurrency="DUSK"
+      tokens={balance.value}
+    />
+
+    <slot />
+  </div>
   <footer class="footer">
     <nav class="footer__navigation">
       <div class="footer__network-status">
@@ -103,6 +128,15 @@
     max-height: 100%;
   }
 
+  .dashboard-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1.375rem;
+    overflow-y: auto;
+    flex: 1;
+  }
+
   .footer {
     width: 100%;