LLD FAT-421 (#1352)

* Custom image LLD


custom image poc wip (import done, cropping wip)


Cropping & resizing logic


missing from previous commit


Grayscale processing logic + nft entrypoint


Image processing: correct ordering of pixels in raw data


Implement dithering algo (to avoid color banding)


Cleanup dithering implementation


Remove fixed size from ImageCropper


Fix window resizing issues by always using percentages for cropping


A horrible implementation of rotating the image to crop


A better cropping UI with rotations (todo: resizing)


Full rotate & crop & resize implemented


More performant implementation of image resizing


rename ImageCropper


Handle load errors in ImportImage (no file, wrong file type, unknown error)


Implement full flow ground work (state logic)


Smaller previews


Implement custom image in drawer


Proper layout of steps inside drawer


Implement design for "choose image" step


Improve layout of steps


Implement contrast buttons design


Image raw data verification


Rendering of errors


Handle common errors


img loading error


Fix bad error handling in ImportImage


wording


Move nft entry point to nft links dropdown


lint


fix post rebase


Properly handle download error


Add custom image entrypoint in manager


changesets


Revert useless changes


Fix layout in ImageCropper


Cleanup layout


Fix layout


Fix infinite loading when zoomed out/in to the maximum and trying to unzoom/zoom more


a lil bit more margin


Add retry button in error messages


Disable image draggable in preview step


change target dimensions


Add env variable FEATURE_FLAGS for overriding flags with env


Add feature flags parameter to playwright test fixtures


doc:ljs


Add possibility to choose mocked device model


Add playwright test for custom image tool


update screenshots (ubuntu-latest)

update screenshots (windows-latest)

update screenshots (macos-latest)

Implement thorough testing of the cropping UI (zoom, rotation, restoration of its state)


Fix import


update screenshots (ubuntu-latest)

update screenshots (windows-latest)

lint & documentation


Document rotationIncrements


lint


lint, comments


lint


lint


clarify errorHandlers


remove log


Improve image cropping function (passing ref as param + error handling)


Remove useless /custom-image route


Fix custom image test spec


Fix import of DeviceModelId


pnpm lock


fix test spec


Add null to JSONValue type


update screenshots (ubuntu-latest)

update screenshots (windows-latest)

fix CLS: import pictures, NFT drawers redirection and cropping (#1483)

* fix crop and fix import CLS

* fix NFT drawer redirection

* change naming

* Delete unnecessary changeset (merging into another PR)

* Remove useless extra callback

Co-authored-by: ofreyssinet-ledger <[email protected]>
Co-authored-by: Olivier Freyssinet <[email protected]>
fix custom image next button (#1563)

fix cls next button

Fix duplicated import (due to bad conflict resolution)


fix lockfile post rebase


Add DeviceActionDefaultRendering for easier custom rendering of device actions


Migrate LLD device action index to TS, replace react-redux connect by hooks


Add LLD custom image device action


Use DeviceActionDefaultRendering


Add mocked event emitter for custom image device action


Fix import missing after bad conflict resolution


Implement internal command ftsLoadImage for use in device action


Add h4Inter text variant to react-ui


Implement device action UI & callbacks logic


Add "valid device" logic (depending on device model id)


Implement success state design

* fix pnpm lockfile post rebase

* lint

* Add missing test ids, use FramedImage in contrast step

* Add device action test in test spec

* Remove old screenshots

* Add missing screenshot test

* remove legacy code

* Add navigation blocking logic in transfer step

* update screenshots (macos-latest)

* update screenshots (ubuntu-latest)

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (macos-latest)

* lint & typing

* Fix test flakyness

* remove screenshots

* update screenshots (ubuntu-latest)

* Limit manager page screenshot to only device storage card

* remove outdated screenshots

* Fix customImage: auto load only if no image loaded

* Fix broken test id in Card component

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (macos-latest)

* Add missing error wording

* Remove log

* Add cursor: pointer in ImportImage

* Remove unused code

* Remove background color in Button "shade" variant

* Fix layout issues on small window

* Fix missing test id

* update screenshots (ubuntu-latest)

* update screenshots (macos-latest)

* update screenshots (windows-latest)

* lint

* pull out waitFor e2e function in tests/utils

* fix bad naming

* More direct typing in apps/mock.ts

Co-authored-by: Team Live <[email protected]>

.changeset/eleven-dots-suffer.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/react-ui": patch
+---
+
+Remove background color in Button "shade" variant (following design)

.changeset/good-mails-knock.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/react-ui": patch
+---
+
+Add h4Inter text variant

.changeset/rude-shrimps-flow.md

@@ -0,0 +1,6 @@
+---
+"live-mobile": patch
+"@ledgerhq/live-common": patch
+---
+
+Moved custom image errors from ledger-live-mobile to live-common

.changeset/strong-lobsters-hide.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Add custom image tool entry points (feature flags) in NFTs and in My Ledger screen

apps/ledger-live-desktop/package.json

@@ -104,6 +104,7 @@
     "qs": "^6.10.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-easy-crop": "^4.5.0",
     "react-i18next": "^11.15.5",
     "react-intersection-observer": "^8.32.4",
     "react-is": "^17.0.2",

apps/ledger-live-desktop/src/helpers/nft.js

@@ -1,5 +1,5 @@
 // @flow
-import type { NFTMetadata, NFTMediaSizes } from "@ledgerhq/types-live";
+import type { NFTMetadata, NFTMediaSize, NFTMediaSizes } from "@ledgerhq/types-live";
 
 const mimeTypesMap = {
   video: ["video/mp4", "video/webm", "video/ogg"],
@@ -14,3 +14,9 @@ export const getMetadataMediaType = (
   const { mediaType } = metadata?.medias?.[mediaFormat] || {};
   return mimeTypesCategories.find(type => mimeTypesMap[type].includes(mediaType));
 };
+
+export const getMetadataMediaTypes = (metadata: NFTMetadata) => {
+  const sizes: Array<NFTMediaSize> = ["preview", "big", "original"];
+  const sizeToTypeMap = sizes.map(size => [size, getMetadataMediaType(metadata, size)]);
+  return Object.fromEntries(sizeToTypeMap);
+};

apps/ledger-live-desktop/src/internal/commands/ftsLoadImage.ts

@@ -0,0 +1,8 @@
+import { Observable, from } from "rxjs";
+import ftsLoadImage, {
+  LoadImageEvent,
+  LoadImageRequest,
+} from "@ledgerhq/live-common/hw/ftsLoadImage";
+const cmd = (input: LoadImageRequest): Observable<LoadImageEvent> => from(ftsLoadImage(input));
+
+export default cmd;

apps/ledger-live-desktop/src/internal/commands/index.js

@@ -27,6 +27,7 @@ import scanDescriptors from "./scanDescriptors";
 import installLanguage from "./installLanguage";
 import getAppAndVersion from "./getAppAndVersion";
 import getDeviceInfo from "./getDeviceInfo";
+import ftsLoadImage from "./ftsLoadImage";
 import { commands as bridgeProxyCommands } from "~/renderer/bridge/proxy-commands";
 
 export const commandsById = {
@@ -59,6 +60,7 @@ export const commandsById = {
   signMessage,
   getAppAndVersion,
   getDeviceInfo,
+  ftsLoadImage,
 };
 
 export type Commands = typeof commandsById;

apps/ledger-live-desktop/src/renderer/components/CustomImage/ContrastChoice.tsx

@@ -0,0 +1,66 @@
+import { Box, Flex, Icons } from "@ledgerhq/react-ui";
+import React from "react";
+import styled from "styled-components";
+
+type Props = {
+  color: string;
+  selected: boolean;
+  onClick: () => void;
+  index: number;
+};
+
+const Container = styled(Flex).attrs((p: { selected: boolean }) => ({
+  position: "relative",
+  height: 56,
+  width: 56,
+  justifyContent: "center",
+  alignItems: "center",
+  border: "solid",
+  borderWidth: p.selected ? 2 : 1,
+  borderColor: p.selected ? "primary.c80" : "neutral.c40",
+  borderRadius: "4px", // 2 does not work
+}))<{ selected: boolean }>``;
+
+const Round = styled(Box).attrs({
+  height: 28,
+  width: 28,
+  borderRadius: 28,
+})``;
+
+const PillBackground = styled(Box).attrs(p => ({
+  height: "20px",
+  width: "20px",
+  backgroundColor: p.theme.colors.v2Palette.background.paper,
+}))``;
+
+const PillForeground = styled(Icons.CircledCheckSolidMedium).attrs({
+  color: "primary.c80",
+  size: "20px",
+})``;
+
+const CheckContainer = styled(Box).attrs({
+  position: "absolute",
+  right: "-10px",
+  top: "-10px",
+})``;
+
+const CheckPill: React.FC<Record<string, never>> = () => (
+  <CheckContainer>
+    <PillBackground>
+      <PillForeground />
+    </PillBackground>
+  </CheckContainer>
+);
+
+const ContrastChoice: React.FC<Props> = ({ selected, color, onClick, index }) => (
+  <Container
+    selected={selected}
+    onClick={onClick}
+    data-test-id={`custom-image-contrast-option-${index}-button`}
+  >
+    <Round backgroundColor={color} />
+    {selected && <CheckPill />}
+  </Container>
+);
+
+export default ContrastChoice;

apps/ledger-live-desktop/src/renderer/components/CustomImage/CustomImageDeviceAction.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useCallback } from "react";
+import { Device } from "@ledgerhq/live-common/hw/actions/types";
+import { createAction } from "@ledgerhq/live-common/hw/actions/ftsLoadImage";
+import { ImageLoadRefusedOnDevice, ImageCommitRefusedOnDevice } from "@ledgerhq/live-common/errors";
+import withRemountableWrapper from "@ledgerhq/live-common/hoc/withRemountableWrapper";
+import { getEnv } from "@ledgerhq/live-common/env";
+import { useTranslation } from "react-i18next";
+import { Flex, Icons, Link } from "@ledgerhq/react-ui";
+import { DeviceActionDefaultRendering } from "../DeviceAction";
+import Button from "../ButtonV3";
+import {
+  renderError,
+  renderImageCommitRequested,
+  renderImageLoadRequested,
+  renderLoadingImage,
+} from "../DeviceAction/rendering";
+import { mockedEventEmitter } from "~/renderer/components/debug/DebugMock";
+import { command } from "~/renderer/commands";
+import { DeviceModelId } from "@ledgerhq/types-devices";
+
+type Props = {
+  device?: Device | null | undefined;
+  hexImage: string;
+  source: HTMLImageElement["src"];
+  onStart?: () => void;
+  onResult?: () => void;
+  onSkip?: () => void;
+  onTryAnotherImage: () => void;
+  blockNavigation?: (blocked: boolean) => void;
+};
+
+const errorNamesRetryAnotherImage = [
+  ImageLoadRefusedOnDevice().name,
+  ImageCommitRefusedOnDevice().name,
+];
+const ftsLoadImageExec = command("ftsLoadImage");
+const action = createAction(getEnv("MOCK") ? mockedEventEmitter : ftsLoadImageExec);
+const mockedDevice = { deviceId: "", modelId: DeviceModelId.nanoFTS, wired: true };
+
+const CustomImageDeviceAction: React.FC<Props> = withRemountableWrapper(props => {
+  const {
+    hexImage,
+    onStart,
+    onResult,
+    onSkip,
+    source,
+    remountMe,
+    onTryAnotherImage,
+    blockNavigation,
+  } = props;
+  const device = getEnv("MOCK") ? mockedDevice : props.device;
+  const commandRequest = hexImage;
+
+  const { t } = useTranslation();
+
+  const validDevice = device?.modelId === DeviceModelId.nanoFTS ? device : null;
+
+  const status = action?.useHook(validDevice, commandRequest);
+
+  const payload = action?.mapResult(status);
+
+  useEffect(() => {
+    if (onStart && validDevice) {
+      onStart();
+    }
+  }, [onStart, validDevice]);
+
+  const handleResult = useCallback(() => {
+    if (onResult && validDevice) {
+      onResult();
+    }
+  }, [onResult, validDevice]);
+
+  const { error, imageLoadRequested, loadingImage, imageCommitRequested, progress } = status;
+  const isError = !!error;
+  const isRefusedOnStaxError = error?.name && errorNamesRetryAnotherImage.includes(error?.name);
+
+  const shouldNavBeBlocked = !!validDevice && !isError;
+  useEffect(() => {
+    blockNavigation && blockNavigation(shouldNavBeBlocked);
+  }, [shouldNavBeBlocked, blockNavigation]);
+
+  const handleRetry = useCallback(() => {
+    if (isRefusedOnStaxError) onTryAnotherImage();
+    else remountMe();
+  }, [isRefusedOnStaxError, onTryAnotherImage, remountMe]);
+
+  return (
+    <Flex flexDirection="column" flex={1} justifyContent="center">
+      {imageLoadRequested && device ? (
+        renderImageLoadRequested({ t, device })
+      ) : loadingImage && device ? (
+        renderLoadingImage({ t, device, progress, src: source })
+      ) : imageCommitRequested && device ? (
+        renderImageCommitRequested({ t, device, src: source })
+      ) : isError ? (
+        <Flex flexDirection="column" alignItems="center">
+          {renderError({
+            error,
+            ...(isRefusedOnStaxError
+              ? { Icon: Icons.CircledAlertMedium, iconColor: "warning.c100" }
+              : {}),
+          })}
+          <Button size="large" variant="main" outline={false} onClick={handleRetry}>
+            {isRefusedOnStaxError
+              ? t("customImage.steps.transfer.uploadAnotherImage")
+              : t("common.retry")}
+          </Button>
+          {isRefusedOnStaxError ? (
+            <Flex py={7}>
+              <Link onClick={onSkip}>{t("customImage.steps.transfer.doThisLater")}</Link>
+            </Flex>
+          ) : null}
+        </Flex>
+      ) : (
+        <DeviceActionDefaultRendering
+          overridesPreferredDeviceModel={DeviceModelId.nanoFTS}
+          status={status}
+          request={commandRequest}
+          payload={payload}
+          onResult={handleResult}
+        />
+      )}
+    </Flex>
+  );
+});
+
+export default CustomImageDeviceAction;

apps/ledger-live-desktop/src/renderer/components/CustomImage/FramedImage.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { Flex, Box, Text } from "@ledgerhq/react-ui";
+import styled, { useTheme } from "styled-components";
+import { scaleDimensions } from "./imageUtils";
+import { targetDimensions } from "./shared";
+import StyleProviderV3 from "~/renderer/styles/StyleProviderV3";
+import { ImageDimensions } from "./types";
+
+type Props = Partial<React.ComponentProps<"img">> & {
+  /** source of the image inside */
+  src?: string | undefined;
+  /** source of the background image */
+  backgroundSrc?: string | undefined;
+  /** text to display in the background placeholder */
+  backgroundPlaceholderText?: string;
+  /** float between 0 and 1 */
+  loadingProgress?: number;
+  children?: React.ReactNode | undefined;
+  dimensions?: ImageDimensions;
+};
+
+const absoluteFillObject = {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+};
+
+const defaultImageDimensions = scaleDimensions(targetDimensions, 0.4);
+
+const px = 3;
+const py = 3;
+
+const Container = styled(Box).attrs({
+  position: "relative",
+  px,
+  py,
+})``;
+
+const AbsoluteBackgroundContainer = styled(Flex).attrs({
+  ...absoluteFillObject,
+  backgroundColor: "lightgreen",
+})``;
+
+const BackgroundPlaceholder = styled(Flex).attrs({
+  ...absoluteFillObject,
+  backgroundColor: "#494949",
+  px,
+  py,
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+})``;
+
+const AbsoluteInnerImageContainer = styled(Flex).attrs({
+  ...absoluteFillObject,
+  mx: px,
+  my: py,
+  overflow: "hidden",
+})``;
+
+const FramedImage: React.FC<Props> = ({
+  src,
+  backgroundSrc,
+  backgroundPlaceholderText,
+  loadingProgress = 1,
+  children,
+  dimensions = defaultImageDimensions,
+  ...imageProps
+}) => {
+  const { space } = useTheme();
+  return (
+    <StyleProviderV3 selectedPalette="light">
+      <Container>
+        <AbsoluteBackgroundContainer>
+          {backgroundSrc ? (
+            <img
+              src={backgroundSrc}
+              style={{
+                height: dimensions.height + 2 * space[3],
+                width: dimensions.width + 2 * space[3],
+              }}
+            />
+          ) : (
+            <BackgroundPlaceholder>
+              <Text color="neutral.c00" textAlign="center">
+                {backgroundPlaceholderText || "illustrationPlaceholder"}
+              </Text>
+            </BackgroundPlaceholder>
+          )}
+        </AbsoluteBackgroundContainer>
+        <AbsoluteInnerImageContainer style={{ height: loadingProgress * dimensions.height }}>
+          {src ? (
+            <img
+              {...imageProps}
+              src={src}
+              style={{ ...(imageProps.style || {}), ...dimensions, pointerEvents: "none" }}
+            />
+          ) : null}
+        </AbsoluteInnerImageContainer>
+        <Flex style={dimensions}>{children}</Flex>
+      </Container>
+    </StyleProviderV3>
+  );
+};
+
+export default FramedImage;