From 51874fe31968d7b59c324ae8220fe18ae7f8c175 Mon Sep 17 00:00:00 2001 From: Norton Andreev Date: Sat, 21 Dec 2024 19:41:59 +0200 Subject: [PATCH] web-wallet: Improve Migration Functionality Resolves #3267 --- web-wallet/CHANGELOG.md | 6 ++ web-wallet/README.md | 1 + .../ApproveMigration/ApproveMigration.svelte | 61 ++++++++++--------- .../ExecuteMigration/ExecuteMigration.svelte | 12 ++-- .../MigrateContract/MigrateContract.svelte | 38 ++++-------- .../src/lib/contracts/contract-descriptors.js | 4 +- .../src/lib/migration/walletConnection.js | 28 ++++++--- web-wallet/vite.config.js | 1 + 8 files changed, 82 insertions(+), 69 deletions(-) diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md index 65ee2c3eb..770071870 100644 --- a/web-wallet/CHANGELOG.md +++ b/web-wallet/CHANGELOG.md @@ -9,10 +9,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Add "VITE_REOWN_PROJECT_ID" ENV variable [#3267] + ### Changed - Update Transactions list design [#1922] - Prioritize Public Account in the interface and transaction flows [#3259] +- Enhance Migrate flow layout, aligning it to the rest of the transaction-based flows [#3267] +- Display the Migration Requirements details using the `Banner` component [#3267] +- Update the Approval Success copy for clarity [#3267] ### Removed @@ -480,6 +485,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 [#3245]: https://github.com/dusk-network/rusk/issues/3245 [#3259]: https://github.com/dusk-network/rusk/issues/3259 [#3265]: https://github.com/dusk-network/rusk/issues/3265 +[#3267]: https://github.com/dusk-network/rusk/issues/3267 diff --git a/web-wallet/README.md b/web-wallet/README.md index 931181313..8619b0c40 100644 --- a/web-wallet/README.md +++ b/web-wallet/README.md @@ -44,6 +44,7 @@ VITE_GAS_LIMIT_UPPER=1000000000 VITE_GAS_PRICE_DEFAULT=1 VITE_GAS_PRICE_LOWER=1 VITE_MODE_MAINTENANCE=false +VITE_REOWN_PROJECT_ID="" # the ID of the Bridge project (as on Reown Cloud) VITE_NODE_URL="" # connect to a specific node ``` diff --git a/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte b/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte index 6938e8533..837db5bde 100644 --- a/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte +++ b/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte @@ -6,6 +6,7 @@ import { isHex } from "viem"; import { createEventDispatcher } from "svelte"; import { Button, Icon } from "$lib/dusk/components"; + import { Banner } from "$lib/components"; import { account, wagmiConfig } from "$lib/migration/walletConnection"; import { allowance, approve } from "$lib/migration/migration"; import { createDataStore } from "$lib/dusk/svelte-stores"; @@ -85,27 +86,34 @@
{#if !isLoading && !error && !data} -
-

DUSK token migration requires two transactions:

-
    -
  1. - Approve: Authorize the migration contract to spend your DUSK tokens. -
    2. -
  2. Migrate: Transfer your DUSK tokens to the migration contract.
    3. -
+ +
+

DUSK token migration requires two transactions:

+
    +
  1. + Approve: Authorize the migration contract to spend your DUSK tokens. +
    2. +
  2. + Migrate: Transfer your DUSK tokens to the migration contract. +
    3. +
+

Both steps must be completed for a successful migration.

+
+ +

- Both steps must be completed for a successful migration.

Warning: Make sure your wallet has enough funds to pay for the gas. + Please ensure your wallet has sufficient funds to cover the gas fees for + the migration.

-
+ {:else if isLoading}
- + Approval in progress...
{:else if error}
- + An error occurred during approval
{/if} @@ -118,31 +126,28 @@
diff --git a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte index dbf5a1249..aac55d737 100644 --- a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte +++ b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte @@ -58,23 +58,23 @@
{#if !isLoading && !data && !error}
- - Migration Approved + + Approval successful! You may now proceed with the migration.
{:else if error}
- + Action has been rejected on the connected wallet.
{:else if isLoading && !migrationHash}
- + Migration in progress...
{/if} {#if migrationHash && chain?.blockExplorers}
- + Migration has been submitted
@@ -102,13 +102,13 @@ display: flex; justify-content: center; flex-direction: column; + gap: 1.875em; &-approval { display: flex; flex-direction: column; align-items: center; gap: var(--default-gap); - padding: 2.25em 0; } } diff --git a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte index ae969c3f0..7a21503b6 100644 --- a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte +++ b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte @@ -18,7 +18,6 @@ middleEllipsis, } from "$lib/dusk/string"; import { - AppAnchor, AppAnchorButton, AppImage, ApproveMigration, @@ -27,7 +26,6 @@ } from "$lib/components"; import { Button, - Card, ExclusiveChoice, Icon, Stepper, @@ -71,9 +69,6 @@ /** @type {TokenNames} */ let selectedChain = erc20.name; - /** @type {boolean} */ - const migrationInProgress = false; - /** @type {undefined | bigint} */ let connectedWalletBalance; @@ -92,6 +87,8 @@ /** @type {boolean} */ let isInputDisabled = false; + const steps = [{ label: "Approve" }, { label: "Migrate" }, { label: "Done" }]; + $: ({ currentProfile } = $walletStore); $: moonlightAccount = currentProfile?.account.toString(); @@ -241,16 +238,6 @@
- {#if migrationInProgress} -
- Another migration is in progress. You can check the status here. -
- {/if} -

From:

- +
+ {#if migrationStep === 0} migrationStep++} @@ -357,7 +344,7 @@

Migration completed successfully!

{/if} - +
{/if} {#if !walletState.isConnected} @@ -407,12 +394,19 @@ gap: var(--default-gap); padding: 1.25em; + &__wizard { + margin-top: var(--default-gap); + gap: 1.25em; + display: flex; + flex-direction: column; + } + &__execute { display: flex; flex-direction: column; align-items: center; gap: var(--default-gap); - padding: 2.25em 0; + padding-bottom: 2.25em; } &__header { @@ -442,12 +436,6 @@ align-items: center; } - &__progress-notice { - padding: 1em 1.375em; - border-radius: 1.5em; - border: 1px solid var(--primary-color); - } - &__token-header { font-weight: 500; } diff --git a/web-wallet/src/lib/contracts/contract-descriptors.js b/web-wallet/src/lib/contracts/contract-descriptors.js index fc1eca8a1..3cf391d91 100644 --- a/web-wallet/src/lib/contracts/contract-descriptors.js +++ b/web-wallet/src/lib/contracts/contract-descriptors.js @@ -57,7 +57,9 @@ export default [ ], }, { - enabled: import.meta.env.VITE_FEATURE_MIGRATE === "true", + enabled: + import.meta.env.VITE_FEATURE_MIGRATE === "true" && + import.meta.env.VITE_REOWN_PROJECT_ID !== "", id: "migrate", label: "Migrate", operations: [ diff --git a/web-wallet/src/lib/migration/walletConnection.js b/web-wallet/src/lib/migration/walletConnection.js index 8eeae9397..de61b7b27 100644 --- a/web-wallet/src/lib/migration/walletConnection.js +++ b/web-wallet/src/lib/migration/walletConnection.js @@ -5,14 +5,25 @@ import { bsc, mainnet, sepolia } from "@reown/appkit/networks"; import { disconnect, getAccount, getBalance, watchAccount } from "@wagmi/core"; import { readable } from "svelte/store"; -// Required project metadata -const projectId = "b5303e1c8374b100fbb7f181884fef28"; -const metadata = { - description: "Dusk Web-Wallet", - icons: [], - name: "Dusk Migration", - url: "https://127.0.0.1:5173/dashboard/", -}; +/** + * @constant {string} projectId - The ID of the project, sourced from an environment variable. + * + * @description + * This constant retrieves the project ID from the environment variable `VITE_REOWN_PROJECT_ID`. + * If the environment variable is not set, it defaults to an empty string. This behavior is not ideal + * because an empty `projectId` will cause the modal initialization to fail. + * + * While this issue typically arises due to a developer error (e.g., forgetting to set the environment variable), + * resolving it properly requires a broader refactor of the codebase to better handle missing or invalid `projectId` values. + * + * Additionally, when the `projectId` is missing, the "migrate" functionality will not be accessible in the UI, + * effectively hiding the "broken" flow. Therefore, while the error can occur, users are unlikely to encounter it. + * + * **To improve:** + * Consider implementing a mechanism to ensure `VITE_REOWN_PROJECT_ID` is always defined during the build or + * runtime processes, potentially throwing a clear error during startup if it is missing. + */ +const projectId = import.meta.env.VITE_REOWN_PROJECT_ID || ""; /** @typedef {import("@reown/appkit/networks").AppKitNetwork} AppKitNetwork */ /** @type {[AppKitNetwork, ...AppKitNetwork[]]} */ @@ -33,7 +44,6 @@ export const modal = createAppKit({ onramp: false, swaps: false, }, - metadata, networks, projectId, themeMode: "dark", diff --git a/web-wallet/vite.config.js b/web-wallet/vite.config.js index 6057f5941..f7e515fdf 100644 --- a/web-wallet/vite.config.js +++ b/web-wallet/vite.config.js @@ -50,6 +50,7 @@ export default defineConfig(({ mode }) => { VITE_GAS_PRICE_LOWER: env.VITE_GAS_PRICE_LOWER, VITE_GAS_PRICE_UPPER: env.VITE_GAS_PRICE_UPPER, VITE_NODE_URL: env.VITE_NODE_URL, + VITE_REOWN_PROJECT_ID: env.VITE_REOWN_PROJECT_ID, }, }, plugins: