Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release: v2.4.0 #614

Open
wants to merge 70 commits into
base: develop
Choose a base branch
from
Open

Release: v2.4.0 #614

wants to merge 70 commits into from

Conversation

olgakup
Copy link
Contributor

@olgakup olgakup commented Feb 10, 2025

Summary by CodeRabbit

  • Style

    • Enhanced vertical scrolling to improve navigation when content exceeds the visible area.
    • Adjusted the onboarding container to maintain a consistent minimum height for better layout stability.
    • Updated text wrapping behavior for headers in popups to ensure better readability.
    • Improved visual feedback for navigation links with updated opacity and hover states.
    • Enhanced button elements for actions to improve semantic structure and accessibility.
    • Set fixed dimensions for images to ensure consistent rendering.
  • New Features

    • Introduced conditional rendering for SVG icons based on active state to enhance interactivity.
    • Updated network category management to ensure current networks are included in relevant lists.
    • Implemented a new method for processing transaction addresses to improve visual representation.
    • Added a user interface for selecting and restoring backups, enhancing backup management capabilities.
    • Introduced a settings view component for managing backups within the settings interface.
    • Added a new component for displaying error messages when loading network assets fails.

Copy link

coderabbitai bot commented Feb 10, 2025

Walkthrough

The changes introduce modifications to several Vue components and stylesheets. In App.vue, new CSS properties are added to enhance scrolling and layout. The common-popup.less file receives a new style rule for h2 elements to control word breaking. The index.vue file updates navigation links for improved active state indication. Various SVG components (activity.vue, assets.vue, dapps.vue, nfts.vue) are restructured to conditionally render based on an isActive prop. Lastly, network-activity-action.vue transitions anchor elements to buttons for better semantic usage, and network-assets-item.vue updates image dimensions. Additional components for backup management and error handling are introduced, enhancing the overall functionality and user experience.

Changes

File Change Summary
packages/extension/src/ui/onboard/App.vue Modified CSS: added overflow-y: auto; to the body element and set min-height: 700px; for .onboard__container.
packages/extension/src/providers/ethereum/ui/styles/common-popup.less Added new style rule: .common-popup h2 { word-break: normal !important; }.
packages/extension/src/ui/action/components/network-menu/index.vue Updated <router-link> components with exact-active-class and :is-active prop; changed anchor opacity styles.
packages/extension/src/ui/action/icons/tabs/activity.vue Restructured SVG rendering with conditional display based on isActive prop; added isActive prop.
packages/extension/src/ui/action/icons/tabs/assets.vue Restructured SVG rendering with conditional display based on isActive prop; added isActive prop.
packages/extension/src/ui/action/icons/tabs/dapps.vue Restructured SVG rendering with conditional display based on isActive prop; added isActive prop.
packages/extension/src/ui/action/icons/tabs/nfts.vue Restructured SVG rendering with conditional display based on isActive prop; added isActive prop.
packages/extension/src/ui/action/views/network-activity-action.vue Changed <a> elements to <button> for actions; added CSS for buttons and updated layout properties.
packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue Updated <img> element to have fixed dimensions (32px) instead of using max-width in CSS.
packages/extension/src/libs/networks-state/index.ts Removed insertNetworksWithNewFeatures method and related calls from getPinnedNetworkNames and getEnabledTestNetworks.
packages/extension/src/ui/action/views/import-account/views/import-account-password.vue Updated import of Wallet class from ethereumjs-wallet to @ethereumjs/wallet and simplified address retrieval.
packages/extension/src/ui/action/views/import-account/views/import-account-private-key.vue Updated import of Wallet class from ethereumjs-wallet to @ethereumjs/wallet and simplified address retrieval.
packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue Modified transaction image source processing to call network.displayAddress before network.identicon.
packages/extension/src/libs/backup-state/configs.ts Added constants BACKUP_URL and HEADERS for backup configurations.
packages/extension/src/libs/backup-state/index.ts Introduced BackupState class for managing backup operations and related methods.
packages/extension/src/libs/backup-state/types.ts Added new types and interfaces for backup state management.
packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue New component for managing backups, including UI for toggling backups and listing current backups.

Possibly related PRs

  • feat: add backup page #594: The changes in the main PR regarding the App.vue file's logic for displaying the back button and applying classes based on route names are related to the modifications in the retrieved PR, which also involves updates to the App.vue file, specifically adding conditions for the visibility of the back button and class application based on the new route name restore-wallet-backup-detected.
  • fix: identicon mismatch on activity #607: The changes in the main PR regarding the modification of the transaction image source in the network-activity-transaction.vue component are directly related to the changes in the retrieved PR, which also involve adjustments to the image source generation in the same component. Both PRs focus on how the address is processed before being passed to the identicon function.

Suggested reviewers

  • NickKelly1
✨ Finishing Touches
  • 📝 Generate Docstrings (Beta)

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

github-actions bot commented Feb 10, 2025

💼 Build Files
chrome: enkrypt-chrome-f1228881.zip
firefox: enkrypt-firefox-f1228881.zip

💉 Virus total analysis
chrome: f1228881
firefox: f1228881

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/extension/src/ui/onboard/App.vue (1)

72-72: Consolidate overflow properties.

The overflow: hidden; on line 72 conflicts with overflow-y: auto; on line 75. Consider consolidating these properties for better maintainability.

  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
-   overflow: hidden;
    font-size: 0;
    font-family: 'Roboto', sans-serif;
-   overflow-y: auto;
+   overflow-x: hidden;
+   overflow-y: auto;
  }

Also applies to: 75-75

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7bee132 and 232435a.

📒 Files selected for processing (1)
  • packages/extension/src/ui/onboard/App.vue (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: buildAll
  • GitHub Check: test
🔇 Additional comments (1)
packages/extension/src/ui/onboard/App.vue (1)

102-102: Review the height constraints.

The container has both height: 100vh; and min-height: 700px;. On desktop, 100vh will always be greater than 700px, making min-height redundant. However, on mobile devices with small screens, this could force unnecessary scrolling.

Please verify:

  1. Is the 700px minimum height requirement necessary for all screen sizes?
  2. Have you tested this on mobile devices to ensure a good user experience?

Also applies to: 108-108

@kvhnuke kvhnuke changed the title release-2.2.2 release-2.3.2 Feb 10, 2025
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
packages/extension/src/ui/action/components/network-menu/index.vue (1)

95-95: Consider removing !important flags from styles.

The use of !important flags in CSS should be avoided as they:

  1. Make styles harder to override when needed
  2. Can lead to specificity wars
  3. Make the codebase harder to maintain
-    opacity: 1;
+    opacity: 1;
-      opacity: 0.6 !important;
+      opacity: 0.6;
-      opacity: 1 !important;
+      opacity: 1;

Also applies to: 103-103, 109-110

packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue (1)

111-114: Consider using CSS custom properties for focus styles.

The focus styles could be more maintainable using CSS custom properties.

+:root {
+  --focus-ring-color: -webkit-focus-ring-color;
+  --focus-ring-offset: 2px;
+}
 &:focus {
-  outline: -webkit-focus-ring-color auto 1px !important;
-  outline-offset: 2px !important;
+  outline: var(--focus-ring-color) auto 1px;
+  outline-offset: var(--focus-ring-offset);
 }
packages/extension/src/ui/action/icons/tabs/activity.vue (1)

27-33: Consider optimizing the inactive state SVG path.

The path data for the inactive state contains an excessive number of coordinate points, which could be simplified for better maintainability and potentially smaller file size.

Consider using an SVG optimization tool to simplify the path data while maintaining visual fidelity. Tools like SVGO can help with this optimization.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 232435a and 61aa5ef.

📒 Files selected for processing (8)
  • packages/extension/src/providers/ethereum/ui/styles/common-popup.less (1 hunks)
  • packages/extension/src/ui/action/components/network-menu/index.vue (4 hunks)
  • packages/extension/src/ui/action/icons/tabs/activity.vue (1 hunks)
  • packages/extension/src/ui/action/icons/tabs/assets.vue (1 hunks)
  • packages/extension/src/ui/action/icons/tabs/dapps.vue (1 hunks)
  • packages/extension/src/ui/action/icons/tabs/nfts.vue (1 hunks)
  • packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue (4 hunks)
  • packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue (2 hunks)
✅ Files skipped from review due to trivial changes (1)
  • packages/extension/src/providers/ethereum/ui/styles/common-popup.less
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: buildAll
  • GitHub Check: test
🔇 Additional comments (8)
packages/extension/src/ui/action/components/network-menu/index.vue (1)

6-6: LGTM! Improved active state handling.

The addition of exact-active-class ensures precise route matching for active states.

Also applies to: 15-15, 22-22, 32-32

packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue (1)

4-9: LGTM! Improved semantic markup and accessibility.

Great improvements:

  1. Using <button> instead of <a> for actions is semantically correct
  2. Added proper focus styles for keyboard navigation

Also applies to: 10-15

packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue (1)

7-7: LGTM! Improved image rendering performance.

The explicit width and height attributes help prevent Cumulative Layout Shift (CLS) and improve Core Web Vitals.

Also applies to: 226-228

packages/extension/src/ui/action/icons/tabs/assets.vue (2)

2-36: LGTM! Clean and consistent SVG implementation.

The conditional rendering of SVGs based on the isActive prop is well-structured, with proper opacity differentiation between active and inactive states.


39-46: LGTM! Clean prop definition.

The isActive prop is properly typed and has a sensible default value.

packages/extension/src/ui/action/icons/tabs/nfts.vue (1)

2-42: LGTM! Well-structured SVG with proper clipping path.

The SVG implementation is clean with proper use of clipping path for the active state.

packages/extension/src/ui/action/icons/tabs/dapps.vue (1)

2-36: LGTM! Clean grid icon implementation.

The SVG implementation effectively represents a grid pattern with proper state handling.

packages/extension/src/ui/action/icons/tabs/activity.vue (1)

2-35: LGTM! Consistent with other tab icons.

The implementation follows the same pattern as other tab icons, maintaining consistency across the UI.

Also applies to: 38-51

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
packages/extension/tsconfig.node.json (1)

13-16: Expanded Include Scope for File Coverage
The inclusion of "src/**/*.ts", "configs/**/*.ts", and "src/**/*.vue" considerably broadens the files processed by this configuration, ensuring that both TypeScript and Vue files are correctly compiled. Please verify that this expanded scope aligns with your project structure and that it does not unintentionally include files that should be excluded from Node compilation.

packages/extension/src/ui/action/App.vue (1)

633-648: Consider a more concise implementation for network category handling.

The current implementation for both Pinned and New categories follows a similar pattern. Consider refactoring to reduce code duplication.

-    case NetworksCategory.Pinned: {
-      const hasCurrentNetwork = pinnedNetworks.value.some(
-        net => net.name === currentNetwork.value.name,
-      );
-      return hasCurrentNetwork
-        ? pinnedNetworks.value
-        : [...pinnedNetworks.value, currentNetwork.value];
-    }
-    case NetworksCategory.New: {
-      const hasCurrentNetwork = newNetworks.includes(currentNetwork.value.name);
-      const newNets = networks.value.filter(net =>
-        newNetworks.includes(net.name),
-      );
-
-      return hasCurrentNetwork ? newNets : [...newNets, currentNetwork.value];
-    }
+    case NetworksCategory.Pinned: {
+      const networks = pinnedNetworks.value;
+      return networks.some(net => net.name === currentNetwork.value.name)
+        ? networks
+        : [...networks, currentNetwork.value];
+    }
+    case NetworksCategory.New: {
+      const networks = networks.value.filter(net => newNetworks.includes(net.name));
+      return newNetworks.includes(currentNetwork.value.name)
+        ? networks
+        : [...networks, currentNetwork.value];
+    }
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 61aa5ef and 8a35cde.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (25)
  • package.json (1 hunks)
  • packages/extension-bridge/package.json (1 hunks)
  • packages/extension/configs/vite/empty.js (1 hunks)
  • packages/extension/configs/vite/transform-manifest.ts (3 hunks)
  • packages/extension/package.json (3 hunks)
  • packages/extension/src/libs/networks-state/index.ts (0 hunks)
  • packages/extension/src/ui/action/App.vue (3 hunks)
  • packages/extension/src/ui/action/main.ts (1 hunks)
  • packages/extension/src/ui/action/utils/browser.ts (1 hunks)
  • packages/extension/src/ui/action/views/import-account/views/import-account-password.vue (2 hunks)
  • packages/extension/src/ui/action/views/import-account/views/import-account-private-key.vue (2 hunks)
  • packages/extension/tsconfig.node.json (1 hunks)
  • packages/extension/vite.config.ts (4 hunks)
  • packages/hw-wallets/package.json (2 hunks)
  • packages/keyring/package.json (1 hunks)
  • packages/name-resolution/package.json (2 hunks)
  • packages/request/package.json (1 hunks)
  • packages/signers/bitcoin/package.json (1 hunks)
  • packages/signers/ethereum/package.json (1 hunks)
  • packages/signers/kadena/package.json (1 hunks)
  • packages/signers/polkadot/package.json (1 hunks)
  • packages/storage/package.json (1 hunks)
  • packages/swap/package.json (1 hunks)
  • packages/types/package.json (1 hunks)
  • packages/utils/package.json (1 hunks)
💤 Files with no reviewable changes (1)
  • packages/extension/src/libs/networks-state/index.ts
✅ Files skipped from review due to trivial changes (3)
  • packages/extension/src/ui/action/main.ts
  • packages/extension/configs/vite/transform-manifest.ts
  • packages/extension-bridge/package.json
🔇 Additional comments (92)
packages/extension/tsconfig.node.json (1)

24-28: Enhanced Compiler Options with Types and Path Aliases
Adding "types": ["node"] explicitly ensures Node-specific globals are recognized. Additionally, introducing the "paths" mapping for "@/*": ["./src/*"] and "@action/*": ["./src/ui/action/*"] improves module resolution and simplifies import statements across the codebase. Confirm that the relative paths are correct with respect to the location of this tsconfig.node.json file.

packages/extension/src/ui/action/App.vue (2)

351-355: LGTM! Good simplification of the network order update logic.

The removal of the unnecessary conditional check makes the code more straightforward and maintainable.


369-371:

❓ Verification inconclusive

Verify the safety of non-null assertion on selectedAccount.

The use of the non-null assertion operator (!) assumes selectedAccount can never be null. Please verify this assumption or consider adding a null check.


🏁 Script executed:

#!/bin/bash
# Description: Check if selectedAccount can be null when generating buy link

# Search for all places where selectedAccount is set
rg -A 5 "selectedAccount\s*=" packages/extension/src/ui/action/

Length of output: 1169


Non-null assertion on selectedAccount: Confirm it's always defined

The buy link code uses the non-null assertion (selectedAccount!) to access the account's address. Our search shows that selectedAccount is assigned from activeAccounts[0] (and sometimes updated) without an explicit null check. This could lead to a runtime error if activeAccounts is ever empty or the expected account isn't available. Please verify that the state management guarantees a defined selectedAccount in all cases, or consider adding a null check to handle potential undefined values safely.

packages/extension/src/ui/action/utils/browser.ts (1)

53-53: LGTM! Good addition of cache control.

Adding { cache: "no-store" } ensures fresh version information is always retrieved, preventing stale cache from affecting version checks.

packages/extension/src/ui/action/views/import-account/views/import-account-password.vue (1)

40-40: LGTM! Good package upgrade and method improvement.

  • Updated to official @ethereumjs/wallet package
  • Switched to more idiomatic getAddressString() method

Also applies to: 116-116

packages/extension/src/ui/action/views/import-account/views/import-account-private-key.vue (1)

39-39: LGTM! Consistent implementation with import-account-password.vue.

The changes mirror those in import-account-password.vue, maintaining codebase consistency:

  • Updated to @ethereumjs/wallet package
  • Switched to getAddressString() method

Also applies to: 96-96

packages/types/package.json (1)

27-41:

❓ Verification inconclusive

LGTM! Good maintenance updates.

Dependencies have been updated to their latest minor/patch versions.

Please ensure these updates are compatible by running the test suite:


🏁 Script executed:

#!/bin/bash
# Verify package compatibility
npm install
npm test

Length of output: 4487


Action Required: Verify Compatibility Using Yarn Workspaces

The dependency updates look good, but the automated test commands using npm failed due to workspace-specific configuration (e.g., "Unsupported URL Type 'workspace:'" and missing node_modules state file). Since this project leverages Yarn workspaces, please ensure compatibility by manually running the tests with the appropriate commands:

  • Run installation with Yarn:
    yarn install
  • Run the test suite with Yarn:
    yarn test

Once these commands complete successfully, we can be confident the dependency updates are fully compatible.

packages/storage/package.json (7)

30-30: Update @types/node Version
The version of @types/node has been bumped from an earlier version to ^22.13.1. This update should help with improved type definitions and compatibility with newer Node.js features.


33-33: Bump eslint Version
The eslint version is updated to ^9.20.0. Please double-check that the new ESLint rules and parser settings are compatible with your existing configuration.


39-39: Upgrade Prettier
The new version of prettier is now ^3.4.2. This should provide additional formatting improvements. A quick re-run of the formatter is recommended to ensure consistency.


42-42: Update tsup Version
The tsup dependency has been updated to ^8.3.6 for potential build performance enhancements. Verify that the build output still meets expectations.


43-43: Update TypeScript Version
The TypeScript dependency is now at ^5.7.3. Make sure to run a full type-check as newer versions might introduce stricter checks.


44-44: Upgrade typescript-eslint
The package typescript-eslint is updated to version 8.23.0. Please confirm that no new linting issues are introduced after this update.


45-45: Upgrade vitest Version
The testing framework vitest now uses version ^3.0.5. It is advisable to run the test suite to ensure that all tests pass under the updated version.

packages/name-resolution/package.json (7)

25-25: Update @types/node Version
The @types/node dependency is updated to ^22.13.1. Verify that this does not conflict with any other type definitions in the project.


28-28: Bump eslint Version
eslint has been bumped to ^9.20.0. Ensure that your linting configuration remains compatible and that no unexpected linting errors are introduced.


34-34: Update Prettier
The prettier version has been updated to ^3.4.2. Re-run the formatter to confirm that the formatting style remains consistent across the codebase.


37-37: Upgrade tsup
The version of tsup is updated to ^8.3.6. Confirm that the build process completes as expected with the new version.


38-38: Update TypeScript
TypeScript is now at ^5.7.3. A full recompile is recommended to catch any type-related issues that might arise from the update.


39-39: Upgrade typescript-eslint
The typescript-eslint dependency is updated to 8.23.0. Make sure that your ESLint rules and TypeScript settings integrate well with this new version.


40-40: Bump vitest Version
The testing framework vitest has been updated to ^3.0.5. It’s a good idea to run the test suite as a whole, as some configurations might need adjustments.

packages/signers/kadena/package.json (8)

31-31: Update @polkadot/util-crypto Version
The dependency @polkadot/util-crypto is updated from ^13.2.3 to ^13.3.1. This ensures consistency with other packages using the same dependency.


33-33: Update @types/node Version
The version of @types/node is bumped to ^22.13.1, aligning with the updates across other packages. Ensure integrated type checks remain valid.


36-36: Bump eslint Version
eslint is now at ^9.20.0. Please verify that the ESLint configuration and any overridden rules work correctly with this update.


42-42: Upgrade Prettier
The prettier package has been upgraded to ^3.4.2. Running a formatting check after this update is recommended.


45-45: Update tsup Version
tsup is updated to ^8.3.6. Confirm that the build pipeline executes without issues and that the bundle output is as expected.


46-46: Upgrade TypeScript
The TypeScript version is updated to ^5.7.3. A full recompile is advisable to ensure that the update does not introduce new type errors.


47-47: Upgrade typescript-eslint Dependency
The new version of typescript-eslint is 8.23.0. Verify that this update maintains the expected linting behavior without introducing breaking changes.


48-48: Bump vitest Version
vitest has been upgraded to ^3.0.5. Running the complete test suite will confirm that tests are compatible with the new version.

packages/utils/package.json (8)

27-27: Update @polkadot/util-crypto Version
The dependency @polkadot/util-crypto has been bumped to ^13.3.1, keeping it consistent with other packages.


33-33: Bump @types/node Version
The version of @types/node is updated to ^22.13.1. Check that the new definitions integrate well with existing code.


36-36: Upgrade eslint
The ESLint version is updated to ^9.20.0. Ensure that the linting process and any custom rules still operate correctly.


42-42: Update Prettier Version
prettier is updated to ^3.4.2. It would be beneficial to run the formatter to ensure that all code remains consistently styled.


45-45: Upgrade tsup
tsup has been updated to ^8.3.6, providing potential build improvements. Validate the build output post-update.


46-46: Bump TypeScript
The TypeScript version is now ^5.7.3. A full type check is recommended to catch any issues introduced by the new version.


47-47: Upgrade typescript-eslint
typescript-eslint has been updated to 8.23.0. Ensure that linting works as expected with this version.


48-48: Bump vitest Version
The testing framework vitest is now ^3.0.5. Running the test suite after this update is recommended to verify test stability.

packages/request/package.json (8)

30-30: Upgrade uuid Dependency
The version of uuid has been updated from ^10.0.0 to ^11.0.5. This update may bring performance improvements or bug fixes—please verify its usage in your code.


34-34: Bump @types/node Version
The @types/node dependency is updated to ^22.13.1. Confirm compatibility across all modules using Node.js types.


37-37: Update eslint Version
eslint is now updated to ^9.20.0. It is important to ensure that linting remains error-free under the new version.


43-43: Upgrade Prettier
The prettier version is now ^3.4.2. Confirm that formatting across the codebase remains consistent after this bump.


46-46: Update tsup Version
The build tool tsup is updated to ^8.3.6. Make sure that the build artifacts are generated correctly with the new version.


47-47: Bump TypeScript Version
The dependency TypeScript is updated to ^5.7.3. A comprehensive build and type-check is recommended as newer TypeScript versions can introduce stricter type rules.


48-48: Upgrade typescript-eslint
The typescript-eslint package is now at version 8.23.0. Please ensure that it continues to integrate smoothly with your ESLint configuration.


49-49: Bump vitest Version
The vitest testing framework has been updated to ^3.0.5. Running the entire test suite after this change will help verify that there are no regressions.

packages/signers/bitcoin/package.json (4)

35-35: Dependency Update: @types/node
The update to "@types/node": "^22.13.1" helps ensure that you have the most recent type definitions available. Confirm that this version is compatible with any other packages relying on Node types.


38-38: Dependency Update: ESLint
The ESLint dependency has been bumped to "^9.20.0". This update should improve linting features and maintain compatibility with your configuration. Please verify that the ESLint config remains valid.


44-44: Dependency Update: Prettier
Upgrading Prettier to "^3.4.2" standardizes code formatting across the project. Ensure that any project-specific formatting overrides are still correctly applied.


47-50: Dev Tools Update: tsup, TypeScript, TypeScript-ESLint, Vitest
The updates to "tsup": "^8.3.6", "typescript": "^5.7.3", "typescript-eslint": "8.23.0", and "vitest": "^3.0.5" align this package’s toolchain with the latest compatible versions. Please run a full build and test suite to ensure these upgrades do not introduce any unforeseen issues.

packages/signers/ethereum/package.json (4)

35-35: Dependency Update: @types/node
The change to "@types/node": "^22.13.1" updates the Node.js type definitions. Ensure that this version works seamlessly with any dependent modules.


38-38: Dependency Update: ESLint
Bumping ESLint to "^9.20.0" is consistent with broader dependency updates. Verify that all ESLint rules and plugins continue to function correctly.


44-44: Dependency Update: Prettier
Updating Prettier to "^3.4.2" brings improvements in code formatting. Confirm that this update does not conflict with any existing formatting configurations.


47-50: Dev Tools Update: tsup, TypeScript, TypeScript-ESLint, Vitest
The upgrades "tsup": "^8.3.6", "typescript": "^5.7.3", "typescript-eslint": "8.23.0", and "vitest": "^3.0.5" help keep the build, type-checking, and testing tools up to date. Ensure comprehensive testing to catch any issues arising from these version bumps.

packages/signers/polkadot/package.json (6)

25-25: Dependency Update: @commitlint/cli
Upgrading "@commitlint/cli" to "^19.7.1" will improve commit linting consistency. Please confirm that this version works with your commit hook configurations.


27-28: Dependency Update: Polkadot Utilities
The updates for "@polkadot/util": "^13.3.1" and "@polkadot/util-crypto": "^13.3.1" ensure that your Polkadot-related utilities are current. Ensure compatibility with any code that depends on these modules.


34-34: Dependency Update: @types/node (dev)
The change to "@types/node": "^22.13.1" in devDependencies brings the Node.js type definitions up to date.


37-37: Dependency Update: ESLint (dev)
ESLint has been updated to "^9.20.0" in the devDependencies section. Confirm that the linting process behaves as expected.


43-43: Dependency Update: Prettier (dev)
Updating Prettier to "^3.4.2" should provide improved formatting consistency. Test this change to prevent any unexpected formatting issues.


46-49: Dev Tools Update: tsup, TypeScript, TypeScript-ESLint, Vitest (dev)
The upgrade to "tsup": "^8.3.6", "typescript": "^5.7.3", "typescript-eslint": "8.23.0", and "vitest": "^3.0.5" helps ensure that your development tooling remains modern and efficient. Run your build and test workflows to validate these changes.

packages/keyring/package.json (4)

32-32: Dependency Update: @polkadot/util
Updating "@polkadot/util": "^13.3.1" helps keep the cryptographic utilities current and consistent with other packages in the project.


37-37: Dependency Update: @types/node (dev)
The update to "@types/node": "^22.13.1" in devDependencies ensures that type information is current.


40-40: Dependency Update: ESLint (dev)
ESLint is now set to "^9.20.0", and this should be validated against your current linting rules and configurations.


46-52: Dev Tools Update: Prettier, tsup, TypeScript, TypeScript-ESLint, Vitest (dev)
The upgrades to "prettier": "^3.4.2", "tsup": "^8.3.6", "typescript": "^5.7.3", "typescript-eslint": "8.23.0", and "vitest": "^3.0.5" are consistent with updates in other packages. Please perform a complete build and run tests to ensure smooth integration.

packages/swap/package.json (8)

27-27: Dependency Update: @solana/spl-token
The update to "@solana/spl-token": "^0.4.12" advances the token handling library to include recent improvements and fixes. Validate its usage in your swap logic.


28-28: Dependency Update: @solana/web3.js
Bumping "@solana/web3.js" to "^1.98.0" ensures that blockchain connectivity is maintained with current standards. Confirm that no breaking changes affect your integration.


34-34: Dependency Update: rango-sdk-basic
The change to "rango-sdk-basic": "^0.1.62" should incorporate the latest enhancements. Ensure that the API or functionality provided by the SDK is still used as intended.


36-36: Dependency Update: uuid
Upgrading "uuid": "^11.0.5" brings new robustness and potential performance improvements to your unique identifier generation. Test thoroughly for any side effects.


42-42: Dependency Update: @types/node (dev)
The version update to "@types/node": "^22.13.1" in devDependencies keeps the type system current.


45-45: Dependency Update: ESLint (dev)
Updating ESLint to "^9.20.0" helps standardize linting rules across the project. Verify that it integrates with your existing setup.


51-51: Dependency Update: Prettier (dev)
The bump to "^3.4.2" for Prettier ensures consistency in code formatting. Validate that no format configuration is inadvertently overridden.


54-57: Dev Tools Update: tsup, TypeScript, TypeScript-ESLint, Vitest (dev)
The upgrades to "tsup": "^8.3.6", "typescript": "^5.7.3", "typescript-eslint": "8.23.0", and "vitest": "^3.0.5" are in line with recent updates across the project. Ensure that your build, type-checking, and testing processes run without issues after these changes.

package.json (4)

35-36: Upgrade Commitlint Packages
The updates for @commitlint/cli and @commitlint/config-conventional to version ^19.7.1 ensure you receive the latest linting rules and bug fixes for commit messages. Please verify that your commit hook configuration remains compatible with these changes.


37-37: Upgrade @swc/core for Improved Build Performance
Bumping @swc/core to ^1.10.14 incorporates recent optimizations and bug fixes. It is recommended to run a full build/test cycle to ensure that the transpilation output is as expected.


38-39: Update Concurrently and Husky
The upgrade of concurrently to ^9.1.2 and husky to ^9.1.7 should improve task-running and Git hook reliability. Confirm that your scripts leveraging these tools (for example, file watching and pre-commit hooks) behave correctly after the update.


41-41: Upgrade Nodemon for Enhanced Developer Workflow
Updating nodemon to ^3.1.9 will likely provide improvements in reliability and performance during development. Please test your watch mode processes to ensure they function as expected.

packages/hw-wallets/package.json (6)

25-25: Upgrade @types/node Dependency
The update to @types/node version ^22.13.1 offers improved and more up-to-date type definitions. Verify that none of your type checks are affected by any API changes in Node.js.


28-28: Upgrade ESLint Version
Bumping eslint to ^9.20.0 provides access to enhanced linting rules and bug fixes. Ensure that your ESLint configuration is still valid and that custom rules (if any) continue to work as expected.


34-34: Upgrade Prettier for Consistent Code Formatting
The change to prettier version ^3.4.2 should help maintain consistent code formatting across the project. It is advisable to re-run your formatter to catch any minor differences introduced by the new version.


37-40: Upgrade Build Tools and Testing Frameworks
Upgrading tsup (^8.3.6), typescript (^5.7.3), typescript-eslint (8.23.0), and vitest (^3.0.5) collectively strengthens the build, type-checking, and testing processes. Please ensure that your build scripts and test suites execute successfully after these updates.


55-56: Update Ledger Hardware Wallet Dependencies
Updating @ledgerhq/hw-app-btc to ^10.5.0 and @ledgerhq/hw-app-eth to ^6.42.5 improves support for Ledger devices. It’s important to run hardware integration tests to ensure that wallet interactions remain stable.


60-66: Upgrade Ledger, Polkadot, Trezor and Bitcoin Libraries
The following upgrades have been performed:

  • @ledgerhq/live-common^34.20.0
  • @polkadot/types^15.5.2
  • @polkadot/util^13.3.1
  • @trezor/connect & @trezor/connect-webextension^9.4.7
  • @zondax/ledger-substrate^1.0.1
  • bitcoinjs-lib^6.1.7
    These changes should enhance compatibility, performance, and security. Please verify that all wallet and blockchain transaction flows are operating correctly after these upgrades.
packages/extension/package.json (7)

26-26: Update Amplitude Analytics Dependency
Upgrading @amplitude/analytics-browser to ^2.11.11 ensures the latest analytics tracking improvements and bug fixes are in place. Verify that analytics events and data collection function as expected.


38-40: Integrate EthereumJS Wallet and Update Kadena Packages

  • The addition of @ethereumjs/wallet at version ^2.0.4 introduces enhanced wallet functionality.
  • Upgrading @kadena/client and @kadena/pactjs-cli to ^1.16.0 aligns your codebase with the latest Kadena features and fixes.
    Ensure that components relying on these dependencies are tested thoroughly for any integration issues.

42-44: Upgrade Ethereum and Metaplex Packages
Upgrading @metamask/eth-sig-util to ^8.2.0 and @metaplex-foundation/mpl-bubblegum to ^4.3.1, along with updating @metaplex-foundation/umi to ^1.0.0, provides better security and improved functionality. Please validate that your blockchain transaction workflows and related UIs continue to operate seamlessly.


45-53: Enhance Polkadot and Metaplex Bundled Dependencies
The updates include:

  • Adding @metaplex-foundation/umi-bundle-defaults at ^1.0.0.
  • Upgrading several Polkadot packages (@polkadot/api, @polkadot/extension-inject, @polkadot/keyring, @polkadot/rpc-provider, @polkadot/types, @polkadot/types-known, @polkadot/ui-shared, and @polkadot/util) to their respective newer versions.
    These enhancements are designed to improve performance and compatibility. Ensure that any features relying on Polkadot functionality are validated with integration tests.

55-59: Update Solana Ecosystem Dependencies
The Solana-related libraries have been updated:

  • @solana-developers/helpers^2.7.0
  • @solana/spl-token^0.4.12
  • @solana/wallet-standard-features^1.3.0
  • @solana/web3.js^1.98.0
  • @wallet-standard/base^1.1.0
    These updates should ensure better stability and feature support for Solana interactions. Please test Solana functionality to confirm compatibility.

63-66: Update UI and Utility Dependencies
Several frontend libraries have been upgraded:

  • bitcoinjs-lib^6.1.7
  • concurrently^9.1.2
  • echarts^5.6.0
  • pinia^2.3.1
  • uuid^11.0.5
  • vue^3.5.13
  • vue-router^4.5.0
    These changes are expected to improve performance, security, and feature enhancements in the UI. Please verify that your user interfaces and state management logic work smoothly following these updates.

Also applies to: 75-75, 79-80, 82-82


91-92: Comprehensive Update of Build, Testing, and Linting Tools
The devDependencies have been extensively updated to include new versions of:

  • Vite plugins and Rollup-related packages (e.g., @crxjs/vite-plugin, @rollup/plugin-commonjs, @rollup/plugin-node-resolve, @rollup/plugin-replace, @rollup/plugin-typescript).
  • Type definitions for various packages (e.g., @types/chrome, @types/less, @types/lodash, @types/node).
  • Linting and formatting utilities (e.g., eslint, @vue/eslint-config-prettier, prettier).
  • Build tools and testing frameworks (e.g., tsup, typescript, vitest, vue-tsc).
    These upgrades should lead to improved build performance, enhanced type-checking, and more robust testing. It is advisable to run your complete build and test suite after these updates to catch any regressions.

Also applies to: 95-96, 98-99, 101-107, 113-117, 119-123, 125-126, 128-130, 132-133, 135-139

packages/extension/vite.config.ts (4)

73-73: LGTM!

The addition of the 'os' module to the polyfills is consistent with other Node.js core modules being polyfilled.


123-123: LGTM!

The alias for the fs module correctly points to the empty implementation, which is consistent with the mock implementation approach.


35-37:

❓ Verification inconclusive

Verify if this workaround is still necessary.

The skipWebSocketTokenCheck option in the legacy configuration appears to be a workaround. Please verify if this is still necessary or if there's a more permanent solution available.


🌐 Web query:

What is the purpose of skipWebSocketTokenCheck in Vite legacy configuration?

💡 Result:

The skipWebSocketTokenCheck option in Vite addresses a security vulnerability introduced in earlier versions by allowing developers to bypass WebSocket connection validation at their own risk. Here's what you need to know:

Security Context

Vite 6.0.9+ added mandatory token validation for WebSocket connections after discovering malicious websites could hijack HMR WebSockets through Cross-Site WebSocket Hijacking (CSWSH) attacks[1][2]. This vulnerability allowed:

  • Reading HMR file change notifications
  • Accessing error details
  • Potential exposure of plugin-specific sensitive data[2]

Functionality

When enabled (skipWebSocketTokenCheck: true), this option:

  1. Disables security token checks for WebSocket connections
  2. Reverts to pre-6.0.9 behavior where any origin could connect
  3. Maintains compatibility with older plugins/frameworks that manually connect to Vite's WebSocket server[1][7]

Recommended Usage

Only enable temporarily if:

  • Using incompatible plugins that directly manage WebSocket connections
  • Framework integrations break after upgrading Vite
  • Development workflows require immediate fixes before plugin updates

Security teams strongly advise against production use due to reintroducing CVE-2024-XXXX vulnerabilities[2][7]. The official documentation warns this option should only be used when fully understanding the associated risks[1].

For long-term solutions:

  1. Update affected plugins/frameworks
  2. Use import.meta.hot instead of direct WebSocket access
  3. File issues with plugin maintainers for compatibility fixes[1][2]

Citations:


Security Review: Verify Temporary Workaround for WebSocket Token Check

The legacy configuration at packages/extension/vite.config.ts (lines 35–37) sets skipWebSocketTokenCheck: true, which disables the security token validation for WebSocket connections. According to the latest information, using this option bypasses a mandatory security check introduced in Vite 6.0.9+, and while it maintains compatibility with legacy plugins or frameworks, it reverts to less secure pre-6.0.9 behavior and may expose the system to CSWSH attacks.

Please verify the following:

  • Necessity: Is this workaround still required for your current development environment or legacy dependencies?
  • Security: Can the risks be mitigated by using updated plugins, import.meta.hot improvements, or other permanent solutions?
  • Scope: Ensure this configuration is confined to development settings and not inadvertently enabled in production builds.

If the workaround remains unavoidable, consider documenting the rationale and a timeline for revisiting a more secure, long-term fix.


104-104:

❓ Verification inconclusive

Verify the impact on bundle size.

Setting external: [] means no dependencies will be treated as external during bundling. This could significantly increase the bundle size.


🏁 Script executed:

#!/bin/bash
# Description: Compare bundle sizes before and after the change.

# Build the project and analyze bundle sizes
npm run build
npm run analyze

Length of output: 479


Manual Verification of Bundle Size Impact Required

The attempted automation did not produce usable output because the npm scripts for "build" and "analyze" are missing. This means we cannot automatically verify the impact of setting external: [] on the bundle size. Please manually assess whether this configuration is causing an unintended increase in bundle size and consider adding or updating the relevant build and analysis scripts in your package configuration for future verifications.

Comment on lines +1 to +4
const readFileSync = () => {};
const writeFileSync = () => {};

export { readFileSync, writeFileSync };
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Throw errors in mock implementations to prevent silent failures.

Empty mock implementations could lead to silent failures. Consider throwing errors to make it clear that these functions are not meant to be called.

Apply this diff to throw errors:

-const readFileSync = () => {};
-const writeFileSync = () => {};
+const readFileSync = () => {
+  throw new Error('readFileSync is not implemented in this environment');
+};
+const writeFileSync = () => {
+  throw new Error('writeFileSync is not implemented in this environment');
+};
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const readFileSync = () => {};
const writeFileSync = () => {};
export { readFileSync, writeFileSync };
const readFileSync = () => {
throw new Error('readFileSync is not implemented in this environment');
};
const writeFileSync = () => {
throw new Error('writeFileSync is not implemented in this environment');
};
export { readFileSync, writeFileSync };

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue (2)

13-13: Add error handling for network and activity objects.

The chained method calls could throw if network or activity objects are undefined/null, or if their methods are undefined.

Consider adding null checks and providing a fallback:

-          :src="network.identicon(network.displayAddress((activity.isIncoming ? activity.from : activity.to)))"
+          :src="network?.identicon?.(network?.displayAddress?.((activity?.isIncoming ? activity?.from : activity?.to)) ?? '')"

341-341: Address the TODO comment for dropped transaction styling.

The dropped transaction status lacks distinct styling, which could affect user experience.

Would you like me to suggest a color scheme for dropped transactions that aligns with your design system? For example, we could use a muted variant of the error color or a distinct color that indicates a neutral but final state.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8a35cde and 4e826a7.

📒 Files selected for processing (1)
  • packages/extension/src/ui/action/views/network-activity/components/network-activity-transaction.vue (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: buildAll
  • GitHub Check: test

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🔭 Outside diff range comments (3)
packages/extension/src/ui/onboard/create-wallet/wallet-ready.vue (1)

9-20: ⚠️ Potential issue

Add security attributes to external links.

External links opening in new tabs should include rel="noopener noreferrer" to prevent potential security vulnerabilities.

Apply this diff to add the security attributes:

-        <a href="https://github.com/myetherwallet" target="_blank">
+        <a href="https://github.com/myetherwallet" target="_blank" rel="noopener noreferrer">
-        <a href="https://www.instagram.com/myetherwallet/" target="_blank">
+        <a href="https://www.instagram.com/myetherwallet/" target="_blank" rel="noopener noreferrer">
-        <a href="https://www.reddit.com/r/MyEtherWallet/" target="_blank">
+        <a href="https://www.reddit.com/r/MyEtherWallet/" target="_blank" rel="noopener noreferrer">
-        <a href="https://twitter.com/myetherwallet" target="_blank">
+        <a href="https://twitter.com/myetherwallet" target="_blank" rel="noopener noreferrer">
packages/extension/src/ui/action/views/network-assets/index.vue (1)

112-132: 🛠️ Refactor suggestion

Enhance error handling and prevent rapid retries.

The error handling could be improved with error type information and debouncing.

Consider these improvements:

+const updateAssetsDebounced = useDebounceFn(async () => {
+  try {
+    isFetchError.value = false;
+    isLoading.value = true;
+    assets.value = [];
+    const currentNetwork = selectedNetworkName.value;
+    if (!props.accountInfo.selectedAccount?.address) return;
+
+    const _assets = await props.network.getAllTokenInfo(
+      props.accountInfo.selectedAccount.address
+    );
+    
+    if (selectedNetworkName.value !== currentNetwork) return;
+    assets.value = _assets;
+  } catch (error) {
+    if (error instanceof NetworkError) {
+      console.error('Network error:', error);
+    } else {
+      console.error('Unknown error:', error);
+    }
+    isFetchError.value = true;
+    assets.value = [];
+  } finally {
+    isLoading.value = false;
+  }
+}, 1000);
+
-const updateAssets = () => {
-  isFetchError.value = false;
-  isLoading.value = true;
-  assets.value = [];
-  const currentNetwork = selectedNetworkName.value;
-  if (props.accountInfo.selectedAccount?.address) {
-    props.network
-      .getAllTokenInfo(props.accountInfo.selectedAccount?.address || '')
-      .then(_assets => {
-        if (selectedNetworkName.value !== currentNetwork) return;
-        assets.value = _assets;
-        isLoading.value = false;
-      })
-      .catch(() => {
-        if (selectedNetworkName.value !== currentNetwork) return;
-        isFetchError.value = true;
-        isLoading.value = false;
-        assets.value = [];;
-      });
-  }
-};
+const updateAssets = () => {
+  updateAssetsDebounced();
+};

Don't forget to add the necessary imports:

import { useDebounceFn } from '@vueuse/core';
import { NetworkError } from '@/types/errors';
packages/extension/src/ui/onboard/create-wallet/routes.ts (1)

43-49: 🛠️ Refactor suggestion

Avoid mutating route objects and enhance type safety.

The function correctly transforms routes but has some potential issues:

  1. Direct mutation of route objects
  2. Unsafe type assertion on route.name
 export default (): RouteRecordRaw[] => {
-  return Object.values(routes).map(route => {
-    route.path = `/${namespace}/${route.path}`;
-    route.name = `${namespace}-${String(route.name)}`;
-    return route;
+  return Object.values(routes).map(route => ({
+    ...route,
+    path: `/${namespace}/${route.path}`,
+    name: `${namespace}-${route.name as string}`,
+    component: route.component,
+  }));
   });
 };
🧹 Nitpick comments (39)
packages/extension/src/ui/action/views/network-assets/components/network-assets-error.vue (6)

6-7: Fix typo in class name.

The class name contains a typo: "network-assetss__error-button" has an extra 's'.

-      class="network-assetss__error-button"
+      class="network-assets__error-button"

16-18: Add type validation for updateAssets prop.

The updateAssets prop should have proper type validation to ensure it's a required function.

-defineProps({
-  updateAssets: Function,
-});
+defineProps({
+  updateAssets: {
+    type: Function as PropType<() => void>,
+    required: true
+  }
+});

40-42: Remove unused 'a' selector in styles.

The styles contain an unused 'a' selector. The component uses a button, not an anchor tag.

-    a {
-      width: 150px;
-    }

48-61: Consider using a composable for error handling logic.

The timer-based error detection logic could be reused across components. Consider extracting it into a composable function.

Example implementation:

// useLoadingError.ts
import { ref, watchEffect, onBeforeMount } from 'vue';

export function useLoadingError(
  condition: () => boolean,
  timeout: number = 30000
) {
  let timer: NodeJS.Timeout | null = null;
  const assumedError = ref(false);

  watchEffect(() => {
    if (timer) {
      clearTimeout(timer);
    }
    if (condition()) {
      timer = setTimeout(() => {
        assumedError.value = true;
      }, timeout);
    }
  });

  onBeforeMount(() => {
    if (timer) {
      clearTimeout(timer);
    }
  });

  return { assumedError };
}

Usage in component:

-let timer: NodeJS.Timeout | null = null;
-const assumedError = ref(false);
-
-watchEffect(() => {
-  if (timer) {
-    clearTimeout(timer);
-  }
-  if (props.cryptoAmount == '~') {
-    timer = setTimeout(() => {
-      assumedError.value = true;
-    }, 30000);
-  }
-});
-
-onBeforeMount(() => {
-  if (timer) {
-    clearTimeout(timer);
-  }
-});
+const { assumedError } = useLoadingError(
+  () => props.cryptoAmount === '~'
+);

125-130: Enhance error handling with specific error types.

The catch block could provide more specific error handling based on the error type, and potentially retry the request for certain error types.

       })
-      .catch(() => {
+      .catch((error: Error) => {
         if (selectedNetworkName.value !== currentNetwork) return;
+        console.error('Failed to fetch assets:', error);
+        // Retry for network errors
+        if (error.name === 'NetworkError' && !error.message.includes('unauthorized')) {
+          setTimeout(updateAssets, 5000);
+          return;
+        }
         isFetchError.value = true;
         isLoading.value = false;
         assets.value = [];

112-132: Consider using async/await for better readability.

The promise chain could be refactored to use async/await for improved readability and error handling.

-const updateAssets = () => {
+const updateAssets = async () => {
   isFetchError.value = false;
   isLoading.value = true;
   assets.value = [];
   const currentNetwork = selectedNetworkName.value;
-  if (props.accountInfo.selectedAccount?.address) {
-    props.network
-      .getAllTokenInfo(props.accountInfo.selectedAccount?.address || '')
-      .then(_assets => {
-        if (selectedNetworkName.value !== currentNetwork) return;
-        assets.value = _assets;
-        isLoading.value = false;
-      })
-      .catch(() => {
-        if (selectedNetworkName.value !== currentNetwork) return;
-        isFetchError.value = true;
-        isLoading.value = false;
-        assets.value = [];
-      });
+  try {
+    if (!props.accountInfo.selectedAccount?.address) return;
+    
+    const _assets = await props.network.getAllTokenInfo(
+      props.accountInfo.selectedAccount.address
+    );
+    
+    if (selectedNetworkName.value !== currentNetwork) return;
+    
+    assets.value = _assets;
+  } catch (error) {
+    if (selectedNetworkName.value !== currentNetwork) return;
+    console.error('Failed to fetch assets:', error);
+    isFetchError.value = true;
+    assets.value = [];
+  } finally {
+    isLoading.value = false;
   }
 };
packages/utils/src/nacl-encrypt-decrypt.ts (4)

13-14: Consider adding input validation or error handling.
naclDecodeHex relies on hexToBuffer(msgHex) and subsequent base64 decoding. If msgHex is malformed or empty, this could throw an unhandled error. You might want to wrap this operation in try/catch or validate input length upfront to improve robustness.


26-59: Handle null return in decryption more explicitly.
If naclBox.open fails, it returns null, which causes encodeUTF8(decryptedMessage) to throw. While it's currently caught and rethrown as "Decryption failed.", consider explicitly checking for a null result before encoding to clarify the error path and potentially log additional context.


61-111: Secure ephemeral key usage and memory cleanup.
naclEncrypt appropriately incorporates randomBytes(24) for the nonce and ephemeral key pair generation. However, for a fully robust implementation, consider securely cleaning (zeroing) the ephemeral secret key from memory once encryption is complete. This helps reduce the likelihood of sensitive key material lingering in memory longer than necessary.


113-119: Ensure usage constraints are documented.
Exposing naclDecrypt and naclEncrypt to the broader codebase can encourage flexible use but also raises potential misuse concerns (e.g., storing private keys insecurely). Consider emphasizing best practices in documentation or using typed patterns that better guide correct usage.

packages/utils/src/random-names.ts (3)

6-100: Extensive adjective list.
Your left array provides a wide range of adjectives that effectively diversify generated names. No issues found, though you might consider a brief note on how these terms were selected to maintain consistency or style if these are used broadly across your product.


586-592: Support for non-ASCII strings.
sumAscii adds the char codes. If seedStr includes extended Unicode characters, those code points could exceed single-byte ranges. Suggest clarifying or limiting the expected character set to avoid unexpected collisions or expanding to handle full Unicode.


594-602: Non-cryptographic randomness.
generateRandomNameWithSeed uses a sine-based pseudo-random formula suitable for reproducible naming but not for security-sensitive operations. Consider explicitly documenting this limitation to avoid confusion with cryptographically secure RNG usage.

packages/swap/src/providers/zerox/index.ts (1)

193-195: Adopt defensive checks for transaction fields.
The new approach of using response.transaction.to/value/data is appropriate; just confirm that response.transaction is always present in the API response, or add optional chaining or conditionals to future-proof against missing fields.

packages/extension/src/libs/backup-state/index.ts (4)

35-50: Consider alternative error handling strategy.
The #getSignature method relies on console errors. For better resiliency, consider throwing a custom error or returning a structured error object. This prevents potential silent failures if external consumers ignore console output.


224-225: Remove the unnecessary continue statement.
Static analysis flags this as redundant since there’s no logic following this path in the loop iteration. You can safely remove it with no functional impact.

Apply this diff to remove the unnecessary statement:

         await kr.renameAccount(existingAccount.address, newAccount.name);
-        continue;
       } else if (newAccount) {
🧰 Tools
🪛 Biome (1.9.4)

[error] 224-224: Unnecessary continue statement

Unsafe fix: Delete the unnecessary continue statement

(lint/correctness/noUnnecessaryContinue)


246-319: Validate successful backups before updating state.
While this block properly handles backup encryption and uploads, it updates the backup state even if the server responds with a non-2xx status (only checks message === 'Ok'). Ensure you handle unsuccessful HTTP status codes or unexpected response structures, e.g., if .json() fails or a network error occurs.


321-360: Enhance fallback or default state handling.
When no stored backup info exists, the code creates a new default state. Consider logging or informing the user about generated user IDs or forcibly returning a well-defined object. This ensures clarity in the UX and debugging process.

packages/extension/src/libs/backup-state/types.ts (3)

7-11: Add JSDoc comments to document the interface properties.

While the property names are descriptive, adding JSDoc comments would help clarify their purpose and any constraints.

 export interface IState {
+  /** Timestamp of the last successful backup */
   lastBackupTime: number;
+  /** Unique identifier of the user */
   userId: string;
+  /** Whether backup functionality is enabled */
   enabled: boolean;
 }

13-20: Consider using number type for timestamps consistently.

For consistency with lastBackupTime in IState, consider using number type for updatedAt to represent timestamps uniformly.

 export interface ListBackupType {
   userId: string;
-  updatedAt: string;
+  updatedAt: number;
 }

26-29: Document security implications of excluded fields.

Please add a comment explaining why address and publicKey are excluded from the backup data for security purposes.

+/** 
+ * Backup data structure that excludes sensitive account information (address and publicKey)
+ * for security purposes.
+ */
 export interface BackupData {
   accounts: Omit<EnkryptAccount, 'address' | 'publicKey'>[];
   uuid: string;
 }
packages/extension/src/ui/action/views/settings/views/settings-backups/backup-identicon.vue (1)

18-34: Optimize SVG positioning using transform.

Replace negative margins with transform for better performance and maintainability.

 .jdenticon-container {
   border-radius: 50%;
   overflow: hidden;
   height: 32px;
   width: 32px;
   position: relative;

   svg {
     width: 40px;
     height: 40px;
     position: absolute;
-    top: -4px;
-    left: -4px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 }
packages/extension/src/ui/action/views/settings/components/settings-switch.vue (1)

45-46: Remove duplicate box-sizing property.

The box-sizing property is declared twice on consecutive lines.

  box-sizing: border-box;
- box-sizing: border-box;
packages/extension/src/ui/onboard/restore-wallet/type-password.vue (1)

45-61: Consider enhancing error feedback for users.

While the error handling is good, consider showing a user-friendly error message instead of just logging to console.

      .catch(error => {
        isInitializing.value = false;
        console.error('Wallet initialization failed:', error);
+       // Show user-friendly error message
+       store.setError('Failed to initialize wallet. Please try again.');
      });
packages/extension/src/libs/utils/initialize-wallet.ts (1)

62-91: Consider adding error type information and improving error handling.

While the backup state implementation is good, the error handling could be enhanced:

  1. The catch block silently logs errors
  2. The error type in the catch block is not specified
-  } catch (e) {
+  } catch (e: unknown) {
     console.error(e);
+    if (e instanceof Error) {
+      console.error('Backup initialization failed:', e.message);
+    }
     return { backupsFound: false };
   }
packages/extension/src/ui/action/views/settings/index.vue (1)

60-60: Consider adding state persistence for settings view.

The backup settings state is managed in memory but not persisted. Consider saving the last active settings view to improve user experience when reopening settings.

+const SETTINGS_VIEW_KEY = 'last_settings_view';
+
+const loadLastView = async () => {
+  const lastView = await browser.storage.local.get(SETTINGS_VIEW_KEY);
+  if (lastView[SETTINGS_VIEW_KEY]) {
+    setAllToFalse();
+    switch (lastView[SETTINGS_VIEW_KEY]) {
+      case 'backups':
+        isBackups.value = true;
+        break;
+      // ... other cases
+    }
+  }
+};
+
 const backupsAction = () => {
   setAllToFalse();
   isBackups.value = true;
+  browser.storage.local.set({ [SETTINGS_VIEW_KEY]: 'backups' });
 };

Also applies to: 68-68, 117-120

packages/extension/src/ui/action/views/accounts/components/add-account-form.vue (1)

124-127: Consider enhancing error handling for backup failures.

While the backup operation is properly implemented as a non-blocking operation, consider enhancing the error handling to provide user feedback when backup fails, rather than just logging to console.

 const backupState = new BackupState();
-backupState.backup(false).catch(() => {
-  console.error('Failed to backup');
-});
+backupState.backup(false).catch((error) => {
+  console.error('Failed to backup:', error);
+  // Show a non-blocking notification to the user
+  showNotification({
+    type: 'error',
+    message: 'Account created successfully, but backup failed. You can retry backup in settings.',
+  });
+});
packages/extension/src/types/provider.ts (1)

134-134: Remove unnecessary constructor.

The constructor can be safely removed as it doesn't add any functionality beyond what the default constructor would provide.

-  constructor(node: string, options?: unknown) {}
🧰 Tools
🪛 Biome (1.9.4)

[error] 134-134: This constructor is unnecessary.

Unsafe fix: Remove the unnecessary constructor.

(lint/complexity/noUselessConstructor)

packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue (3)

11-25: Enhance accessibility for backup selection.

The backup selection uses anchor tags (<a>) for clickable items without proper ARIA attributes or keyboard navigation support.

 <a
   v-for="backup in backups"
   :key="backup.userId"
   @click="selectBackup(backup)"
+  role="button"
+  tabindex="0"
+  :aria-selected="selectedBackup === backup"
+  @keyup.enter="selectBackup(backup)"
+  @keyup.space="selectBackup(backup)"
   :class="[
     { selected: selectedBackup === backup },
     'backup-detected__backup-item',
   ]"
 >

84-108: Consider implementing retry logic for backup loading.

The component attempts to create a new account if loading the main wallet fails, but doesn't retry loading backups if that fails.

 onBeforeMount(async () => {
   await kr.unlock(unref(password));
-  await backupState.getMainWallet().catch(async () => {
+  await backupState.getMainWallet().catch(async (error) => {
+    console.error('Failed to get main wallet:', error);
     await kr.saveNewAccount({
       basePath: EthereumNetworks.ethereum.basePath,
       name: 'EVM Account 1',
       signerType: EthereumNetworks.ethereum.signer[0],
       walletType: WalletType.mnemonic,
     });
   });
-  const mainWallet = await backupState.getMainWallet();
+  let retries = 3;
+  let mainWallet;
+  while (retries > 0) {
+    try {
+      mainWallet = await backupState.getMainWallet();
+      break;
+    } catch (error) {
+      console.error(`Failed to get main wallet (${retries} retries left):`, error);
+      retries--;
+      if (retries === 0) throw error;
+      await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+  }

113-130: Enhance error handling in backup restoration.

The error handling in useBackup could provide more specific error feedback to users.

 const useBackup = async () => {
   if (selectedBackup.value) {
     backupBtnText.value = 'Restoring backup...';
     processing.value = true;
     await backupState
       .restoreBackup(selectedBackup.value.userId, unref(password))
       .then(() => {
         router.push({
           name: routes.walletReady.name,
         });
       })
-      .catch(() => {
-        backupBtnText.value = 'Failed to restore backup';
+      .catch((error) => {
+        console.error('Backup restoration failed:', error);
+        backupBtnText.value = `Failed to restore backup: ${error.message || 'Unknown error'}`;
         processing.value = false;
         selectedBackup.value = undefined;
       });
   }
 };
packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue (2)

19-20: Consider adding aria-labels for better accessibility.

The loading states and empty states could benefit from proper aria-labels to improve screen reader support.

-          <div class="settings-container__backup">
+          <div class="settings-container__backup" role="status" aria-label="Fetching backups">
-          <div class="settings-container__backup-header">Fetching backups</div>
+          <div class="settings-container__backup-header" aria-live="polite">Fetching backups</div>

-          v-else-if="backups.length === 0"
-          class="settings-container__backup"
+          v-else-if="backups.length === 0"
+          class="settings-container__backup"
+          role="status"
+          aria-label="No backups found"

Also applies to: 26-27, 36-40


68-74: Add keyboard navigation support for delete button.

The delete button should be keyboard accessible and have proper aria-label.

-                    class="settings-container__backup-status-button"
-                    @click="showDeleteBackup(entity)"
+                    class="settings-container__backup-status-button"
+                    role="button"
+                    tabindex="0"
+                    aria-label="Delete backup"
+                    @click="showDeleteBackup(entity)"
+                    @keyup.enter="showDeleteBackup(entity)"
packages/extension/src/ui/action/views/swap/libs/send-transactions.ts (2)

243-243: Remove Unnecessary Labeled Break in Legacy Branch
Static analysis flags the label used in the break update_block_hash; statement as unnecessary. Consider replacing it with a plain break; for a cleaner control flow.

- break update_block_hash;
+ break;
🧰 Tools
🪛 Biome (1.9.4)

[error] 243-243: Unnecessary label.

Safe fix: Remove the unnecessary label.
You can achieve the same result without the label.

(lint/complexity/noUselessLabel)


354-354: Remove Unnecessary Labeled Break in Versioned Branch
The break statement using the label update_block_hash is superfluous. Simplify the control flow by removing the label and using a plain break;.

- break update_block_hash;
+ break;
🧰 Tools
🪛 Biome (1.9.4)

[error] 354-354: Unnecessary label.

Safe fix: Remove the unnecessary label.
You can achieve the same result without the label.

(lint/complexity/noUselessLabel)

packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue (2)

2-13: Enhance error message for better user experience.

The error message could be more user-friendly and provide clearer next steps.

Consider this improvement:

-      <span>Loading balance error. Please try again later</span>
+      <span>Unable to load balance. Please check your connection and try refreshing the page.</span>

74-82: Enhance error state visibility.

Consider adding more visual cues to make the error state more noticeable.

Consider these style improvements:

 &__total-error {
   padding: 0 20px 12px 20px;

   h3 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &::before {
+      content: '!';
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: @error;
+      color: @white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+    }
+
     span {
       color: @error;
     }
   }
 }
packages/extension/src/ui/action/views/network-assets/index.vue (1)

18-21: Consider repositioning the error component.

The error component's position in the template could be improved for better user experience.

Consider moving it before the assets list to ensure users see the error message immediately:

-          <network-assets-header v-if="!isLoading && assets.length > 0" />
           <network-assets-error
             v-if="isFetchError"
             :update-assets="updateAssets"
           />
+          <network-assets-header v-if="!isLoading && assets.length > 0" />
packages/extension/src/ui/onboard/create-wallet/routes.ts (1)

9-41: Consider enhancing type safety for route paths and names.

The routes object is well-structured and covers the complete wallet creation flow. Consider these improvements:

+// Define path constants for type safety
+const ROUTES_PATH = {
+  PICK_PASSWORD: 'pick-password',
+  TYPE_PASSWORD: 'type-password',
+  RECOVERY_PHRASE: 'recovery-phrase',
+  CHECK_PHRASE: 'check-phrase',
+  USER_ANALYTICS: 'user-analytics',
+  WALLET_READY: 'wallet-ready',
+} as const;
+
+// Define route names enum for type safety
+enum ROUTES_NAME {
+  PICK_PASSWORD = 'pick-password',
+  TYPE_PASSWORD = 'type-password',
+  RECOVERY_PHRASE = 'recovery-phrase',
+  CHECK_PHRASE = 'check-phrase',
+  USER_ANALYTICS = 'user-analytics',
+  WALLET_READY = 'wallet-ready',
+}
+
 export const routes = {
   pickPassword: {
-    path: 'pick-password',
-    name: 'pick-password',
+    path: ROUTES_PATH.PICK_PASSWORD,
+    name: ROUTES_NAME.PICK_PASSWORD,
     component: PickPassword,
   },
   // Apply similar changes to other routes...
 };
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4e826a7 and b519d6e.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (39)
  • packages/extension/package.json (3 hunks)
  • packages/extension/src/libs/backup-state/configs.ts (1 hunks)
  • packages/extension/src/libs/backup-state/index.ts (1 hunks)
  • packages/extension/src/libs/backup-state/types.ts (1 hunks)
  • packages/extension/src/libs/keyring/public-keyring.ts (8 hunks)
  • packages/extension/src/libs/utils/initialize-wallet.ts (2 hunks)
  • packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue (1 hunks)
  • packages/extension/src/providers/common/ui/send-transaction/send-contacts-list.vue (4 hunks)
  • packages/extension/src/providers/ethereum/ui/send-transaction/index.vue (1 hunks)
  • packages/extension/src/types/provider.ts (2 hunks)
  • packages/extension/src/ui/action/App.vue (5 hunks)
  • packages/extension/src/ui/action/components/switch/index.vue (1 hunks)
  • packages/extension/src/ui/action/views/accounts/components/add-account-form.vue (2 hunks)
  • packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue (3 hunks)
  • packages/extension/src/ui/action/views/network-assets/components/network-assets-error.vue (1 hunks)
  • packages/extension/src/ui/action/views/network-assets/index.vue (5 hunks)
  • packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue (2 hunks)
  • packages/extension/src/ui/action/views/settings/components/settings-switch.vue (4 hunks)
  • packages/extension/src/ui/action/views/settings/index.vue (5 hunks)
  • packages/extension/src/ui/action/views/settings/views/settings-backups/backup-identicon.vue (1 hunks)
  • packages/extension/src/ui/action/views/settings/views/settings-backups/index.vue (1 hunks)
  • packages/extension/src/ui/action/views/settings/views/settings-general/index.vue (3 hunks)
  • packages/extension/src/ui/action/views/swap/libs/send-transactions.ts (15 hunks)
  • packages/extension/src/ui/onboard/App.vue (6 hunks)
  • packages/extension/src/ui/onboard/create-wallet/routes.ts (1 hunks)
  • packages/extension/src/ui/onboard/create-wallet/store.ts (1 hunks)
  • packages/extension/src/ui/onboard/create-wallet/wallet-ready.vue (1 hunks)
  • packages/extension/src/ui/onboard/restore-wallet/backup-detected.vue (1 hunks)
  • packages/extension/src/ui/onboard/restore-wallet/routes.ts (2 hunks)
  • packages/extension/src/ui/onboard/restore-wallet/type-password.vue (2 hunks)
  • packages/signers/ethereum/src/index.ts (1 hunks)
  • packages/signers/ethereum/src/utils.ts (0 hunks)
  • packages/swap/src/providers/zerox/index.ts (4 hunks)
  • packages/swap/src/providers/zerox/types.ts (1 hunks)
  • packages/types/src/index.ts (1 hunks)
  • packages/utils/package.json (1 hunks)
  • packages/utils/src/index.ts (2 hunks)
  • packages/utils/src/nacl-encrypt-decrypt.ts (1 hunks)
  • packages/utils/src/random-names.ts (1 hunks)
💤 Files with no reviewable changes (1)
  • packages/signers/ethereum/src/utils.ts
✅ Files skipped from review due to trivial changes (4)
  • packages/extension/src/libs/backup-state/configs.ts
  • packages/extension/src/providers/common/ui/send-transaction/send-address-item.vue
  • packages/signers/ethereum/src/index.ts
  • packages/extension/src/ui/onboard/create-wallet/store.ts
🚧 Files skipped from review as they are similar to previous changes (4)
  • packages/extension/src/ui/onboard/App.vue
  • packages/extension/src/ui/action/App.vue
  • packages/utils/package.json
  • packages/extension/package.json
🧰 Additional context used
🪛 Biome (1.9.4)
packages/extension/src/types/provider.ts

[error] 134-134: This constructor is unnecessary.

Unsafe fix: Remove the unnecessary constructor.

(lint/complexity/noUselessConstructor)

packages/extension/src/libs/backup-state/index.ts

[error] 224-224: Unnecessary continue statement

Unsafe fix: Delete the unnecessary continue statement

(lint/correctness/noUnnecessaryContinue)

packages/extension/src/ui/action/views/swap/libs/send-transactions.ts

[error] 243-243: Unnecessary label.

Safe fix: Remove the unnecessary label.
You can achieve the same result without the label.

(lint/complexity/noUselessLabel)


[error] 354-354: Unnecessary label.

Safe fix: Remove the unnecessary label.
You can achieve the same result without the label.

(lint/complexity/noUselessLabel)

⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: buildAll
  • GitHub Check: test
🔇 Additional comments (38)
packages/utils/src/nacl-encrypt-decrypt.ts (1)

16-19: Validate JSON parsing.
When parsing the return of hexToBuffer(strData), an invalid or corrupted hex string could raise a SyntaxError with no user-friendly fallback. Consider a try/catch block to return a clear message or fallback.

packages/utils/src/index.ts (2)

14-20: Centralized import improvement.
Bringing all NaCl encryption utilities into the main export file helps keep the utility layer cohesive and discoverable. Great addition.


53-58: Check for potential naming collisions.
All newly exported symbols (naclEncrypt, naclDecrypt, etc.) appear unique. However, be mindful as the codebase grows that these cryptographic utility exports might eventually clash with similarly named functions or constants. Consider a naming pattern (e.g., prefixing) if you foresee expansions.

packages/utils/src/random-names.ts (1)

102-584: Comprehensive name list.
The right array is quite thorough, referencing many historical figures. Just be mindful of potential trademark/copyright concerns with certain names in specialized contexts.

packages/swap/src/providers/zerox/index.ts (3)

73-73: Verify the updated API endpoint rigorously.
The change to https://partners.mewapi.io/zeroxv2 looks fine for a versioned migration, but please confirm all downstream services and integrations are compatible with the new endpoint.


157-157: Confirm renaming the parameter to match API specs.
Ensure the new taker parameter (changed from the previously used takerAddress) matches exactly what the endpoint expects.


168-169: Validate the construction of the query parameters.
Appending the chain ID as a query parameter instead of the path is likely correct given the new API structure. However, please verify that the endpoint consistently expects chainId in this manner.

packages/extension/src/libs/backup-state/index.ts (1)

91-94: Check for missing or invalid signatures.
When !signature, the code logs an error and returns an empty array. Double-check that this behavior is desired or consider throwing an error to inform upstream processes.

packages/swap/src/providers/zerox/types.ts (1)

4-10: Good structuring of the transaction fields.
Consolidating related properties into ZeroXResponseTransactionType and referencing it via transaction in ZeroXResponseType is a cleaner approach. Moving away from flat fields reduces confusion and simplifies usage.

Also applies to: 17-17

packages/extension/src/libs/backup-state/types.ts (2)

3-5: LGTM!

The enum follows TypeScript naming conventions and uses a descriptive key name.


22-24: LGTM!

The interface follows a common pattern for API responses and TypeScript naming conventions.

packages/extension/src/ui/action/views/settings/views/settings-backups/backup-identicon.vue (1)

1-3: LGTM!

The template is minimal and follows Vue best practices.

packages/extension/src/ui/onboard/restore-wallet/routes.ts (1)

8-8: LGTM!

The new backup detection route follows the established naming conventions and routing patterns.

Also applies to: 41-45

packages/extension/src/ui/action/views/settings/components/settings-switch.vue (1)

2-66: LGTM! The border customization enhances component flexibility.

The new hasBorder prop with conditional styling allows for better component customization while maintaining backward compatibility through the default value.

packages/extension/src/ui/action/components/switch/index.vue (1)

3-3: LGTM! Excellent refactor to use Vue's v-model pattern.

The changes improve the component by:

  • Using Vue's built-in v-model directive for better reactivity
  • Simplifying state management with a computed property
  • Following Vue 3 best practices for two-way binding

Also applies to: 18-23

packages/extension/src/ui/action/views/settings/components/settings-inner-header.vue (1)

11-11: LGTM! Clean addition of backup settings section.

The implementation maintains consistency with existing patterns and properly integrates the new backup settings section.

Also applies to: 47-50

packages/extension/src/ui/onboard/restore-wallet/type-password.vue (1)

30-30: LGTM! Improved reactive state handling and error management.

The changes enhance the component by:

  • Properly handling reactive references with unref
  • Adding error handling for wallet initialization
  • Supporting the new backup detection feature

Also applies to: 45-66

packages/extension/src/libs/utils/initialize-wallet.ts (1)

11-25: LGTM! Filtering test wallets enhances account management.

The addition of test wallet filtering improves account management by ensuring only production wallets are considered during initialization.

packages/extension/src/ui/action/views/settings/index.vue (1)

42-47: LGTM! Clean integration of backup settings component.

The backup settings component is well-integrated with consistent event handling patterns.

packages/types/src/index.ts (1)

72-76: LGTM! Well-typed interface extension.

The optional isTestWallet property is appropriately typed and maintains backward compatibility.

packages/extension/src/ui/action/views/settings/views/settings-general/index.vue (2)

52-58: LGTM! Clear and informative backup settings UI.

The backup button and description provide clear information about the backup functionality.


76-76: LGTM! Clean event handling implementation.

The event emission is well-typed and follows Vue 3 best practices.

Also applies to: 88-90

packages/extension/src/libs/keyring/public-keyring.ts (1)

26-26: LGTM! Test wallet identification added.

The isTestWallet property is consistently added to all test wallet accounts, properly scoped within the development environment.

Also applies to: 37-37, 48-48, 59-59, 70-70, 84-84, 95-95, 106-106

packages/extension/src/types/provider.ts (1)

56-56: LGTM! Storage namespace added for backup state.

The backupState enum value is properly added to support the new backup functionality.

packages/extension/src/providers/common/ui/send-transaction/send-contacts-list.vue (2)

120-131: Good error handling in address comparison.

The isChecked method properly handles potential errors during address comparison and provides a safe fallback.


42-42: Consistent usage of isChecked method.

The isChecked method is consistently used across all instances where address comparison is needed, improving maintainability.

Also applies to: 54-54, 72-72

packages/extension/src/providers/ethereum/ui/send-transaction/index.vue (1)

45-50: Improved UX by closing contact selection after paste.

The modification enhances user experience by automatically closing the contact selection interface after pasting an address.

packages/extension/src/ui/action/views/swap/libs/send-transactions.ts (10)

76-78: Type Annotation Update for executeSwap Signature
The return type now uses semicolons ({ hash: string; sentAt: number }) instead of commas. This change improves clarity and consistency in your type definitions.


176-177: Consistent Return Value in Substrate Branch
The Substrate branch now returns an object matching the updated type ({ hash: string; sentAt: number }). Ensure that any consuming code reflects this updated structure.


181-181: Updated Type Annotation for solTxs
The declaration of solTxs now uses semicolon separators in its type definition, which brings it in line with the overall TypeScript style used elsewhere in the codebase.


220-223: Consistent Error Message Formatting in Legacy Branch
The warning log for fee retrieval now uses a consistent template literal format. This small refinement improves readability in error reporting.


332-334: Consistent Error Message Formatting in Versioned Branch
The error message for checking the fee in the versioned transaction branch now follows a consistent format. This enhances clarity when logging issues.


341-343: Enhanced Warning Log for Outdated Block Hash in Versioned Branch
The warning log notifying that the unsigned versioned transaction may have an out-of-date block hash has been updated for clarity and consistency.


369-372: Improved Logging for Blockhash Retrieval Attempts in Versioned Branch
The warning message for a failed attempt to fetch the latest blockhash now clearly includes the attempt number, which makes debugging easier.


507-507: Updated Type Annotation for txPromises
The variable txPromises is now defined with the type { hash: 0x${string}; sentAt: number }[], using semicolons for separation. This aligns the annotation with the overall style used in the code.


569-569: Consistent Structure for EVM Transaction Promises
When pushing to txPromises, the transaction object now adheres to the updated type structure. This ensures consistency across transaction types and improves type safety.


478-478: Consistent Appending to solTxs Array
The object { hash: txHash, sentAt: Date.now() } pushed into solTxs properly conforms to the updated type definition, maintaining uniformity in the Solana branch.

packages/extension/src/ui/onboard/create-wallet/routes.ts (1)

1-8: LGTM!

The imports are well-organized, with local components grouped together followed by external dependencies. The empty line provides good visual separation.

Comment on lines +47 to +52
onMounted(() => {
onboardStore.setPassword('');
onboardStore.setMnemonic('');
restoreStore.setMnemonic('');
restoreStore.setPassword('');
});
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance security when clearing sensitive data.

Using empty strings to clear sensitive data might leave traces in memory. Consider using a more secure approach to clear sensitive information.

Here's a suggested implementation using a secure clear function:

+const secureClear = (value: string) => {
+  // Overwrite the string with random data before setting to empty
+  const array = new Uint8Array(value.length);
+  crypto.getRandomValues(array);
+  const random = String.fromCharCode(...array);
+  value = random;
+  value = '';
+  return value;
+};
+
 onMounted(() => {
-  onboardStore.setPassword('');
-  onboardStore.setMnemonic('');
-  restoreStore.setMnemonic('');
-  restoreStore.setPassword('');
+  onboardStore.setPassword(secureClear(onboardStore.password));
+  onboardStore.setMnemonic(secureClear(onboardStore.mnemonic));
+  restoreStore.setMnemonic(secureClear(restoreStore.mnemonic));
+  restoreStore.setPassword(secureClear(restoreStore.password));
 });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onMounted(() => {
onboardStore.setPassword('');
onboardStore.setMnemonic('');
restoreStore.setMnemonic('');
restoreStore.setPassword('');
});
const secureClear = (value: string) => {
// Overwrite the string with random data before setting to empty
const array = new Uint8Array(value.length);
crypto.getRandomValues(array);
const random = String.fromCharCode(...array);
value = random;
value = '';
return value;
};
onMounted(() => {
onboardStore.setPassword(secureClear(onboardStore.password));
onboardStore.setMnemonic(secureClear(onboardStore.mnemonic));
restoreStore.setMnemonic(secureClear(restoreStore.mnemonic));
restoreStore.setPassword(secureClear(restoreStore.password));
});

Comment on lines +5 to +16
<script setup lang="ts">
import { useTemplateRef, onMounted, Ref } from 'vue';
import * as jdenticon from 'jdenticon';

const props = defineProps<{
hash: string;
}>();
const element: Ref<HTMLElement> = useTemplateRef('jdenticonHolder');
onMounted(() => {
element.value.innerHTML = jdenticon.toSvg(props.hash, 200);
});
</script>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add input validation and sanitize SVG output.

The current implementation has potential security concerns:

  1. No validation of the hash prop
  2. Direct innerHTML manipulation with unsanitized SVG

Consider adding input validation and using a sanitizer library for the SVG output.

 import { useTemplateRef, onMounted, Ref } from 'vue';
 import * as jdenticon from 'jdenticon';
+import DOMPurify from 'dompurify';

 const props = defineProps<{
   hash: string;
 }>();
+
+const validateHash = (hash: string) => {
+  return /^[a-f0-9]{32,}$/i.test(hash);
+};
+
 const element: Ref<HTMLElement> = useTemplateRef('jdenticonHolder');
 onMounted(() => {
-  element.value.innerHTML = jdenticon.toSvg(props.hash, 200);
+  if (!validateHash(props.hash)) {
+    console.error('Invalid hash provided to backup-identicon');
+    return;
+  }
+  const svg = jdenticon.toSvg(props.hash, 200);
+  element.value.innerHTML = DOMPurify.sanitize(svg);
 });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<script setup lang="ts">
import { useTemplateRef, onMounted, Ref } from 'vue';
import * as jdenticon from 'jdenticon';
const props = defineProps<{
hash: string;
}>();
const element: Ref<HTMLElement> = useTemplateRef('jdenticonHolder');
onMounted(() => {
element.value.innerHTML = jdenticon.toSvg(props.hash, 200);
});
</script>
<script setup lang="ts">
import { useTemplateRef, onMounted, Ref } from 'vue';
import * as jdenticon from 'jdenticon';
import DOMPurify from 'dompurify';
const props = defineProps<{
hash: string;
}>();
const validateHash = (hash: string) => {
return /^[a-f0-9]{32,}$/i.test(hash);
};
const element: Ref<HTMLElement> = useTemplateRef('jdenticonHolder');
onMounted(() => {
if (!validateHash(props.hash)) {
console.error('Invalid hash provided to backup-identicon');
return;
}
const svg = jdenticon.toSvg(props.hash, 200);
element.value.innerHTML = DOMPurify.sanitize(svg);
});
</script>

Comment on lines +154 to +160
const deleteBackup = async (userId: string) => {
loading.value = true;
await backupState.deleteBackup(userId);
backups.value = await backupState.listBackups();
loading.value = false;
isDelete.value = false;
};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add error handling for delete operation.

The deleteBackup method should handle potential errors during deletion.

 const deleteBackup = async (userId: string) => {
+  try {
     loading.value = true;
     await backupState.deleteBackup(userId);
     backups.value = await backupState.listBackups();
+  } catch (error) {
+    console.error('Error deleting backup:', error);
+    // TODO: Show error to user
+  } finally {
     loading.value = false;
     isDelete.value = false;
+  }
 };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const deleteBackup = async (userId: string) => {
loading.value = true;
await backupState.deleteBackup(userId);
backups.value = await backupState.listBackups();
loading.value = false;
isDelete.value = false;
};
const deleteBackup = async (userId: string) => {
try {
loading.value = true;
await backupState.deleteBackup(userId);
backups.value = await backupState.listBackups();
} catch (error) {
console.error('Error deleting backup:', error);
// TODO: Show error to user
} finally {
loading.value = false;
isDelete.value = false;
}
};

Comment on lines +136 to +147
const toggleBackups = async (checked: boolean) => {
isBackupsEnabled.value = checked;
loading.value = true;
if (isBackupsEnabled.value) {
await backupState.enableBackups();
await backupState.backup(false);
backups.value = await backupState.listBackups();
} else {
await backupState.disableBackups();
}
loading.value = false;
};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add error handling for backup operations.

The toggleBackups method should handle potential errors during backup operations.

 const toggleBackups = async (checked: boolean) => {
+  try {
     isBackupsEnabled.value = checked;
     loading.value = true;
     if (isBackupsEnabled.value) {
       await backupState.enableBackups();
       await backupState.backup(false);
       backups.value = await backupState.listBackups();
     } else {
       await backupState.disableBackups();
     }
+  } catch (error) {
+    console.error('Error toggling backups:', error);
+    // TODO: Show error to user
+    isBackupsEnabled.value = !checked; // Revert the toggle
+  } finally {
     loading.value = false;
+  }
 };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const toggleBackups = async (checked: boolean) => {
isBackupsEnabled.value = checked;
loading.value = true;
if (isBackupsEnabled.value) {
await backupState.enableBackups();
await backupState.backup(false);
backups.value = await backupState.listBackups();
} else {
await backupState.disableBackups();
}
loading.value = false;
};
const toggleBackups = async (checked: boolean) => {
try {
isBackupsEnabled.value = checked;
loading.value = true;
if (isBackupsEnabled.value) {
await backupState.enableBackups();
await backupState.backup(false);
backups.value = await backupState.listBackups();
} else {
await backupState.disableBackups();
}
} catch (error) {
console.error('Error toggling backups:', error);
// TODO: Show error to user
isBackupsEnabled.value = !checked; // Revert the toggle
} finally {
loading.value = false;
}
};

Comment on lines +48 to +61
let timer: NodeJS.Timeout | null = null;
const assumedError = ref(false);

watchEffect(() => {
if (timer) {
clearTimeout(timer);
}
// set the timer on initial change to blank
if (props.cryptoAmount == '~') {
timer = setTimeout(() => {
assumedError.value = true;
}, 30000);
}
});
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider adjusting timeout duration and adding error state reset.

The current implementation has two potential issues:

  1. 30-second timeout might be too long for users to wait.
  2. Error state doesn't reset when valid data is received.

Consider these improvements:

 watchEffect(() => {
   if (timer) {
     clearTimeout(timer);
   }
-  // set the timer on initial change to blank
   if (props.cryptoAmount == '~') {
     timer = setTimeout(() => {
       assumedError.value = true;
-    }, 30000);
+    }, 15000); // Consider reducing timeout to 15 seconds
+  } else {
+    assumedError.value = false; // Reset error state when valid data is received
   }
 });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
let timer: NodeJS.Timeout | null = null;
const assumedError = ref(false);
watchEffect(() => {
if (timer) {
clearTimeout(timer);
}
// set the timer on initial change to blank
if (props.cryptoAmount == '~') {
timer = setTimeout(() => {
assumedError.value = true;
}, 30000);
}
});
let timer: NodeJS.Timeout | null = null;
const assumedError = ref(false);
watchEffect(() => {
if (timer) {
clearTimeout(timer);
}
if (props.cryptoAmount == '~') {
timer = setTimeout(() => {
assumedError.value = true;
}, 15000); // Consider reducing timeout to 15 seconds
} else {
assumedError.value = false; // Reset error state when valid data is received
}
});

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (4)
packages/extension/src/providers/ethereum/libs/assets-handlers/solanachain.ts (1)

20-31: Consider adding error handling for token account fetching.

While the concurrent fetching is efficient, there's no explicit error handling if one of the requests fails.

-  ]).then(([tokenAccounts, tokenAccounts2022]) => {
+  ]).then(([tokenAccounts, tokenAccounts2022]) => {
+    if (!tokenAccounts || !tokenAccounts2022) {
+      throw new Error('Failed to fetch token accounts');
+    }
packages/swap/src/providers/jupiter/index.ts (1)

351-351: Consider adding a comment explaining TOKEN_2022 referral fee exclusion.

While the logic is correct, it would be helpful to document why TOKEN_2022 tokens are excluded from referral fee handling.

-    } else if (!referrerATAExists && !isSrcToken2022) {
+    } else if (!referrerATAExists && !isSrcToken2022) {
+      // Skip referral fee handling for TOKEN_2022 tokens as they use a different fee mechanism
packages/extension/src/providers/solana/ui/send-transaction/index.vue (2)

529-540: Consider caching the program ID.

The program ID is used multiple times in the function. Consider storing it in a variable to avoid potential inconsistencies and improve readability.

+    const tokenProgramId = programId!.owner;
     const associatedTokenTo = getAssociatedTokenAddressSync(
       contract,
       to,
       undefined,
-      programId!.owner,
+      tokenProgramId,
     );
     const associatedTokenFrom = getAssociatedTokenAddressSync(
       contract,
       from,
       undefined,
-      programId!.owner,
+      tokenProgramId,
     );

550-559: Consider extracting token transfer logic.

The token transfer logic is duplicated between the cases where the associated token account exists and when it needs to be created. Consider extracting this into a helper function to reduce code duplication.

+    const createTransferInst = (from: PublicKey, to: PublicKey, owner: PublicKey) => 
+      createTransferInstruction(
+        from,
+        to,
+        owner,
+        toBN(TxInfo.value.value).toNumber(),
+        [],
+        tokenProgramId,
+      );

     if (validATA) {
-      transaction.add(
-        createTransferInstruction(
-          associatedTokenFrom,
-          associatedTokenTo,
-          from,
-          toBN(TxInfo.value.value).toNumber(),
-          [],
-          programId!.owner,
-        ),
-      );
+      transaction.add(createTransferInst(associatedTokenFrom, associatedTokenTo, from));
     } else {
       transaction.add(
         createAssociatedTokenAccountInstruction(
           from,
           associatedTokenTo,
           to,
           contract,
-          programId!.owner,
+          tokenProgramId,
         ),
       );
-      transaction.add(
-        createTransferInstruction(
-          associatedTokenFrom,
-          associatedTokenTo,
-          from,
-          toBN(TxInfo.value.value).toNumber(),
-          [],
-          programId!.owner,
-        ),
-      );
+      transaction.add(createTransferInst(associatedTokenFrom, associatedTokenTo, from));

Also applies to: 561-579

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b519d6e and f122888.

📒 Files selected for processing (5)
  • packages/extension/src/providers/ethereum/libs/assets-handlers/solanachain.ts (1 hunks)
  • packages/extension/src/providers/solana/ui/libs/decode-tx.ts (2 hunks)
  • packages/extension/src/providers/solana/ui/send-transaction/index.vue (4 hunks)
  • packages/extension/src/providers/solana/ui/sol-verify-transaction.vue (1 hunks)
  • packages/swap/src/providers/jupiter/index.ts (3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: buildAll
  • GitHub Check: test
🔇 Additional comments (7)
packages/extension/src/providers/ethereum/libs/assets-handlers/solanachain.ts (2)

5-6: LGTM! Good addition of TOKEN_2022_PROGRAM_ID support.

The imports are correctly structured to support the new token program functionality.


12-19: Efficient concurrent fetching of token accounts.

The use of Promise.all for concurrent fetching from both TOKEN_PROGRAM_ID and TOKEN_2022_PROGRAM_ID is a good optimization.

packages/extension/src/providers/solana/ui/libs/decode-tx.ts (1)

81-84: Good enhancement of account filtering logic.

The changes correctly:

  1. Include TOKEN_2022_PROGRAM_ID in account filtering
  2. Use >= for data length check, which is more flexible and future-proof
packages/extension/src/providers/solana/ui/sol-verify-transaction.vue (1)

282-293: Improved blockhash handling with safety checks.

The changes add proper checks to prevent overwriting existing blockhash values for both legacy and versioned transactions.

packages/swap/src/providers/jupiter/index.ts (2)

321-324: Good addition of TOKEN_2022 program detection.

The code correctly identifies tokens from the TOKEN_2022 program.


330-330: Proper handling of referral fees for TOKEN_2022 tokens.

Setting referrerATAPubkey to undefined for TOKEN_2022 tokens is the correct approach to skip referral fee handling.

packages/extension/src/providers/solana/ui/send-transaction/index.vue (1)

541-546:

❓ Verification inconclusive

Verify the account existence check.

The getAccount call is used to check if the associated token account exists, but it might throw errors for reasons other than non-existence. Consider using a more specific error check.


🏁 Script executed:

#!/bin/bash
# Description: Check if there are any specific error types we should handle in getAccount

# Search for getAccount usage patterns in the codebase
rg -A 5 "getAccount.*catch" 

Length of output: 29


Action Required: Refine Error Handling for getAccount

In the file packages/extension/src/providers/solana/ui/send-transaction/index.vue (lines 541–546), the call to getAccount is used to verify the existence of the associated token account. However, without a surrounding try/catch or a mechanism to filter specific error cases, any error thrown by getAccount—whether due to a missing account or another issue (e.g., network issues, misconfiguration)—could lead to ambiguous behavior. Please verify that getAccount distinguishes between expected “account not found” errors and other failures. Depending on the findings, consider adding a try/catch block with refined error checks to ensure that only the intended error case (i.e., a missing account) triggers the specific handling logic.

Comment on lines +528 to +529
const programId = await solConnection.value!.web3.getAccountInfo(contract);
const associatedTokenTo = getAssociatedTokenAddressSync(
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add error handling for getAccountInfo call.

The getAccountInfo call could fail if the contract account doesn't exist, but there's no error handling in place. This could lead to runtime errors when trying to access programId!.owner.

Add error handling:

-    const programId = await solConnection.value!.web3.getAccountInfo(contract);
+    const programId = await solConnection.value!.web3.getAccountInfo(contract);
+    if (!programId) {
+      throw new Error('Contract account not found');
+    }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const programId = await solConnection.value!.web3.getAccountInfo(contract);
const associatedTokenTo = getAssociatedTokenAddressSync(
const programId = await solConnection.value!.web3.getAccountInfo(contract);
if (!programId) {
throw new Error('Contract account not found');
}
const associatedTokenTo = getAssociatedTokenAddressSync(

@kvhnuke kvhnuke changed the title release-2.3.2 Release: v2.4.0 Feb 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants