Various multibuy 1.5 fixes

src/renderer/components/MainSideBar/index.js

@@ -6,7 +6,7 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { Transition } from "react-transition-group";
 import styled from "styled-components";
 import { useManagerBlueDot } from "@ledgerhq/live-common/lib/manager/hooks";
-import { usePlatformApp } from "@ledgerhq/live-common/lib/platform/PlatformAppProvider";
+import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/lib/platform/providers/RemoteLiveAppProvider";
 import { FeatureToggle } from "@ledgerhq/live-common/lib/featureFlags";
 import { Icons } from "@ledgerhq/react-ui";
 
@@ -208,8 +208,8 @@ const MainSideBar = () => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
-  const { manifests } = usePlatformApp();
-  const isCardDisabled = !manifests.has(CARD_APP_ID);
+  const manifest = useRemoteLiveAppManifest(CARD_APP_ID);
+  const isCardDisabled = !manifest;
 
   /** redux navigation locked state */
   const navigationLocked = useSelector(isNavigationLocked);

src/renderer/components/PerCurrencySelectAccount/state.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
 import type { Account, SubAccount } from "@ledgerhq/live-common/lib/types/account";
 import { makeEmptyTokenAccount } from "@ledgerhq/live-common/lib/account";
 import type { CryptoCurrency, TokenCurrency } from "@ledgerhq/live-common/lib/types/currencies";
@@ -133,6 +133,18 @@ export function useCurrencyAccountSelect({
     );
   }, [availableAccounts, accountId]);
 
+  useEffect(() => {
+    if (!accountId && availableAccounts.length > 0) {
+      setState(currState => ({
+        ...currState,
+        accountId: availableAccounts[0].account.id,
+        subAccountId: availableAccounts[0].subAccount ? availableAccounts[0].subAccount.id : null,
+      }));
+    }
+  }, [availableAccounts, accountId]);
+
+  console.log({ availableAccounts, account, currency, subAccount });
+
   return {
     availableAccounts,
     currency,

src/renderer/components/PlatformAppProviderWrapper.js

@@ -1,9 +1,7 @@
 // @flow
-import React, { useMemo } from "react";
-import { PlatformAppProvider } from "@ledgerhq/live-common/lib/platform/PlatformAppProvider";
+import React from "react";
 import { catalogProviderSelector } from "~/renderer/reducers/settings";
 import { useSelector } from "react-redux";
-import { providers } from "@ledgerhq/live-common/lib/platform/PlatformAppProvider/providers";
 import { RemoteLiveAppProvider } from "@ledgerhq/live-common/lib/platform/providers/RemoteLiveAppProvider";
 import { LocalLiveAppProvider } from "@ledgerhq/live-common/lib/platform/providers/LocalLiveAppProvider";
 import { GlobalCatalogProvider } from "@ledgerhq/live-common/lib/platform/providers/GlobalCatalogProvider";
@@ -18,18 +16,12 @@ const AUTO_UPDATE_DEFAULT_DELAY = 1800 * 1000; // 1800 seconds
 export function PlatformAppProviderWrapper({ children }: Props) {
   const provider = useSelector(catalogProviderSelector);
 
-  const platformAppsServer = useMemo(() => {
-    return providers.find(p => p.value === provider) || providers[0];
-  }, [provider]);
-
   return (
     <RemoteLiveAppProvider provider={provider} updateFrequency={AUTO_UPDATE_DEFAULT_DELAY}>
       <LocalLiveAppProvider>
         <GlobalCatalogProvider provider={provider} updateFrequency={AUTO_UPDATE_DEFAULT_DELAY}>
           <RampCatalogProvider provider={provider} updateFrequency={AUTO_UPDATE_DEFAULT_DELAY}>
-            <PlatformAppProvider platformAppsServerURL={platformAppsServer.url}>
-              {children}
-            </PlatformAppProvider>
+            {children}
           </RampCatalogProvider>
         </GlobalCatalogProvider>
       </LocalLiveAppProvider>

src/renderer/screens/account/EmptyStateAccount.js

@@ -1,10 +1,9 @@
 // @flow
 
-import React, { PureComponent } from "react";
+import React, { useMemo } from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { withTranslation, Trans } from "react-i18next";
-
 import { openModal } from "~/renderer/actions/modals";
 import type { TFunction } from "react-i18next";
 import type { Account, AccountLike } from "@ledgerhq/live-common/lib/types";
@@ -21,12 +20,14 @@ import darkEmptyStateAccount from "~/renderer/images/dark-empty-state-account.sv
 import Text from "~/renderer/components/Text";
 import Button from "~/renderer/components/Button";
 import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
+import { getAllSupportedCryptoCurrencyIds } from "@ledgerhq/live-common/lib/platform/providers/RampCatalogProvider/helpers";
 import styled from "styled-components";
 import { withRouter } from "react-router-dom";
-import { isCurrencySupported } from "~/renderer/screens/exchange/config";
 import { getAccountCurrency } from "@ledgerhq/live-common/lib/account/helpers";
 import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 
+import { useRampCatalog } from "@ledgerhq/live-common/lib/platform/providers/RampCatalogProvider";
+
 const mapDispatchToProps = {
   openModal,
 };
@@ -42,93 +43,116 @@ type Props = OwnProps & {
   openModal: Function,
 };
 
-class EmptyStateAccount extends PureComponent<Props, *> {
-  render() {
-    const { t, account, parentAccount, openModal, history } = this.props;
-    const mainAccount = getMainAccount(account, parentAccount);
-    if (!mainAccount) return null;
-    const availableOnExchange = isCurrencySupported("BUY", getAccountCurrency(account));
-
-    const hasTokens =
-      mainAccount.subAccounts &&
-      mainAccount.subAccounts.length &&
-      mainAccount.subAccounts[0].type === "TokenAccount";
-
-    return (
-      <Box mt={10} alignItems="center" selectable>
-        <Image
-          alt="emptyState Account logo"
-          resource={{
-            light: lightEmptyStateAccount,
-            dark: darkEmptyStateAccount,
-          }}
-          width="400"
-          themeTyped
-        />
-        <Box mt={5} alignItems="center">
-          <Title>{t("account.emptyState.title")}</Title>
-          <Description mt={3} style={{ display: "block" }}>
-            {hasTokens ? (
-              <Trans i18nKey="account.emptyState.descToken">
-                {"Make sure the"}
-                <Text ff="Inter|SemiBold" color="palette.text.shade100">
-                  {mainAccount.currency.managerAppName}
-                </Text>
-                {"app is installed and start receiving"}
-                <Text ff="Inter|SemiBold" color="palette.text.shade100">
-                  {mainAccount.currency.ticker}
-                </Text>
-                {"and"}
-                <Text ff="Inter|SemiBold" color="palette.text.shade100">
-                  {account &&
-                    account.currency &&
-                    // $FlowFixMe
-                    listTokenTypesForCryptoCurrency(account.currency).join(", ")}
-                  {"tokens"}
-                </Text>
-              </Trans>
-            ) : (
-              <Trans i18nKey="account.emptyState.desc">
-                {"Make sure the"}
-                <Text ff="Inter|SemiBold" color="palette.text.shade100">
-                  {mainAccount.currency.managerAppName}
-                </Text>
-                {"app is installed and start receiving"}
-              </Trans>
-            )}
-          </Description>
-          <Box horizontal>
-            {availableOnExchange ? (
-              <Button
-                mt={5}
-                mr={2}
-                primary
-                onClick={() => {
-                  setTrackingSource("empty state account");
-                  history.push({ pathname: "/exchange" });
-                }}
-              >
-                <Box horizontal flow={1} alignItems="center">
-                  <IconExchange size={12} />
-                  <Box>{t("account.emptyState.buttons.buy")}</Box>
-                </Box>
-              </Button>
-            ) : null}
+function EmptyStateAccount({ t, account, parentAccount, openModal, history }: Props) {
+  const mainAccount = getMainAccount(account, parentAccount);
+
+  const currency = getAccountCurrency(account);
+  const rampCatalog = useRampCatalog();
+
+  // eslint-disable-next-line no-unused-vars
+  const [availableOnBuy, availableOnSell] = useMemo(() => {
+    if (!rampCatalog.value) {
+      return [false, false];
+    }
+
+    const allBuyableCryptoCurrencyIds = getAllSupportedCryptoCurrencyIds(rampCatalog.value.onRamp);
+    const allSellableCryptoCurrencyIds = getAllSupportedCryptoCurrencyIds(
+      rampCatalog.value.offRamp,
+    );
+    return [
+      allBuyableCryptoCurrencyIds.includes(currency.id),
+      allSellableCryptoCurrencyIds.includes(currency.id),
+    ];
+  }, [rampCatalog.value, currency.id]);
+
+  const hasTokens =
+    mainAccount.subAccounts &&
+    mainAccount.subAccounts.length &&
+    mainAccount.subAccounts[0].type === "TokenAccount";
+
+  if (!mainAccount) return null;
+
+  return (
+    <Box mt={10} alignItems="center" selectable>
+      <Image
+        alt="emptyState Account logo"
+        resource={{
+          light: lightEmptyStateAccount,
+          dark: darkEmptyStateAccount,
+        }}
+        width="400"
+        themeTyped
+      />
+      <Box mt={5} alignItems="center">
+        <Title>{t("account.emptyState.title")}</Title>
+        <Description mt={3} style={{ display: "block" }}>
+          {hasTokens ? (
+            <Trans i18nKey="account.emptyState.descToken">
+              {"Make sure the"}
+              <Text ff="Inter|SemiBold" color="palette.text.shade100">
+                {mainAccount.currency.managerAppName}
+              </Text>
+              {"app is installed and start receiving"}
+              <Text ff="Inter|SemiBold" color="palette.text.shade100">
+                {mainAccount.currency.ticker}
+              </Text>
+              {"and"}
+              <Text ff="Inter|SemiBold" color="palette.text.shade100">
+                {account &&
+                  account.currency &&
+                  // $FlowFixMe
+                  listTokenTypesForCryptoCurrency(account.currency).join(", ")}
+                {"tokens"}
+              </Text>
+            </Trans>
+          ) : (
+            <Trans i18nKey="account.emptyState.desc">
+              {"Make sure the"}
+              <Text ff="Inter|SemiBold" color="palette.text.shade100">
+                {mainAccount.currency.managerAppName}
+              </Text>
+              {"app is installed and start receiving"}
+            </Trans>
+          )}
+        </Description>
+        <Box horizontal>
+          {availableOnBuy ? (
             <Button
               mt={5}
+              mr={2}
               primary
-              onClick={() => openModal("MODAL_RECEIVE", { account, parentAccount })}
+              onClick={() => {
+                setTrackingSource("empty state account");
+                history.push({
+                  pathname: "/exchange",
+                  state: {
+                    mode: "onRamp",
+                    currencyId: currency.id,
+                    accountId: mainAccount.id,
+                  },
+                });
+              }}
             >
               <Box horizontal flow={1} alignItems="center">
-                <IconReceive size={12} />
-                <Box>{t("account.emptyState.buttons.receiveFunds")}</Box>
+                <IconExchange size={12} />
+                <Box>{t("account.emptyState.buttons.buy")}</Box>
               </Box>
             </Button>
-          </Box>
+          ) : null}
+          <Button
+            mt={5}
+            primary
+            onClick={() => openModal("MODAL_RECEIVE", { account, parentAccount })}
+          >
+            <Box horizontal flow={1} alignItems="center">
+              <IconReceive size={12} />
+              <Box>{t("account.emptyState.buttons.receiveFunds")}</Box>
+            </Box>
+          </Button>
         </Box>
       </Box>
-    );
-  }
+    </Box>
+  );
 }
 
 const Title: ThemedComponent<{}> = styled(Box).attrs(() => ({

src/renderer/screens/card/index.js

@@ -1,8 +1,8 @@
 // @flow
 import React from "react";
 import { useLocation } from "react-router-dom";
-import { usePlatformApp } from "@ledgerhq/live-common/lib/platform/PlatformAppProvider";
 import useTheme from "~/renderer/hooks/useTheme";
+import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/lib/platform/providers/RemoteLiveAppProvider";
 
 import { Card } from "~/renderer/components/Box";
 import WebPlatformPlayer from "~/renderer/components/WebPlatformPlayer";
@@ -16,8 +16,7 @@ export const CARD_APP_ID = "cl-card";
 
 export default function CardPlatformApp() {
   const { state: urlParams } = useLocation();
-  const { manifests } = usePlatformApp();
-  const manifest = manifests.get(CARD_APP_ID);
+  const manifest = useRemoteLiveAppManifest(CARD_APP_ID);
 
   const themeType = useTheme("colors.palette.type");
 

src/renderer/screens/platform/Catalog.js

@@ -11,7 +11,6 @@ import {
   dismissedBannersSelector,
 } from "~/renderer/reducers/settings";
 
-import { usePlatformApp } from "@ledgerhq/live-common/lib/platform/PlatformAppProvider";
 import { filterPlatformApps } from "@ledgerhq/live-common/lib/platform/PlatformAppProvider/helpers";
 
 import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
@@ -24,6 +23,7 @@ import { openPlatformAppDisclaimerDrawer } from "~/renderer/actions/UI";
 import AppCard from "~/renderer/components/Platform/AppCard";
 import CatalogBanner from "./CatalogBanner";
 import TwitterBanner from "./TwitterBanner";
+import { useRemoteLiveAppContext } from "@ledgerhq/live-common/lib/platform/providers/RemoteLiveAppProvider";
 
 const DAPP_DISCLAIMER_ID = "PlatformAppDisclaimer";
 
@@ -58,7 +58,8 @@ const PlatformCatalog = () => {
   const dispatch = useDispatch();
   const history = useHistory();
 
-  const { manifests } = usePlatformApp();
+  const { state } = useRemoteLiveAppContext();
+  const manifests = useMemo(() => (state.value ? state.value.liveAppByIndex : []), [state.value]);
   const allowDebugApps = useSelector(allowDebugAppsSelector);
   const allowExperimentalApps = useSelector(allowExperimentalAppsSelector);