Skip to content

Commit

Permalink
web-wallet: Refactor dashboard to use routes
Browse files Browse the repository at this point in the history 
Resolves #2075
  • Loading branch information
@kieranhall
kieranhall committed Aug 23, 2024
1 parent b34d758 commit c5497ca
Show file tree
Hide file tree
Showing 34 changed files with 3,347 additions and 3,379 deletions.
1 change: 1 addition & 0 deletions web-wallet/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ 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).
Expand Down
16 changes: 15 additions & 1 deletion web-wallet/src/lib/components/ContractOperations/ContractOperations.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@
import { createEventDispatcher } from "svelte";
import {
mdiArrowDownBoldBoxOutline,
mdiArrowLeft,
mdiArrowUpBoldBoxOutline,
mdiDatabaseArrowDownOutline,
mdiDatabaseOutline,
mdiHelpCircleOutline,
} from "@mdi/js";
import { AppAnchorButton } from "$lib/components";
import { Button } from "$lib/dusk/components";
/** @type {ContractOperation[]} */
Expand Down Expand Up @@ -44,6 +46,18 @@
/>
</li>
{/each}
<li class="contract-operations__operation">
<AppAnchorButton
className="contract-operations__operation-button"
href="/dashboard"
icon={{ path: mdiArrowLeft }}
on:click={() => {
dispatch("operationChange", "");
}}
text="Back"
variant="tertiary"
/>
</li>
</menu>

<style lang="postcss">
Expand All @@ -57,7 +71,7 @@
&__operation {
& + & {
margin-top: var(--default-gap);
margin-top: 1.25rem;
}
& > :global(.contract-operations__operation-button) {
Expand Down
114 changes: 98 additions & 16 deletions web-wallet/src/lib/components/__tests__/__snapshots__/ContractOperations.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,46 @@

exports[`ContractOperations > should be able to render the component without items 1`] = `
<menu
class="contract-operations svelte-1v0rjcd"
/>
class="contract-operations svelte-1iyylnh"
>
<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>
`;

exports[`ContractOperations > should render the \`ContractOperations\` component 1`] = `
<menu
class="contract-operations svelte-1v0rjcd"
class="contract-operations svelte-1iyylnh"
>
<li
class="contract-operations__operation svelte-1v0rjcd"
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"
Expand All @@ -35,10 +65,9 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
</span>
</button>
</li>
<li
class="contract-operations__operation svelte-1v0rjcd"
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"
Expand All @@ -62,10 +91,9 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
</span>
</button>
</li>
<li
class="contract-operations__operation svelte-1v0rjcd"
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"
Expand All @@ -90,10 +118,9 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
</span>
</button>
</li>
<li
class="contract-operations__operation svelte-1v0rjcd"
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"
Expand All @@ -117,10 +144,9 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
</span>
</button>
</li>
<li
class="contract-operations__operation svelte-1v0rjcd"
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"
Expand All @@ -144,17 +170,45 @@ exports[`ContractOperations > should render the \`ContractOperations\` component
</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>
`;

exports[`ContractOperations > should use a default icon if the operation is not on the known list 1`] = `
<menu
class="contract-operations svelte-1v0rjcd"
class="contract-operations svelte-1iyylnh"
>
<li
class="contract-operations__operation svelte-1v0rjcd"
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"
Expand All @@ -178,7 +232,35 @@ exports[`ContractOperations > should use a default icon if the operation is not
</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>
`;
2 changes: 2 additions & 0 deletions web-wallet/src/lib/components/__tests__/__snapshots__/OperationResult.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ exports[`OperationResult > should accept a custom message for the failure state
</span>
</a>
</div>
`;

Expand Down Expand Up @@ -210,6 +211,7 @@ exports[`OperationResult > should be able to render the \`OperationResult\` in a
</span>
</a>
</div>
`;

Expand Down
108 changes: 58 additions & 50 deletions web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,64 +271,72 @@ exports[`Stake > should render the Stake notice 1`] = `
<div
class="dusk-card dusk-card--gap-default dusk-card--on-surface"
>
<header
class="dusk-card__header"
slot="header"
<div
class="dusk-card__header-container"
>
<div
class="dusk-card__header-title"
<header
class="dusk-card__header"
slot="header"
>
<svg
class="dusk-icon dusk-icon--size--default"
role="graphics-symbol"
viewBox="0 0 24 24"
>
<path
d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
/>
</svg>
<h3
class="h4"
<div
class="dusk-card__heading-container"
>
Only stake if you have a node set up!
</h3>
</div>
</header>
<p
class="staking-warning svelte-1i0y9qj"
>
I understand that I have set up a node properly, as described
<a
class="dusk-anchor dusk-anchor--on-surface"
href="https://docs.dusk.network/getting-started/node-setup/overview"
rel="noopener noreferrer"
target="_blank"
>
HERE
</a>
, and that I will lose funds if I have not done so correctly.
</p>
<svg
class="dusk-icon dusk-icon--size--default dusk-card__heading-icon"
role="graphics-symbol"
viewBox="0 0 24 24"
>
<path
d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
/>
</svg>
<h3
class="h4"
>
Only stake if you have a node set up!
</h3>
</div>
</header>
</div>
<div
class="dusk-agreement staking-warning__agreement"
class="dusk-card__body-container"
>
<input
class="dusk-checkbox"
id="dusk-checkbox-16"
name="staking-warning"
tabindex="0"
type="checkbox"
/>
<p
class="staking-warning svelte-1i0y9qj"
>
I understand that I have set up a node properly, as described
<a
class="dusk-anchor dusk-anchor--on-surface"
href="https://docs.dusk.network/getting-started/node-setup/overview"
rel="noopener noreferrer"
target="_blank"
>
HERE
</a>
, and that I will lose funds if I have not done so correctly.
</p>
<label
class="dusk-agreement__label"
for="dusk-checkbox-16"
<div
class="dusk-agreement staking-warning__agreement"
>
Don't show this step again.
</label>
<input
class="dusk-checkbox"
id="dusk-checkbox-16"
name="staking-warning"
tabindex="0"
type="checkbox"
/>
<label
class="dusk-agreement__label"
for="dusk-checkbox-16"
>
Don't show this step again.
</label>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit c5497ca

Please sign in to comment.