From f6cde302f491f6f2bd4322ce996a699e046fe9ee Mon Sep 17 00:00:00 2001 From: khanti42 Date: Tue, 26 Nov 2024 11:37:47 +0100 Subject: [PATCH] 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 <102275989+stanleyyconsensys@users.noreply.github.com> * Update packages/wallet-ui/src/hooks/useHasMetamask.ts Co-authored-by: Stanley Yuen <102275989+stanleyyconsensys@users.noreply.github.com> * 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 <102275989+stanleyyconsensys@users.noreply.github.com> --- packages/wallet-ui/src/App.tsx | 5 +- .../MinVersionModal/MinVersionModal.style.ts | 8 +++ .../MinVersionModal/MinVersionModal.view.tsx | 60 +++++++++++++------ .../wallet-ui/src/hooks/useHasMetamask.ts | 22 ++++++- packages/wallet-ui/src/utils/constants.ts | 2 + 5 files changed, 77 insertions(+), 20 deletions(-) diff --git a/packages/wallet-ui/src/App.tsx b/packages/wallet-ui/src/App.tsx index 7728ef8b..d0cee58f 100644 --- a/packages/wallet-ui/src/App.tsx +++ b/packages/wallet-ui/src/App.tsx @@ -81,7 +81,10 @@ function App() { > - + ({ 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 index 6ed188a6..79f9771f 100644 --- 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 ( - A new version of the Starknet Snap is available - - To use this dapp, please install the latest version by following those - steps: -
    -
  • - Delete the current version in MetaMask by going in Settings {'>'}{' '} - Snaps {'>'} @consensys/starknet-snap {'>'} See details {'>'} Remove - Snap -
    • -
  • Refresh the page
    • -
  • - Click on connect, the new version will be proposed for installation. -
    • -
- Note: Your account will be automatically recovered. Future upgrades will - be managed automatically - + {metaMaskUpgradeRequired ? ( + <> + An upgrade of MetaMask is needed to use this dApp +
+ + Please update to MetaMask Version {MIN_METAMASK_VERSION} or higher. + +
+ + } onClick={() => {}}> + Go to MetaMask Website + + + + ) : ( + <> + A new version of the Starknet Snap is available + + To use this dapp, please install the latest version by following + those steps: +
    +
  • + Delete the current version in MetaMask by going in Settings{' '} + {'>'} Snaps {'>'} @consensys/starknet-snap {'>'} See details{' '} + {'>'} Remove Snap +
    • +
  • Refresh the page
    • +
  • + Click on connect, the new version will be proposed for + installation. +
    • +
+ Note: Your account will be automatically recovered. Future upgrades + will be managed automatically + + + )} ); }; diff --git a/packages/wallet-ui/src/hooks/useHasMetamask.ts b/packages/wallet-ui/src/hooks/useHasMetamask.ts index 3b229ee3..32923de1 100644 --- 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(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 index 310f56f0..76d33c55 100644 --- 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';