From c5497cae319c8f27e9745b5f383970a6a18304dc Mon Sep 17 00:00:00 2001 From: Kieran Hall Date: Tue, 20 Aug 2024 11:36:17 +0200 Subject: [PATCH] web-wallet: Refactor dashboard to use routes Resolves #2075 --- web-wallet/README.md | 1 + .../ContractOperations.svelte | 16 +- .../ContractOperations.spec.js.snap | 114 +- .../OperationResult.spec.js.snap | 2 + .../__snapshots__/Stake.spec.js.snap | 108 +- web-wallet/src/lib/containers/Cards/Card.css | 22 +- .../containers/Cards/IconHeadingCard.svelte | 10 +- .../StakeContract/StakeContract.svelte | 19 + .../IconHeadingCard.spec.js.snap | 82 +- .../__snapshots__/ToggleableCard.spec.js.snap | 186 +- .../src/lib/dusk/components/Card/Card.svelte | 12 +- .../dusk/components/Suspense/Suspense.svelte | 1 + .../__tests__/__snapshots__/Card.spec.js.snap | 3 + .../__snapshots__/Suspense.spec.js.snap | 3 + .../lib/dusk/components/dusk.components.d.ts | 2 +- .../src/routes/(app)/dashboard/+layout.svelte | 42 +- .../src/routes/(app)/dashboard/+page.svelte | 186 +- .../__snapshots__/layout.spec.js.snap | 805 ++++- .../__tests__/__snapshots__/page.spec.js.snap | 1078 +----- .../(app)/dashboard/__tests__/layout.spec.js | 51 +- .../(app)/dashboard/__tests__/page.spec.js | 39 +- .../(app)/dashboard/staking/+page.svelte | 46 + .../(app)/dashboard/transactions/+page.svelte | 24 +- .../__tests__/__snapshots__/page.spec.js.snap | 56 +- .../transactions/__tests__/page.spec.js | 4 +- .../(app)/dashboard/transfer/+page.svelte | 34 + .../__tests__/__snapshots__/page.spec.js.snap | 76 +- .../__tests__/__snapshots__/page.spec.js.snap | 218 +- .../__tests__/__snapshots__/page.spec.js.snap | 2938 +++++++++-------- .../__tests__/__snapshots__/page.spec.js.snap | 472 +-- .../routes/components-showcase/Cards.svelte | 53 +- web-wallet/src/style/dusk-components/card.css | 18 +- .../src/style/dusk-components/suspense.css | 4 + web-wallet/src/style/dusk/language.css | 1 + 34 files changed, 3347 insertions(+), 3379 deletions(-) create mode 100644 web-wallet/src/routes/(app)/dashboard/staking/+page.svelte create mode 100644 web-wallet/src/routes/(app)/dashboard/transfer/+page.svelte diff --git a/web-wallet/README.md b/web-wallet/README.md index c42cc24aed..ec583725a2 100644 --- a/web-wallet/README.md +++ b/web-wallet/README.md @@ -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). diff --git a/web-wallet/src/lib/components/ContractOperations/ContractOperations.svelte b/web-wallet/src/lib/components/ContractOperations/ContractOperations.svelte index 5e49615d5c..200f782889 100644 --- a/web-wallet/src/lib/components/ContractOperations/ContractOperations.svelte +++ b/web-wallet/src/lib/components/ContractOperations/ContractOperations.svelte @@ -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[]} */ @@ -44,6 +46,18 @@ /> {/each} +
  • + { + dispatch("operationChange", ""); + }} + text="Back" + variant="tertiary" + /> +
    • diff --git a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap index 5674b3fe84..3c063ff526 100644 --- a/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap +++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/IconHeadingCard.spec.js.snap @@ -4,22 +4,29 @@ exports[`IconHeadingCard > renders the IconHeadingCard component with a heading
    -
    -
    - -

    - My Card -

    -
    -
    + +

    + My Card +

    +
    + + +
    `; @@ -28,32 +35,39 @@ exports[`IconHeadingCard > renders the IconHeadingCard component with a heading
    -
    -
    - - - - - -

    - My Card -

    -
    -
    + + + + + +

    + My Card +

    +
    + + +
    `; diff --git a/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap b/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap index 458f672c58..485831848a 100644 --- a/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap +++ b/web-wallet/src/lib/containers/__tests__/__snapshots__/ToggleableCard.spec.js.snap @@ -4,31 +4,39 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a heading 1
    -
    -
    - -

    - My Card -

    -
    - -
    -
    + +

    + My Card +

    +
    + +
    + +
    - +
    + +
    `; @@ -37,41 +45,49 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a heading a
    -
    -
    - - - - + + + + + +

    + My Card +

    +
    -

    - My Card -

    -
    - -
    - +
    + +
    - +
    + +
    `; @@ -80,41 +96,49 @@ exports[`IconHeadingCard > renders the ToggleableCard component with a toggle 1`
    -
    -
    - - - - + + + + + +

    + My Card +

    +
    -

    - My Card -

    -
    - -
    - +
    + +
    - +
    + +
    `; diff --git a/web-wallet/src/lib/dusk/components/Card/Card.svelte b/web-wallet/src/lib/dusk/components/Card/Card.svelte index c774ef677a..4271b8320c 100644 --- a/web-wallet/src/lib/dusk/components/Card/Card.svelte +++ b/web-wallet/src/lib/dusk/components/Card/Card.svelte @@ -23,10 +23,16 @@ class:dusk-card--on-surface={onSurface} > {#if $$slots.header} - +
    + +
    {/if} - +
    + +
    {#if $$slots.footer} - +
    + +
    {/if} diff --git a/web-wallet/src/lib/dusk/components/Suspense/Suspense.svelte b/web-wallet/src/lib/dusk/components/Suspense/Suspense.svelte index d75e9afe5e..319f26728b 100644 --- a/web-wallet/src/lib/dusk/components/Suspense/Suspense.svelte +++ b/web-wallet/src/lib/dusk/components/Suspense/Suspense.svelte @@ -54,5 +54,6 @@ /> + {/await} diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap index 733b091b39..953127d436 100644 --- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap +++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Card.spec.js.snap @@ -5,6 +5,9 @@ exports[`Card > renders the Card component 1`] = ` class="dusk-card dusk-card--gap-default" > +
    `; diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Suspense.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Suspense.spec.js.snap index bc4138baa1..7b9ddf5104 100644 --- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Suspense.spec.js.snap +++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Suspense.spec.js.snap @@ -39,6 +39,7 @@ exports[`Suspense > should accept a custom message for the failure state 1`] = ` + `; @@ -149,6 +150,7 @@ exports[`Suspense > should be able to render the \`Suspense\` in a failure state + `; @@ -176,6 +178,7 @@ exports[`Suspense > should be able to render the \`Suspense\` in a failure state + `; diff --git a/web-wallet/src/lib/dusk/components/dusk.components.d.ts b/web-wallet/src/lib/dusk/components/dusk.components.d.ts index 0412d875e6..5832ac076b 100644 --- a/web-wallet/src/lib/dusk/components/dusk.components.d.ts +++ b/web-wallet/src/lib/dusk/components/dusk.components.d.ts @@ -22,7 +22,7 @@ type WizardButtonProps = { action?: () => void; }; -type GapSize = "small" | "default" | "large"; +type GapSize = "small" | "default" | "medium" | "large"; type IconSize = "small" | "default" | "large"; diff --git a/web-wallet/src/routes/(app)/dashboard/+layout.svelte b/web-wallet/src/routes/(app)/dashboard/+layout.svelte index 97f45a0111..984970be71 100644 --- a/web-wallet/src/routes/(app)/dashboard/+layout.svelte +++ b/web-wallet/src/routes/(app)/dashboard/+layout.svelte @@ -8,10 +8,10 @@ } from "@mdi/js"; import { Button, Icon, ProgressBar } from "$lib/dusk/components"; import { settingsStore, walletStore } from "$lib/stores"; - import { AppAnchorButton } from "$lib/components"; + import { AddressPicker, AppAnchorButton, Balance } from "$lib/components"; - $: ({ network } = $settingsStore); - $: ({ isSyncing, error } = $walletStore); + /** @type {import('./$types').LayoutData} */ + export let data; /** @type {string} */ let syncStatus = ""; @@ -22,6 +22,17 @@ /** @type {string} */ let iconVariant = ""; + /** @type {number | undefined} */ + let fiatPrice; + + data.currentPrice.then((prices) => { + fiatPrice = prices[currency.toLowerCase()]; + }); + + const { currency, language } = $settingsStore; + + $: ({ network } = $settingsStore); + $: ({ balance, currentAddress, addresses, isSyncing, error } = $walletStore); $: if (isSyncing) { iconVariant = "warning"; networkStatusIconPath = mdiTimerSand; @@ -44,7 +55,21 @@ />
    - +
    +

    Dashboard

    + + + + + + +