Fix #12190 - Implement new pin extension view for onboarding (#12290)

app/_locales/en/messages.json

@@ -1638,6 +1638,42 @@
   "onboardingImportWallet": {
     "message": "Import an existing wallet"
   },
+  "onboardingPinExtensionBillboardAccess": {
+    "message": "Full Access"
+  },
+  "onboardingPinExtensionBillboardDescription": {
+    "message": "These extensions can see and change information"
+  },
+  "onboardingPinExtensionBillboardDescription2": {
+    "message": "on this site."
+  },
+  "onboardingPinExtensionBillboardTitle": {
+    "message": "Extensions"
+  },
+  "onboardingPinExtensionChrome": {
+    "message": "Click the browser extension icon"
+  },
+  "onboardingPinExtensionDescription": {
+    "message": "Pin MetaMask on your browser so it's accessible and easy to view transaction confirmations."
+  },
+  "onboardingPinExtensionDescription2": {
+    "message": "You can open MetaMask by clicking on the extension and access your wallet with 1 click."
+  },
+  "onboardingPinExtensionDescription3": {
+    "message": "Click browser extension icon to access it instantly"
+  },
+  "onboardingPinExtensionLabel": {
+    "message": "Pin MetaMask"
+  },
+  "onboardingPinExtensionStep1": {
+    "message": "1"
+  },
+  "onboardingPinExtensionStep2": {
+    "message": "2"
+  },
+  "onboardingPinExtensionTitle": {
+    "message": "Your MetaMask install is complete!"
+  },
   "onboardingReturnNotice": {
     "message": "\"$1\" will close this tab and direct back to $2",
     "description": "Return the user to the site that initiated onboarding"

ui/pages/onboarding-flow/index.scss

@@ -6,6 +6,7 @@
 @import 'creation-successful/index';
 @import 'welcome/index';
 @import 'import-srp/index';
+@import 'pin-extension/index';
 
 .onboarding-flow {
   width: 100%;

ui/pages/onboarding-flow/onboarding-flow.js

@@ -13,6 +13,7 @@ import {
   ONBOARDING_PRIVACY_SETTINGS_ROUTE,
   ONBOARDING_COMPLETION_ROUTE,
   ONBOARDING_IMPORT_WITH_SRP_ROUTE,
+  ONBOARDING_PIN_EXTENSION_ROUTE,
 } from '../../helpers/constants/routes';
 import {
   getCompletedOnboarding,
@@ -37,6 +38,7 @@ import PrivacySettings from './privacy-settings/privacy-settings';
 import CreationSuccessful from './creation-successful/creation-successful';
 import OnboardingWelcome from './welcome/welcome';
 import ImportSRP from './import-srp/import-srp';
+import OnboardingPinExtension from './pin-extension/pin-extension';
 
 export default function OnboardingFlow() {
   const [secretRecoveryPhrase, setSecretRecoveryPhrase] = useState('');
@@ -54,7 +56,7 @@ export default function OnboardingFlow() {
     // For ONBOARDING_V2 dev purposes,
     // Remove when ONBOARDING_V2 dev complete
     if (process.env.ONBOARDING_V2) {
-      history.push(ONBOARDING_IMPORT_WITH_SRP_ROUTE);
+      history.push(ONBOARDING_PIN_EXTENSION_ROUTE);
       return;
     }
 
@@ -156,6 +158,10 @@ export default function OnboardingFlow() {
             path={ONBOARDING_WELCOME_ROUTE}
             component={OnboardingWelcome}
           />
+          <Route
+            path={ONBOARDING_PIN_EXTENSION_ROUTE}
+            component={OnboardingPinExtension}
+          />
           <Route exact path="*" component={OnboardingFlowSwitch} />
         </Switch>
       </div>

ui/pages/onboarding-flow/pin-extension/index.scss

@@ -0,0 +1,23 @@
+.onboarding-pin-extension {
+  max-width: 800px;
+
+  .control-dots .dot {
+    background: $ui-2;
+    box-shadow: none;
+
+    &.selected {
+      background: $ui-4;
+    }
+  }
+
+  &__diagram {
+    margin: 24px auto;
+    width: 799px;
+    height: 320px;
+  }
+
+  &__buttons {
+    max-width: 50%;
+    margin: 40px auto 0 auto;
+  }
+}

ui/pages/onboarding-flow/pin-extension/pin-extension.js

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Carousel } from 'react-responsive-carousel';
+import Typography from '../../../components/ui/typography/typography';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import Button from '../../../components/ui/button';
+import {
+  TYPOGRAPHY,
+  FONT_WEIGHT,
+  TEXT_ALIGN,
+} from '../../../helpers/constants/design-system';
+import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
+import OnboardingPinBillboard from './pin-billboard';
+
+export default function OnboardingPinExtension() {
+  const t = useI18nContext();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const history = useHistory();
+
+  return (
+    <div className="onboarding-pin-extension">
+      <Typography
+        variant={TYPOGRAPHY.H2}
+        align={TEXT_ALIGN.CENTER}
+        fontWeight={FONT_WEIGHT.BOLD}
+      >
+        {t('onboardingPinExtensionTitle')}
+      </Typography>
+      <Carousel
+        selectedItem={selectedIndex}
+        showThumbs={false}
+        showStatus={false}
+        showArrows={false}
+      >
+        <div>
+          <Typography align={TEXT_ALIGN.CENTER}>
+            {t('onboardingPinExtensionDescription')}
+          </Typography>
+          <div className="onboarding-pin-extension__diagram">
+            <OnboardingPinBillboard />
+          </div>
+        </div>
+        <div>
+          <Typography align={TEXT_ALIGN.CENTER}>
+            {t('onboardingPinExtensionDescription2')}
+          </Typography>
+          <Typography align={TEXT_ALIGN.CENTER}>
+            {t('onboardingPinExtensionDescription3')}
+          </Typography>
+          <img
+            src="/images/onboarding-pin-browser.svg"
+            width="799"
+            height="320"
+            alt=""
+          />
+        </div>
+      </Carousel>
+      <div className="onboarding-pin-extension__buttons">
+        <Button
+          type="primary"
+          onClick={() => {
+            if (selectedIndex === 0) {
+              setSelectedIndex(1);
+            } else {
+              history.push(DEFAULT_ROUTE);
+            }
+          }}
+        >
+          {selectedIndex === 0 ? t('next') : t('done')}
+        </Button>
+      </div>
+    </div>
+  );
+}

ui/pages/onboarding-flow/pin-extension/pin-extension.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import OnboardingPinExtension from './pin-extension';
+
+export default {
+  title: 'Onboarding',
+  id: __filename,
+};
+
+export const OnboardingComponent = () => <OnboardingPinExtension />;