feat: detect mm version and show modal if needed

Consensys · Nov 20, 2024 · 61b863d · 61b863d
1 parent 6e74bfb
commit 61b863d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/packages/wallet-ui/src/App.tsx b/packages/wallet-ui/src/App.tsx
@@ -81,7 +81,10 @@ function App() {
         >
           <ConnectModal />
         </PopIn>
-        <PopIn isOpen={infoModalVisible} showClose={false}>
+        <PopIn
+          isOpen={infoModalVisible && !minVersionModalVisible}
+          showClose={false}
+        >
           <ConnectInfoModal address={address} />
         </PopIn>
         <PopIn

diff --git a/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx
@@ -1,3 +1,4 @@
+import { MIN_METAMASK_VERSION } from 'utils/constants';
 import {
   Description,
   StarknetLogo,
@@ -15,8 +16,8 @@ export const MinVersionModalView = () => {
         <ul>
           <li>
             Ensure you have the latest version of{' '}
-            <a href="https://metamask.io">MetaMask</a> installed (v12.5 or
-            higher is required).
+            <a href="https://metamask.io">MetaMask</a> installed (v
+            {MIN_METAMASK_VERSION} or higher is required).
           </li>
           <li>
             Install the latest version of the Starknet Snap by following these

diff --git a/packages/wallet-ui/src/hooks/useHasMetamask.ts b/packages/wallet-ui/src/hooks/useHasMetamask.ts
@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useAppDispatch } from 'hooks/redux';
 import { setProvider } from 'slices/walletSlice';
+import { setMinVersionModalVisible } from 'slices/modalSlice';
 import { enableLoadingWithMessage, disableLoading } from 'slices/UISlice';
+import { MIN_METAMASK_VERSION } from 'utils/constants';
 
 interface MetaMaskProvider {
   isMetaMask: boolean;
@@ -96,10 +98,14 @@ export const useHasMetamask = () => {
         dispatch(enableLoadingWithMessage('Detecting Metamask...'));
         const provider = await detectMetamaskSupport(window);
         // Use the new detection method
+        //window.ethereum = provider ?? null;
 
         if (provider && (await isSupportSnap(provider))) {
           dispatch(setProvider(provider));
           setHasMetamask(provider != null);
+          if (await isMetaMaskUpgradeRequired(provider)) {
+            dispatch(setMinVersionModalVisible(true));
+          }
         } else {
           dispatch(setProvider(null));
           setHasMetamask(false);
@@ -119,6 +125,27 @@ export const useHasMetamask = () => {
   };
 };
 
+const isMetaMaskUpgradeRequired = async (
+  provider: any,
+  requiredVersion = MIN_METAMASK_VERSION,
+) => {
+  const clientVersion = await provider.request({
+    method: 'web3_clientVersion',
+    params: [],
+  });
+  const versionMatch = clientVersion.match(/MetaMask\/v(\d+\.\d+\.\d+)/);
+  const currentVersion = versionMatch[1];
+  if (
+    currentVersion.localeCompare(requiredVersion, undefined, {
+      numeric: true,
+    }) >= 0
+  ) {
+    return false;
+  } else {
+    return true;
+  }
+};
+
 const isSupportSnap = async (provider: any) => {
   try {
     await provider.request({

diff --git a/packages/wallet-ui/src/utils/constants.ts b/packages/wallet-ui/src/utils/constants.ts
@@ -64,3 +64,5 @@ export const MIN_ACC_CONTRACT_VERSION = [0, 3, 0];
 export const DUMMY_ADDRESS = '0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
 
 export const DEFAULT_FEE_TOKEN = FeeToken.ETH;
+
+export const MIN_METAMASK_VERSION = '12.5.0';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -64,3 +64,5 @@ export const MIN_ACC_CONTRACT_VERSION = [0, 3, 0];
		export const DUMMY_ADDRESS = '0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

		export const DEFAULT_FEE_TOKEN = FeeToken.ETH;

		export const MIN_METAMASK_VERSION = '12.5.0';