feat: detect metamask version to force upgrade #353

khanti42 · 2024-09-17T07:47:56Z

PR Summary: Handle MetaMask Snap Upgrade Prompt

This PR introduces changes related to the get-starknet package, focusing on handling scenarios where the MetaMask Snap requires a minimum MetaMask version and enhancing the overall user experience with a popup notification system.

This is required because the jsx support ( #350 ) is only available starting from version 12.

1. ESLint Configuration Updates

A new ESLint rule is added for wallet.ts:
- Disables restrictions on global objects document and window to allow browser-related features.

2. Package Script Update

The lint:fix script is updated:
- Now targets only the src folder (src/*.{js,ts,tsx}) instead of the entire project.

3. MetaMaskSnap Class Enhancement

isUpgradeRequired Method:
- Compares the current MetaMask version against a required minimum version ('13.0.0').
- If the current version is outdated, an upgrade is required.
#getVersionNumber Method:
- Retrieves the MetaMask version using web3_clientVersion and extracts the version number (e.g., xx.yy.zz).

4. MetaMaskSnapWallet Class Updates

New isPopupVisible Property:
- Tracks whether the upgrade notification popup is currently displayed.
Enhanced enable Method:
- Checks if a MetaMask upgrade is needed before installing the snap.
- If an upgrade is required, the popup is shown using document.

5. Popup Notification System

#showPopup Method:
- Dynamically creates and displays a popup prompting the user to update MetaMask.
- Features include:
  - A message encouraging the user to update to the latest MetaMask version.
  - An "Update MetaMask" button with the MetaMask logo, which opens the MetaMask website in a new tab.
  - A close button to dismiss the popup.
  - Prevents multiple popups from appearing at the same time using isPopupVisible.

Summary

This PR addresses situations where MetaMask Snap users need to update their extension, providing a user-friendly experience with a pop-up notification when an upgrade is required. It also adjusts the linting rules to allow browser-specific objects like document and window.