-
Notifications
You must be signed in to change notification settings - Fork 295
/
Player.tsx
95 lines (84 loc) · 3.3 KB
/
Player.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { useCallback, useEffect, useMemo } from "react";
import { useSelector } from "react-redux";
import { RouteComponentProps, useHistory } from "react-router-dom";
import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
import { useOnboardingStatePolling } from "@ledgerhq/live-common/onboarding/hooks/useOnboardingStatePolling";
import { OnboardingStep } from "@ledgerhq/live-common/hw/extractOnboardingState";
import { counterValueCurrencySelector, languageSelector } from "~/renderer/reducers/settings";
import WebRecoverPlayer from "~/renderer/components/WebRecoverPlayer";
import useTheme from "~/renderer/hooks/useTheme";
import { getCurrentDevice } from "~/renderer/reducers/devices";
import styled from "styled-components";
import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
import { StaticContext } from "react-router";
import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
const pollingPeriodMs = 1000;
export type RecoverComponentParams = {
appId: string;
};
export type RecoverState = {
fromOnboarding?: boolean;
deviceId?: string;
};
const FullscreenWrapper = styled.div`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 20;
background-color: ${p => p.theme.colors.palette.background.default};
`;
export default function RecoverPlayer({
match,
location,
}: RouteComponentProps<RecoverComponentParams, StaticContext, RecoverState | undefined>) {
const { params } = match;
const { search, state } = location;
const queryParams = useMemo(() => Object.fromEntries(new URLSearchParams(search)), [search]);
const locale = useSelector(languageSelector);
const currencySettings = useSelector(counterValueCurrencySelector);
const localManifest = useLocalLiveAppManifest(params.appId);
const remoteManifest = useRemoteLiveAppManifest(params.appId);
const manifest = localManifest || remoteManifest;
const theme = useTheme().colors.palette.type;
const history = useHistory();
const onClose = useCallback(() => history.goBack(), [history]);
const recoverConfig = useFeature("protectServicesDesktop");
const availableOnDesktop = recoverConfig?.enabled && recoverConfig?.params?.availableOnDesktop;
const currency = currencySettings.ticker;
const device = useSelector(getCurrentDevice);
const { onboardingState } = useOnboardingStatePolling({
device: device || null,
pollingPeriodMs,
// stop polling if not coming from the onboarding
stopPolling: !(state?.fromOnboarding || queryParams.fromOnboarding),
});
useEffect(() => {
if (
onboardingState &&
onboardingState.currentOnboardingStep !== OnboardingStep.RecoverRestore
) {
onClose();
}
}, [onClose, onboardingState]);
const inputs = useMemo(
() => ({
theme,
lang: locale,
availableOnDesktop,
deviceId: state?.deviceId,
currency,
...params,
...queryParams,
}),
[availableOnDesktop, locale, params, queryParams, state?.deviceId, currency, theme],
);
return manifest ? (
<FullscreenWrapper>
<WebRecoverPlayer manifest={manifest} inputs={inputs} onClose={onClose} />
</FullscreenWrapper>
) : null; // TODO: display an error component instead of `null`
}