Merge dbc9705 into 9670d2e

.changeset/two-dancers-brush.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Change back button to edit fees in platform modal

apps/ledger-live-desktop/src/renderer/components/Modal/ModalBody.jsx

@@ -20,6 +20,7 @@ type Props = {
   renderProps?: RenderProps,
   noScroll?: boolean,
   refocusWhenChange?: any,
+  backButtonComponent?: React$Node,
 };
 
 class ModalBody extends PureComponent<Props> {
@@ -35,6 +36,7 @@ class ModalBody extends PureComponent<Props> {
   render() {
     const {
       onBack,
+      backButtonComponent,
       onClose,
       title,
       subTitle,
@@ -50,7 +52,13 @@ class ModalBody extends PureComponent<Props> {
     const renderedFooter = renderFooter && renderFooter(renderProps);
     return (
       <>
-        <ModalHeader subTitle={subTitle} onBack={onBack} onClose={onClose} style={headerStyle}>
+        <ModalHeader
+          subTitle={subTitle}
+          onBack={onBack}
+          onClose={onClose}
+          style={headerStyle}
+          backButtonComponent={backButtonComponent}
+        >
           {title || null}
         </ModalHeader>
         <ModalContent ref={this._content} noScroll={noScroll}>

apps/ledger-live-desktop/src/renderer/components/Modal/ModalHeader.jsx

@@ -98,6 +98,7 @@ const ModalHeader = ({
   children,
   subTitle,
   onBack,
+  backButtonComponent,
   onClose,
   style = {},
 }: {
@@ -106,16 +107,21 @@ const ModalHeader = ({
   onBack?: void => void,
   onClose?: void => void,
   style?: *,
+  backButtonComponent?: React$Node,
 }) => {
   const { t } = useTranslation();
   return (
     <Container hasTitle={Boolean(children || subTitle)} style={style}>
       {onBack ? (
         <ModalHeaderAction onClick={onBack} data-test-id="modal-back-button">
           <IconAngleLeft size={12} />
-          <Text ff="Inter|Medium" fontSize={4} color="palette.text.shade40">
-            {t("common.back")}
-          </Text>
+          {backButtonComponent ? (
+            backButtonComponent
+          ) : (
+            <Text ff="Inter|Medium" fontSize={4} color="palette.text.shade40">
+              {t("common.back")}
+            </Text>
+          )}
         </ModalHeaderAction>
       ) : (
         <div />

apps/ledger-live-desktop/src/renderer/components/Stepper/index.jsx

@@ -20,6 +20,7 @@ export type Step<T, StepProps> = {
   component: React$ComponentType<StepProps>,
   footer?: React$ComponentType<StepProps>,
   onBack?: ?(StepProps) => void,
+  backButtonComponent?: React$Node,
   noScroll?: boolean,
 };
 
@@ -82,7 +83,7 @@ const Stepper = <T, StepProps>({
 
   invariant(step, "Stepper: step %s doesn't exists", stepId);
 
-  const { component: StepComponent, footer: StepFooter, onBack, noScroll } = step;
+  const { component: StepComponent, footer: StepFooter, onBack, noScroll, backButtonComponent } = step;
 
   // $FlowFixMe we'll need to improve this. also ...props is bad practice...
   const stepProps: StepProps = {
@@ -97,6 +98,7 @@ const Stepper = <T, StepProps>({
       refocusWhenChange={stepId}
       onClose={hideCloseButton || deviceBlocked ? undefined : onClose}
       onBack={onBack && !deviceBlocked ? () => onBack(stepProps) : undefined}
+      backButtonComponent={backButtonComponent}
       title={title}
       noScroll={noScroll}
       render={() => (

apps/ledger-live-desktop/src/renderer/modals/SignTransaction/Body.jsx

@@ -21,6 +21,7 @@ import StepConfirmation, { StepConfirmationFooter } from "./steps/StepConfirmati
 import type { St, StepId } from "./types";
 import { getAccountBridge } from "@ledgerhq/live-common/bridge/index";
 import logger from "~/logger/logger";
+import Text from "~/renderer/components/Text";
 
 type Props = {|
   stepId: StepId,
@@ -52,6 +53,13 @@ function useSteps(canEditFees = false): St[] {
         component: StepSummary,
         footer: StepSummaryFooter,
         onBack: canEditFees ? ({ transitionTo }) => transitionTo("amount") : null,
+        backButtonComponent: canEditFees ? (
+          <Text ff="Inter|Bold" fontSize={4} color="palette.primary.main">
+            {t("common.adjustFees")}
+          </Text>
+        ) : (
+          undefined
+        ),
       },
       {
         id: "device",

apps/ledger-live-desktop/static/i18n/en/app.json

@@ -85,6 +85,7 @@
     "lock": "Lock",
     "showMore": "Show more",
     "back": "Back",
+    "adjustFees": "Adjust fees",
     "reset": "Reset",
     "retry": "Retry",
     "range": "Range",