feat: update wallet-ui unsupported MM version management (#424)

* feat: update wallet-ui message * feat: detect mm version and show modal if needed * Update packages/wallet-ui/src/hooks/useHasMetamask.ts Co-authored-by: Stanley Yuen <[email protected]> * Update packages/wallet-ui/src/hooks/useHasMetamask.ts Co-authored-by: Stanley Yuen <[email protected]> * chore: fix comments * chore: fix comments * fix: separate message in MetaMask upgrade required or Snap update required * chore: fix sonarcloud * chore: lint * chore: text * chore: lint * Update packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx * Update packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.view.tsx * chore: re-run checks * chore: re-run checks --------- Co-authored-by: Stanley Yuen <[email protected]>
Consensys · Nov 26, 2024 · f6cde30 · f6cde30
1 parent 6a0236b
commit f6cde30
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 20 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.style.ts b/packages/wallet-ui/src/components/ui/organism/MinVersionModal/MinVersionModal.style.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import starknetSrc from 'assets/images/starknet-logo.svg';
+import metamaskSrc from 'assets/images/metamask-fox-icon.svg';
 
 export const Wrapper = styled.div`
   display: flex;
@@ -23,6 +24,13 @@ export const StarknetLogo = styled.img.attrs(() => ({
   margin-bottom: 32px;
 `;
 
+export const MetaMaskLogo = styled.img.attrs(() => ({
+  src: metamaskSrc,
+}))`
+  width: 32px;
+  height: 32px;
+`;
+
 export const Title = styled.div`
   text-align: center;
   font-size: ${(props) => props.theme.typography.h3.fontSize};

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,32 +1,56 @@
+import { MIN_METAMASK_VERSION } from 'utils/constants';
 import {
   Description,
+  MetaMaskLogo,
   StarknetLogo,
   Title,
   Wrapper,
 } from './MinVersionModal.style';
+import { useHasMetamask } from 'hooks/useHasMetamask';
+import { ConnectButton } from '../ConnectModal/ConnectModal.style';
 
 export const MinVersionModalView = () => {
+  const { metaMaskUpgradeRequired } = useHasMetamask();
   return (
     <Wrapper>
       <StarknetLogo />
-      <Title>A new version of the Starknet Snap is available</Title>
-      <Description>
-        To use this dapp, please install the latest version by following those
-        steps:
-        <ul>
-          <li>
-            Delete the current version in MetaMask by going in Settings {'>'}{' '}
-            Snaps {'>'} @consensys/starknet-snap {'>'} See details {'>'} Remove
-            Snap
-          </li>
-          <li>Refresh the page</li>
-          <li>
-            Click on connect, the new version will be proposed for installation.
-          </li>
-        </ul>
-        Note: Your account will be automatically recovered. Future upgrades will
-        be managed automatically
-      </Description>
+      {metaMaskUpgradeRequired ? (
+        <>
+          <Title>An upgrade of MetaMask is needed to use this dApp</Title>
+          <br />
+          <Description>
+            Please update to MetaMask Version {MIN_METAMASK_VERSION} or higher.
+          </Description>
+          <br />
+          <a href="https://metamask.io" target="_blank" rel="noreferrer">
+            <ConnectButton customIconLeft={<MetaMaskLogo />} onClick={() => {}}>
+              Go to MetaMask Website
+            </ConnectButton>
+          </a>
+        </>
+      ) : (
+        <>
+          <Title>A new version of the Starknet Snap is available</Title>
+          <Description>
+            To use this dapp, please install the latest version by following
+            those steps:
+            <ul>
+              <li>
+                Delete the current version in MetaMask by going in Settings{' '}
+                {'>'} Snaps {'>'} @consensys/starknet-snap {'>'} See details{' '}
+                {'>'} Remove Snap
+              </li>
+              <li>Refresh the page</li>
+              <li>
+                Click on connect, the new version will be proposed for
+                installation.
+              </li>
+            </ul>
+            Note: Your account will be automatically recovered. Future upgrades
+            will be managed automatically
+          </Description>
+        </>
+      )}
     </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/hooks/useHasMetamask.ts b/packages/wallet-ui/src/hooks/useHasMetamask.ts
@@ -1,7 +1,10 @@
 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';
+import semver from 'semver/preload';
 
 interface MetaMaskProvider {
   isMetaMask: boolean;
@@ -89,17 +92,23 @@ async function detectMetamaskSupport(windowObject: Window & typeof globalThis) {
 export const useHasMetamask = () => {
   const dispatch = useAppDispatch();
   const [hasMetamask, setHasMetamask] = useState<boolean | null>(null);
+  const [metaMaskUpgradeRequired, setMetaMaskUpgradeRequired] = useState<
+    boolean | null
+  >(null);
 
   useEffect(() => {
     const init = async () => {
       try {
         dispatch(enableLoadingWithMessage('Detecting Metamask...'));
         const provider = await detectMetamaskSupport(window);
-        // Use the new detection method
 
         if (provider && (await isSupportSnap(provider))) {
           dispatch(setProvider(provider));
           setHasMetamask(provider != null);
+          if (await isMetaMaskUpgradeRequired(provider)) {
+            dispatch(setMinVersionModalVisible(true));
+            setMetaMaskUpgradeRequired(true);
+          }
         } else {
           dispatch(setProvider(null));
           setHasMetamask(false);
@@ -116,9 +125,20 @@ export const useHasMetamask = () => {
 
   return {
     hasMetamask,
+    metaMaskUpgradeRequired,
   };
 };
 
+const isMetaMaskUpgradeRequired = async (provider: any) => {
+  const clientVersion = await provider.request({
+    method: 'web3_clientVersion',
+    params: [],
+  });
+  const versionMatch = clientVersion.match(/MetaMask\/v(\d+\.\d+\.\d+)/);
+  const currentVersion = versionMatch[1];
+  return semver.lt(currentVersion, MIN_METAMASK_VERSION);
+};
+
 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';