web-wallet: Split transfer contract UI

Resolves #2175

web-wallet/src/lib/components/Allocate/Allocate.svelte

@@ -314,7 +314,7 @@
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
-      gap: var(--gap-medium);
+      gap: var(--medium-gap);
       align-self: stretch;
 
       border-radius: var(--fieldset-border-radius);

web-wallet/src/lib/components/Receive/Receive.svelte

@@ -4,6 +4,7 @@
   import { createEventDispatcher } from "svelte";
   import { mdiArrowLeft, mdiContentCopy } from "@mdi/js";
 
+  import { AppAnchorButton } from "$lib/components";
   import { Button, QrCode } from "$lib/dusk/components";
   import { toast } from "$lib/dusk/components/Toast/store";
 
@@ -37,9 +38,10 @@
 
   <div class="receive__buttons" bind:offsetHeight={buttonHeight}>
     {#if !hideBackButton}
-      <Button
+      <AppAnchorButton
         className="receive__button"
         icon={{ path: mdiArrowLeft }}
+        href="/dashboard"
         on:click={() => {
           dispatch("operationChange", "");
         }}

web-wallet/src/lib/components/Send/Send.svelte

@@ -92,8 +92,9 @@
       step={0}
       {key}
       backButton={{
-        action: resetOperation,
         disabled: false,
+        href: "/dashboard",
+        isAnchor: true,
       }}
       nextButton={{ disabled: isNextButtonDisabled }}
     >

web-wallet/src/lib/contracts/contract-descriptors.js

@@ -10,22 +10,17 @@ export default [
     disabled:
       import.meta.env.VITE_CONTRACT_TRANSFER_DISABLED &&
       import.meta.env.VITE_CONTRACT_TRANSFER_DISABLED === "true",
-    id: "transfer",
-    label: "Transact",
-    operations: [
-      {
-        disabled: false,
-        id: "send",
-        label: "Send",
-        primary: true,
-      },
-      {
-        disabled: false,
-        id: "receive",
-        label: "Receive",
-        primary: false,
-      },
-    ],
+    id: "send",
+    label: "Send",
+    operations: [],
+  },
+  {
+    disabled:
+      import.meta.env.VITE_CONTRACT_TRANSFER_DISABLED &&
+      import.meta.env.VITE_CONTRACT_TRANSFER_DISABLED === "true",
+    id: "receive",
+    label: "Receive",
+    operations: [],
   },
   {
     disabled:

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

@@ -3,6 +3,8 @@
 <script>
   import { filterWith, hasKeyValue } from "lamb";
   import {
+    mdiArrowBottomLeft,
+    mdiArrowTopRight,
     mdiContain,
     mdiDatabaseOutline,
     mdiSwapVertical,
@@ -26,6 +28,12 @@
       case "allocate":
         icons = [{ path: mdiSync }];
         break;
+      case "receive":
+        icons = [{ path: mdiArrowBottomLeft }];
+        break;
+      case "send":
+        icons = [{ path: mdiArrowTopRight }];
+        break;
       case "staking":
         icons = [{ path: mdiDatabaseOutline }];
         break;

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

@@ -0,0 +1,30 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { onDestroy, onMount } from "svelte";
+  import { TransferContract } from "$lib/containers";
+  import { IconHeadingCard } from "$lib/containers/Cards";
+  import { contractDescriptors, updateOperation } from "$lib/contracts";
+  import { operationsStore } from "$lib/stores";
+  import { mdiSwapVertical } from "@mdi/js";
+
+  onMount(() => {
+    updateOperation("receive");
+  })
+
+  onDestroy(() => {
+    updateOperation("receive");
+  });
+</script>
+
+<IconHeadingCard
+  gap="medium"
+  heading="Transfer"
+  iconPath={mdiSwapVertical}
+  reverse
+>
+  <TransferContract
+    descriptor={contractDescriptors[1]}
+    on:operationChange={({ detail }) => updateOperation(detail)}
+  />
+</IconHeadingCard>

web-wallet/src/routes/(app)/dashboard/receive/__tests__/page.spec.js

@@ -0,0 +1,19 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import Receive from "../+page.svelte";
+
+vi.useFakeTimers();
+
+describe("Receive", () => {
+  afterEach(cleanup);
+
+  // const currentPrice = Promise.resolve({ usd: 0.5 });
+
+  it("should render the receive page", async () => {
+    const { container } = render(Receive);
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,30 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { onDestroy, onMount } from "svelte";
+  import { TransferContract } from "$lib/containers";
+  import { IconHeadingCard } from "$lib/containers/Cards";
+  import { contractDescriptors, updateOperation } from "$lib/contracts";
+  import { operationsStore } from "$lib/stores";
+  import { mdiSwapVertical } from "@mdi/js";
+
+  onMount(() => {
+    updateOperation("send");
+  })
+
+  onDestroy(() => {
+    updateOperation("send");
+  });
+</script>
+
+<IconHeadingCard
+  gap="medium"
+  heading="Send"
+  iconPath={mdiSwapVertical}
+  reverse
+>
+  <TransferContract
+    descriptor={contractDescriptors[0]}
+    on:operationChange={({ detail }) => updateOperation(detail)}
+  />
+</IconHeadingCard>

web-wallet/src/routes/(app)/dashboard/send/__tests__/page.spec.js

@@ -0,0 +1,19 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import Send from "../+page.svelte";
+
+vi.useFakeTimers();
+
+describe("Send", () => {
+  afterEach(cleanup);
+
+  // const currentPrice = Promise.resolve({ usd: 0.5 });
+
+  it("should render the send page", async () => {
+    const { container } = render(Send);
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -8,17 +8,6 @@
   import { contractDescriptors, updateOperation } from "$lib/contracts";
   import { settingsStore } from "$lib/stores";
 
-  /**
-   * @param {keyof SettingsStoreContent} property
-   * @param {any} value
-   */
-  function updateSetting(property, value) {
-    settingsStore.update((store) => ({
-      ...store,
-      [property]: value,
-    }));
-  }
-
   onDestroy(() => {
     updateOperation("");
   });
@@ -32,7 +21,7 @@
     reverse
   >
     <StakeContract
-      descriptor={contractDescriptors[1]}
+      descriptor={contractDescriptors[2]}
       on:operationChange={({ detail }) => updateOperation(detail)}
       on:suppressStakingNotice={() => updateSetting("hideStakingNotice", true)}
     />