From 1294a9716fe62bc626a29b715c791d7b3cc29568 Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Sat, 31 Aug 2024 16:42:26 +0200
Subject: [PATCH] Resolve merge conflicts

---
 .../src/routes/(app)/dashboard/+page.svelte   |   2 +-
 .../__snapshots__/layout.spec.js.snap         | 268 ++++++++++++------
 .../(app)/dashboard/__tests__/layout.spec.js  |   4 +-
 .../(app)/dashboard/transactions/+page.svelte |   2 +-
 .../__tests__/__snapshots__/page.spec.js.snap | 134 +++++----
 5 files changed, 252 insertions(+), 158 deletions(-)

diff --git a/web-wallet/src/routes/(app)/dashboard/+page.svelte b/web-wallet/src/routes/(app)/dashboard/+page.svelte
index 4bdd28c8b3..fd0cb3e5b0 100644
--- a/web-wallet/src/routes/(app)/dashboard/+page.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/+page.svelte
@@ -76,7 +76,7 @@
   items={walletStore.getTransactionsHistory()}
   {language}
   limit={dashboardTransactionLimit}
-  isSyncing{syncStatus.isInProgress}
+  isSyncing={syncStatus.isInProgress}
   syncError={syncStatus.error}
 />
 
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
index 9afb846c3b..679710146e 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
@@ -3,10 +3,10 @@
 exports[`Dashboard Layout > should render the dashboard layout 1`] = `
 <div>
   <section
-    class="dashboard svelte-x8x7bh"
+    class="dashboard svelte-1i7pgqm"
   >
     <div
-      class="dashboard-content svelte-x8x7bh"
+      class="dashboard-content svelte-1i7pgqm"
     >
       <h2
         class="sr-only"
@@ -130,13 +130,13 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
     </div>
      
     <footer
-      class="footer svelte-x8x7bh"
+      class="footer svelte-1i7pgqm"
     >
       <nav
-        class="footer__navigation svelte-x8x7bh"
+        class="footer__navigation svelte-1i7pgqm"
       >
         <div
-          class="footer__network-status svelte-x8x7bh"
+          class="footer__network-status svelte-1i7pgqm"
         >
           <svg
             class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--success"
@@ -153,7 +153,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
           
            
           <div
-            class="footer__network-message svelte-x8x7bh"
+            class="footer__network-message svelte-1i7pgqm"
           >
             <span>
               Dusk testnet
@@ -163,7 +163,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
         </div>
          
         <div
-          class="footer__actions svelte-x8x7bh"
+          class="footer__actions svelte-1i7pgqm"
         >
            
           <a
@@ -197,10 +197,10 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
 
 exports[`Dashboard Layout > should render the dashboard layout and show a throbber while balance is loading 1`] = `
 <section
-  class="dashboard svelte-x8x7bh"
+  class="dashboard svelte-1i7pgqm"
 >
   <div
-    class="dashboard-content svelte-x8x7bh"
+    class="dashboard-content svelte-1i7pgqm"
   >
     <h2
       class="sr-only"
@@ -324,13 +324,13 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
   </div>
    
   <footer
-    class="footer svelte-x8x7bh"
+    class="footer svelte-1i7pgqm"
   >
     <nav
-      class="footer__navigation svelte-x8x7bh"
+      class="footer__navigation svelte-1i7pgqm"
     >
       <div
-        class="footer__network-status svelte-x8x7bh"
+        class="footer__network-status svelte-1i7pgqm"
       >
         <svg
           class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--success"
@@ -347,7 +347,7 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
         
          
         <div
-          class="footer__network-message svelte-x8x7bh"
+          class="footer__network-message svelte-1i7pgqm"
         >
           <span>
             Dusk testnet
@@ -357,7 +357,7 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
       </div>
        
       <div
-        class="footer__actions svelte-x8x7bh"
+        class="footer__actions svelte-1i7pgqm"
       >
          
         <a
@@ -391,10 +391,10 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
 exports[`Dashboard Layout > should render the dashboard layout in the error state 1`] = `
 <div>
   <section
-    class="dashboard svelte-x8x7bh"
+    class="dashboard svelte-1i7pgqm"
   >
     <div
-      class="dashboard-content svelte-x8x7bh"
+      class="dashboard-content svelte-1i7pgqm"
     >
       <h2
         class="sr-only"
@@ -518,13 +518,13 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
     </div>
      
     <footer
-      class="footer svelte-x8x7bh"
+      class="footer svelte-1i7pgqm"
     >
       <nav
-        class="footer__navigation svelte-x8x7bh"
+        class="footer__navigation svelte-1i7pgqm"
       >
         <div
-          class="footer__network-status svelte-x8x7bh"
+          class="footer__network-status svelte-1i7pgqm"
         >
           <svg
             class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--error"
@@ -542,7 +542,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
           
            
           <div
-            class="footer__network-message svelte-x8x7bh"
+            class="footer__network-message svelte-1i7pgqm"
           >
             <span>
               Dusk testnet - Sync Failed
@@ -552,7 +552,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
         </div>
          
         <div
-          class="footer__actions svelte-x8x7bh"
+          class="footer__actions svelte-1i7pgqm"
         >
           <button
             aria-label="Retry synchronization"
@@ -606,20 +606,140 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
 
 exports[`Dashboard Layout > should render the dashboard layout in the sync state when no progress is reported 1`] = `
 <section
-  class="dashboard svelte-1ufvl0d"
+  class="dashboard svelte-1i7pgqm"
 >
-  <span>
-    some text
-  </span>
+  <div
+    class="dashboard-content svelte-1i7pgqm"
+  >
+    <h2
+      class="sr-only"
+    >
+      Dashboard
+    </h2>
+     
+     
+    <div
+      class="address-picker"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="address-picker__trigger"
+        role="button"
+        tabindex="0"
+      >
+        <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--default dusk-icon-button"
+          disabled=""
+          type="button"
+        >
+          <svg
+            class="dusk-icon dusk-icon--size--default dusk-button__icon"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z"
+            />
+          </svg>
+          
+           
+          
+        </button>
+         
+        <p
+          class="address-picker__current-address"
+        >
+          2087290d3dc213d43e493f03f5435f99
+        </p>
+         
+        <button
+          aria-label="Copy Address"
+          class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--default dusk-icon-button address-picker__copy-address-button"
+          type="button"
+        >
+          <svg
+            class="dusk-icon dusk-icon--size--default dusk-button__icon"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+            />
+          </svg>
+          
+           
+          
+        </button>
+      </div>
+       
+    </div>
+     
+    <article
+      class="dusk-balance"
+    >
+      <header
+        class="dusk-balance__header"
+      >
+        <h2>
+          Your Balance:
+        </h2>
+      </header>
+       
+      <p
+        class="dusk-balance__dusk"
+      >
+        <strong>
+          2,345.000000000
+        </strong>
+         
+        <svg
+          class="dusk-icon dusk-icon--size--default dusk-balance__icon"
+          data-tooltip-id="balance-tooltip"
+          data-tooltip-place="right"
+          data-tooltip-text="DUSK"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
+          />
+        </svg>
+        
+      </p>
+       
+      <p
+        class="dusk-balance__fiat dusk-balance__fiat--visible"
+      >
+        <strong>
+          (
+          $1,172.50
+          )
+        </strong>
+      </p>
+       
+       
+      <div
+        aria-hidden="true"
+        class="dusk-tooltip dusk-tooltip-top dusk-tooltip-info"
+        id="balance-tooltip"
+        role="tooltip"
+        style="left: 0px; top: 0px;"
+      >
+        
+      </div>
+    </article>
+     
+  </div>
    
   <footer
-    class="footer svelte-1ufvl0d"
+    class="footer svelte-1i7pgqm"
   >
     <nav
-      class="footer__navigation svelte-1ufvl0d"
+      class="footer__navigation svelte-1i7pgqm"
     >
       <div
-        class="footer__network-status svelte-1ufvl0d"
+        class="footer__network-status svelte-1i7pgqm"
       >
         <svg
           class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--warning"
@@ -636,7 +756,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
         
          
         <div
-          class="footer__network-message svelte-1ufvl0d"
+          class="footer__network-message svelte-1i7pgqm"
         >
            
           <span>
@@ -647,7 +767,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
       </div>
        
       <div
-        class="footer__actions svelte-1ufvl0d"
+        class="footer__actions svelte-1i7pgqm"
       >
          
         <a
@@ -679,64 +799,22 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
 `;
 
 exports[`Dashboard Layout > should render the dashboard layout in the sync state with a progress indicator 1`] = `
-<section
-  class="dashboard svelte-1ufvl0d"
->
-  <span>
-    some text
-  </span>
-   
-  <footer
-    class="footer svelte-1ufvl0d"
+<div>
+  <section
+    class="dashboard svelte-1i7pgqm"
   >
-    <nav
-      class="footer__navigation svelte-1ufvl0d"
+    <div
+      class="dashboard-content svelte-1i7pgqm"
     >
-      <div
-        class="footer__network-status svelte-1ufvl0d"
+      <h2
+        class="sr-only"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--warning"
-          data-tooltip-disabled="true"
-          data-tooltip-id="main-tooltip"
-          data-tooltip-type="error"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M6,2H18V8H18V8L14,12L18,16V16H18V22H6V16H6V16L10,12L6,8V8H6V2M16,16.5L12,12.5L8,16.5V20H16V16.5M12,11.5L16,7.5V4H8V7.5L12,11.5M10,6H14V6.75L12,8.75L10,6.75V6Z"
-          />
-        </svg>
-        
-         
-        <div
-          class="footer__network-message svelte-1ufvl0d"
-        >
-           
-          <span>
-            Syncing: 
-            <b>
-              100
-              /
-              200
-            </b>
-          </span>
-           
-          <div
-            class="dusk-progress-bar footer__sync-status-progress-bar"
-            role="progressbar"
-          >
-            <div
-              class="dusk-progress-bar__filler"
-              style="width: 50%"
-            />
-          </div>
-          
-        </div>
-      </div>
+        Dashboard
+      </h2>
+       
        
       <div
-        class="footer__actions svelte-1ufvl0d"
+        class="address-picker"
       >
         <div
           aria-expanded="false"
@@ -850,13 +928,13 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
     </div>
      
     <footer
-      class="footer svelte-x8x7bh"
+      class="footer svelte-1i7pgqm"
     >
       <nav
-        class="footer__navigation svelte-x8x7bh"
+        class="footer__navigation svelte-1i7pgqm"
       >
         <div
-          class="footer__network-status svelte-x8x7bh"
+          class="footer__network-status svelte-1i7pgqm"
         >
           <svg
             class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--warning"
@@ -873,25 +951,33 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
           
            
           <div
-            class="footer__network-message svelte-x8x7bh"
+            class="footer__network-message svelte-1i7pgqm"
           >
+             
             <span>
-              Syncing with Dusk testnet
+              Syncing: 
+              <b>
+                100
+                /
+                200
+              </b>
             </span>
              
             <div
-              class="dusk-progress-bar"
+              class="dusk-progress-bar footer__sync-status-progress-bar"
               role="progressbar"
             >
               <div
-                class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+                class="dusk-progress-bar__filler"
+                style="width: 0%"
               />
             </div>
+            
           </div>
         </div>
          
         <div
-          class="footer__actions svelte-x8x7bh"
+          class="footer__actions svelte-1i7pgqm"
         >
            
           <a
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/layout.spec.js b/web-wallet/src/routes/(app)/dashboard/__tests__/layout.spec.js
index 327e954ff8..d21ae63681 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/layout.spec.js
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/layout.spec.js
@@ -182,7 +182,7 @@ describe("Dashboard Layout", () => {
   });
 
   it("should render the dashboard layout in the sync state when no progress is reported", async () => {
-    const { container } = renderWithSimpleContent(Layout, {});
+    const { container } = render(Layout, baseProps);
 
     expect(getStatusWrapper(container, "warning")).toBeNull();
 
@@ -209,7 +209,7 @@ describe("Dashboard Layout", () => {
   });
 
   it("should render the dashboard layout in the sync state with a progress indicator", async () => {
-    const { container } = renderWithSimpleContent(Layout, {});
+    const { container } = render(Layout, baseProps);
 
     expect(getStatusWrapper(container, "warning")).toBeNull();
 
diff --git a/web-wallet/src/routes/(app)/dashboard/transactions/+page.svelte b/web-wallet/src/routes/(app)/dashboard/transactions/+page.svelte
index 122924309c..775bc074ad 100644
--- a/web-wallet/src/routes/(app)/dashboard/transactions/+page.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/transactions/+page.svelte
@@ -6,7 +6,7 @@
 
   const { language } = $settingsStore;
 
-  $: ({ syncStatus, error } = $walletStore);
+  $: ({ syncStatus } = $walletStore);
 </script>
 
 <div class="transactions">
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
index c94112b602..34b1e2e158 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
@@ -1729,81 +1729,89 @@ exports[`Create > ensures the Network Syncing step renders as expected 1`] = `
   <div
     class="dusk-card dusk-card--gap-default"
   >
-    <header
-      class="dusk-card__header"
-      slot="header"
+    <div
+      class="dusk-card__header-container"
     >
-      <div
-        class="dusk-card__header-title"
+      <header
+        class="dusk-card__header"
+        slot="header"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--default"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"
-          />
-        </svg>
-        
-         
-        <h3
-          class="h4"
+        <div
+          class="dusk-card__heading-container"
         >
-          Block Height
-        </h3>
-      </div>
-    </header>
-     
-    <p>
-      Store the current block height in case you want to resync from it next time
-    you reset your wallet. This can significantly reduce the initial sync time.
-    </p>
+          <svg
+            class="dusk-icon dusk-icon--size--default dusk-card__heading-icon"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"
+            />
+          </svg>
+          
+           
+          <h3
+            class="h4"
+          >
+            Block Height
+          </h3>
+        </div>
+      </header>
+    </div>
      
     <div
-      class="copy-field"
+      class="dusk-card__body-container"
     >
-      <input
-        class="dusk-textbox dusk-textbox-text copy-field__content"
-        readonly=""
-        type="text"
-      />
-      
+      <p>
+        Store the current block height in case you want to resync from it next time
+    you reset your wallet. This can significantly reduce the initial sync time.
+      </p>
        
-      <button
-        aria-label="Copy Address"
-        class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button copy-field__button"
-        disabled=""
-        type="button"
+      <div
+        class="copy-field"
       >
-        <svg
-          class="dusk-icon dusk-icon--size--default dusk-button__icon"
-          role="graphics-symbol"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-          />
-        </svg>
+        <input
+          class="dusk-textbox dusk-textbox-text copy-field__content"
+          readonly=""
+          type="text"
+        />
         
          
-        
-      </button>
+        <button
+          aria-label="Copy Address"
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button copy-field__button"
+          disabled=""
+          type="button"
+        >
+          <svg
+            class="dusk-icon dusk-icon--size--default dusk-button__icon"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+            />
+          </svg>
+          
+           
+          
+        </button>
+      </div>
+       
+      <small>
+        This can later be retrieved from Settings. Find out more in our 
+        <a
+          class="dusk-anchor dusk-anchor--on-surface"
+          href="#"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          documentation
+        </a>
+        .
+      </small>
     </div>
      
-    <small>
-      This can later be retrieved from Settings. Find out more in our 
-      <a
-        class="dusk-anchor dusk-anchor--on-surface"
-        href="#"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        documentation
-      </a>
-      .
-    </small>
-     
   </div>