-
Notifications
You must be signed in to change notification settings - Fork 295
/
index.tsx
118 lines (107 loc) · 4.41 KB
/
index.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import React, { useMemo } from "react";
import semver from "semver";
import { RouteComponentProps, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import { RampCatalog } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/types";
import Card from "~/renderer/components/Box/Card";
import { languageSelector } from "~/renderer/reducers/settings";
import { accountsSelector } from "~/renderer/reducers/accounts";
import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
import useTheme from "~/renderer/hooks/useTheme";
import WebPTXPlayer from "~/renderer/components/WebPTXPlayer";
import { getParentAccount, isTokenAccount } from "@ledgerhq/live-common/account/index";
import { LiveAppManifest, Loadable } from "@ledgerhq/live-common/platform/types";
import { accountToWalletAPIAccount } from "@ledgerhq/live-common/wallet-api/converters";
import {
DEFAULT_MULTIBUY_APP_ID,
INTERNAL_APP_IDS,
WALLET_API_VERSION,
} from "@ledgerhq/live-common/wallet-api/constants";
import { useInternalAppIds } from "@ledgerhq/live-common/hooks/useInternalAppIds";
import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
import { useLocalLiveAppManifest } from "@ledgerhq/live-common/wallet-api/LocalLiveAppProvider/index";
import { walletSelector } from "~/renderer/reducers/wallet";
export type DProps = {
defaultCurrencyId?: string | null;
defaultAccountId?: string | null;
defaultTicker?: string | null;
rampCatalog: Loadable<RampCatalog>;
};
type ExchangeState = { account?: string } | undefined;
const LiveAppExchange = ({ appId }: { appId: string }) => {
const { state: urlParams, search } = useLocation<ExchangeState>();
const searchParams = new URLSearchParams(search);
const locale = useSelector(languageSelector);
const accounts = useSelector(accountsSelector);
const mockManifest: LiveAppManifest | undefined =
process.env.MOCK_REMOTE_LIVE_MANIFEST && JSON.parse(process.env.MOCK_REMOTE_LIVE_MANIFEST)[0];
const localManifest = useLocalLiveAppManifest(appId);
const remoteManifest = useRemoteLiveAppManifest(appId);
const manifest = localManifest || mockManifest || remoteManifest;
const themeType = useTheme().colors.palette.type;
const internalAppIds = useInternalAppIds() || INTERNAL_APP_IDS;
const walletState = useSelector(walletSelector);
/**
* Pass correct account ID
* Due to Platform SDK account ID not being equivalent to Wallet API account ID
*/
const customUrlParams = useMemo(() => {
if (
urlParams?.account &&
manifest?.apiVersion &&
semver.satisfies(WALLET_API_VERSION, manifest.apiVersion)
) {
const { account: accountId } = urlParams;
const account = accounts.find(a => a.id === accountId);
if (account) {
const parentAccount = isTokenAccount(account)
? getParentAccount(account, accounts)
: undefined;
urlParams.account = accountToWalletAPIAccount(walletState, account, parentAccount).id;
}
}
return urlParams;
}, [accounts, manifest?.apiVersion, urlParams, walletState]);
/**
* Given the user is on an internal app (webview url is owned by LL) we must reset the session
* to ensure the context is reset. last-screen is used to give an external app's webview context
* of the last screen the user was on before navigating to the external app screen.
*/
if (manifest?.id && internalAppIds.includes(manifest.id)) {
const { localStorage } = window;
localStorage.removeItem("last-screen");
localStorage.removeItem("manifest-id");
localStorage.removeItem("flow-name");
}
return (
<Card
grow
style={{
overflow: "hidden",
height: "100%",
}}
>
{manifest ? (
<WebPTXPlayer
manifest={manifest}
inputs={{
theme: themeType,
...customUrlParams,
lang: locale,
...Object.fromEntries(searchParams.entries()),
}}
/>
) : null}
</Card>
);
};
export type ExchangeComponentParams = {
appId?: string;
};
const Exchange = ({ match }: RouteComponentProps<ExchangeComponentParams>) => {
const appId = match?.params?.appId;
const buySellUiFlag = useFeature("buySellUi");
const defaultPlatform = buySellUiFlag?.params?.manifestId || DEFAULT_MULTIBUY_APP_ID;
return <LiveAppExchange appId={appId || defaultPlatform} />;
};
export default Exchange;