From 2f2c2c0d75e3257695e9c67d79c4e7beeb008649 Mon Sep 17 00:00:00 2001
From: Kieran Hall <kieran.hall@gmail.com>
Date: Fri, 23 Aug 2024 17:41:17 +0200
Subject: [PATCH] web-wallet: Add allocation page

Resolves #2106
---
 web-wallet/CHANGELOG.md                       |   2 +
 web-wallet/README.md                          |   2 +-
 .../lib/components/Allocate/Allocate.svelte   | 413 ++++++++++++++++++
 .../src/lib/components/GasFee/GasFee.svelte   |  10 +-
 .../lib/components/__tests__/GasFee.spec.js   |   7 +-
 .../__snapshots__/GasFee.spec.js.snap         |  24 +-
 .../__snapshots__/GasSettings.spec.js.snap    |  48 +-
 .../__tests__/__snapshots__/Send.spec.js.snap |  48 +-
 .../__snapshots__/Stake.spec.js.snap          |  48 +-
 web-wallet/src/lib/components/index.js        |   1 +
 .../AllocateContract/AllocateContract.svelte  |  31 ++
 .../TransferContract/TransferContract.svelte  |   9 +-
 web-wallet/src/lib/containers/index.js        |   3 +-
 .../contracts/__tests__/executeSend.spec.js   |  18 +
 .../__tests__/updateOperation.spec.js         |  16 +
 .../src/lib/contracts/contract-descriptors.js |  15 +
 web-wallet/src/lib/contracts/executeSend.js   |  10 +
 web-wallet/src/lib/contracts/index.js         |   2 +
 .../src/lib/contracts/updateOperation.js      |  11 +
 .../lib/stores/__tests__/walletStore.spec.js  |   2 +-
 web-wallet/src/lib/stores/operationsStore.js  |   7 +-
 web-wallet/src/lib/stores/stores.d.ts         |   4 +
 .../(app)/__mocks__/mockedOperationsStore.js  |   5 +
 .../src/routes/(app)/dashboard/+page.svelte   |  34 +-
 .../(app)/dashboard/allocate/+page.svelte     |  21 +
 .../__tests__/__snapshots__/page.spec.js.snap | 291 ++++++++++++
 .../dashboard/allocate/__tests__/page.spec.js |  31 ++
 .../(app)/dashboard/staking/+page.svelte      |  38 +-
 .../__tests__/__snapshots__/page.spec.js.snap |  93 ++++
 .../dashboard/staking/__tests__/page.spec.js  |  17 +
 .../(app)/dashboard/transfer/+page.svelte     |  35 +-
 .../__tests__/__snapshots__/page.spec.js.snap | 161 +++++++
 .../dashboard/transfer/__tests__/page.spec.js |  17 +
 .../style/app-components/horizontal-rules.css |  15 +
 web-wallet/src/style/dusk/language.css        |  18 +-
 web-wallet/src/style/main.css                 |   4 +
 web-wallet/vite.config.js                     |   4 +-
 37 files changed, 1399 insertions(+), 116 deletions(-)
 create mode 100644 web-wallet/src/lib/components/Allocate/Allocate.svelte
 create mode 100644 web-wallet/src/lib/containers/AllocateContract/AllocateContract.svelte
 create mode 100644 web-wallet/src/lib/contracts/__tests__/executeSend.spec.js
 create mode 100644 web-wallet/src/lib/contracts/__tests__/updateOperation.spec.js
 create mode 100644 web-wallet/src/lib/contracts/executeSend.js
 create mode 100644 web-wallet/src/lib/contracts/updateOperation.js
 create mode 100644 web-wallet/src/routes/(app)/__mocks__/mockedOperationsStore.js
 create mode 100644 web-wallet/src/routes/(app)/dashboard/allocate/+page.svelte
 create mode 100644 web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap
 create mode 100644 web-wallet/src/routes/(app)/dashboard/allocate/__tests__/page.spec.js
 create mode 100644 web-wallet/src/routes/(app)/dashboard/staking/__tests__/__snapshots__/page.spec.js.snap
 create mode 100644 web-wallet/src/routes/(app)/dashboard/staking/__tests__/page.spec.js
 create mode 100644 web-wallet/src/routes/(app)/dashboard/transfer/__tests__/__snapshots__/page.spec.js.snap
 create mode 100644 web-wallet/src/routes/(app)/dashboard/transfer/__tests__/page.spec.js

diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index 6481471c8a..d706b92ea4 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added gas settings validation on Unstake / Widthdraw Rewards flows [#2000]
+- Added allocation (shield/unshield) page and UI [#2196]
 
 ### Changed
 
@@ -18,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update Transactions list design [#1922]
 - Update Buttons to match the design system [#1606]
 - Update `Stepper` component to new design [#2071]
+- Update dashboard to use routes instead of `Tabs` for navigation pattern [#2075]
 
 ### Fixed
 
diff --git a/web-wallet/README.md b/web-wallet/README.md
index ec583725a2..fd86c74669 100644
--- a/web-wallet/README.md
+++ b/web-wallet/README.md
@@ -33,6 +33,7 @@ N.B. the current `0.1.2` version of the library has no option to pick the networ
 ```
 # can be empty string, must start with a slash otherwise, must not end with a slash
 VITE_BASE_PATH=""
+VITE_CONTRACT_ALLOCATE_DISABLED=true
 VITE_CONTRACT_STAKE_DISABLED=false
 VITE_CONTRACT_TRANSFER_DISABLED=false
 VITE_CURRENT_NODE=${VITE_LOCAL_NODE}
@@ -51,7 +52,6 @@ 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/Allocate/Allocate.svelte b/web-wallet/src/lib/components/Allocate/Allocate.svelte
new file mode 100644
index 0000000000..e7714c5d07
--- /dev/null
+++ b/web-wallet/src/lib/components/Allocate/Allocate.svelte
@@ -0,0 +1,413 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { fade } from "svelte/transition";
+  import { createEventDispatcher, onMount } from "svelte";
+  import {
+    mdiArrowUpBoldBoxOutline,
+    mdiShieldLock,
+    mdiShieldLockOpenOutline,
+  } from "@mdi/js";
+  import { areValidGasSettings, deductLuxFeeFrom } from "$lib/contracts";
+  import { duskToLux, luxToDusk } from "$lib/dusk/currency";
+  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
+  import { logo } from "$lib/dusk/icons";
+  import {
+    Badge,
+    Icon,
+    Textbox,
+    Wizard,
+    WizardStep,
+  } from "$lib/dusk/components";
+  import {
+    AppAnchorButton,
+    GasFee,
+    GasSettings,
+    OperationResult,
+  } from "$lib/components";
+
+  /** @type {(to: string, amount: number, gasPrice: number, gasLimit: number) => Promise<string>} */
+  export let execute;
+
+  /** @type {(amount: number) => string} */
+  export let formatter;
+
+  /** @type {ContractGasSettings} */
+  export let gasSettings;
+
+  /** @type {GasStoreContent} */
+  export let gasLimits;
+
+  /** @type {string} */
+  export let shieldedAddress;
+
+  /** @type {string} */
+  export let unshieldedAddress;
+
+  /** @type {number} */
+  export let shieldedBalance;
+
+  /** @type {number} */
+  export let unshieldedBalance;
+
+  /** @type {boolean} */
+  let isNextButtonDisabled = false;
+
+  /** @type {boolean} */
+  let isGasValid = false;
+
+  let { gasLimit, gasPrice } = gasSettings;
+
+  /** @type {number} */
+  let shieldedAmount = shieldedBalance;
+
+  /** @type {number} */
+  let unshieldedAmount = unshieldedBalance;
+
+  /** @type {number} */
+  let screenWidth = window.innerWidth;
+
+  const minAmount = 0.000000001;
+  const dispatch = createEventDispatcher();
+  const resetOperation = () => dispatch("operationChange", "");
+
+  onMount(() => {
+    isGasValid = areValidGasSettings(gasPrice, gasLimit);
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+
+      screenWidth = entry.contentRect.width;
+    });
+
+    resizeObserver.observe(document.body);
+
+    return () => resizeObserver.disconnect();
+  });
+
+  $: luxFee = gasLimit * gasPrice;
+  $: fee = formatter(luxToDusk(luxFee));
+  $: isFromUnshielded = shieldedAmount > shieldedBalance;
+  $: isFromShielded = unshieldedAmount > unshieldedBalance;
+  $: isNextButtonDisabled = !(isFromUnshielded || isFromShielded);
+</script>
+
+<div class="operation">
+  <Wizard steps={3} let:key>
+    <WizardStep
+      step={0}
+      {key}
+      backButton={{
+        disabled: false,
+        href: "/dashboard",
+        isAnchor: true,
+      }}
+      nextButton={{ disabled: isNextButtonDisabled }}
+    >
+      <div in:fade|global class="operation__send">
+        <p>
+          Edit the value to change the allocation of your Dusk between your
+          shielded or public account.
+        </p>
+
+        <fieldset class="operation__fieldset">
+          <div class="operation__send-amount operation__label">Shielded</div>
+
+          <div
+            class="operation__send-amount operation__address operation__space-between"
+          >
+            <Icon path={mdiShieldLock} />
+            {middleEllipsis(
+              shieldedAddress,
+              calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20)
+            )}
+          </div>
+
+          <div class="operation__send-amount operation__input">
+            <Textbox
+              className="operation__input-field"
+              bind:value={shieldedAmount}
+              required
+              type="number"
+              min={minAmount}
+              max={deductLuxFeeFrom(
+                shieldedBalance + unshieldedBalance,
+                luxFee
+              )}
+              step="0.000000001"
+              on:input={() => {
+                unshieldedAmount = +(
+                  shieldedBalance +
+                  unshieldedBalance -
+                  shieldedAmount
+                ).toFixed(9);
+              }}
+            />
+            <Icon
+              data-tooltip-id="main-tooltip"
+              data-tooltip-text="DUSK"
+              path={logo}
+            />
+          </div>
+
+          <hr class="glyph" />
+
+          <div class="operation__send-amount operation__label">Unshielded</div>
+
+          <div
+            class="operation__send-amount operation__address operation__space-between"
+          >
+            <Icon path={mdiShieldLockOpenOutline} />
+            {middleEllipsis(
+              unshieldedAddress,
+              calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20)
+            )}
+          </div>
+
+          <div class="operation__send-amount operation__input">
+            <Textbox
+              className="operation__input-field"
+              bind:value={unshieldedAmount}
+              required
+              type="number"
+              min={minAmount}
+              max={deductLuxFeeFrom(
+                unshieldedBalance + shieldedBalance,
+                luxFee
+              )}
+              step="0.000000001"
+              id="unshielded-amount"
+              on:input={() => {
+                shieldedAmount = +(
+                  unshieldedBalance +
+                  shieldedBalance -
+                  unshieldedAmount
+                ).toFixed(9);
+              }}
+            />
+            <Icon
+              data-tooltip-id="main-tooltip"
+              data-tooltip-text="DUSK"
+              path={logo}
+            />
+          </div>
+        </fieldset>
+
+        <GasSettings
+          {fee}
+          limit={gasSettings.gasLimit}
+          limitLower={gasLimits.gasLimitLower}
+          limitUpper={gasLimits.gasLimitUpper}
+          price={gasSettings.gasPrice}
+          priceLower={gasLimits.gasPriceLower}
+          on:gasSettings={(event) => {
+            isGasValid = areValidGasSettings(
+              event.detail.price,
+              event.detail.limit
+            );
+
+            if (isGasValid) {
+              gasPrice = event.detail.price;
+              gasLimit = event.detail.limit;
+            }
+          }}
+        />
+      </div>
+    </WizardStep>
+    <WizardStep
+      step={1}
+      {key}
+      nextButton={{
+        icon: { path: mdiArrowUpBoldBoxOutline, position: "before" },
+        label: "SEND",
+        variant: "primary",
+      }}
+    >
+      <div in:fade|global class="operation__send">
+        <Badge
+          className="operation__review-notice"
+          text="REVIEW TRANSACTION"
+          variant="warning"
+        />
+        <dl class="operation__review-transaction">
+          <dt class="review-transaction__label">
+            <Icon path={mdiArrowUpBoldBoxOutline} />
+            <span>Amount:</span>
+          </dt>
+          <dd class="review-transaction__value operation__review-amount">
+            <span>
+              {isFromUnshielded
+                ? `${formatter(luxToDusk(duskToLux(unshieldedBalance) - duskToLux(unshieldedAmount)))} DUSK`
+                : `${formatter(luxToDusk(duskToLux(shieldedBalance) - duskToLux(shieldedAmount)))} DUSK`}
+            </span>
+            <Icon
+              className="dusk-amount__icon"
+              path={logo}
+              data-tooltip-id="main-tooltip"
+              data-tooltip-text="DUSK"
+            />
+          </dd>
+        </dl>
+        <dl class="operation__review-transaction">
+          <dt class="review-transaction__label">
+            <Icon
+              path={isFromUnshielded ? mdiShieldLockOpenOutline : mdiShieldLock}
+            />
+            <span>From</span>
+          </dt>
+          <dd class="operation__review-address">
+            <span>
+              {isFromUnshielded ? unshieldedAddress : shieldedAddress}
+            </span>
+          </dd>
+        </dl>
+        <dl class="operation__review-transaction">
+          <dt class="review-transaction__label">
+            <Icon
+              path={isFromShielded ? mdiShieldLockOpenOutline : mdiShieldLock}
+            />
+            <span>To</span>
+          </dt>
+          <dd class="operation__review-address">
+            <span>
+              {isFromShielded ? unshieldedAddress : shieldedAddress}
+            </span>
+          </dd>
+        </dl>
+        <GasFee {fee} />
+      </div>
+    </WizardStep>
+    <WizardStep step={2} {key} showNavigation={false}>
+      <OperationResult
+        errorMessage="Transaction failed"
+        onBeforeLeave={resetOperation}
+        operation={execute(
+          isFromShielded ? unshieldedAddress : shieldedAddress,
+          isFromShielded ? unshieldedAmount : shieldedAmount,
+          gasPrice,
+          gasLimit
+        )}
+        pendingMessage="Processing transaction"
+        successMessage="Transaction completed"
+      >
+        <svelte:fragment slot="success-content" let:result={hash}>
+          {#if hash}
+            <AppAnchorButton
+              href={`https://explorer.dusk.network/transactions/transaction?id=${hash}`}
+              on:click={resetOperation}
+              text="VIEW ON BLOCK EXPLORER"
+              rel="noopener noreferrer"
+              target="_blank"
+            />
+          {/if}
+        </svelte:fragment>
+      </OperationResult>
+    </WizardStep>
+  </Wizard>
+</div>
+
+<style lang="postcss">
+  .operation {
+    &__fieldset {
+      display: flex;
+      padding: 1em 1.25em;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: var(--gap-medium);
+      align-self: stretch;
+
+      border-radius: var(--fieldset-border-radius);
+      background: var(--fieldset-background-color);
+    }
+
+    &__address {
+      font-family: var(--mono-font-family);
+    }
+
+    &__review-address {
+      background-color: transparent;
+      border: 1px solid var(--primary-color);
+      border-radius: 1.5em;
+      padding: 0.75em 1em;
+      width: 100%;
+      line-break: anywhere;
+    }
+
+    &__review-transaction {
+      display: flex;
+      flex-direction: column;
+      gap: 0.625em;
+    }
+
+    &__review-amount {
+      justify-content: flex-start;
+    }
+
+    &__send {
+      display: flex;
+      flex-direction: column;
+      gap: 1.2em;
+    }
+
+    &__label {
+      font-family: var(--mono-font-family);
+    }
+
+    &__send-amount {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    &__space-between {
+      justify-content: space-between;
+    }
+
+    &__input {
+      column-gap: var(--default-gap);
+    }
+
+    :global(&__input &__input-field) {
+      width: 100%;
+      padding: 0.5em 1em;
+    }
+
+    :global(&__input-field:invalid) {
+      color: var(--error-color);
+    }
+
+    :global(&__send-address) {
+      width: 100%;
+    }
+
+    :global(&__review-notice) {
+      text-align: center;
+    }
+
+    :global(.dusk-amount__icon) {
+      width: 1em;
+      height: 1em;
+      flex-shrink: 0;
+    }
+  }
+
+  .review-transaction__label,
+  .review-transaction__value {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--small-gap);
+  }
+
+  .review-transaction__value {
+    font-weight: bold;
+  }
+
+  :global(.operation__send-address--invalid) {
+    color: var(--error-color);
+  }
+
+  hr.glyph:after {
+    content: "↑↓";
+  }
+</style>
diff --git a/web-wallet/src/lib/components/GasFee/GasFee.svelte b/web-wallet/src/lib/components/GasFee/GasFee.svelte
index 205cb44020..020b3f8fdf 100644
--- a/web-wallet/src/lib/components/GasFee/GasFee.svelte
+++ b/web-wallet/src/lib/components/GasFee/GasFee.svelte
@@ -7,9 +7,9 @@
 </script>
 
 <div class="gas-fee">
-  <span>Max Gas Fee:</span>
+  <span>Fee:</span>
   <div class="gas-fee__amount">
-    <span class="gas-fee__amount-value">{fee}</span>
+    <div class="gas-fee__amount-value"><span>max</span> <span>{fee}</span></div>
     <Icon
       className="dusk-amount__icon"
       path={logo}
@@ -35,6 +35,12 @@
 
     &__amount-value {
       font-weight: 600;
+      display: flex;
+      gap: var(--small-gap);
+
+      & > span:first-of-type {
+        font-weight: initial;
+      }
     }
   }
 
diff --git a/web-wallet/src/lib/components/__tests__/GasFee.spec.js b/web-wallet/src/lib/components/__tests__/GasFee.spec.js
index 311396e2dd..34b993001c 100644
--- a/web-wallet/src/lib/components/__tests__/GasFee.spec.js
+++ b/web-wallet/src/lib/components/__tests__/GasFee.spec.js
@@ -21,9 +21,10 @@ describe("GasFee", () => {
     };
     const { container } = render(GasFee, baseProps);
 
-    expect(container.querySelector(".gas-fee__amount-value")?.innerHTML).toBe(
-      fee
-    );
+    expect(
+      container.querySelector(".gas-fee__amount-value span:nth-child(2)")
+        ?.innerHTML
+    ).toBe(fee);
 
     expect(container.firstChild).toMatchSnapshot();
   });
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/GasFee.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/GasFee.spec.js.snap
index 3e98c31e82..6f8d22f8ed 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/GasFee.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/GasFee.spec.js.snap
@@ -2,20 +2,30 @@
 
 exports[`GasFee > renders the GasFee component 1`] = `
 <div
-  class="gas-fee svelte-x1l5rc"
+  class="gas-fee svelte-1c6b481"
 >
   <span>
-    Max Gas Fee:
+    Fee:
   </span>
    
   <div
-    class="gas-fee__amount svelte-x1l5rc"
+    class="gas-fee__amount svelte-1c6b481"
   >
-    <span
-      class="gas-fee__amount-value svelte-x1l5rc"
+    <div
+      class="gas-fee__amount-value svelte-1c6b481"
     >
-      0.020000000
-    </span>
+      <span
+        class="svelte-1c6b481"
+      >
+        max
+      </span>
+       
+      <span
+        class="svelte-1c6b481"
+      >
+        0.020000000
+      </span>
+    </div>
      
     <svg
       class="dusk-icon dusk-icon--size--default dusk-amount__icon"
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/GasSettings.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/GasSettings.spec.js.snap
index 361fdbe946..3afab101b7 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/GasSettings.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/GasSettings.spec.js.snap
@@ -8,20 +8,30 @@ exports[`GasSettings > renders the GasSettings component closed 1`] = `
     class="gas-settings__edit svelte-1daay07"
   >
     <div
-      class="gas-fee svelte-x1l5rc"
+      class="gas-fee svelte-1c6b481"
     >
       <span>
-        Max Gas Fee:
+        Fee:
       </span>
        
       <div
-        class="gas-fee__amount svelte-x1l5rc"
+        class="gas-fee__amount svelte-1c6b481"
       >
-        <span
-          class="gas-fee__amount-value svelte-x1l5rc"
+        <div
+          class="gas-fee__amount-value svelte-1c6b481"
         >
-          0.020000000
-        </span>
+          <span
+            class="svelte-1c6b481"
+          >
+            max
+          </span>
+           
+          <span
+            class="svelte-1c6b481"
+          >
+            0.020000000
+          </span>
+        </div>
          
         <svg
           class="dusk-icon dusk-icon--size--default dusk-amount__icon"
@@ -62,20 +72,30 @@ exports[`GasSettings > renders the GasSettings component opened 1`] = `
     class="gas-settings__edit svelte-1daay07"
   >
     <div
-      class="gas-fee svelte-x1l5rc"
+      class="gas-fee svelte-1c6b481"
     >
       <span>
-        Max Gas Fee:
+        Fee:
       </span>
        
       <div
-        class="gas-fee__amount svelte-x1l5rc"
+        class="gas-fee__amount svelte-1c6b481"
       >
-        <span
-          class="gas-fee__amount-value svelte-x1l5rc"
+        <div
+          class="gas-fee__amount-value svelte-1c6b481"
         >
-          0.020000000
-        </span>
+          <span
+            class="svelte-1c6b481"
+          >
+            max
+          </span>
+           
+          <span
+            class="svelte-1c6b481"
+          >
+            0.020000000
+          </span>
+        </div>
          
         <svg
           class="dusk-icon dusk-icon--size--default dusk-amount__icon"
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap
index a59ca0e6cb..d90f6f932d 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap
@@ -258,20 +258,30 @@ exports[`Send > Amount step > should render the Send component Amount step 1`] =
           class="gas-settings__edit svelte-1daay07"
         >
           <div
-            class="gas-fee svelte-x1l5rc"
+            class="gas-fee svelte-1c6b481"
           >
             <span>
-              Max Gas Fee:
+              Fee:
             </span>
              
             <div
-              class="gas-fee__amount svelte-x1l5rc"
+              class="gas-fee__amount svelte-1c6b481"
             >
-              <span
-                class="gas-fee__amount-value svelte-x1l5rc"
+              <div
+                class="gas-fee__amount-value svelte-1c6b481"
               >
-                0.020000000
-              </span>
+                <span
+                  class="svelte-1c6b481"
+                >
+                  max
+                </span>
+                 
+                <span
+                  class="svelte-1c6b481"
+                >
+                  0.020000000
+                </span>
+              </div>
                
               <svg
                 class="dusk-icon dusk-icon--size--default dusk-amount__icon"
@@ -496,20 +506,30 @@ exports[`Send > Review step > should render the Send component Review step 1`] =
       </dl>
        
       <div
-        class="gas-fee svelte-x1l5rc"
+        class="gas-fee svelte-1c6b481"
       >
         <span>
-          Max Gas Fee:
+          Fee:
         </span>
          
         <div
-          class="gas-fee__amount svelte-x1l5rc"
+          class="gas-fee__amount svelte-1c6b481"
         >
-          <span
-            class="gas-fee__amount-value svelte-x1l5rc"
+          <div
+            class="gas-fee__amount-value svelte-1c6b481"
           >
-            0.020000000
-          </span>
+            <span
+              class="svelte-1c6b481"
+            >
+              max
+            </span>
+             
+            <span
+              class="svelte-1c6b481"
+            >
+              0.020000000
+            </span>
+          </div>
            
           <svg
             class="dusk-icon dusk-icon--size--default dusk-amount__icon"
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
index f1323aa0e0..55157dfe17 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
@@ -149,20 +149,30 @@ exports[`Stake > should render the Stake component 1`] = `
         class="gas-settings__edit svelte-1daay07"
       >
         <div
-          class="gas-fee svelte-x1l5rc"
+          class="gas-fee svelte-1c6b481"
         >
           <span>
-            Max Gas Fee:
+            Fee:
           </span>
            
           <div
-            class="gas-fee__amount svelte-x1l5rc"
+            class="gas-fee__amount svelte-1c6b481"
           >
-            <span
-              class="gas-fee__amount-value svelte-x1l5rc"
+            <div
+              class="gas-fee__amount-value svelte-1c6b481"
             >
-              0.020000000
-            </span>
+              <span
+                class="svelte-1c6b481"
+              >
+                max
+              </span>
+               
+              <span
+                class="svelte-1c6b481"
+              >
+                0.020000000
+              </span>
+            </div>
              
             <svg
               class="dusk-icon dusk-icon--size--default dusk-amount__icon"
@@ -548,20 +558,30 @@ exports[`Stake > should render the review step of the Stake component 1`] = `
       </dl>
        
       <div
-        class="gas-fee svelte-x1l5rc"
+        class="gas-fee svelte-1c6b481"
       >
         <span>
-          Max Gas Fee:
+          Fee:
         </span>
          
         <div
-          class="gas-fee__amount svelte-x1l5rc"
+          class="gas-fee__amount svelte-1c6b481"
         >
-          <span
-            class="gas-fee__amount-value svelte-x1l5rc"
+          <div
+            class="gas-fee__amount-value svelte-1c6b481"
           >
-            0.020000000
-          </span>
+            <span
+              class="svelte-1c6b481"
+            >
+              max
+            </span>
+             
+            <span
+              class="svelte-1c6b481"
+            >
+              0.020000000
+            </span>
+          </div>
            
           <svg
             class="dusk-icon dusk-icon--size--default dusk-amount__icon"
diff --git a/web-wallet/src/lib/components/index.js b/web-wallet/src/lib/components/index.js
index cb7aecd03a..a4914716ab 100644
--- a/web-wallet/src/lib/components/index.js
+++ b/web-wallet/src/lib/components/index.js
@@ -1,4 +1,5 @@
 export { default as AddressPicker } from "./AddressPicker/AddressPicker.svelte";
+export { default as Allocate } from "./Allocate/Allocate.svelte";
 export { default as AppAnchor } from "./AppAnchor/AppAnchor.svelte";
 export { default as AppAnchorButton } from "./AppAnchorButton/AppAnchorButton.svelte";
 export { default as AppImage } from "./AppImage/AppImage.svelte";
diff --git a/web-wallet/src/lib/containers/AllocateContract/AllocateContract.svelte b/web-wallet/src/lib/containers/AllocateContract/AllocateContract.svelte
new file mode 100644
index 0000000000..ebc52b3615
--- /dev/null
+++ b/web-wallet/src/lib/containers/AllocateContract/AllocateContract.svelte
@@ -0,0 +1,31 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { collect, getKey, pick } from "lamb";
+  import { createCurrencyFormatter } from "$lib/dusk/currency";
+  import { executeSend } from "$lib/contracts";
+  import { gasStore, settingsStore, walletStore } from "$lib/stores";
+  import { Allocate } from "$lib/components";
+
+  const collectSettings = collect([
+    pick(["gasLimit", "gasPrice"]),
+    getKey("language"),
+  ]);
+  const gasLimits = $gasStore;
+
+  $: [gasSettings, language] = collectSettings($settingsStore);
+  $: ({ balance, currentAddress } = $walletStore);
+  $: duskFormatter = createCurrencyFormatter(language, "DUSK", 9);
+</script>
+
+<Allocate
+  shieldedAddress={currentAddress}
+  unshieldedAddress={currentAddress}
+  shieldedBalance={balance.maximum}
+  unshieldedBalance={balance.maximum}
+  execute={executeSend}
+  formatter={duskFormatter}
+  {gasLimits}
+  {gasSettings}
+  on:operationChange
+/>
diff --git a/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte b/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte
index 2458419151..496fb0001a 100644
--- a/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte
+++ b/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte
@@ -11,9 +11,8 @@
     setKey,
     when,
   } from "lamb";
-
+  import { executeSend } from "$lib/contracts";
   import { createCurrencyFormatter } from "$lib/dusk/currency";
-  import { getLastTransactionHash } from "$lib/transactions";
   import {
     gasStore,
     operationsStore,
@@ -30,12 +29,6 @@
   /** @type {ContractDescriptor} */
   export let descriptor;
 
-  /** @type {(to: string, amount: number, gasPrice:number, gasLimit:number) => Promise<string>} */
-  const executeSend = (to, amount, gasPrice, gasLimit) =>
-    walletStore
-      .transfer(to, amount, gasPrice, gasLimit)
-      .then(getLastTransactionHash);
-
   const collectSettings = collect([
     pick(["gasLimit", "gasPrice"]),
     getKey("language"),
diff --git a/web-wallet/src/lib/containers/index.js b/web-wallet/src/lib/containers/index.js
index 2387cdbe37..0c1394e722 100644
--- a/web-wallet/src/lib/containers/index.js
+++ b/web-wallet/src/lib/containers/index.js
@@ -1,3 +1,4 @@
+export { default as AllocateContract } from "./AllocateContract/AllocateContract.svelte";
+export { default as MigrateContract } from "./MigrateContract/MigrateContract.svelte";
 export { default as StakeContract } from "./StakeContract/StakeContract.svelte";
 export { default as TransferContract } from "./TransferContract/TransferContract.svelte";
-export { default as MigrateContract } from "./MigrateContract/MigrateContract.svelte";
diff --git a/web-wallet/src/lib/contracts/__tests__/executeSend.spec.js b/web-wallet/src/lib/contracts/__tests__/executeSend.spec.js
new file mode 100644
index 0000000000..0ed2b2f10d
--- /dev/null
+++ b/web-wallet/src/lib/contracts/__tests__/executeSend.spec.js
@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { executeSend } from "..";
+
+describe("executeSend", () => {
+  it("should attempt to call the transfer method on the wallet ", async () => {
+    try {
+      await executeSend(
+        "abc",
+        1000,
+        import.meta.env.VITE_GAS_PRICE_DEFAULT,
+        import.meta.env.VITE_GAS_LIMIT_DEFAULT
+      );
+    } catch (e) {
+      // @ts-ignore
+      expect(e.message).toBe("No wallet instance to sync");
+    }
+  });
+});
diff --git a/web-wallet/src/lib/contracts/__tests__/updateOperation.spec.js b/web-wallet/src/lib/contracts/__tests__/updateOperation.spec.js
new file mode 100644
index 0000000000..64b45145c6
--- /dev/null
+++ b/web-wallet/src/lib/contracts/__tests__/updateOperation.spec.js
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { updateOperation } from "..";
+import { get } from "svelte/store";
+import { operationsStore } from "$lib/stores";
+
+describe("updateOperation", () => {
+  it("should check to see if the store is writeable", () => {
+    // @ts-ignore
+    expect(() => operationsStore.set("value")).toBeTruthy();
+  });
+
+  it("should set the current operation in the operationStore", () => {
+    updateOperation("some operation");
+    expect(get(operationsStore).currentOperation).toBe("some operation");
+  });
+});
diff --git a/web-wallet/src/lib/contracts/contract-descriptors.js b/web-wallet/src/lib/contracts/contract-descriptors.js
index 50afc04304..49d4f75f96 100644
--- a/web-wallet/src/lib/contracts/contract-descriptors.js
+++ b/web-wallet/src/lib/contracts/contract-descriptors.js
@@ -54,4 +54,19 @@ export default [
       },
     ],
   },
+  {
+    disabled:
+      import.meta.env.VITE_CONTRACT_ALLOCATE_DISABLED &&
+      import.meta.env.VITE_CONTRACT_ALLOCATE_DISABLED === "true",
+    id: "allocate",
+    label: "Shield / Unshield",
+    operations: [
+      {
+        disabled: false,
+        id: "send",
+        label: "send",
+        primary: true,
+      },
+    ],
+  },
 ];
diff --git a/web-wallet/src/lib/contracts/executeSend.js b/web-wallet/src/lib/contracts/executeSend.js
new file mode 100644
index 0000000000..6bc3e4cc63
--- /dev/null
+++ b/web-wallet/src/lib/contracts/executeSend.js
@@ -0,0 +1,10 @@
+import { getLastTransactionHash } from "$lib/transactions";
+import { walletStore } from "$lib/stores";
+
+/** @type {(to: string, amount: number, gasPrice:number, gasLimit:number) => Promise<string>} */
+const executeSend = (to, amount, gasPrice, gasLimit) =>
+  walletStore
+    .transfer(to, amount, gasPrice, gasLimit)
+    .then(getLastTransactionHash);
+
+export default executeSend;
diff --git a/web-wallet/src/lib/contracts/index.js b/web-wallet/src/lib/contracts/index.js
index e71743ccff..bb1d1ea387 100644
--- a/web-wallet/src/lib/contracts/index.js
+++ b/web-wallet/src/lib/contracts/index.js
@@ -1,3 +1,5 @@
 export { default as contractDescriptors } from "./contract-descriptors";
 export { default as deductLuxFeeFrom } from "./deductLuxFeeFrom";
+export { default as executeSend } from "./executeSend";
 export { default as areValidGasSettings } from "./areValidGasSettings";
+export { default as updateOperation } from "./updateOperation";
diff --git a/web-wallet/src/lib/contracts/updateOperation.js b/web-wallet/src/lib/contracts/updateOperation.js
new file mode 100644
index 0000000000..a3ebdfe992
--- /dev/null
+++ b/web-wallet/src/lib/contracts/updateOperation.js
@@ -0,0 +1,11 @@
+import { operationsStore } from "$lib/stores";
+
+/** @param {string} id */
+function updateOperation(id) {
+  operationsStore.update((store) => ({
+    ...store,
+    currentOperation: id,
+  }));
+}
+
+export default updateOperation;
diff --git a/web-wallet/src/lib/stores/__tests__/walletStore.spec.js b/web-wallet/src/lib/stores/__tests__/walletStore.spec.js
index 2381c601ad..467f28910c 100644
--- a/web-wallet/src/lib/stores/__tests__/walletStore.spec.js
+++ b/web-wallet/src/lib/stores/__tests__/walletStore.spec.js
@@ -500,7 +500,7 @@ describe("walletStore", async () => {
         walletStore.reset();
       });
 
-      it("should return a rejected promise with the operation error if an operation fails and try a sync afterwards nonetheless", async () => {
+      it("should return a rejected promise with the operation error if an operation fails and try a sync afterwards", async () => {
         await walletStore.init(wallet);
         await vi.advanceTimersToNextTimerAsync();
 
diff --git a/web-wallet/src/lib/stores/operationsStore.js b/web-wallet/src/lib/stores/operationsStore.js
index b0fa02b8ce..806ba7a140 100644
--- a/web-wallet/src/lib/stores/operationsStore.js
+++ b/web-wallet/src/lib/stores/operationsStore.js
@@ -1,6 +1,9 @@
 import { writable } from "svelte/store";
 
-/** @type {import("svelte/store").Writable<{ currentOperation: string }>} */
-const count = writable({ currentOperation: "" });
+/** @type OperationsStoreContent */
+const initialState = { currentOperation: "" };
+
+/** @type OperationsStore */
+const count = writable(initialState);
 
 export default count;
diff --git a/web-wallet/src/lib/stores/stores.d.ts b/web-wallet/src/lib/stores/stores.d.ts
index 6a9d10678b..4f9abe431b 100644
--- a/web-wallet/src/lib/stores/stores.d.ts
+++ b/web-wallet/src/lib/stores/stores.d.ts
@@ -31,6 +31,10 @@ type TransactionsStoreContent = { transactions: Transaction[] };
 
 type TransactionsStore = Readable<TransactionsStoreContent>;
 
+type OperationsStoreContent = { currentOperation: string };
+
+type OperationsStore = Writable<OperationsStoreContent>;
+
 type WalletStoreContent = {
   balance: {
     maximum: number;
diff --git a/web-wallet/src/routes/(app)/__mocks__/mockedOperationsStore.js b/web-wallet/src/routes/(app)/__mocks__/mockedOperationsStore.js
new file mode 100644
index 0000000000..a28d7e379c
--- /dev/null
+++ b/web-wallet/src/routes/(app)/__mocks__/mockedOperationsStore.js
@@ -0,0 +1,5 @@
+import { mockReadableStore } from "$lib/dusk/test-helpers";
+
+const content = { currentOperation: "something" };
+
+export default mockReadableStore(content);
diff --git a/web-wallet/src/routes/(app)/dashboard/+page.svelte b/web-wallet/src/routes/(app)/dashboard/+page.svelte
index 440bca589a..e7dc871644 100644
--- a/web-wallet/src/routes/(app)/dashboard/+page.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/+page.svelte
@@ -2,7 +2,12 @@
 
 <script>
   import { filterWith, hasKeyValue } from "lamb";
-  import { mdiContain, mdiDatabaseOutline, mdiSwapVertical } from "@mdi/js";
+  import {
+    mdiContain,
+    mdiDatabaseOutline,
+    mdiSwapVertical,
+    mdiSync,
+  } from "@mdi/js";
   import { Icon } from "$lib/dusk/components";
   import { DashboardNav, Transactions } from "$lib/components";
   import { settingsStore, walletStore } from "$lib/stores";
@@ -10,12 +15,36 @@
 
   const { dashboardTransactionLimit, language } = $settingsStore;
 
+  /**
+   * @param {string} contract
+   */
+  function getIconsForContract(contract) {
+    /** @type {Array.<DashboardNavItemIconProp>} */
+    let icons = [{ path: "" }];
+
+    switch (contract) {
+      case "allocate":
+        icons = [{ path: mdiSync }];
+        break;
+      case "staking":
+        icons = [{ path: mdiDatabaseOutline }];
+        break;
+      case "transfer":
+        icons = [{ path: mdiSwapVertical }];
+        break;
+      default:
+        break;
+    }
+
+    return icons;
+  }
+
   /** @type {(descriptors: ContractDescriptor[]) => ContractDescriptor[]} */
   const getEnabledContracts = filterWith(hasKeyValue("disabled", false));
   const enabledContracts = getEnabledContracts(contractDescriptors);
   const dashboardNavItems = enabledContracts.map(({ id, label }) => ({
     href: id,
-    icons: [{ path: id === "transfer" ? mdiSwapVertical : mdiDatabaseOutline }],
+    icons: getIconsForContract(id),
     id,
     label,
   }));
@@ -67,7 +96,6 @@
     & p:not(:last-child) {
       margin-bottom: 1em;
     }
-
     h4 {
       margin-bottom: 0.5em;
     }
diff --git a/web-wallet/src/routes/(app)/dashboard/allocate/+page.svelte b/web-wallet/src/routes/(app)/dashboard/allocate/+page.svelte
new file mode 100644
index 0000000000..f72cf47f05
--- /dev/null
+++ b/web-wallet/src/routes/(app)/dashboard/allocate/+page.svelte
@@ -0,0 +1,21 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { onDestroy } from "svelte";
+  import { mdiSync } from "@mdi/js";
+  import { AllocateContract } from "$lib/containers";
+  import { updateOperation } from "$lib/contracts";
+  import { IconHeadingCard } from "$lib/containers/Cards";
+
+  onDestroy(() => {
+    updateOperation("");
+  });
+</script>
+
+{#if !!import.meta.env.VITE_CONTRACT_ALLOCATE_DISABLED}
+  <IconHeadingCard heading="Shield / Unshield" iconPath={mdiSync} reverse>
+    <AllocateContract
+      on:operationChange={({ detail }) => updateOperation(detail)}
+    />
+  </IconHeadingCard>
+{/if}
diff --git a/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap
new file mode 100644
index 0000000000..12335431b5
--- /dev/null
+++ b/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap
@@ -0,0 +1,291 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Allocate > should render the allocation page 1`] = `
+<div
+  class="dusk-card dusk-card--gap-default"
+>
+  <div
+    class="dusk-card__header-container"
+  >
+    <header
+      class="dusk-card__header"
+      slot="header"
+    >
+      <div
+        class="dusk-card__heading-container dusk-card__heading-container--reverse"
+      >
+        <svg
+          class="dusk-icon dusk-icon--size--default dusk-card__heading-icon"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
+          />
+        </svg>
+        
+         
+        <h3
+          class="h4"
+        >
+          Shield / Unshield
+        </h3>
+      </div>
+    </header>
+  </div>
+   
+  <div
+    class="dusk-card__body-container"
+  >
+    <div
+      class="operation svelte-1u9bchi"
+    >
+      <div
+        class="dusk-wizard"
+      >
+         
+         
+        <div
+          class="operation__send svelte-1u9bchi"
+        >
+          <p>
+            Edit the value to change the allocation of your Dusk between your
+          shielded or public account.
+          </p>
+           
+          <fieldset
+            class="operation__fieldset svelte-1u9bchi"
+          >
+            <div
+              class="operation__send-amount operation__label svelte-1u9bchi"
+            >
+              Shielded
+            </div>
+             
+            <div
+              class="operation__send-amount operation__address operation__space-between svelte-1u9bchi"
+            >
+              <svg
+                class="dusk-icon dusk-icon--size--default"
+                role="graphics-symbol"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.1 14.8,9.5V11C15.4,11 16,11.6 16,12.3V15.8C16,16.4 15.4,17 14.7,17H9.2C8.6,17 8,16.4 8,15.7V12.2C8,11.6 8.6,11 9.2,11V9.5C9.2,8.1 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,9.5V11H13.5V9.5C13.5,8.7 12.8,8.2 12,8.2Z"
+                />
+              </svg>
+              
+               
+              
+            </div>
+             
+            <div
+              class="operation__send-amount operation__input svelte-1u9bchi"
+            >
+              <input
+                class="dusk-textbox dusk-textbox-number operation__input-field"
+                max="-0.02"
+                min="1e-9"
+                required=""
+                step="0.000000001"
+                type="number"
+              />
+              
+               
+              <svg
+                class="dusk-icon dusk-icon--size--default"
+                data-tooltip-id="main-tooltip"
+                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>
+              
+            </div>
+             
+            <hr
+              class="glyph svelte-1u9bchi"
+            />
+             
+            <div
+              class="operation__send-amount operation__label svelte-1u9bchi"
+            >
+              Unshielded
+            </div>
+             
+            <div
+              class="operation__send-amount operation__address operation__space-between svelte-1u9bchi"
+            >
+              <svg
+                class="dusk-icon dusk-icon--size--default"
+                role="graphics-symbol"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M21 11C21 16.5 17.2 21.7 12 23C6.8 21.7 3 16.5 3 11V5L12 1L21 5V11M12 21C15.8 20 19 15.5 19 11.2V6.3L12 3.2L5 6.3V11.2C5 15.5 8.2 20 12 21M14.8 11H10.5V8.5C10.5 7.7 11.2 7.2 12 7.2S13.5 7.7 13.5 8.5V9H14.8V8.5C14.8 7.1 13.4 6 12 6S9.2 7.1 9.2 8.5V11C8.6 11 8 11.6 8 12.2V15.7C8 16.4 8.6 17 9.2 17H14.7C15.4 17 16 16.4 16 15.8V12.3C16 11.6 15.4 11 14.8 11Z"
+                />
+              </svg>
+              
+               
+              
+            </div>
+             
+            <div
+              class="operation__send-amount operation__input svelte-1u9bchi"
+            >
+              <input
+                class="dusk-textbox dusk-textbox-number operation__input-field"
+                id="unshielded-amount"
+                max="-0.02"
+                min="1e-9"
+                required=""
+                step="0.000000001"
+                type="number"
+              />
+              
+               
+              <svg
+                class="dusk-icon dusk-icon--size--default"
+                data-tooltip-id="main-tooltip"
+                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>
+              
+            </div>
+          </fieldset>
+           
+          <div
+            class="gas-settings svelte-1daay07"
+          >
+            <dl
+              class="gas-settings__edit svelte-1daay07"
+            >
+              <div
+                class="gas-fee svelte-1c6b481"
+              >
+                <span>
+                  Fee:
+                </span>
+                 
+                <div
+                  class="gas-fee__amount svelte-1c6b481"
+                >
+                  <div
+                    class="gas-fee__amount-value svelte-1c6b481"
+                  >
+                    <span
+                      class="svelte-1c6b481"
+                    >
+                      max
+                    </span>
+                     
+                    <span
+                      class="svelte-1c6b481"
+                    >
+                      0.020000000
+                    </span>
+                  </div>
+                   
+                  <svg
+                    class="dusk-icon dusk-icon--size--default dusk-amount__icon"
+                    data-tooltip-id="main-tooltip"
+                    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>
+                  
+                </div>
+              </div>
+              <dd>
+                <button
+                  class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--small"
+                  type="button"
+                >
+                  <span
+                    class="dusk-button__text"
+                  >
+                    EDIT
+                  </span>
+                </button>
+              </dd>
+            </dl>
+             
+          </div>
+        </div>
+         
+        <div
+          class="dusk-wizard__step-navigation"
+        >
+          <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"
+            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>
+          
+           
+          <button
+            class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--default dusk-icon-button--labeled"
+            disabled=""
+            type="button"
+          >
+            <span
+              class="dusk-button__text"
+            >
+              Next
+            </span>
+             
+            <svg
+              class="dusk-icon dusk-icon--size--default dusk-button__icon"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
+              />
+            </svg>
+            
+          </button>
+        </div>
+        
+        
+         
+        
+         
+        
+      </div>
+    </div>
+  </div>
+   
+</div>
+`;
diff --git a/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/page.spec.js b/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/page.spec.js
new file mode 100644
index 0000000000..dd9179cff4
--- /dev/null
+++ b/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/page.spec.js
@@ -0,0 +1,31 @@
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import Allocation from "../+page.svelte";
+// import mockedOperationsStore from "../../../__mocks__/mockedOperationsStore";
+
+vi.useFakeTimers();
+
+describe("Allocate", () => {
+  afterEach(cleanup);
+
+  afterAll(() => {
+    vi.doUnmock("$lib/stores");
+  });
+
+  it("should render the allocation page", async () => {
+    const { container } = render(Allocation);
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should call the destroy method when the component is unmounted", async () => {
+    const { component, unmount } = render(Allocation);
+    const spy = vi.spyOn(component, "$destroy");
+
+    unmount();
+
+    expect(spy).toHaveBeenCalled();
+  });
+});
diff --git a/web-wallet/src/routes/(app)/dashboard/staking/+page.svelte b/web-wallet/src/routes/(app)/dashboard/staking/+page.svelte
index fec550b8b0..49d20d3081 100644
--- a/web-wallet/src/routes/(app)/dashboard/staking/+page.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/staking/+page.svelte
@@ -5,16 +5,8 @@
   import { mdiDatabaseOutline } from "@mdi/js";
   import { StakeContract } from "$lib/containers";
   import { IconHeadingCard } from "$lib/containers/Cards";
-  import { contractDescriptors } from "$lib/contracts";
-  import { operationsStore, settingsStore } from "$lib/stores";
-
-  /** @param {string} id */
-  function updateOperation(id) {
-    operationsStore.update((store) => ({
-      ...store,
-      currentOperation: id,
-    }));
-  }
+  import { contractDescriptors, updateOperation } from "$lib/contracts";
+  import { settingsStore } from "$lib/stores";
 
   /**
    * @param {keyof SettingsStoreContent} property
@@ -32,15 +24,17 @@
   });
 </script>
 
-<IconHeadingCard
-  gap="medium"
-  heading="Staking"
-  iconPath={mdiDatabaseOutline}
-  reverse
->
-  <StakeContract
-    descriptor={contractDescriptors[1]}
-    on:operationChange={({ detail }) => updateOperation(detail)}
-    on:suppressStakingNotice={() => updateSetting("hideStakingNotice", true)}
-  />
-</IconHeadingCard>
+{#if !!import.meta.env.VITE_CONTRACT_STAKE_DISABLED}
+  <IconHeadingCard
+    gap="medium"
+    heading="Staking"
+    iconPath={mdiDatabaseOutline}
+    reverse
+  >
+    <StakeContract
+      descriptor={contractDescriptors[1]}
+      on:operationChange={({ detail }) => updateOperation(detail)}
+      on:suppressStakingNotice={() => updateSetting("hideStakingNotice", true)}
+    />
+  </IconHeadingCard>
+{/if}
diff --git a/web-wallet/src/routes/(app)/dashboard/staking/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/staking/__tests__/__snapshots__/page.spec.js.snap
new file mode 100644
index 0000000000..e3b506e309
--- /dev/null
+++ b/web-wallet/src/routes/(app)/dashboard/staking/__tests__/__snapshots__/page.spec.js.snap
@@ -0,0 +1,93 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Staking > should render the staking page 1`] = `
+<div
+  class="dusk-card dusk-card--gap-medium"
+>
+  <div
+    class="dusk-card__header-container"
+  >
+    <header
+      class="dusk-card__header"
+      slot="header"
+    >
+      <div
+        class="dusk-card__heading-container dusk-card__heading-container--reverse"
+      >
+        <svg
+          class="dusk-icon dusk-icon--size--default dusk-card__heading-icon"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12 3C7.58 3 4 4.79 4 7V17C4 19.21 7.59 21 12 21S20 19.21 20 17V7C20 4.79 16.42 3 12 3M18 17C18 17.5 15.87 19 12 19S6 17.5 6 17V14.77C7.61 15.55 9.72 16 12 16S16.39 15.55 18 14.77V17M18 12.45C16.7 13.4 14.42 14 12 14C9.58 14 7.3 13.4 6 12.45V9.64C7.47 10.47 9.61 11 12 11C14.39 11 16.53 10.47 18 9.64V12.45M12 9C8.13 9 6 7.5 6 7S8.13 5 12 5C15.87 5 18 6.5 18 7S15.87 9 12 9Z"
+          />
+        </svg>
+        
+         
+        <h3
+          class="h4"
+        >
+          Staking
+        </h3>
+      </div>
+    </header>
+  </div>
+   
+  <div
+    class="dusk-card__body-container"
+  >
+    <div
+      class="dusk-suspense dusk-suspense--medium-gap"
+    >
+      <details
+        class="dusk-error-details dusk-error-details__details dusk-suspense__error"
+      >
+        <summary
+          class="dusk-error-details__summary"
+        >
+          Failed to retrieve stake info
+        </summary>
+         
+        <pre
+          class="dusk-error-details__error"
+        >
+          			
+          No wallet instance to sync
+          
+		
+        </pre>
+      </details>
+      
+       
+       
+      <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 error-action"
+        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>
+    </div>
+    
+  </div>
+   
+</div>
+`;
diff --git a/web-wallet/src/routes/(app)/dashboard/staking/__tests__/page.spec.js b/web-wallet/src/routes/(app)/dashboard/staking/__tests__/page.spec.js
new file mode 100644
index 0000000000..66293807ff
--- /dev/null
+++ b/web-wallet/src/routes/(app)/dashboard/staking/__tests__/page.spec.js
@@ -0,0 +1,17 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import Staking from "../+page.svelte";
+
+vi.useFakeTimers();
+
+describe("Staking", () => {
+  afterEach(cleanup);
+
+  it("should render the staking page", async () => {
+    const { container } = render(Staking);
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-wallet/src/routes/(app)/dashboard/transfer/+page.svelte b/web-wallet/src/routes/(app)/dashboard/transfer/+page.svelte
index 72a175d315..294176a919 100644
--- a/web-wallet/src/routes/(app)/dashboard/transfer/+page.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/transfer/+page.svelte
@@ -4,31 +4,24 @@
   import { onDestroy } from "svelte";
   import { TransferContract } from "$lib/containers";
   import { IconHeadingCard } from "$lib/containers/Cards";
-  import { contractDescriptors } from "$lib/contracts";
-  import { operationsStore } from "$lib/stores";
+  import { contractDescriptors, updateOperation } from "$lib/contracts";
   import { mdiSwapVertical } from "@mdi/js";
 
-  /** @param {string} id */
-  function updateOperation(id) {
-    operationsStore.update((store) => ({
-      ...store,
-      currentOperation: id,
-    }));
-  }
-
   onDestroy(() => {
     updateOperation("");
   });
 </script>
 
-<IconHeadingCard
-  gap="medium"
-  heading="Transfer"
-  iconPath={mdiSwapVertical}
-  reverse
->
-  <TransferContract
-    descriptor={contractDescriptors[0]}
-    on:operationChange={({ detail }) => updateOperation(detail)}
-  />
-</IconHeadingCard>
+{#if !!import.meta.env.VITE_CONTRACT_TRANSFER_DISABLED}
+  <IconHeadingCard
+    gap="medium"
+    heading="Transfer"
+    iconPath={mdiSwapVertical}
+    reverse
+  >
+    <TransferContract
+      descriptor={contractDescriptors[0]}
+      on:operationChange={({ detail }) => updateOperation(detail)}
+    />
+  </IconHeadingCard>
+{/if}
diff --git a/web-wallet/src/routes/(app)/dashboard/transfer/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/transfer/__tests__/__snapshots__/page.spec.js.snap
new file mode 100644
index 0000000000..8e7202d565
--- /dev/null
+++ b/web-wallet/src/routes/(app)/dashboard/transfer/__tests__/__snapshots__/page.spec.js.snap
@@ -0,0 +1,161 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Transfer > should render the transfer page 1`] = `
+<div
+  class="dusk-card dusk-card--gap-medium"
+>
+  <div
+    class="dusk-card__header-container"
+  >
+    <header
+      class="dusk-card__header"
+      slot="header"
+    >
+      <div
+        class="dusk-card__heading-container dusk-card__heading-container--reverse"
+      >
+        <svg
+          class="dusk-icon dusk-icon--size--default dusk-card__heading-icon"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M9,3L5,7H8V14H10V7H13M16,17V10H14V17H11L15,21L19,17H16Z"
+          />
+        </svg>
+        
+         
+        <h3
+          class="h4"
+        >
+          Transfer
+        </h3>
+      </div>
+    </header>
+  </div>
+   
+  <div
+    class="dusk-card__body-container"
+  >
+    <dl
+      class="contract-statuses svelte-19157rx"
+    >
+      <dt
+        class="contract-statuses__label svelte-19157rx"
+      >
+        Spendable
+         
+      </dt>
+      <dd
+        class="contract-statuses__value svelte-19157rx"
+      >
+        <span>
+          0.000000000
+        </span>
+         
+        <svg
+          class="dusk-icon dusk-icon--size--default contract-statuses__icon"
+          data-tooltip-id="main-tooltip"
+          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>
+        
+         
+      </dd>
+    </dl>
+     
+    <menu
+      class="contract-operations svelte-1iyylnh"
+    >
+      <li
+        class="contract-operations__operation svelte-1iyylnh"
+      >
+        <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button--labeled contract-operations__operation-button"
+          type="button"
+        >
+          <svg
+            class="dusk-icon dusk-icon--size--default dusk-button__icon"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,7L17,12H14V16H10V12H7L12,7M19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21M19,19V5H5V19H19Z"
+            />
+          </svg>
+          
+           
+          <span
+            class="dusk-button__text"
+          >
+            Send
+          </span>
+          
+        </button>
+      </li>
+      <li
+        class="contract-operations__operation svelte-1iyylnh"
+      >
+        <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--default dusk-icon-button--labeled contract-operations__operation-button"
+          type="button"
+        >
+          <svg
+            class="dusk-icon dusk-icon--size--default dusk-button__icon"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12,17L7,12H10V8H14V12H17L12,17M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M5,5V19H19V5H5Z"
+            />
+          </svg>
+          
+           
+          <span
+            class="dusk-button__text"
+          >
+            Receive
+          </span>
+          
+        </button>
+      </li>
+       
+      <li
+        class="contract-operations__operation svelte-1iyylnh"
+      >
+        <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>
+    
+  </div>
+   
+</div>
+`;
diff --git a/web-wallet/src/routes/(app)/dashboard/transfer/__tests__/page.spec.js b/web-wallet/src/routes/(app)/dashboard/transfer/__tests__/page.spec.js
new file mode 100644
index 0000000000..a164a2ae59
--- /dev/null
+++ b/web-wallet/src/routes/(app)/dashboard/transfer/__tests__/page.spec.js
@@ -0,0 +1,17 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import Transfer from "../+page.svelte";
+
+vi.useFakeTimers();
+
+describe("Transfer", () => {
+  afterEach(cleanup);
+
+  it("should render the transfer page", async () => {
+    const { container } = render(Transfer);
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-wallet/src/style/app-components/horizontal-rules.css b/web-wallet/src/style/app-components/horizontal-rules.css
index 4d516c47f2..8c803e6383 100644
--- a/web-wallet/src/style/app-components/horizontal-rules.css
+++ b/web-wallet/src/style/app-components/horizontal-rules.css
@@ -1,5 +1,20 @@
 hr {
+  text-align: center;
+  overflow: visible;
   border: none;
   border-top: 1px solid var(--divider-color-primary);
   width: 100%;
+  height: 1px;
+  padding: 0;
+}
+
+hr.glyph:after {
+  display: inline-block;
+  position: relative;
+  top: -1.1em;
+  font-size: 1em;
+  border: solid thin var(--divider-border-color);
+  border-radius: 2em;
+  padding: 0.5em 1.25em;
+  background-color: var(--divider-background-color);
 }
diff --git a/web-wallet/src/style/dusk/language.css b/web-wallet/src/style/dusk/language.css
index b26b9e0452..74aff3f4d6 100644
--- a/web-wallet/src/style/dusk/language.css
+++ b/web-wallet/src/style/dusk/language.css
@@ -109,9 +109,15 @@
   --checkbox-control-border-color: var(--smokey-black);
   --checkbox-control-checked-bg-color: var(--smokey-black);
 
+  /* Fieldset */
+  --fieldset-background-color: var(--light-grey);
+  --fieldset-border-radius: 1.5em;
+
   /* Dividers */
 
-  --divider-color-primary: var(--taupe-grey);
+  --divider-color-primary: var(--smokey-black);
+  --divider-background-color: var(--light-gray);
+  --divider-border-color: var(--smokey-black);
 
   /* Home animation */
 
@@ -152,6 +158,16 @@
   --checkbox-control-border-color: var(--light-grey);
   --checkbox-control-checked-bg-color: var(--light-grey);
 
+  /* Fieldset */
+
+  --fieldset-background-color: var(--smokey-black);
+
+  /* Dividers */
+
+  --divider-color-primary: var(--magnolia);
+  --divider-background-color: var(--smokey-black);
+  --divider-border-color: var(--magnolia);
+
   /* Home animation */
 
   --home-grid-color: var(--smokey-black);
diff --git a/web-wallet/src/style/main.css b/web-wallet/src/style/main.css
index 3e99a04f9c..345fc9def8 100644
--- a/web-wallet/src/style/main.css
+++ b/web-wallet/src/style/main.css
@@ -92,6 +92,10 @@ svg {
   fill: currentColor;
 }
 
+fieldset {
+  border: none;
+}
+
 #outer-container {
   background-color: var(--background-color);
   width: 60%;
diff --git a/web-wallet/vite.config.js b/web-wallet/vite.config.js
index 64861c573a..7029f9f94c 100644
--- a/web-wallet/vite.config.js
+++ b/web-wallet/vite.config.js
@@ -48,6 +48,7 @@ export default defineConfig(({ mode }) => {
         TESTNET_NODE: env.VITE_TESTNET_NODE,
         TESTNET_PROVER_NODE: env.VITE_TESTNET_PROVER_NODE,
         TRANSFER_CONTRACT: env.VITE_TRANSFER_CONTRACT,
+        VITE_CONTRACT_ALLOCATE_DISABLED: env.VITE_CONTRACT_ALLOCATE_DISABLED,
         VITE_CONTRACT_STAKE_DISABLED: env.VITE_CONTRACT_STAKE_DISABLED,
         VITE_CONTRACT_TRANSFER_DISABLED: env.VITE_CONTRACT_TRANSFER_DISABLED,
         VITE_GAS_LIMIT_DEFAULT: env.VITE_GAS_LIMIT_DEFAULT,
@@ -58,8 +59,6 @@ export default defineConfig(({ mode }) => {
         VITE_GAS_PRICE_UPPER: env.VITE_GAS_PRICE_UPPER,
         VITE_GET_QUOTE_API_ENDPOINT: env.VITE_GET_QUOTE_API_ENDPOINT,
         VITE_MINIMUM_ALLOWED_STAKE: env.VITE_MINIMUM_ALLOWED_STAKE,
-        VITE_STAKING_ENABLED: env.VITE_STAKING_ENABLED,
-        VITE_TRANSFER_ENABLED: env.VITE_TRANSFER_ENABLED,
       },
     },
     plugins:
@@ -98,6 +97,7 @@ export default defineConfig(({ mode }) => {
           "0200000000000000000000000000000000000000000000000000000000000000",
         TRANSFER_CONTRACT:
           "0100000000000000000000000000000000000000000000000000000000000000",
+        VITE_CONTRACT_ALLOCATE_DISABLED: "false",
         VITE_CONTRACT_STAKE_DISABLED: "false",
         VITE_CONTRACT_TRANSFER_DISABLED: "false",
         VITE_GAS_LIMIT_DEFAULT: "20000000",