diff --git a/web-wallet/README.md b/web-wallet/README.md index ec583725a2..76abd3aae1 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=false VITE_CONTRACT_STAKE_DISABLED=false VITE_CONTRACT_TRANSFER_DISABLED=false VITE_CURRENT_NODE=${VITE_LOCAL_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..46b3c1bd86 --- /dev/null +++ b/web-wallet/src/lib/components/Allocate/Allocate.svelte @@ -0,0 +1,417 @@ + + + + +
+ + +
+

+ Edit the value to change the allocation of your Dusk between your + shielded or public account. +

+ +
+
Shielded
+ +
+ + {middleEllipsis( + shieldedAddress, + calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20) + )} +
+ +
+ { + unshieldedAmount = +( + shieldedBalance + + unshieldedBalance - + shieldedAmount + ).toFixed(9); + }} + /> + +
+ +
+ +
Unshielded
+ +
+ + {middleEllipsis( + unshieldedAddress, + calculateAdaptiveCharCount(screenWidth, 320, 640, 5, 20) + )} +
+ +
+ { + shieldedAmount = +( + unshieldedBalance + + shieldedBalance - + unshieldedAmount + ).toFixed(9); + }} + /> + +
+
+ + { + isGasValid = areValidGasSettings( + event.detail.price, + event.detail.limit + ); + + if (isGasValid) { + gasPrice = event.detail.price; + gasLimit = event.detail.limit; + } + }} + /> +
+ + +
+ + +
+
+ + Amount: +
+
+ + {isFromUnshielded + ? `${formatter(luxToDusk(duskToLux(unshieldedBalance) - duskToLux(unshieldedAmount)))} DUSK` + : `${formatter(luxToDusk(duskToLux(shieldedBalance) - duskToLux(shieldedAmount)))} DUSK`} + + +
+
+ +
+
+ + From +
+
+ + {isFromUnshielded ? unshieldedAddress : shieldedAddress} + +
+
+ +
+
+ + To +
+
+ + {isFromShielded ? unshieldedAddress : shieldedAddress} + +
+
+ + +
+ + + + + {#if hash} + + {/if} + + + + +
+ + diff --git a/web-wallet/src/lib/components/GasFee/GasFee.svelte b/web-wallet/src/lib/components/GasFee/GasFee.svelte index 205cb44020..563f483aa3 100644 --- a/web-wallet/src/lib/components/GasFee/GasFee.svelte +++ b/web-wallet/src/lib/components/GasFee/GasFee.svelte @@ -7,9 +7,9 @@
- Max Gas Fee: + Fee:
- {fee} +
max {fee}
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..c0dd0ae49e 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`] = `
- Max Gas Fee: + Fee:
- - 0.020000000 - + + max + + + + 0.020000000 + +
renders the GasSettings component closed 1`] = ` class="gas-settings__edit svelte-1daay07" >
- Max Gas Fee: + Fee:
- - 0.020000000 - + + max + + + + 0.020000000 + +
renders the GasSettings component opened 1`] = ` class="gas-settings__edit svelte-1daay07" >
- Max Gas Fee: + Fee:
- - 0.020000000 - + + max + + + + 0.020000000 + +
Amount step > should render the Send component Amount step 1`] = class="gas-settings__edit svelte-1daay07" >
- Max Gas Fee: + Fee:
- - 0.020000000 - + + max + + + + 0.020000000 + +
Review step > should render the Send component Review step 1`] =
- Max Gas Fee: + Fee:
- - 0.020000000 - + + max + + + + 0.020000000 + +
should render the Stake component 1`] = ` class="gas-settings__edit svelte-1daay07" >
- Max Gas Fee: + Fee:
- - 0.020000000 - + + max + + + + 0.020000000 + +
should render the review step of the Stake component 1`] = `
- Max Gas Fee: + Fee:
- - 0.020000000 - + + max + + + + 0.020000000 + +
+ + + + 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/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/index.js b/web-wallet/src/lib/contracts/index.js index e71743ccff..76bf5d238c 100644 --- a/web-wallet/src/lib/contracts/index.js +++ b/web-wallet/src/lib/contracts/index.js @@ -1,3 +1,4 @@ export { default as contractDescriptors } from "./contract-descriptors"; export { default as deductLuxFeeFrom } from "./deductLuxFeeFrom"; 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/routes/(app)/dashboard/+page.svelte b/web-wallet/src/routes/(app)/dashboard/+page.svelte index 440bca589a..042d32869d 100644 --- a/web-wallet/src/routes/(app)/dashboard/+page.svelte +++ b/web-wallet/src/routes/(app)/dashboard/+page.svelte @@ -2,7 +2,12 @@ + + + updateOperation(detail)} + /> + diff --git a/web-wallet/src/routes/(app)/dashboard/transfer/+page.svelte b/web-wallet/src/routes/(app)/dashboard/transfer/+page.svelte index 72a175d315..3f776746d9 100644 --- a/web-wallet/src/routes/(app)/dashboard/transfer/+page.svelte +++ b/web-wallet/src/routes/(app)/dashboard/transfer/+page.svelte @@ -4,18 +4,9 @@ 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(""); }); 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%;