chore: release v1.676.0

.env.base

@@ -163,6 +163,7 @@ REACT_APP_PORTALS_API_KEY=bbc3ba7e-5f2a-4a0a-bbbc-22509944686c
 REACT_APP_ONE_INCH_API_URL=https://api-shapeshift.1inch.io/v5.0
 
 REACT_APP_SNAP_ID=npm:@shapeshiftoss/metamask-snaps
+REACT_APP_SNAP_VERSION=1.0.9
 # REACT_APP_SNAP_ID=local:http://localhost:9000
 
 REACT_APP_EXPERIMENTAL_MM_SNAPPY_FINGERS=true

packages/utils/src/index.ts

@@ -12,6 +12,7 @@ export * from './baseUnits/baseUnits'
 export * from './promises'
 export * from './treasury'
 export * from './timeout'
+export * from './createThrottle'
 
 export const isSome = <T>(option: T | null | undefined): option is T =>
   !isUndefined(option) && !isNull(option)

src/assets/translations/en/main.json

@@ -171,7 +171,8 @@
     },
     "featureDisabled": "This feature is temporarily disabled.",
     "yes": "Yes",
-    "activeAccount": "Active Account"
+    "activeAccount": "Active Account",
+    "update": "Update"
   },
   "consentBanner": {
     "body": {
@@ -1535,6 +1536,10 @@
         "title": "You have removed Multichain support from MetaMask!",
         "subtitle": "Re-add the Multichain Snap on MetaMask to send, receive, track, trade, and earn with the following chains:"
       },
+      "update": {
+        "title": "Multichain Snap needs updating",
+        "subtitle": "Uninstall the ShapeShift multichain Snap and click 'Update' to keep using ShapeShifts multichain features with MetaMask!"
+      },
       "secondaryTitle": "The best Multichain experience for MetaMask: Powered by ShapeShift",
       "secondaryBody": "Send, receive, track, trade, and earn with the ShapeShift Multichain Snap on the following chains:",
       "connectMetaMask": "Connect MetaMask",

src/components/Layout/Header/Header.tsx

@@ -50,8 +50,9 @@ const widthProp = { base: 'auto', md: 'full' }
 export const Header = memo(() => {
   const isDegradedState = useSelector(selectPortfolioDegradedState)
   const snapModal = useModal('snaps')
-  const isSnapInstalled = useIsSnapInstalled()
+  const { isSnapInstalled, isCorrectVersion } = useIsSnapInstalled()
   const previousSnapInstall = usePrevious(isSnapInstalled)
+  const previousIsCorrectVersion = usePrevious(isCorrectVersion)
   const showSnapModal = useSelector(selectShowSnapsModal)
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`)
 
@@ -113,7 +114,14 @@ export const Header = memo(() => {
   }, [appDispatch, currentWalletId, hasUtxoAccountIds, isSnapInstalled, wallet, walletAccountIds])
 
   useEffect(() => {
-    if (previousSnapInstall === true && isSnapInstalled === false) {
+    if (!isCorrectVersion && isSnapInstalled) return
+    if (snapModal.isOpen) return
+
+    if (
+      previousSnapInstall === true &&
+      isSnapInstalled === false &&
+      previousIsCorrectVersion === true
+    ) {
       // they uninstalled the snap
       toast({
         status: 'success',
@@ -123,7 +131,7 @@ export const Header = memo(() => {
       const walletId = currentWalletId
       if (!walletId) return
       appDispatch(portfolio.actions.clearWalletMetadata(walletId))
-      snapModal.open({ isRemoved: true })
+      return snapModal.open({ isRemoved: true })
     }
     if (previousSnapInstall === false && isSnapInstalled === true) {
       history.push(`/assets/${btcAssetId}`)
@@ -134,14 +142,16 @@ export const Header = memo(() => {
         title: translate('walletProvider.metaMaskSnap.snapInstalledToast'),
         position: 'bottom',
       })
-      dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
+      return dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
     }
   }, [
     appDispatch,
     currentWalletId,
     dispatch,
     history,
+    isCorrectVersion,
     isSnapInstalled,
+    previousIsCorrectVersion,
     previousSnapInstall,
     showSnapModal,
     snapModal,

src/components/Layout/Header/NavBar/Notifications.tsx

@@ -44,7 +44,7 @@ export const Notifications = memo(() => {
   const {
     state: { wallet, modalType },
   } = useWallet()
-  const isSnapInstalled = useIsSnapInstalled()
+  const { isSnapInstalled } = useIsSnapInstalled()
 
   const ethAccountIds = useAppSelector(state =>
     selectAccountIdsByAssetId(state, { assetId: ethAssetId }),

src/components/Modals/Snaps/SnapContent.tsx

@@ -5,9 +5,13 @@ import { SnapIntro } from './SnapIntro'
 
 export const SnapContent = ({
   isRemoved,
+  isCorrectVersion,
+  isSnapInstalled,
   onClose,
 }: {
   isRemoved?: boolean
+  isCorrectVersion: boolean
+  isSnapInstalled: boolean
   onClose: () => void
 }) => {
   return (
@@ -16,7 +20,11 @@ export const SnapContent = ({
         {({ location }) => (
           <Switch key={location.key} location={location}>
             <Route path='/intro'>
-              <SnapIntro isRemoved={isRemoved} />
+              <SnapIntro
+                isRemoved={isRemoved}
+                isCorrectVersion={isCorrectVersion}
+                isSnapInstalled={isSnapInstalled}
+              />
             </Route>
             <Route path='/confirm'>
               <SnapConfirm onClose={onClose} />

src/components/Modals/Snaps/SnapIntro.tsx

@@ -10,6 +10,7 @@ import {
   ModalFooter,
   ModalHeader,
   Text,
+  usePrevious,
 } from '@chakra-ui/react'
 import { knownChainIds } from 'constants/chains'
 import { useCallback, useMemo } from 'react'
@@ -27,17 +28,32 @@ import { preferences } from 'state/slices/preferencesSlice/preferencesSlice'
 import { selectAssetById } from 'state/slices/selectors'
 import { store } from 'state/store'
 
-export const SnapIntro = ({ isRemoved }: { isRemoved?: boolean }) => {
+export const SnapIntro = ({
+  isRemoved,
+  isCorrectVersion,
+  isSnapInstalled,
+}: {
+  isRemoved?: boolean
+  isCorrectVersion: boolean
+  isSnapInstalled: boolean
+}) => {
   const translate = useTranslate()
   const history = useHistory()
+  const previousIsCorrectVersion = usePrevious(isCorrectVersion)
 
-  const titleSlug = isRemoved
-    ? 'walletProvider.metaMaskSnap.uninstall.title'
-    : 'walletProvider.metaMaskSnap.title'
+  const titleSlug = useMemo(() => {
+    if (isRemoved) return 'walletProvider.metaMaskSnap.uninstall.title'
+    if ((!isCorrectVersion && isSnapInstalled) || previousIsCorrectVersion === false)
+      return 'walletProvider.metaMaskSnap.update.title'
+    return 'walletProvider.metaMaskSnap.title'
+  }, [isCorrectVersion, isRemoved, isSnapInstalled, previousIsCorrectVersion])
 
-  const bodySlug = isRemoved
-    ? 'walletProvider.metaMaskSnap.uninstall.subtitle'
-    : 'walletProvider.metaMaskSnap.subtitle'
+  const bodySlug = useMemo(() => {
+    if (isRemoved) return 'walletProvider.metaMaskSnap.uninstall.subtitle'
+    if ((!isCorrectVersion && isSnapInstalled) || previousIsCorrectVersion === false)
+      return 'walletProvider.metaMaskSnap.update.subtitle'
+    return 'walletProvider.metaMaskSnap.subtitle'
+  }, [isCorrectVersion, isRemoved, isSnapInstalled, previousIsCorrectVersion])
 
   const allNativeAssets = useMemo(() => {
     return knownChainIds
@@ -68,6 +84,13 @@ export const SnapIntro = ({ isRemoved }: { isRemoved?: boolean }) => {
     history.push('/confirm')
   }, [history])
 
+  const confirmCopy = useMemo(() => {
+    if ((!isCorrectVersion && isSnapInstalled) || previousIsCorrectVersion === false)
+      return translate('common.update')
+
+    if (!isSnapInstalled || isRemoved) return translate('walletProvider.metaMaskSnap.addSnap')
+  }, [isCorrectVersion, isRemoved, isSnapInstalled, previousIsCorrectVersion, translate])
+
   return (
     <>
       <ModalHeader textAlign='center'>
@@ -113,7 +136,7 @@ export const SnapIntro = ({ isRemoved }: { isRemoved?: boolean }) => {
         </Checkbox>
         <HStack spacing={2}>
           <Button colorScheme='blue' onClick={handleNext}>
-            {translate('walletProvider.metaMaskSnap.addSnap')}
+            {confirmCopy}
           </Button>
         </HStack>
       </ModalFooter>

src/components/Modals/Snaps/Snaps.tsx

@@ -13,26 +13,33 @@ export type SnapsModalProps = {
 export const Snaps: React.FC<SnapsModalProps> = ({ isRemoved }) => {
   const { close, isOpen } = useModal('snaps')
   const isSnapsEnabled = useFeatureFlag('Snaps')
-  const isSnapInstalled = useIsSnapInstalled()
+  const { isSnapInstalled, isCorrectVersion } = useIsSnapInstalled()
 
   useEffect(() => {
-    if (isSnapInstalled) {
+    if (isSnapInstalled && isCorrectVersion) {
       close()
     }
-  }, [close, isSnapInstalled])
+  }, [close, isCorrectVersion, isSnapInstalled])
 
   const handleClose = useCallback(() => {
     close()
   }, [close])
 
   if (!isSnapsEnabled) return null
+  if (isSnapInstalled === null) return null
+  if (isCorrectVersion === null) return null
 
   return (
     <Modal isOpen={isOpen} onClose={close} isCentered size='sm'>
       <ModalOverlay />
       <ModalContent minW='450px'>
         <ModalCloseButton />
-        <SnapContent isRemoved={isRemoved} onClose={handleClose} />
+        <SnapContent
+          isRemoved={isRemoved}
+          isCorrectVersion={isCorrectVersion}
+          isSnapInstalled={isSnapInstalled}
+          onClose={handleClose}
+        />
       </ModalContent>
     </Modal>
   )

src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx

@@ -43,7 +43,7 @@ export const ManualAddressEntry: FC<ManualAddressEntryProps> = memo(
     const { chainId: buyAssetChainId, assetId: buyAssetAssetId } =
       useAppSelector(selectInputBuyAsset)
 
-    const isSnapInstalled = useIsSnapInstalled()
+    const { isSnapInstalled } = useIsSnapInstalled()
     const walletSupportsBuyAssetChain = useWalletSupportsChain(buyAssetChainId, wallet)
     const buyAssetAccountIds = useAppSelector(state =>
       selectAccountIdsByAssetId(state, { assetId: buyAssetAssetId }),
@@ -125,6 +125,7 @@ export const ManualAddressEntry: FC<ManualAddressEntryProps> = memo(
       [buyAssetAssetId, buyAssetChainId, dispatch],
     )
 
+    // We're enabling the snap, so no versioning concerns here
     const handleEnableShapeShiftSnap = useCallback(() => openSnapsModal({}), [openSnapsModal])
     const handleAddAccount = useCallback(
       () => openManageAccountsModal({}),

src/components/MultiHopTrade/hooks/useSupportedAssets.tsx

@@ -13,7 +13,7 @@ export const useSupportedAssets = () => {
   const sortedAssets = useAppSelector(selectAssetsSortedByMarketCapUserCurrencyBalanceAndName)
   const assets = useAppSelector(selectAssets)
   const wallet = useWallet().state.wallet
-  const isSnapInstalled = useIsSnapInstalled()
+  const { isSnapInstalled } = useIsSnapInstalled()
 
   const accountIdsByChainId = useAppSelector(selectAccountIdsByChainId)
   const queryParams = useMemo(() => {

src/components/StakingVaults/PositionTable.tsx

@@ -94,7 +94,7 @@ export const PositionTable: React.FC<PositionTableProps> = ({
     ),
   )
 
-  const isSnapInstalled = useIsSnapInstalled()
+  const { isSnapInstalled } = useIsSnapInstalled()
   const accountIdsByChainId = useAppSelector(selectAccountIdsByChainId)
 
   const filteredPositions = useMemo(

src/components/StakingVaults/ProviderCard.tsx

@@ -66,7 +66,7 @@ export const ProviderCard: React.FC<ProviderCardProps> = ({
     selectAggregatedEarnUserStakingOpportunitiesIncludeEmpty,
   )
 
-  const isSnapInstalled = useIsSnapInstalled()
+  const { isSnapInstalled } = useIsSnapInstalled()
 
   const filteredDownStakingOpportunities = useMemo(
     () =>

src/config.ts

@@ -154,6 +154,7 @@ const validators = {
   REACT_APP_EXPERIMENTAL_CUSTOM_SEND_NONCE: bool({ default: false }),
   REACT_APP_EXPERIMENTAL_MM_SNAPPY_FINGERS: bool({ default: false }),
   REACT_APP_SNAP_ID: str(),
+  REACT_APP_SNAP_VERSION: str(),
   REACT_APP_FEATURE_THORCHAIN_LENDING: bool({ default: false }),
   REACT_APP_FEATURE_THORCHAIN_LENDING_BORROW: bool({ default: false }),
   REACT_APP_FEATURE_THORCHAIN_LENDING_REPAY: bool({ default: false }),

src/context/WalletProvider/MetaMask/components/Connect.tsx

@@ -1,7 +1,9 @@
+import { getConfig } from 'config'
 import React, { useCallback, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { useSelector } from 'react-redux'
 import type { RouteComponentProps } from 'react-router-dom'
+import { getSnapVersion } from 'utils/snaps'
 import type { ActionTypes } from 'context/WalletProvider/actions'
 import { WalletActions } from 'context/WalletProvider/actions'
 import { KeyManager } from 'context/WalletProvider/KeyManager'
@@ -90,6 +92,13 @@ export const MetaMaskConnect = ({ history }: MetaMaskSetupProps) => {
             return dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
           const isSnapInstalled = await checkIsSnapInstalled()
 
+          const snapVersion = await getSnapVersion()
+
+          const isCorrectVersion = snapVersion === getConfig().REACT_APP_SNAP_VERSION
+
+          if (isSnapsEnabled && isSnapInstalled && !isCorrectVersion && showSnapModal) {
+            return history.push('/metamask/snap/update')
+          }
           if (isSnapsEnabled && !isSnapInstalled && showSnapModal) {
             return history.push('/metamask/snap/install')
           }

src/context/WalletProvider/MetaMask/components/MetaMaskMenu.tsx

@@ -15,7 +15,7 @@ type MetaMaskMenuProps = {
 }
 
 export const MetaMaskMenu: React.FC<MetaMaskMenuProps> = ({ onClose }) => {
-  const isSnapInstalled = useIsSnapInstalled()
+  const { isSnapInstalled, isCorrectVersion } = useIsSnapInstalled()
   const translate = useTranslate()
   const snapModal = useModal('snaps')
   const [isMetaMask, setIsMetaMask] = useState<null | boolean>(null)
@@ -34,27 +34,33 @@ export const MetaMaskMenu: React.FC<MetaMaskMenuProps> = ({ onClose }) => {
   }, [wallet])
 
   const handleClick = useCallback(() => {
-    if (isSnapInstalled === false) {
+    if (isSnapInstalled === false || isCorrectVersion === false) {
       snapModal.open({})
     }
-  }, [isSnapInstalled, snapModal])
+  }, [isCorrectVersion, isSnapInstalled, snapModal])
 
   const renderSnapStatus = useMemo(() => {
-    if (isSnapInstalled === true) {
-      return <Tag colorScheme='green'>{translate('walletProvider.metaMaskSnap.active')}</Tag>
-    } else {
+    if (isSnapInstalled) {
+      return isCorrectVersion ? (
+        <Tag colorScheme='green'>{translate('walletProvider.metaMaskSnap.active')}</Tag>
+      ) : (
+        <Tag colorScheme='red'>{translate('common.update')}</Tag>
+      )
+    }
+
+    if (!isSnapInstalled) {
       return <Tag>{translate('walletProvider.metaMaskSnap.notActive')}</Tag>
     }
-  }, [isSnapInstalled, translate])
+  }, [isCorrectVersion, isSnapInstalled, translate])
 
   return isMetaMask ? (
     <>
       <MenuDivider />
-      {isSnapInstalled && <ManageAccountsMenuItem onClose={onClose} />}
+      {isSnapInstalled && isCorrectVersion && <ManageAccountsMenuItem onClose={onClose} />}
       <MenuItem
         justifyContent='space-between'
         onClick={handleClick}
-        isDisabled={isSnapInstalled === true}
+        isDisabled={isSnapInstalled === true && isCorrectVersion === true}
       >
         {translate('walletProvider.metaMaskSnap.multiChainSnap')}
         <Skeleton isLoaded={isSnapInstalled !== null}>{renderSnapStatus}</Skeleton>

src/context/WalletProvider/MetaMask/components/SnapInstall.tsx

@@ -10,5 +10,12 @@ export const SnapInstall = () => {
     dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
   }, [dispatch])
 
-  return <SnapContent onClose={handleClose} />
+  return (
+    <SnapContent
+      onClose={handleClose}
+      // If we land here, we don't care about versioning, the user does *not* have the snap installed yet
+      isCorrectVersion
+      isSnapInstalled={false}
+    />
+  )
 }

src/context/WalletProvider/MetaMask/components/SnapUpdate.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import { SnapContent } from 'components/Modals/Snaps/SnapContent'
+import { WalletActions } from 'context/WalletProvider/actions'
+import { useWallet } from 'hooks/useWallet/useWallet'
+
+export const SnapUpdate = () => {
+  const { dispatch } = useWallet()
+
+  const handleClose = useCallback(() => {
+    dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
+  }, [dispatch])
+
+  return (
+    // If we land here, we know the version is incorrect
+    <SnapContent onClose={handleClose} isCorrectVersion={false} isSnapInstalled={true} />
+  )
+}