From bdab0c6d98aa2c000019f0560009b10f5525d827 Mon Sep 17 00:00:00 2001
From: Kieran Hall <kieran.hall@gmail.com>
Date: Sat, 31 Aug 2024 14:46:30 +0200
Subject: [PATCH] web-wallet: Split transfer contract UI

Resolves #2175
---
 .../lib/components/Allocate/Allocate.svelte   |  2 +-
 .../src/lib/components/Receive/Receive.svelte |  4 ++-
 .../src/lib/components/Send/Send.svelte       |  3 +-
 .../src/lib/contracts/contract-descriptors.js | 27 +++++++----------
 .../src/routes/(app)/dashboard/+page.svelte   |  8 +++++
 .../(app)/dashboard/receive/+page.svelte      | 30 +++++++++++++++++++
 .../dashboard/receive/__tests__/page.spec.js  | 19 ++++++++++++
 .../routes/(app)/dashboard/send/+page.svelte  | 30 +++++++++++++++++++
 .../dashboard/send/__tests__/page.spec.js     | 19 ++++++++++++
 .../(app)/dashboard/staking/+page.svelte      | 13 +-------
 10 files changed, 124 insertions(+), 31 deletions(-)
 create mode 100644 web-wallet/src/routes/(app)/dashboard/receive/+page.svelte
 create mode 100644 web-wallet/src/routes/(app)/dashboard/receive/__tests__/page.spec.js
 create mode 100644 web-wallet/src/routes/(app)/dashboard/send/+page.svelte
 create mode 100644 web-wallet/src/routes/(app)/dashboard/send/__tests__/page.spec.js

diff --git a/web-wallet/src/lib/components/Allocate/Allocate.svelte b/web-wallet/src/lib/components/Allocate/Allocate.svelte
index e7714c5d07..53af14e372 100644
--- a/web-wallet/src/lib/components/Allocate/Allocate.svelte
+++ b/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);
diff --git a/web-wallet/src/lib/components/Receive/Receive.svelte b/web-wallet/src/lib/components/Receive/Receive.svelte
index 49ed0b4c96..f44d381c19 100644
--- a/web-wallet/src/lib/components/Receive/Receive.svelte
+++ b/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", "");
         }}
diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
index f8c0a36b12..173cd2e1d8 100644
--- a/web-wallet/src/lib/components/Send/Send.svelte
+++ b/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 }}
     >
diff --git a/web-wallet/src/lib/contracts/contract-descriptors.js b/web-wallet/src/lib/contracts/contract-descriptors.js
index 49d4f75f96..8f450b7794 100644
--- a/web-wallet/src/lib/contracts/contract-descriptors.js
+++ b/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:
diff --git a/web-wallet/src/routes/(app)/dashboard/+page.svelte b/web-wallet/src/routes/(app)/dashboard/+page.svelte
index e7dc871644..e2b3a6b213 100644
--- a/web-wallet/src/routes/(app)/dashboard/+page.svelte
+++ b/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;
diff --git a/web-wallet/src/routes/(app)/dashboard/receive/+page.svelte b/web-wallet/src/routes/(app)/dashboard/receive/+page.svelte
new file mode 100644
index 0000000000..7cb2eb95f6
--- /dev/null
+++ b/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>
diff --git a/web-wallet/src/routes/(app)/dashboard/receive/__tests__/page.spec.js b/web-wallet/src/routes/(app)/dashboard/receive/__tests__/page.spec.js
new file mode 100644
index 0000000000..b137b1dc84
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/web-wallet/src/routes/(app)/dashboard/send/+page.svelte b/web-wallet/src/routes/(app)/dashboard/send/+page.svelte
new file mode 100644
index 0000000000..73481d1ac6
--- /dev/null
+++ b/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>
diff --git a/web-wallet/src/routes/(app)/dashboard/send/__tests__/page.spec.js b/web-wallet/src/routes/(app)/dashboard/send/__tests__/page.spec.js
new file mode 100644
index 0000000000..af87b9d211
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/web-wallet/src/routes/(app)/dashboard/staking/+page.svelte b/web-wallet/src/routes/(app)/dashboard/staking/+page.svelte
index 49d20d3081..5f4bad088e 100644
--- a/web-wallet/src/routes/(app)/dashboard/staking/+page.svelte
+++ b/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)}
     />