Feat/add having issues btn to migration (#968)

* feat: add temporary mitigation for migration end state

* feat: add mitigation on nami namespace injection

Author: mchappell

src/features/analytics/events.ts

@@ -115,6 +115,7 @@ export enum Events {
   NamiMigrationDismissedNotStarted = 'nami tool | nami | migration dismissed | not started | click',
   NamiMigrationDismissedInProgress = 'nami tool | nami | migration dismissed | in progress | click',
   NamiMigrationOpenLaceOrOpenChromeStore = 'nami tool | nami | open lace or open chrome store link | click',
+  NamiMigrationHavingIssuesClick = 'nami tool | nami | having migration issues | click',
 }
 
 export type Property =

src/pages/Content/index.js

@@ -16,10 +16,12 @@ const injectScript = () => {
 };
 
 async function shouldInject() {
-  const { laceMigration } = (await storage.local.get(MIGRATION_KEY)) || {
+  const { laceMigration } = (await storage.local.get([MIGRATION_KEY])) || {
     laceMigration: undefined,
   };
+
   // Prevent injection into window.cardano namespace if migration has been completed
+  // or if the user has dismissed because they are having issues migrating (setting migration state back to 'none')
   if (laceMigration === MigrationState.Completed) return false;
   const documentElement = document.documentElement.nodeName;
   const docElemCheck = documentElement

src/ui/lace-migration/components/migration-view/migration-view.component.jsx

@@ -1,18 +1,22 @@
 import React, { useEffect } from 'react';
-import { MigrationState } from '../../../../api/migration-tool/migrator/migration-state.data';
+import {
+  MigrationState,
+  MIGRATION_KEY,
+} from '../../../../api/migration-tool/migrator/migration-state.data';
 import { Carousel } from '../carousel/carousel.component';
 import { Slide1 } from '../carousel/slides/Slide1.component';
 import { Slide2 } from '../carousel/slides/Slide2.component';
 import { Slide3 } from '../carousel/slides/Slide3.component';
 import { AlmostThere } from '../almost-there/almost-there.component';
 import { AllDone } from '../all-done/all-done.component';
 import { NoWallet } from '../no-wallet/no-wallet.component';
-import { useColorModeValue, Flex } from '@chakra-ui/react';
+import { useColorModeValue, Flex, Link } from '@chakra-ui/react';
 import { useFeatureFlagsContext } from '../../../../features/feature-flags/provider';
 import { Events } from '../../../../features/analytics/events';
 import { useCaptureEvent } from '../../../../features/analytics/hooks';
 import { AnalyticsConsentModal } from '../../../../features/analytics/ui/AnalyticsConsentModal';
 import { useAnalyticsContext } from '../../../../features/analytics/provider';
+import { storage } from 'webextension-polyfill';
 
 export const MigrationView = ({
   migrationState,
@@ -42,36 +46,44 @@ export const MigrationView = ({
   const dismissibleSeconds =
     featureFlags?.['is-migration-active']?.dismissInterval;
 
+  const hasShowIssuesButton =
+    featureFlags?.['show-having-issues-button'] || false;
+
+  const handleHavingIssuesClick = () => {
+    storage.local.set({
+      [MIGRATION_KEY]: MigrationState.None,
+    });
+    captureEvent(Events.NamiMigrationHavingIssuesClick);
+  };
+
   if (!hasWallet) {
     captureEvent(Events.MigrationViewNoWalletViewed);
     return (
-      <><Flex
-        h="100%"
-        backgroundColor={panelBg}
-      >
-        <Flex
-          pt="40px"
-          pb="30px"
-          px="40px"
-          borderTopRadius='20px'
-          backgroundColor={bgColor}
-          mt='17px'
-          flexDirection='column'
-          h='calc(100% - 17px)'
-          w="100%"
-        >
-          <NoWallet
-            isLaceInstalled={isLaceInstalled}
-            onAction={onNoWalletActionClick}
-            isDismissable={isDismissable}
-            dismissibleSeconds={dismissibleSeconds}
-          />
+      <>
+        <Flex h="100%" backgroundColor={panelBg}>
+          <Flex
+            pt="40px"
+            pb="30px"
+            px="40px"
+            borderTopRadius="20px"
+            backgroundColor={bgColor}
+            mt="17px"
+            flexDirection="column"
+            h="calc(100% - 17px)"
+            w="100%"
+          >
+            <NoWallet
+              isLaceInstalled={isLaceInstalled}
+              onAction={onNoWalletActionClick}
+              isDismissable={isDismissable}
+              dismissibleSeconds={dismissibleSeconds}
+            />
+          </Flex>
         </Flex>
-      </Flex>
-      <AnalyticsConsentModal 
-        askForConsent={analytics.consent === undefined}
-        setConsent={setAnalyticsConsent}
-      />
+        <AnalyticsConsentModal
+          askForConsent={analytics.consent === undefined}
+          setConsent={setAnalyticsConsent}
+        />
       </>
     );
   }
@@ -81,19 +93,16 @@ export const MigrationView = ({
     case MigrationState.None:
       captureEvent(Events.MigrationNoStartedViewed);
       return (
-        <Flex
-          h="100%"
-          backgroundColor={panelBg}
-        >
+        <Flex h="100%" backgroundColor={panelBg}>
           <Flex
             flexDirection={'column'}
             pt="40px"
             pb="30px"
             px="0px"
-            borderTopRadius='20px'
+            borderTopRadius="20px"
             backgroundColor={bgColor}
-            mt='17px'
-            h='calc(100% - 17px)'
+            mt="17px"
+            h="calc(100% - 17px)"
             w="100%"
           >
             <Carousel onSlideSwitched={onSlideSwitched}>
@@ -124,19 +133,16 @@ export const MigrationView = ({
       if (!isLaceInstalled) {
         onWaitingForLaceScreenViewed?.();
         return (
-          <Flex
-            h="100%"
-            backgroundColor={panelBg}
-          >
+          <Flex h="100%" backgroundColor={panelBg}>
             <Flex
               pt="40px"
               pb="30px"
               px="40px"
-              borderTopRadius='20px'
+              borderTopRadius="20px"
               backgroundColor={bgColor}
-              mt='17px'
-              flexDirection='column'
-              h='calc(100% - 17px)'
+              mt="17px"
+              flexDirection="column"
+              h="calc(100% - 17px)"
               w="100%"
             >
               <AlmostThere
@@ -151,19 +157,16 @@ export const MigrationView = ({
       } else {
         onOpenLaceScreenViewed?.();
         return (
-          <Flex
-            h="100%"
-            backgroundColor={panelBg}
-          >
+          <Flex h="100%" backgroundColor={panelBg}>
             <Flex
               pt="40px"
               pb="30px"
               px="40px"
-              borderTopRadius='20px'
+              borderTopRadius="20px"
               backgroundColor={bgColor}
-              mt='17px'
-              flexDirection='column'
-              h='calc(100% - 17px)'
+              mt="17px"
+              flexDirection="column"
+              h="calc(100% - 17px)"
               w="100%"
             >
               <AlmostThere
@@ -180,19 +183,16 @@ export const MigrationView = ({
     case MigrationState.Completed:
       onAllDoneScreenViewed?.();
       return (
-        <Flex
-          h="100%"
-          backgroundColor={panelBg}
-        >
+        <Flex h="100%" backgroundColor={panelBg}>
           <Flex
             pt="40px"
             pb="30px"
             px="40px"
-            borderTopRadius='20px'
+            borderTopRadius="20px"
             backgroundColor={bgColor}
-            mt='17px'
-            flexDirection='column'
-            h='calc(100% - 17px)'
+            mt="17px"
+            flexDirection="column"
+            h="calc(100% - 17px)"
             w="100%"
           >
             <AllDone
@@ -201,6 +201,15 @@ export const MigrationView = ({
                 isLaceInstalled ? onOpenLaceClicked : onDownloadLaceClicked
               }
             />
+            {hasShowIssuesButton && (
+              <Link
+                textAlign="center"
+                marginTop={4}
+                onClick={handleHavingIssuesClick}
+              >
+                Having issues? Click here to continue using Nami
+              </Link>
+            )}
           </Flex>
         </Flex>
       );

src/ui/lace-migration/components/migration.component.jsx

@@ -137,30 +137,30 @@ export const AppWithMigration = () => {
           slideIndex: nextSlideIndex,
         });
       }}
-      onUpgradeWalletClicked={async() => {
+      onUpgradeWalletClicked={async () => {
         enableMigration();
         await captureEvent(Events.MigrationUpgradeYourWalletClicked);
       }}
-      onWaitingForLaceScreenViewed={async() => {
-       await  captureEvent(Events.MigrationDownloadLaceScreenViewed);
+      onWaitingForLaceScreenViewed={async () => {
+        await captureEvent(Events.MigrationDownloadLaceScreenViewed);
       }}
-      onOpenLaceScreenViewed={async() => {
+      onOpenLaceScreenViewed={async () => {
         await captureEvent(Events.MigrationOpenLaceScreenViewed);
       }}
-      onDownloadLaceClicked={async() => {
+      onDownloadLaceClicked={async () => {
         await captureEvent(Events.MigrationDownloadLaceClicked);
         window.open(
           `https://chromewebstore.google.com/detail/lace/${secrets.LACE_EXTENSION_ID}`
         );
       }}
-      onOpenLaceClicked={async() => {
-       await captureEvent(Events.MigrationOpenLaceClicked);
+      onOpenLaceClicked={async () => {
+        await captureEvent(Events.MigrationOpenLaceClicked);
         openLace();
       }}
-      onAllDoneScreenViewed={async() => {
+      onAllDoneScreenViewed={async () => {
         await captureEvent(Events.MigrationAllDoneScreenViewed);
       }}
-      onNoWalletActionClick={async() => {
+      onNoWalletActionClick={async () => {
         if (state.isLaceInstalled) {
           await captureEvent(Events.MigrationOpenLaceClicked);
           openLace();