Skip to content

Commit 5daf916

Browse files
mchappellmchappell
committed
feat: add temporary mitigation for migration end state
1 parent a449ccd commit 5daf916

File tree

4 files changed

+92
-69
lines changed

4 files changed

+92
-69
lines changed

‎src/api/migration-tool/migrator/migration-state.data.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ export enum MigrationState {
88

99
export const MIGRATION_KEY = 'laceMigration' as const;
1010
export const DISMISS_MIGRATION_UNTIL = 'dismissMigrationUntil' as const;
11+
export const IS_HAVING_ISSUES = 'isHavingIssues' as const;

‎src/features/analytics/events.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ export enum Events {
115115
NamiMigrationDismissedNotStarted = 'nami tool | nami | migration dismissed | not started | click',
116116
NamiMigrationDismissedInProgress = 'nami tool | nami | migration dismissed | in progress | click',
117117
NamiMigrationOpenLaceOrOpenChromeStore = 'nami tool | nami | open lace or open chrome store link | click',
118+
NamiMigrationHavingIssuesClick = 'nami tool | nami | having migration issues | click',
118119
}
119120

120121
export type Property =

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

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import React, { useEffect } from 'react';
2-
import { MigrationState } from '../../../../api/migration-tool/migrator/migration-state.data';
2+
import {
3+
MigrationState,
4+
IS_HAVING_ISSUES,
5+
} from '../../../../api/migration-tool/migrator/migration-state.data';
36
import { Carousel } from '../carousel/carousel.component';
47
import { Slide1 } from '../carousel/slides/Slide1.component';
58
import { Slide2 } from '../carousel/slides/Slide2.component';
69
import { Slide3 } from '../carousel/slides/Slide3.component';
710
import { AlmostThere } from '../almost-there/almost-there.component';
811
import { AllDone } from '../all-done/all-done.component';
912
import { NoWallet } from '../no-wallet/no-wallet.component';
10-
import { useColorModeValue, Flex } from '@chakra-ui/react';
13+
import { useColorModeValue, Flex, Link } from '@chakra-ui/react';
1114
import { useFeatureFlagsContext } from '../../../../features/feature-flags/provider';
1215
import { Events } from '../../../../features/analytics/events';
1316
import { useCaptureEvent } from '../../../../features/analytics/hooks';
1417
import { AnalyticsConsentModal } from '../../../../features/analytics/ui/AnalyticsConsentModal';
1518
import { useAnalyticsContext } from '../../../../features/analytics/provider';
19+
import { storage } from 'webextension-polyfill';
1620

1721
export const MigrationView = ({
1822
migrationState,
@@ -42,36 +46,42 @@ export const MigrationView = ({
4246
const dismissibleSeconds =
4347
featureFlags?.['is-migration-active']?.dismissInterval;
4448

49+
const hasShowIssuesButton =
50+
featureFlags?.['show-having-issues-button'] || false;
51+
52+
const handleHavingIssuesClick = () => {
53+
storage.local.set({ [IS_HAVING_ISSUES]: true });
54+
captureEvent(Events.NamiMigrationHavingIssuesClick);
55+
};
56+
4557
if (!hasWallet) {
4658
captureEvent(Events.MigrationViewNoWalletViewed);
4759
return (
48-
<><Flex
49-
h="100%"
50-
backgroundColor={panelBg}
51-
>
52-
<Flex
53-
pt="40px"
54-
pb="30px"
55-
px="40px"
56-
borderTopRadius='20px'
57-
backgroundColor={bgColor}
58-
mt='17px'
59-
flexDirection='column'
60-
h='calc(100% - 17px)'
61-
w="100%"
62-
>
63-
<NoWallet
64-
isLaceInstalled={isLaceInstalled}
65-
onAction={onNoWalletActionClick}
66-
isDismissable={isDismissable}
67-
dismissibleSeconds={dismissibleSeconds}
68-
/>
60+
<>
61+
<Flex h="100%" backgroundColor={panelBg}>
62+
<Flex
63+
pt="40px"
64+
pb="30px"
65+
px="40px"
66+
borderTopRadius="20px"
67+
backgroundColor={bgColor}
68+
mt="17px"
69+
flexDirection="column"
70+
h="calc(100% - 17px)"
71+
w="100%"
72+
>
73+
<NoWallet
74+
isLaceInstalled={isLaceInstalled}
75+
onAction={onNoWalletActionClick}
76+
isDismissable={isDismissable}
77+
dismissibleSeconds={dismissibleSeconds}
78+
/>
79+
</Flex>
6980
</Flex>
70-
</Flex>
71-
<AnalyticsConsentModal
72-
askForConsent={analytics.consent === undefined}
73-
setConsent={setAnalyticsConsent}
74-
/>
81+
<AnalyticsConsentModal
82+
askForConsent={analytics.consent === undefined}
83+
setConsent={setAnalyticsConsent}
84+
/>
7585
</>
7686
);
7787
}
@@ -81,19 +91,16 @@ export const MigrationView = ({
8191
case MigrationState.None:
8292
captureEvent(Events.MigrationNoStartedViewed);
8393
return (
84-
<Flex
85-
h="100%"
86-
backgroundColor={panelBg}
87-
>
94+
<Flex h="100%" backgroundColor={panelBg}>
8895
<Flex
8996
flexDirection={'column'}
9097
pt="40px"
9198
pb="30px"
9299
px="0px"
93-
borderTopRadius='20px'
100+
borderTopRadius="20px"
94101
backgroundColor={bgColor}
95-
mt='17px'
96-
h='calc(100% - 17px)'
102+
mt="17px"
103+
h="calc(100% - 17px)"
97104
w="100%"
98105
>
99106
<Carousel onSlideSwitched={onSlideSwitched}>
@@ -124,19 +131,16 @@ export const MigrationView = ({
124131
if (!isLaceInstalled) {
125132
onWaitingForLaceScreenViewed?.();
126133
return (
127-
<Flex
128-
h="100%"
129-
backgroundColor={panelBg}
130-
>
134+
<Flex h="100%" backgroundColor={panelBg}>
131135
<Flex
132136
pt="40px"
133137
pb="30px"
134138
px="40px"
135-
borderTopRadius='20px'
139+
borderTopRadius="20px"
136140
backgroundColor={bgColor}
137-
mt='17px'
138-
flexDirection='column'
139-
h='calc(100% - 17px)'
141+
mt="17px"
142+
flexDirection="column"
143+
h="calc(100% - 17px)"
140144
w="100%"
141145
>
142146
<AlmostThere
@@ -151,19 +155,16 @@ export const MigrationView = ({
151155
} else {
152156
onOpenLaceScreenViewed?.();
153157
return (
154-
<Flex
155-
h="100%"
156-
backgroundColor={panelBg}
157-
>
158+
<Flex h="100%" backgroundColor={panelBg}>
158159
<Flex
159160
pt="40px"
160161
pb="30px"
161162
px="40px"
162-
borderTopRadius='20px'
163+
borderTopRadius="20px"
163164
backgroundColor={bgColor}
164-
mt='17px'
165-
flexDirection='column'
166-
h='calc(100% - 17px)'
165+
mt="17px"
166+
flexDirection="column"
167+
h="calc(100% - 17px)"
167168
w="100%"
168169
>
169170
<AlmostThere
@@ -180,19 +181,16 @@ export const MigrationView = ({
180181
case MigrationState.Completed:
181182
onAllDoneScreenViewed?.();
182183
return (
183-
<Flex
184-
h="100%"
185-
backgroundColor={panelBg}
186-
>
184+
<Flex h="100%" backgroundColor={panelBg}>
187185
<Flex
188186
pt="40px"
189187
pb="30px"
190188
px="40px"
191-
borderTopRadius='20px'
189+
borderTopRadius="20px"
192190
backgroundColor={bgColor}
193-
mt='17px'
194-
flexDirection='column'
195-
h='calc(100% - 17px)'
191+
mt="17px"
192+
flexDirection="column"
193+
h="calc(100% - 17px)"
196194
w="100%"
197195
>
198196
<AllDone
@@ -201,6 +199,15 @@ export const MigrationView = ({
201199
isLaceInstalled ? onOpenLaceClicked : onDownloadLaceClicked
202200
}
203201
/>
202+
{hasShowIssuesButton && (
203+
<Link
204+
textAlign="center"
205+
marginTop={4}
206+
onClick={handleHavingIssuesClick}
207+
>
208+
Having issues? Click here to continue using Nami
209+
</Link>
210+
)}
204211
</Flex>
205212
</Flex>
206213
);

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

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
MIGRATION_KEY,
55
MigrationState,
66
DISMISS_MIGRATION_UNTIL,
7+
IS_HAVING_ISSUES,
78
} from '../../../api/migration-tool/migrator/migration-state.data';
89
import { MigrationView } from './migration-view/migration-view.component';
910
import {
@@ -30,13 +31,15 @@ export const AppWithMigration = () => {
3031
ui: 'loading',
3132
hasWallet: false,
3233
dismissedUntil: undefined,
34+
isHavingIssues: false,
3335
});
3436
const themeColor = localStorage['chakra-ui-color-mode'];
3537
const { featureFlags, isFFLoaded, earlyAccessFeatures } =
3638
useFeatureFlagsContext();
3739

3840
useEffect(() => {
3941
storage.local.get().then((store) => {
42+
console.log(store[IS_HAVING_ISSUES]);
4043
// Wait for Lace installation check before declaring UI to be ready
4144
checkLaceInstallation().then((laceInstalled) => {
4245
// Check if the wallet exists
@@ -48,6 +51,7 @@ export const AppWithMigration = () => {
4851
migrationState: store[MIGRATION_KEY] ?? MigrationState.None,
4952
hasWallet: typeof accounts !== 'undefined',
5053
dismissedUntil: store[DISMISS_MIGRATION_UNTIL] ?? undefined,
54+
isHavingIssues: store[IS_HAVING_ISSUES] ?? false,
5155
}));
5256
// Capture events for initial migration state when Nami is opened
5357
switch (store[MIGRATION_KEY]) {
@@ -75,6 +79,7 @@ export const AppWithMigration = () => {
7579
migrationState: changes[MIGRATION_KEY]?.newValue ?? s.migrationState,
7680
dismissedUntil:
7781
changes[DISMISS_MIGRATION_UNTIL]?.newValue ?? s.dismissedUntil,
82+
isHavingIssues: changes[IS_HAVING_ISSUES] ?? false,
7883
}));
7984
};
8085

@@ -97,7 +102,16 @@ export const AppWithMigration = () => {
97102
isBetaProgramIsActive &&
98103
featureFlags?.['is-migration-active'] !== undefined;
99104

100-
if (state.migrationState === MigrationState.Completed) {
105+
const hasShowIssuesButton =
106+
featureFlags?.['show-having-issues-button'] || false;
107+
108+
if (
109+
state.migrationState === MigrationState.Completed &&
110+
hasShowIssuesButton &&
111+
state.isHavingIssues
112+
) {
113+
showApp = true;
114+
} else if (state.migrationState === MigrationState.Completed) {
101115
showApp = false;
102116
} else if (isBetaProgramActiveAndUserEnrolled) {
103117
// Canary phase entry
@@ -137,30 +151,30 @@ export const AppWithMigration = () => {
137151
slideIndex: nextSlideIndex,
138152
});
139153
}}
140-
onUpgradeWalletClicked={async() => {
154+
onUpgradeWalletClicked={async () => {
141155
enableMigration();
142156
await captureEvent(Events.MigrationUpgradeYourWalletClicked);
143157
}}
144-
onWaitingForLaceScreenViewed={async() => {
145-
await captureEvent(Events.MigrationDownloadLaceScreenViewed);
158+
onWaitingForLaceScreenViewed={async () => {
159+
await captureEvent(Events.MigrationDownloadLaceScreenViewed);
146160
}}
147-
onOpenLaceScreenViewed={async() => {
161+
onOpenLaceScreenViewed={async () => {
148162
await captureEvent(Events.MigrationOpenLaceScreenViewed);
149163
}}
150-
onDownloadLaceClicked={async() => {
164+
onDownloadLaceClicked={async () => {
151165
await captureEvent(Events.MigrationDownloadLaceClicked);
152166
window.open(
153167
`https://chromewebstore.google.com/detail/lace/${secrets.LACE_EXTENSION_ID}`
154168
);
155169
}}
156-
onOpenLaceClicked={async() => {
157-
await captureEvent(Events.MigrationOpenLaceClicked);
170+
onOpenLaceClicked={async () => {
171+
await captureEvent(Events.MigrationOpenLaceClicked);
158172
openLace();
159173
}}
160-
onAllDoneScreenViewed={async() => {
174+
onAllDoneScreenViewed={async () => {
161175
await captureEvent(Events.MigrationAllDoneScreenViewed);
162176
}}
163-
onNoWalletActionClick={async() => {
177+
onNoWalletActionClick={async () => {
164178
if (state.isLaceInstalled) {
165179
await captureEvent(Events.MigrationOpenLaceClicked);
166180
openLace();

0 commit comments

Comments
 (0)