Skip to content

Commit 891291d

Browse files
n3psn3ps
committed
confirmation handler
1 parent a196d7f commit 891291d

File tree

3 files changed

+264
-117
lines changed

3 files changed

+264
-117
lines changed

‎ui/pages/home/home.component.js‎

Lines changed: 117 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ import {
5252
RESTORE_VAULT_ROUTE,
5353
CONNECTED_ROUTE,
5454
CONNECTED_ACCOUNTS_ROUTE,
55-
AWAITING_SWAP_ROUTE,
56-
PREPARE_SWAP_ROUTE,
57-
CROSS_CHAIN_SWAP_ROUTE,
55+
// AWAITING_SWAP_ROUTE,
56+
// PREPARE_SWAP_ROUTE,
57+
// CROSS_CHAIN_SWAP_ROUTE,
5858
ONBOARDING_REVIEW_SRP_ROUTE,
5959
} from '../../helpers/constants/routes';
6060
import ZENDESK_URLS from '../../helpers/constants/zendesk-url';
@@ -66,7 +66,7 @@ import {
6666
} from '../../../shared/lib/ui-utils';
6767
import { AccountOverview } from '../../components/multichain';
6868
import { setEditedNetwork } from '../../store/actions';
69-
import { getConfirmationRoute } from '../confirmations/hooks/useConfirmationNavigation';
69+
// import { getConfirmationRoute } from '../confirmations/hooks/useConfirmationNavigation';
7070
import PasswordOutdatedModal from '../../components/app/password-outdated-modal';
7171
import ShieldEntryModal from '../../components/app/shield-entry-modal';
7272
///: BEGIN:ONLY_INCLUDE_IF(build-beta)
@@ -116,7 +116,7 @@ export default class Home extends PureComponent {
116116
showUpdateModal: PropTypes.bool.isRequired,
117117
newNetworkAddedConfigurationId: PropTypes.string,
118118
isNotification: PropTypes.bool.isRequired,
119-
isSidepanel: PropTypes.bool.isRequired,
119+
// isSidepanel: PropTypes.bool.isRequired,
120120
// This prop is used in the `shouldCloseNotificationPopup` function
121121
// eslint-disable-next-line react/no-unused-prop-types
122122
totalUnapprovedCount: PropTypes.number.isRequired,
@@ -159,7 +159,7 @@ export default class Home extends PureComponent {
159159
clearNewNetworkAdded: PropTypes.func,
160160
clearEditedNetwork: PropTypes.func,
161161
setActiveNetwork: PropTypes.func,
162-
hasAllowedPopupRedirectApprovals: PropTypes.bool.isRequired,
162+
// hasAllowedPopupRedirectApprovals: PropTypes.bool.isRequired,
163163
useExternalServices: PropTypes.bool,
164164
setBasicFunctionalityModalOpen: PropTypes.func,
165165
fetchBuyableChains: PropTypes.func.isRequired,
@@ -181,83 +181,87 @@ export default class Home extends PureComponent {
181181
state = {
182182
canShowBlockageNotification: true,
183183
notificationClosing: false,
184-
redirecting: false,
184+
// redirecting: false, // REMOVED: ConfirmationHandler now handles navigation
185185
};
186186

187187
constructor(props) {
188188
super(props);
189189

190-
const {
191-
attemptCloseNotificationPopup,
192-
haveSwapsQuotes,
193-
haveBridgeQuotes,
194-
isNotification,
195-
pendingApprovals,
196-
showAwaitingSwapScreen,
197-
swapsFetchParams,
198-
location,
199-
navState,
200-
} = this.props;
201-
// Read stayOnHomePage from both v5 location.state and v5-compat navState
202-
const stayOnHomePage =
203-
Boolean(location?.state?.stayOnHomePage) ||
204-
Boolean(navState?.stayOnHomePage);
190+
// REMOVED: Navigation logic moved to ConfirmationHandler
191+
// const {
192+
// attemptCloseNotificationPopup,
193+
// haveSwapsQuotes,
194+
// haveBridgeQuotes,
195+
// isNotification,
196+
// pendingApprovals,
197+
// showAwaitingSwapScreen,
198+
// swapsFetchParams,
199+
// location,
200+
// navState,
201+
// } = this.props;
202+
// const stayOnHomePage =
203+
// Boolean(location?.state?.stayOnHomePage) ||
204+
// Boolean(navState?.stayOnHomePage);
205205

206206
if (shouldCloseNotificationPopup(props)) {
207207
this.state.notificationClosing = true;
208-
attemptCloseNotificationPopup();
209-
} else if (
210-
pendingApprovals.length ||
211-
(!isNotification &&
212-
!stayOnHomePage &&
213-
(showAwaitingSwapScreen ||
214-
haveSwapsQuotes ||
215-
swapsFetchParams ||
216-
haveBridgeQuotes))
217-
) {
218-
this.state.redirecting = true;
208+
props.attemptCloseNotificationPopup();
219209
}
220-
}
221-
222-
checkStatusAndNavigate() {
223-
const {
224-
history,
225-
isNotification,
226-
haveSwapsQuotes,
227-
haveBridgeQuotes,
228-
showAwaitingSwapScreen,
229-
swapsFetchParams,
230-
location,
231-
pendingApprovals,
232-
hasApprovalFlows,
233-
navState,
234-
} = this.props;
235-
// Read stayOnHomePage from both v5 location.state and v5-compat navState
236-
const stayOnHomePage =
237-
Boolean(location?.state?.stayOnHomePage) ||
238-
Boolean(navState?.stayOnHomePage);
239210

240-
const canRedirect = !isNotification && !stayOnHomePage;
241-
if (canRedirect && showAwaitingSwapScreen) {
242-
history.push(AWAITING_SWAP_ROUTE);
243-
} else if (canRedirect && (haveSwapsQuotes || swapsFetchParams)) {
244-
history.push(PREPARE_SWAP_ROUTE);
245-
} else if (canRedirect && haveBridgeQuotes) {
246-
history.push(CROSS_CHAIN_SWAP_ROUTE + PREPARE_SWAP_ROUTE);
247-
} else if (pendingApprovals.length || hasApprovalFlows) {
248-
const url = getConfirmationRoute(
249-
pendingApprovals?.[0]?.id,
250-
pendingApprovals,
251-
hasApprovalFlows,
252-
'', // queryString
253-
);
254-
255-
if (url) {
256-
history.replace(url);
257-
}
258-
}
211+
// REMOVED: Navigation logic moved to ConfirmationHandler
212+
// } else if (
213+
// pendingApprovals.length ||
214+
// (!isNotification &&
215+
// !stayOnHomePage &&
216+
// (showAwaitingSwapScreen ||
217+
// haveSwapsQuotes ||
218+
// swapsFetchParams ||
219+
// haveBridgeQuotes))
220+
// ) {
221+
// this.state.redirecting = true;
222+
// }
259223
}
260224

225+
// MOVED TO ConfirmationHandler - this logic now runs globally
226+
// checkStatusAndNavigate() {
227+
// const {
228+
// history,
229+
// isNotification,
230+
// haveSwapsQuotes,
231+
// haveBridgeQuotes,
232+
// showAwaitingSwapScreen,
233+
// swapsFetchParams,
234+
// location,
235+
// pendingApprovals,
236+
// hasApprovalFlows,
237+
// navState,
238+
// } = this.props;
239+
// // Read stayOnHomePage from both v5 location.state and v5-compat navState
240+
// const stayOnHomePage =
241+
// Boolean(location?.state?.stayOnHomePage) ||
242+
// Boolean(navState?.stayOnHomePage);
243+
244+
// const canRedirect = !isNotification && !stayOnHomePage;
245+
// if (canRedirect && showAwaitingSwapScreen) {
246+
// history.push(AWAITING_SWAP_ROUTE);
247+
// } else if (canRedirect && (haveSwapsQuotes || swapsFetchParams)) {
248+
// history.push(PREPARE_SWAP_ROUTE);
249+
// } else if (canRedirect && haveBridgeQuotes) {
250+
// history.push(CROSS_CHAIN_SWAP_ROUTE + PREPARE_SWAP_ROUTE);
251+
// } else if (pendingApprovals.length || hasApprovalFlows) {
252+
// const url = getConfirmationRoute(
253+
// pendingApprovals?.[0]?.id,
254+
// pendingApprovals,
255+
// hasApprovalFlows,
256+
// '', // queryString
257+
// );
258+
259+
// if (url) {
260+
// history.replace(url);
261+
// }
262+
// }
263+
// }
264+
261265
checkRedirectAfterDefaultPage() {
262266
const {
263267
redirectAfterDefaultPage,
@@ -281,7 +285,7 @@ export default class Home extends PureComponent {
281285
}
282286

283287
componentDidMount() {
284-
this.checkStatusAndNavigate();
288+
// this.checkStatusAndNavigate();
285289

286290
this.props.fetchBuyableChains();
287291

@@ -307,12 +311,12 @@ export default class Home extends PureComponent {
307311
componentDidUpdate(_prevProps, prevState) {
308312
const {
309313
attemptCloseNotificationPopup,
310-
isNotification,
311-
hasAllowedPopupRedirectApprovals,
314+
// isNotification,
315+
// hasAllowedPopupRedirectApprovals,
312316
newNetworkAddedConfigurationId,
313317
setActiveNetwork,
314318
clearNewNetworkAdded,
315-
isSidepanel,
319+
// isSidepanel,
316320
pendingShieldCohort,
317321
evaluateCohortEligibility,
318322
setPendingShieldCohort,
@@ -334,13 +338,14 @@ export default class Home extends PureComponent {
334338

335339
if (notificationClosing && !prevState.notificationClosing) {
336340
attemptCloseNotificationPopup();
337-
} else if (
338-
isNotification ||
339-
hasAllowedPopupRedirectApprovals ||
340-
isSidepanel
341-
) {
342-
this.checkStatusAndNavigate();
343341
}
342+
// else if (
343+
// isNotification ||
344+
// hasAllowedPopupRedirectApprovals ||
345+
// isSidepanel
346+
// ) {
347+
// this.checkStatusAndNavigate();
348+
// }
344349

345350
// Check for pending Shield cohort evaluation if user is signed in
346351
if (pendingShieldCohort && evaluateCohortEligibility && isSignedIn) {
@@ -872,9 +877,39 @@ export default class Home extends PureComponent {
872877
isSocialLoginFlow,
873878
} = this.props;
874879

880+
const {
881+
pendingApprovals,
882+
hasApprovalFlows,
883+
haveSwapsQuotes,
884+
swapsFetchParams,
885+
haveBridgeQuotes,
886+
showAwaitingSwapScreen,
887+
isNotification,
888+
location,
889+
navState,
890+
} = this.props;
891+
892+
// Read stayOnHomePage from both v5 location.state and v5-compat navState
893+
const stayOnHomePage =
894+
Boolean(location?.state?.stayOnHomePage) ||
895+
Boolean(navState?.stayOnHomePage);
896+
897+
// Don't render Home content when there are pending approvals/swaps
898+
// to prevent crashes from incomplete state
899+
// ConfirmationHandler will handle the navigation
900+
const shouldNotRenderContent =
901+
pendingApprovals.length ||
902+
hasApprovalFlows ||
903+
(!isNotification &&
904+
!stayOnHomePage &&
905+
(showAwaitingSwapScreen ||
906+
haveSwapsQuotes ||
907+
swapsFetchParams ||
908+
haveBridgeQuotes));
909+
875910
if (forgottenPassword) {
876911
return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />;
877-
} else if (this.state.notificationClosing || this.state.redirecting) {
912+
} else if (this.state.notificationClosing || shouldNotRenderContent) {
878913
return null;
879914
}
880915

‎ui/pages/routes/confirmation-handler.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { useEffect, useMemo } from 'react';
2+
import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
3+
import { useSelector } from 'react-redux';
4+
import { isEqual } from 'lodash';
5+
6+
import {
7+
AWAITING_SWAP_ROUTE,
8+
PREPARE_SWAP_ROUTE,
9+
CROSS_CHAIN_SWAP_ROUTE,
10+
DEFAULT_ROUTE,
11+
} from '../../helpers/constants/routes';
12+
import { getConfirmationRoute } from '../confirmations/hooks/useConfirmationNavigation';
13+
// eslint-disable-next-line import/no-restricted-paths
14+
import { getEnvironmentType } from '../../../app/scripts/lib/util';
15+
import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
16+
import {
17+
getApprovalFlows,
18+
selectPendingApprovalsForNavigation,
19+
} from '../../selectors';
20+
import {
21+
getBackgroundSwapRouteState,
22+
getFetchParams,
23+
getQuotes,
24+
} from '../../ducks/swaps/swaps';
25+
import { useNavState } from '../../contexts/navigation-state';
26+
27+
export const ConfirmationHandler = () => {
28+
const navigate = useNavigate();
29+
const location = useLocation();
30+
const navState = useNavState();
31+
32+
const envType = getEnvironmentType();
33+
// const isPopup = envType === ENVIRONMENT_TYPE_POPUP;
34+
const isNotification = envType === ENVIRONMENT_TYPE_NOTIFICATION;
35+
// const isSidepanel = envType === ENVIRONMENT_TYPE_SIDEPANEL;
36+
37+
const swapsRouteState = useSelector(getBackgroundSwapRouteState);
38+
const swapsQuotes = useSelector(getQuotes, isEqual);
39+
const bridgeQuotes = useSelector(
40+
(state: { metamask: { quotes?: Record<string, unknown> } }) =>
41+
state.metamask.quotes,
42+
isEqual,
43+
);
44+
const showAwaitingSwapScreen = swapsRouteState === 'awaiting';
45+
const haveSwapsQuotes = useMemo(
46+
() => Boolean(Object.values(swapsQuotes || {}).length),
47+
[swapsQuotes],
48+
);
49+
50+
// const swapsFetchParams = swapsState.fetchParams;
51+
const swapsFetchParams = useSelector(getFetchParams);
52+
const haveBridgeQuotes = useMemo(
53+
() => Boolean(Object.values(bridgeQuotes || {}).length),
54+
[bridgeQuotes],
55+
);
56+
57+
// const pendingApprovals = selectPendingApprovalsForNavigation(state);
58+
const pendingApprovals = useSelector(selectPendingApprovalsForNavigation);
59+
const approvalFlows = useSelector(getApprovalFlows);
60+
const hasApprovalFlows = approvalFlows?.length > 0;
61+
62+
// Read stayOnHomePage from both v5 location.state and v5-compat navState
63+
const stayOnHomePage = useMemo(
64+
() =>
65+
Boolean(location.state?.stayOnHomePage) ||
66+
Boolean(navState?.stayOnHomePage),
67+
[location.state, navState],
68+
);
69+
const canRedirect = !isNotification && !stayOnHomePage;
70+
71+
// Ported from home.component - componentDidMount/componentDidUpdate
72+
useEffect(() => {
73+
// Only run when on home/default page (for now)
74+
if (location.pathname !== DEFAULT_ROUTE) {
75+
return;
76+
}
77+
78+
if (canRedirect && showAwaitingSwapScreen) {
79+
navigate(AWAITING_SWAP_ROUTE);
80+
} else if (canRedirect && (haveSwapsQuotes || swapsFetchParams)) {
81+
navigate(PREPARE_SWAP_ROUTE);
82+
} else if (canRedirect && haveBridgeQuotes) {
83+
navigate(CROSS_CHAIN_SWAP_ROUTE + PREPARE_SWAP_ROUTE);
84+
} else if (pendingApprovals.length || hasApprovalFlows) {
85+
const url = getConfirmationRoute(
86+
pendingApprovals?.[0]?.id,
87+
pendingApprovals,
88+
hasApprovalFlows,
89+
'', // queryString
90+
);
91+
92+
if (url) {
93+
navigate(url, { replace: true });
94+
}
95+
}
96+
}, [
97+
location.pathname,
98+
canRedirect,
99+
showAwaitingSwapScreen,
100+
haveSwapsQuotes,
101+
swapsFetchParams,
102+
haveBridgeQuotes,
103+
pendingApprovals,
104+
hasApprovalFlows,
105+
navigate,
106+
]);
107+
108+
return null;
109+
};

0 commit comments

Comments
 (0)