feat: add metamask snap to missions (shapeshift#5332)

README.md

@@ -60,7 +60,10 @@ If you are using Linux and macOS it works out of the box following these steps:
 
 3. Install [OpenJDK](https://openjdk.java.net/install/).
 
-    > On MacOS if you have [installed](https://openapi-generator.tech/docs/installation/) `openapi-generator-cli`, it will be installed automatically.
+    >  On MacOS via homebrew `brew install java` should do the trick
+    >  if you have [installed](https://openapi-generator.tech/docs/installation/) `brew install openapi-generator`, it should be installed automatically. 
+    > Follow the commands to symlink the PATH for JDK & java
+    > To verify a proper install and link check on the `java -version` and it should have openJDK versions displayed alongside java version.
 
 4. Install Dependencies:
 

src/assets/translations/en/main.json

@@ -2088,6 +2088,11 @@
       "subtitle": "Buy, sell, trade, earn, and more",
       "title": "Earn FOX",
       "cta": "Start Mission"
+    },
+    "snapfoxatar": {
+      "title": "Unlock Bitcoin with MetaMask",
+      "subtitle": "Mint a Metamask FOXatar skin",
+      "cta": "Start Mission"
     }
   },
   "avatar": {

src/pages/Missions/Missions.tsx

@@ -18,10 +18,10 @@ import { useTranslate } from 'react-polyglot'
 import { NavLink } from 'react-router-dom'
 import FoxMissionsBg from 'assets/fox-mission-bg.jpg'
 import FoxArmyBg from 'assets/foxarmy-bg.png'
-import FoxAtarBg from 'assets/foxatar-card-bg.png'
 import FoxRewardsBg from 'assets/foxrewards-mission.png'
 import SponsorBg from 'assets/mission-sponsor-bg.jpg'
 import OptimismBg from 'assets/op-card-bg.png'
+import SnapFoxatar from 'assets/snap-foxatar.jpg'
 import YatBg from 'assets/yat-mission-bg.png'
 import { Carousel } from 'components/Carousel/Carousel'
 import type { CarouselHeaderProps } from 'components/Carousel/types'
@@ -47,10 +47,10 @@ export const useGetMissions = () => {
   const missionItems: MissionProps[] = useMemo(() => {
     return [
       {
-        title: translate('missions.foxatar.title'),
-        subtitle: translate('missions.foxatar.subtitle'),
-        buttonText: translate('missions.foxatar.cta'),
-        coverImage: FoxAtarBg,
+        title: translate('missions.snapfoxatar.title'),
+        subtitle: translate('missions.snapfoxatar.subtitle'),
+        buttonText: translate('missions.snapfoxatar.cta'),
+        coverImage: SnapFoxatar,
         onClick: () => window.open('https://app.mercle.xyz/shapeshift/events'),
       },
       {