diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md index 65ee2c3eb..7ed9f4c24 100644 --- a/web-wallet/CHANGELOG.md +++ b/web-wallet/CHANGELOG.md @@ -9,10 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Add "VITE_REOWN_PROJECT_ID" ENV variable [#3267] +- Add additional notices to the Migrate flow [#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 (Migrate flow) [#3267] +- Trigger sync after a successful migration [#3267] ### Removed @@ -480,6 +487,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..acf1daed9 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,37 @@
{#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. -
-

- Both steps must be completed for a successful migration.

Warning: Make sure your wallet has enough funds to pay for the gas. -

+
+ +
+

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.

+
+ + +

+ 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,23 +129,27 @@
diff --git a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte index dbf5a1249..12b870e86 100644 --- a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte +++ b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte @@ -14,6 +14,7 @@ import { migrate } from "$lib/migration/migration"; import { createDataStore } from "$lib/dusk/svelte-stores"; import { createEventDispatcher } from "svelte"; + import { walletStore } from "$lib/stores"; /** @type {bigint} */ export let amount; @@ -46,6 +47,9 @@ }); if (result.status === "success") { dispatch("incrementStep"); + setTimeout(() => { + walletStore.sync(); + }, 20000); } else { throw new Error("Could not validate the transaction receipt"); } @@ -58,35 +62,35 @@
{#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 + + Your migration request is being processed... + +

+ Your migration request is currently being executed and may take a few + minutes to complete. You can track the transaction status here. +

+
- -

- Migration takes some minutes to complete. Your transaction is being - executed and you can check its status here. -

- {/if} {#if (isLoading || !data || error) && !migrationHash}
- {#if migrationInProgress} -
- Another migration is in progress. You can check the status here. -
- {/if} -

From:

- +
+ {#if migrationStep === 0} migrationStep++} @@ -353,11 +340,20 @@ /> {:else}
- -

Migration completed successfully!

+
+ +

Migration request accepted!

+
+ +

+ The migration request has now been accepted on chain. We will + process the request in the background. Receiving your DUSK might + take some time. Check back again later. +

+
{/if} - +
{/if} {#if !walletState.isConnected} @@ -407,12 +403,25 @@ 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; + + &-approval { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--default-gap); + } } &__header { @@ -442,12 +451,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: