Merge remote-tracking branch 'ledgerhq/develop' into HEAD

package.json

@@ -10,7 +10,7 @@
   "license": "MIT",
   "private": true,
   "main": "./.webpack/main.bundle.js",
-  "version": "2.39.2",
+  "version": "2.40.2",
   "scripts": {
     "start:prod": "electron ./.webpack/main.bundle.js",
     "start": "cross-env NODE_ENV=development node ./tools/main.js",

src/live-common-set-supported-currencies.js

@@ -18,6 +18,7 @@ setSupportedCurrencies([
   "dogecoin",
   "cosmos",
   "crypto_org",
+  "celo",
   "dash",
   "tron",
   "tezos",

src/renderer/Default.js

@@ -61,6 +61,8 @@ import MarketCoinScreen from "~/renderer/screens/market/MarketCoinScreen";
 // $FlowFixMe
 import Learn from "~/renderer/screens/learn";
 
+import { useProviders } from "~/renderer/screens/exchange/Swap2/Form";
+
 export const TopBannerContainer: ThemedComponent<{}> = styled.div`
   position: sticky;
   top: 0;
@@ -120,6 +122,8 @@ export default function Default() {
   useDeeplink();
   useUSBTroubleshooting();
 
+  useProviders(); // prefetch data from swap providers here
+
   // every time location changes, scroll back up
   useEffect(() => {
     if (ref && ref.current) {

src/renderer/components/BalanceInfos/index.js

@@ -1,5 +1,5 @@
 // @flow
-import React from "react";
+import React, { useCallback } from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import type { Unit, AccountLike } from "@ledgerhq/live-common/lib/types";
@@ -10,6 +10,11 @@ import PillsDaysCount from "~/renderer/components/PillsDaysCount";
 import TransactionsPendingConfirmationWarning from "~/renderer/components/TransactionsPendingConfirmationWarning";
 import { PlaceholderLine } from "./Placeholder";
 
+// $FlowFixMe
+import Button from "~/renderer/components/Button.ui.tsx";
+import { setTrackingSource } from "~/renderer/analytics/TrackPage";
+import { useHistory } from "react-router-dom";
+
 type BalanceSinceProps = {
   valueChange: ValueChange,
   totalBalance: number,
@@ -101,6 +106,22 @@ export function BalanceTotal({
 
 export default function BalanceInfos({ totalBalance, valueChange, isAvailable, unit }: Props) {
   const { t } = useTranslation();
+  const history = useHistory();
+
+  const onBuy = useCallback(() => {
+    setTrackingSource("Page Portfolio");
+    history.push({
+      pathname: "/exchange",
+    });
+  }, [history]);
+
+  const onSwap = useCallback(() => {
+    setTrackingSource("Page Market");
+
+    history.push({
+      pathname: "/swap",
+    });
+  }, [history]);
 
   return (
     <Box flow={5}>
@@ -113,6 +134,13 @@ export default function BalanceInfos({ totalBalance, valueChange, isAvailable, u
         >
           <Sub>{t("dashboard.totalBalance")}</Sub>
         </BalanceTotal>
+        <Button data-test-id="portfolio-buy-button" variant="color" mr={1} onClick={onBuy}>
+          {t("accounts.contextMenu.buy")}
+        </Button>
+
+        <Button data-test-id="portfolio-swap-button" variant="color" onClick={onSwap}>
+          {t("accounts.contextMenu.swap")}
+        </Button>
       </Box>
       <Box horizontal alignItems="center" justifyContent="space-between">
         <BalanceDiff

src/renderer/components/Button.ui.tsx

@@ -0,0 +1,55 @@
+// @flow
+import React from "react";
+import { Button as BaseButton, InvertTheme } from "@ledgerhq/react-ui";
+import { ButtonProps as BaseButtonProps } from "@ledgerhq/react-ui/components/cta/Button";
+import { track } from "~/renderer/analytics/segment";
+import styled from "styled-components";
+
+export const Base = styled(BaseButton)<{ big?: boolean }>`
+  border-radius: 44px;
+
+  font-size: 12px;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 24px;
+
+  ${p =>
+    p.variant === "shade"
+      ? `background-color: transparent!important;border-color: currentColor;`
+      : ``}
+`;
+
+export type Props = BaseButtonProps & {
+  inverted?: boolean;
+  disabled?: boolean;
+  isLoading?: boolean;
+  event?: string;
+  eventProperties?: Record<string, unknown>;
+};
+
+export default function Button({
+  onClick,
+  inverted,
+  disabled,
+  children,
+  isLoading,
+  event,
+  eventProperties,
+  ...rest
+}: Props) {
+  const isClickDisabled = disabled || isLoading;
+  const onClickHandler = (e: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+    if (onClick) {
+      if (event) {
+        track(event, eventProperties || {});
+      }
+      onClick(e);
+    }
+  };
+  const inner = (
+    <Base {...rest} onClick={isClickDisabled ? undefined : onClickHandler}>
+      {children}
+    </Base>
+  );
+  return inverted ? <InvertTheme>{inner} </InvertTheme> : inner;
+}

src/renderer/components/DeviceAction/animations.js

@@ -30,6 +30,10 @@ const nanoS = {
     light: require("~/renderer/animations/nanoS/2FirmwareUpdating/light.json"),
     dark: require("~/renderer/animations/nanoS/2FirmwareUpdating/dark.json"),
   },
+  installLoading: {
+    light: require("~/renderer/animations/nanoS/8InstallLoading/light.json"),
+    dark: require("~/renderer/animations/nanoS/8InstallLoading/dark.json"),
+  },
 };
 const nanoX = {
   plugAndPinCode: {
@@ -60,6 +64,10 @@ const nanoX = {
     light: require("~/renderer/animations/nanoX/2FirmwareUpdating/light.json"),
     dark: require("~/renderer/animations/nanoX/2FirmwareUpdating/dark.json"),
   },
+  installLoading: {
+    light: require("~/renderer/animations/nanoX/8InstallLoading/light.json"),
+    dark: require("~/renderer/animations/nanoX/8InstallLoading/dark.json"),
+  },
 };
 
 const nanoSP = {
@@ -91,6 +99,10 @@ const nanoSP = {
     light: require("~/renderer/animations/nanoSP/2FirmwareUpdating/light.json"),
     dark: require("~/renderer/animations/nanoSP/2FirmwareUpdating/dark.json"),
   },
+  installLoading: {
+    light: require("~/renderer/animations/nanoSP/8InstallLoading/light.json"),
+    dark: require("~/renderer/animations/nanoSP/8InstallLoading/dark.json"),
+  },
 };
 
 const blue = {
@@ -117,6 +129,10 @@ const blue = {
     light: require("~/renderer/animations/nanoS/2FirmwareUpdating/light.json"),
     dark: require("~/renderer/animations/nanoS/2FirmwareUpdating/dark.json"),
   },
+  installLoading: {
+    light: require("~/renderer/animations/nanoS/8InstallLoading/light.json"),
+    dark: require("~/renderer/animations/nanoS/8InstallLoading/dark.json"),
+  },
 };
 
 const animations = { nanoX, nanoS, nanoSP, blue };

src/renderer/components/DeviceAction/index.js

@@ -157,7 +157,7 @@ const DeviceAction = <R, H, P>({
 
   if (installingApp) {
     const appName = requestOpenApp;
-    const props = { appName, progress, request, analyticsPropertyFlow };
+    const props = { type, modelId, appName, progress, request, analyticsPropertyFlow };
     return <InstallingApp {...props} />;
   }
 

src/renderer/components/DeviceAction/rendering.js

@@ -56,8 +56,7 @@ import { relaunchOnboarding } from "~/renderer/actions/onboarding";
 export const AnimationWrapper: ThemedComponent<{ modelId?: DeviceModelId }> = styled.div`
   width: 600px;
   max-width: 100%;
-  height: ${p => (p.modelId === "blue" ? 300 : 200)}px;
-  padding-bottom: ${p => (p.modelId === "blue" ? 20 : 0)}px;
+  padding-bottom: 20px;
   align-self: center;
   display: flex;
   align-items: center;
@@ -283,18 +282,23 @@ export const renderRequiresAppInstallation = ({ appNames }: { appNames: string[]
 };
 
 export const InstallingApp = ({
+  modelId,
+  type,
   appName,
   progress,
   request,
   analyticsPropertyFlow = "unknown",
 }: {
+  modelId: DeviceModelId,
+  type: "light" | "dark",
   appName: string,
   progress: number,
   request: any,
   analyticsPropertyFlow?: string,
 }) => {
   const currency = request?.currency || request?.account?.currency;
   const appNameToTrack = appName || request?.appName || currency?.managerAppName;
+  const cleanProgress = progress ? Math.round(progress * 100) : null;
   useEffect(() => {
     const trackingArgs = [
       "In-line app install",
@@ -305,22 +309,17 @@ export const InstallingApp = ({
   return (
     <Wrapper id="deviceAction-loading">
       <Header />
-      <ProgressWrapper>
-        {progress ? (
-          <ProgressCircle size={58} progress={progress} />
-        ) : (
-          <Rotating size={58}>
-            <ProgressCircle hideProgress size={58} progress={0.06} />
-          </Rotating>
-        )}
-      </ProgressWrapper>
+      <AnimationWrapper modelId={modelId}>
+        <Animation animation={getDeviceAnimation(modelId, type, "installLoading")} />
+      </AnimationWrapper>
       <Footer>
         <Title>
           <Trans i18nKey="DeviceAction.installApp" values={{ appName }} />
         </Title>
         <SubTitle>
           <Trans i18nKey="DeviceAction.installAppDescription" />
         </SubTitle>
+        {cleanProgress ? <Title>{`${cleanProgress}%`}</Title> : null}
       </Footer>
     </Wrapper>
   );

src/renderer/components/FirebaseRemoteConfig.tsx

@@ -3,15 +3,15 @@ import { initializeApp } from "firebase/app";
 import { getRemoteConfig, fetchAndActivate, RemoteConfig } from "firebase/remote-config";
 import { defaultFeatures } from "@ledgerhq/live-common/lib/featureFlags";
 import { DefaultFeatures } from "@ledgerhq/live-common/lib/types";
-import { reduce } from "lodash";
+import { reduce, snakeCase } from "lodash";
 
 import { getFirebaseConfig } from "~/firebase-setup";
 
 export const FirebaseRemoteConfigContext = React.createContext<RemoteConfig | null>(null);
 
 export const useFirebaseRemoteConfig = () => useContext(FirebaseRemoteConfigContext);
 
-export const formatFeatureId = (id: string) => `feature_${id}`;
+export const formatFeatureId = (id: string) => `feature_${snakeCase(id)}`;
 
 // Firebase SDK treat JSON values as strings
 const formatDefaultFeatures = (config: DefaultFeatures) =>