up

dusk-network · May 16, 2024 · 2bf9e93 · 2bf9e93
1 parent 5e787b2
commit 2bf9e93
Show file tree

Hide file tree

Showing 12 changed files with 314 additions and 157 deletions.
diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -17,7 +17,6 @@
     Agreement,
     Badge,
     Button,
-    Card,
     Icon,
     Textbox,
     Wizard,
@@ -34,6 +33,7 @@
   } from "$lib/components";
 
   import StakeOverview from "./StakeOverview.svelte";
+  import IconHeaderToggleCard from "$lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte";
 
   /** @type {(...args: any[]) => Promise<string>} */
   export let execute;
@@ -171,11 +171,11 @@
           }}
         >
           <Badge text="WARNING" variant="warning" />
-          <Card onSurface>
-            <div slot="header" class="card__header">
-              <Icon path={mdiAlertOutline} />
-              <h3 class="h4">Only stake if you have a node set up!</h3>
-            </div>
+          <IconHeaderToggleCard
+            onSurface
+            heading="Only stake if you have a node set up!"
+            iconPath={mdiAlertOutline}
+          >
             <p class="staking-warning">
               I understand that I have set up a node properly, as described <AppAnchor
                 class="staking-warning__step-node-setup-link"
@@ -192,7 +192,7 @@
               label="Don't show this step again."
               bind:checked={hideStakingNoticeNextTime}
             />
-          </Card>
+          </IconHeaderToggleCard>
         </WizardStep>
       {/if}
 
@@ -359,12 +359,6 @@
     }
   }
 
-  .card__header {
-    display: flex;
-    gap: var(--small-gap);
-    align-items: center;
-  }
-
   .staking-warning {
     margin-bottom: 1em;
   }

diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
@@ -305,26 +305,31 @@ exports[`Stake > should render the Stake notice 1`] = `
         class="dusk-card dusk-card--gap-default dusk-card--on-surface"
       >
         <div
-          class="card__header s-DFOGCf36SJsY"
+          class="card__header"
           slot="header"
         >
-          <svg
-            class="dusk-icon dusk-icon--size--normal"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
+          <div
+            class="card__header-title"
           >
-            <path
-              d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-            />
-          </svg>
-          
-          <!--&lt;Icon&gt;-->
+            <svg
+              class="dusk-icon dusk-icon--size--normal"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+              />
+            </svg>
+            
+            <!--&lt;Icon&gt;-->
+             
+            <h3
+              class="h4"
+            >
+              Only stake if you have a node set up!
+            </h3>
+          </div>
            
-          <h3
-            class="h4 s-DFOGCf36SJsY"
-          >
-            Only stake if you have a node set up!
-          </h3>
         </div>
          
         <p
@@ -364,10 +369,12 @@ exports[`Stake > should render the Stake notice 1`] = `
           </label>
         </div>
         <!--&lt;Agreement&gt;-->
+        
          
       </div>
       
       <!--&lt;Card&gt;-->
+      <!--&lt;IconHeaderToggleCard&gt;-->
        
       <div
         class="dusk-wizard__step-navigation"

diff --git a/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte b/web-wallet/src/lib/containers/IconHeaderToggleCard/IconHeaderToggleCard.svelte
@@ -3,8 +3,8 @@
 
   import "./IconHeaderToggleCard.css";
 
-  /** @type {string} */
-  export let iconPath;
+  /** @type {string | undefined} */
+  export let iconPath = undefined;
 
   /** @type {string} */
   export let heading;
@@ -22,7 +22,9 @@
 <Card {...$$restProps} {gap} {onSurface}>
   <div slot="header" class="card__header">
     <div class="card__header-title">
-      <Icon path={iconPath} />
+      {#if iconPath}
+        <Icon path={iconPath} />
+      {/if}
       <h3 class="h4">{heading}</h3>
     </div>
     {#if isToggled !== undefined}

diff --git a/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js b/web-wallet/src/lib/containers/__tests__/IconHeaderToggleCard.spec.js
@@ -5,22 +5,34 @@ import { IconHeaderToggleCard } from "..";
 describe("IconHeaderToggleCard", () => {
   afterEach(cleanup);
 
-  const props = {
-    heading: "My Card",
-    iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
-  };
+  it("renders the IconHeaderToggleCard component with a heading", () => {
+    const { container } = render(IconHeaderToggleCard, {
+      props: {
+        heading: "My Card",
+      },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-  it("renders the IconHeaderToggleCard component", () => {
+  it("renders the IconHeaderToggleCard component with a heading and an icon", () => {
     const { container } = render(IconHeaderToggleCard, {
-      props,
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+      },
     });
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it("renders the IconHeaderToggleCard component with a toggle", () => {
     const { container } = render(IconHeaderToggleCard, {
-      props: { ...props, isToggled: true },
+      props: {
+        heading: "My Card",
+        iconPath: "M3,3H21V21H3V3M5,5V19H19V5H5Z",
+        isToggled: true,
+      },
     });
 
     expect(container.firstChild).toMatchSnapshot();

diff --git a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeaderToggleCard.spec.js.snap
@@ -1,6 +1,37 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component 1`] = `
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a heading 1`] = `
+<div>
+  <div
+    class="dusk-card dusk-card--gap-default"
+  >
+    <div
+      class="card__header"
+      slot="header"
+    >
+      <div
+        class="card__header-title"
+      >
+         
+        <h3
+          class="h4"
+        >
+          My Card
+        </h3>
+      </div>
+       
+    </div>
+     
+    
+     
+  </div>
+  
+  <!--&lt;Card&gt;-->
+  <!--&lt;IconHeaderToggleCard&gt;-->
+</div>
+`;
+
+exports[`IconHeaderToggleCard > renders the IconHeaderToggleCard component with a heading and an icon 1`] = `
 <div>
   <div
     class="dusk-card dusk-card--gap-default"

diff --git a/web-wallet/src/routes/(welcome)/setup/AllSet.svelte b/web-wallet/src/routes/(welcome)/setup/AllSet.svelte
@@ -1,7 +1,7 @@
 <script>
   import { settingsStore } from "$lib/stores";
   import { AppImage } from "$lib/components";
-  import { Card } from "$lib/dusk/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
 
   const { darkMode } = $settingsStore;
 
@@ -10,16 +10,15 @@
     "/images/onboarding/all_set_illustration_light.svg";
 </script>
 
-<Card gap="medium">
-  <h3 slot="header" class="h4">You are all set!</h3>
+<IconHeaderToggleCard gap="medium" heading="You are all set!">
   <AppImage
     alt="All Set"
     className="all-set__illustration"
     height="182"
     src={darkMode ? allSetIllustrationLight : allSetIllustration}
     width="205"
   />
-</Card>
+</IconHeaderToggleCard>
 
 <style lang="postcss">
   :global(.all-set__illustration) {

diff --git a/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte b/web-wallet/src/routes/(welcome)/setup/TermsOfService.svelte
@@ -1,14 +1,14 @@
 <script>
-  import { Button, Card } from "$lib/dusk/components";
+  import { Button } from "$lib/dusk/components";
   import { AppAnchor, AppAnchorButton } from "$lib/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
 
   /** @type {boolean} */
   export let tosAccepted = false;
 </script>
 
 <section>
-  <Card>
-    <h3 slot="header" class="h4">Terms &amp; Privacy Policy</h3>
+  <IconHeaderToggleCard heading="Terms &amp; Privacy Policy">
     <p>
       Our <AppAnchor
         href="https://dusk.network/privacy-policy/"
@@ -32,7 +32,7 @@
         }}
       />
     </div>
-  </Card>
+  </IconHeaderToggleCard>
 </section>
 
 <style lang="postcss">

diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicPreSetup.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { Agreement, Card, Icon } from "$lib/dusk/components";
+  import { Agreement, Icon } from "$lib/dusk/components";
+  import { IconHeaderToggleCard } from "$lib/containers";
   import { mdiAlertOutline } from "@mdi/js";
 
   /** @type {boolean} */
@@ -14,22 +15,19 @@
   $: isValid = agreementOneChecked && agreementTwoChecked;
 </script>
 
-<Card gap="medium">
-  <h3 slot="header" class="h4">Securely store your seed phrase!</h3>
-  <div>
-    <Agreement
-      name="mnemonic_agreement_one"
-      bind:checked={agreementOneChecked}
-      label="I understand that without my seed phrase I cannot access my wallet and its assets."
-    />
-    <Agreement
-      name="mnemonic_agreement_two"
-      bind:checked={agreementTwoChecked}
-      label="I understand that securing my recovery phrase is my own responsibility.
+<IconHeaderToggleCard gap="medium" heading="Securely store your seed phrase!">
+  <Agreement
+    name="mnemonic_agreement_one"
+    bind:checked={agreementOneChecked}
+    label="I understand that without my seed phrase I cannot access my wallet and its assets."
+  />
+  <Agreement
+    name="mnemonic_agreement_two"
+    bind:checked={agreementTwoChecked}
+    label="I understand that securing my recovery phrase is my own responsibility.
         Only I have access to my recovery phrase"
-    />
-  </div>
-</Card>
+  />
+</IconHeaderToggleCard>
 
 <div class="notice">
   <Icon path={mdiAlertOutline} size="large" />

diff --git a/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte b/web-wallet/src/routes/(welcome)/setup/create/MnemonicValidate.svelte
@@ -1,7 +1,8 @@
 <script>
-  import { Card, Icon, Mnemonic } from "$lib/dusk/components";
+  import { Icon, Mnemonic } from "$lib/dusk/components";
   import { arraysEqual, shuffleArray } from "$lib/dusk/array";
   import { mdiAlertOutline } from "@mdi/js";
+  import { IconHeaderToggleCard } from "$lib/containers";
 
   /** @type {boolean} */
   export let isValid = false;
@@ -18,8 +19,7 @@
   $: isValid = arraysEqual(enteredMnemonicPhrase, mnemonicPhrase);
 </script>
 
-<Card gap="medium">
-  <h3 slot="header" class="h4">Verification</h3>
+<IconHeaderToggleCard heading="Verification">
   <p class="mnemonic-notice">Ensure you have backed up the Mnemonic phrase.</p>
   <Mnemonic
     bind:enteredMnemonicPhrase
@@ -32,4 +32,10 @@
       <p>Mnemonic does not match.</p>
     </div>
   {/if}
-</Card>
+</IconHeaderToggleCard>
+
+<style>
+  .mnemonic-notice {
+    margin-bottom: var(--small-gap);
+  }
+</style>