[LIVE-2006][LIVE-2007] Feature: EIP-1559 (#1662)

* default on EIP1559 transactions for Ethereum mainnet and Görli chains

* Modify bot testing to account for EIP1559

* Change UI for Ledger Live Desktop for supporting EIP1559

* Calculate correct estimates and other variables for EIP1559 in ledger-live-common

* Make new UI fee strategy selection changes for ethereum family currencies only

* Make gasLimit edit button smaller

* Add fee selection for EIP1559 in ledger live mobile

* Fix lint issues in ledger live mobile

* Ledger live desktop demo comments: make 'Gas limit' readonly in Standard mode, change 'Fees' label, remove fiat equivalent

* Ledger live mobile comment fixes: change 'Fee' label, add Tachometer icons, add 'Gas limit' indication in Send summary, increase Priority fee slider range, add warning message for Priority fee out of suggested bounds

* Return EXPLORER url to the default in env

* Fix nominal case test

* Commit changes to documentation README

* Doc changes: delete gas limit from basic mode, calculate the intended fee for standard speeds, change errors to warnings and add new warning messages, extend the range of EIP1559 tx sliders in mobile. PR comments: remove console.log, useMemo, don't cache values as local variables in components, remove Ethereum specific fields from general transaction types

* LLM: observe changes for maxBaseFee and maxPriorityFee when validating advanced fee options

* Make calculated values for different eth eip1559 tx speeds integer, regardless of the multiplication factor

* Change maxBaseFee modifier to x2 for all speeds, change MaxBaseFeeLow warning message to fit in one line

* Add eip1559 value translation from wallet connect to Ethereum transaction, as from https://docs.ethers.io/v5/api/providers/types/#providers-TransactionRequest

* Add polygon as a EIP1559 supported currency

* Address PR comments, use 'useTranslation' instead of 'withTranslation', useCallback, memoize SelectFeeStrategy for ethereum component

* Move ethereum tests to their own folder

* Add @types/invariant to LLD deps

* Update family files LLD generator to allow tsx files

* Update ETH gasLimit types and methods

* Move Ethereum bridge methods to their own files

* Change usage of maxBaseFee to maxFee in EIP1559 tx

* Update 1559 LLD strategy fees

* Add generic to useBridgeTransaction

* Update LLD UI for 1559 usage of maxFee & fix types

* Add experimental setting removing EIP1559 min gate

* Remove useless abstraction layer for gas estimation

* Rework getTransactionStatus for Eth

* Update doc

* Remove fee related keys in walletconnect test

* Update bridge & bridge transaction types

* Update LLM Ethereum fees UI for EIP1559 & Legacy

* Improve and fix typing of LLM ETH send flow

* changeset

* update pnpm-lock

* Update Tron's bridge type

* Update gasLimit condition on LLD Ethereum flow

Co-authored-by: Landry Monga <[email protected]>

* Update isEthereumAddress method

Co-authored-by: Landry Monga <[email protected]>

* Add constant to gasLimitField

* Memoize tachometers icons

* Add getDefaultFeeUnit helper for Eth familly

* Fix wrong feestrategy maxFee

Co-authored-by: kozaqui <[email protected]>
Co-authored-by: Landry Monga <[email protected]>

.changeset/clean-steaks-compare.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/cryptoassets": minor
+---
+
+Update Ethereum currency to london fork

.changeset/selfish-wombats-drop.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+EIP1559 support for Ethereum transactions

.changeset/sixty-needles-protect.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": minor
+---
+
+EIP1559 support for Ethereum transactions

.changeset/thick-birds-buy.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/errors": minor
+---
+
+Add EIP1559 related errors

.changeset/thick-dancers-wave.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/types-live": minor
+---
+
+Update FeeStrategy type for EIP1559 purposes

apps/ledger-live-desktop/package.json

@@ -171,6 +171,7 @@
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
     "@storybook/react": "^6.3.12",
+    "@types/invariant": "^2.2.35",
     "@types/jest": "^28.1.6",
     "@types/lodash": "^4.14.182",
     "@types/react": "^17.0.30",

apps/ledger-live-desktop/scripts/sync-families-dispatch.mjs

@@ -8,7 +8,7 @@ const generatedPath = path.join(rendererPath, "generated");
 
 await new Promise((resolve, reject) => {
   rimraf(generatedPath, e => {
-    if (!!e) {
+    if (e) {
       echo(chalk.red(e));
       return reject(e);
     }
@@ -38,15 +38,30 @@ async function genTarget(target) {
   let imports = `// @flow`;
   let exprts = `export default {`;
   const outpath = path.join(generatedPath, target);
+  const [targetName, extension] = target.split(".");
 
   for (const family of families) {
     try {
-      await fs.promises.access(
-        path.join(rendererPath, "families", family, target),
-        fs.constants.R_OK,
-      );
+      if (["jsx", "tsx"].includes(extension)) {
+        await Promise.any([
+          fs.promises.access(
+            path.join(rendererPath, "families", family, `${targetName}.jsx`),
+            fs.constants.R_OK,
+          ),
+          fs.promises.access(
+            path.join(rendererPath, "families", family, `${targetName}.tsx`),
+            fs.constants.R_OK,
+          ),
+        ]);
+      } else {
+        await fs.promises.access(
+          path.join(rendererPath, "families", family, target),
+          fs.constants.R_OK,
+        );
+      }
+
       imports += `
-import ${family} from "../families/${family}/${target}";`;
+import ${family} from "../families/${family}/${targetName}";`;
       exprts += `
   ${family},`;
     } catch (error) {}

apps/ledger-live-desktop/src/config/urls.js

@@ -112,6 +112,7 @@ export const urls = {
   whatIsARecoveryPhrase: "https://www.ledger.com/academy/crypto/what-is-a-recovery-phrase",
   feesMoreInfo:
     "https://support.ledger.com/hc/en-us/articles/360021039173-Choose-network-fees?docs=true",
+  feesEIP1559MoreInfo: "https://support.ledger.com/hc/en-us/articles/6018110754845?docs=true",
   recipientAddressInfo:
     "https://support.ledger.com/hc/en-us/articles/4404389453841-Receive-crypto-assets?docs=true",
   managerAppLearnMore: "https://support.ledger.com/hc/en-us/categories/4404376139409?docs=true",

apps/ledger-live-desktop/src/renderer/components/Box/Box.js

@@ -40,6 +40,7 @@ const Box: ThemedComponent<{
   justify?: "THIS PROPERTY IS NOT VALID – SWITCH TO justifyContent",
   fontWeight?: string | number,
   ff?: string,
+  gap?: string | number,
 }> = styled.div`
   ${alignItems};
   ${alignSelf};
@@ -64,6 +65,7 @@ const Box: ThemedComponent<{
   flex-shrink: ${p => (p.noShrink === true ? "0" : p.shrink === true ? "1" : "")};
   flex-grow: ${p => (p.grow === true ? "1" : p.grow || "")};
   flex-direction: ${p => (p.horizontal ? "row" : "column")};
+  gap: ${p => p.gap || "unset"};
 
   overflow: ${p => p.overflow};
   overflow-y: ${p => (p.scroll === true ? "auto" : "")};

apps/ledger-live-desktop/src/renderer/components/Box/Tabbable.jsx → apps/ledger-live-desktop/src/renderer/components/Box/Tabbable.tsx

@@ -1,8 +1,6 @@
-// @flow
-
-import React, { Component } from "react";
+import React, { Component, KeyboardEvent } from "react";
 import styled from "styled-components";
-import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
+import { ThemedComponent } from "~/renderer/styles/StyleProvider";
 import { isGlobalTabEnabled } from "~/config/global-tab";
 import { rgba } from "~/renderer/styles/helpers";
 
@@ -17,16 +15,22 @@ export const focusedShadowStyle = `
   0 0 0 4px rgba(10, 132, 255, 0.1)
 `;
 
-const Raw: ThemedComponent<{ isFocused?: boolean, unstyled?: boolean }> = styled(Box)`
+const Raw: ThemedComponent<{ isFocused?: boolean; unstyled?: boolean }> = styled(Box)`
   &:focus {
     outline: none;
     box-shadow: ${p => (p.isFocused && !p.unstyled ? focusedShadowStyle : "none")};
   }
 `;
 
 export default class Tabbable extends Component<
-  { disabled?: boolean, unstyled?: boolean, onClick?: any => void },
-  { isFocused: boolean },
+  {
+    disabled?: boolean;
+    unstyled?: boolean;
+    onClick?: (arg: any) => void;
+    selected?: boolean;
+    children?: JSX.Element;
+  },
+  { isFocused: boolean }
 > {
   state = {
     isFocused: false,
@@ -40,7 +44,7 @@ export default class Tabbable extends Component<
 
   handleBlur = () => this.setState({ isFocused: false });
 
-  handleKeyPress = (e: SyntheticKeyboardEvent<*>) => {
+  handleKeyPress = (e: KeyboardEvent) => {
     const { isFocused } = this.state;
     const { onClick } = this.props;
     const canPress =

apps/ledger-live-desktop/src/renderer/components/Button.jsx

@@ -260,7 +260,7 @@ const ChildrenWrapper = styled.div`
 export const Base: ThemedComponent<*> = styled.button.attrs(p => ({
   ff: "Inter|SemiBold",
   fontSize: p.fontSize || (!p.small ? 4 : 3),
-  px: !p.small ? 4 : 3,
+  px: p.px ? p.px : !p.small ? 4 : 3,
   py: !p.small ? 2 : 0,
   color: p.color || p.theme.colors.palette.text.shade60,
   bg: "transparent",

apps/ledger-live-desktop/src/renderer/drawers/Provider.jsx

@@ -26,9 +26,9 @@ const reducer = (state: State, update) => {
 };
 const initialState: State = { Component: null, props: null, open: false, options: {} };
 
-type ContextValue = { state: State, setDrawer: typeof setDrawer };
+export type ContextValue = { state: State, setDrawer: typeof setDrawer };
 
-export const context = React.createContext<ContextValue>({
+export const context: React.Context<ContextValue> = React.createContext<ContextValue>({
   state: initialState,
   setDrawer: () => {},
 });

apps/ledger-live-desktop/src/renderer/experimental.jsx

@@ -140,6 +140,24 @@ export const experimentalFeatures: Feature[] = [
     description: <Trans i18nKey="settings.experimental.features.forceProvider.description" />,
     minValue: 1,
   },
+  {
+    type: "toggle",
+    name: "EIP1559_MINIMUM_FEES_GATE",
+    title: <Trans i18nKey="settings.experimental.features.1559DeactivateGate.title" />,
+    description: <Trans i18nKey="settings.experimental.features.1559DeactivateGate.description" />,
+    valueOn: false,
+    valueOff: true,
+  },
+  {
+    type: "integer",
+    name: "EIP1559_PRIORITY_FEE_LOWER_GATE",
+    title: <Trans i18nKey="settings.experimental.features.1559CustomPriorityLowerGate.title" />,
+    description: (
+      <Trans i18nKey="settings.experimental.features.1559CustomPriorityLowerGate.description" />
+    ),
+    minValue: 0,
+    maxValue: 1,
+  },
 ];
 
 const lsKey = "experimentalFlags";

apps/ledger-live-desktop/src/renderer/families/ethereum/GasLimitField.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useState } from "react";
+import { Transaction, TransactionStatus } from "@ledgerhq/live-common/families/ethereum/types";
+import { getGasLimit } from "@ledgerhq/live-common/families/ethereum/transaction";
+import { Result } from "@ledgerhq/live-common/lib/bridge/useBridgeTransaction";
+import { getAccountBridge } from "@ledgerhq/live-common/bridge/index";
+import { useTranslation } from "react-i18next";
+import { Account } from "@ledgerhq/types-live";
+import { BigNumber } from "bignumber.js";
+import invariant from "invariant";
+import Box from "~/renderer/components/Box";
+import Input from "~/renderer/components/Input";
+import Label from "~/renderer/components/Label";
+import Button from "~/renderer/components/Button";
+
+type Props = {
+  transaction: Transaction;
+  account: Account;
+  status: TransactionStatus;
+  updateTransaction: Result["updateTransaction"];
+};
+
+const DEFAULT_GAS_LIMIT = new BigNumber(21000);
+
+const AdvancedOptions = ({ account, transaction, status, updateTransaction }: Props) => {
+  invariant(transaction.family === "ethereum", "AdvancedOptions: ethereum family expected");
+  const [editable, setEditable] = useState(false);
+  const { t } = useTranslation();
+
+  const onGasLimitChange = useCallback(
+    (str: string) => {
+      const bridge = getAccountBridge(account);
+      let userGasLimit = new BigNumber(str || 0);
+      if (!userGasLimit.isFinite()) {
+        userGasLimit = DEFAULT_GAS_LIMIT;
+      }
+      updateTransaction(transaction =>
+        bridge.updateTransaction(transaction, { userGasLimit, feesStrategy: "custom" }),
+      );
+    },
+    [account, updateTransaction],
+  );
+
+  const onEditClick = useCallback(() => setEditable(true), [setEditable]);
+
+  const gasLimit = getGasLimit(transaction);
+  const { gasLimit: gasLimitError } = status.errors;
+  const { gasLimit: gasLimitWarning } = status.warnings;
+
+  return (
+    <Box horizontal alignItems="center" flow={1}>
+      <Box>
+        <Label>
+          <span>{t("send.steps.details.ethereumGasLimit")}:</span>
+        </Label>
+      </Box>
+      {editable ? (
+        <Box flex="1">
+          <Input
+            ff="Inter"
+            warning={gasLimitWarning}
+            error={gasLimitError}
+            value={gasLimit.toString()}
+            onChange={onGasLimitChange}
+            loading={!transaction.networkInfo && !transaction.userGasLimit}
+          />
+        </Box>
+      ) : (
+        <Box horizontal justifyContent="left">
+          <Label color="p.theme.colors.palette.text.shade100">{gasLimit.toString()}</Label>
+          <Button onClick={onEditClick} ml={1} px={2}>
+            <Box horizontal alignItems="center">
+              {t("send.steps.details.edit")}
+            </Box>
+          </Button>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default AdvancedOptions;