Merge pull request #5792 from LedgerHQ/feat/LIVE-9660/LLDParentAccoun…

…tError feat(LLD/send): New gas fees parent account error
LedgerHQ · Jan 11, 2024 · 3f99891 · 3f99891
2 parents ac89e80 + 4cfdd57
commit 3f99891
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 35 deletions.
diff --git a/.changeset/rude-moose-bathe.md b/.changeset/rude-moose-bathe.md
@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"@ledgerhq/coin-evm": patch
+---
+
+Parent Account Error on gas fees LLD
diff --git a/apps/ledger-live-desktop/src/renderer/components/SelectFeeStrategy.tsx b/apps/ledger-live-desktop/src/renderer/components/SelectFeeStrategy.tsx
@@ -12,6 +12,7 @@ import CounterValue from "~/renderer/components/CounterValue";
 import { getFeesCurrency, getFeesUnit, getMainAccount } from "@ledgerhq/live-common/account/index";
 import { Account, FeeStrategy } from "@ledgerhq/types-live";
 import { Transaction } from "@ledgerhq/live-common/generated/types";
+import { TransactionStatus } from "@ledgerhq/live-common/generated/types";
 
 export type OnClickType = {
   amount: BigNumber;
@@ -28,16 +29,21 @@ type Props = {
     [x: string]: unknown;
   };
   suffixPerByte?: boolean;
+  status: TransactionStatus;
 };
 
-const FeesWrapper = styled(Box)<{ selected?: boolean; disabled?: boolean }>`
+const FeesWrapper = styled(Box)<{ selected?: boolean; disabled?: boolean; error: boolean }>`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 
   border: ${p =>
     `1px solid ${
-      p.selected ? p.theme.colors.palette.primary.main : p.theme.colors.palette.divider
+      p.selected
+        ? p.error
+          ? p.theme.colors.palette.warning.c70
+          : p.theme.colors.palette.primary.main
+        : p.theme.colors.palette.divider
     }`};
   ${p => (p.selected ? "box-shadow: 0px 0px 0px 4px rgba(138, 128, 219, 0.3);" : "")}
   padding: 20px 16px;
@@ -50,10 +56,12 @@ const FeesWrapper = styled(Box)<{ selected?: boolean; disabled?: boolean }>`
     cursor: ${p => (p.disabled ? "unset" : "pointer")};
   }
 `;
-const FeesHeader = styled(Box)<{ selected?: boolean; disabled?: boolean }>`
+const FeesHeader = styled(Box)<{ selected?: boolean; disabled?: boolean; error: boolean }>`
   color: ${p =>
     p.selected
-      ? p.theme.colors.palette.primary.main
+      ? p.error
+        ? p.theme.colors.palette.warning.c70
+        : p.theme.colors.palette.primary.main
       : p.disabled
       ? p.theme.colors.palette.text.shade20
       : p.theme.colors.palette.text.shade50};
@@ -70,12 +78,17 @@ const SelectFeeStrategy = ({
   strategies,
   mapStrategies,
   suffixPerByte,
+  status,
 }: Props) => {
   const mainAccount = getMainAccount(account, parentAccount);
   const feesCurrency = getFeesCurrency(mainAccount);
   const feesUnit = getFeesUnit(feesCurrency);
   const { t } = useTranslation();
   strategies = mapStrategies ? strategies.map(mapStrategies) : strategies;
+
+  const { errors } = status;
+  const { gasPrice: messageGas } = errors;
+
   return (
     <Box alignItems="center" flow={2}>
       {strategies.map(s => {
@@ -87,6 +100,7 @@ const SelectFeeStrategy = ({
             key={s.label}
             selected={selected}
             disabled={disabled}
+            error={!!messageGas}
             onClick={() => {
               !disabled &&
                 onClick({
@@ -95,7 +109,13 @@ const SelectFeeStrategy = ({
                 });
             }}
           >
-            <FeesHeader horizontal alignItems="center" selected={selected} disabled={disabled}>
+            <FeesHeader
+              horizontal
+              alignItems="center"
+              selected={selected}
+              disabled={disabled}
+              error={!!messageGas}
+            >
               {label === "medium" ? (
                 <TachometerMedium size={14} />
               ) : label === "slow" ? (

diff --git a/apps/ledger-live-desktop/src/renderer/families/bitcoin/SendAmountFields.tsx b/apps/ledger-live-desktop/src/renderer/families/bitcoin/SendAmountFields.tsx
@@ -16,6 +16,13 @@ import CoinControlModal from "./CoinControlModal";
 import { FeesField } from "./FeesField";
 import { BitcoinFamily } from "./types";
 import useBitcoinPickingStrategy from "./useBitcoinPickingStrategy";
+import Alert from "~/renderer/components/Alert";
+import TranslatedError from "~/renderer/components/TranslatedError";
+import { useDispatch } from "react-redux";
+import { useHistory } from "react-router";
+import { closeAllModal } from "~/renderer/actions/modals";
+import { setTrackingSource } from "~/renderer/analytics/TrackPage";
+import { Flex } from "@ledgerhq/react-ui";
 
 type Props = NonNullable<BitcoinFamily["sendAmountFields"]>["component"];
 
@@ -46,6 +53,24 @@ const Fields: Props = ({
   const { item } = useBitcoinPickingStrategy(transaction.utxoStrategy.strategy);
   const canNext = account.bitcoinResources?.utxos?.length;
 
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const onBuyClick = useCallback(() => {
+    dispatch(closeAllModal());
+    setTrackingSource("send flow");
+    history.push({
+      pathname: "/exchange",
+      state: {
+        currency: account.currency.id,
+        account: account.id,
+        mode: "buy", // buy or sell
+      },
+    });
+  }, [account.currency.id, account.id, dispatch, history]);
+
+  const { errors } = status;
+  const { gasPrice: messageGas } = errors;
   /* TODO: How do we set default RBF to be true ? (@gre)
    * Meanwhile, using this trick (please don't kill me)
    */
@@ -147,15 +172,25 @@ const Fields: Props = ({
           </Box>
         </Box>
       ) : (
-        <SelectFeeStrategy
-          strategies={strategies}
-          onClick={onFeeStrategyClick}
-          transaction={transaction}
-          account={account}
-          parentAccount={parentAccount}
-          suffixPerByte={true}
-          mapStrategies={mapStrategies}
-        />
+        <>
+          <SelectFeeStrategy
+            strategies={strategies}
+            onClick={onFeeStrategyClick}
+            transaction={transaction}
+            account={account}
+            parentAccount={parentAccount}
+            suffixPerByte={true}
+            mapStrategies={mapStrategies}
+            status={status}
+          />
+          {messageGas && (
+            <Flex onClick={onBuyClick}>
+              <Alert type="warning">
+                <TranslatedError error={messageGas} noLink />
+              </Alert>
+            </Flex>
+          )}
+        </>
       )}
     </>
   );

diff --git a/apps/ledger-live-desktop/src/renderer/families/evm/SendAmountFields/SelectFeeStrategy.tsx b/apps/ledger-live-desktop/src/renderer/families/evm/SendAmountFields/SelectFeeStrategy.tsx
@@ -19,24 +19,30 @@ import Clock from "~/renderer/icons/Clock";
 import TachometerHigh from "~/renderer/icons/TachometerHigh";
 import TachometerLow from "~/renderer/icons/TachometerLow";
 import TachometerMedium from "~/renderer/icons/TachometerMedium";
+import { TransactionStatus } from "@ledgerhq/live-common/generated/types";
 
 type Props = {
   onClick: (_: { feesStrategy: Strategy }) => void;
   transaction: EvmTransaction;
   account: Account;
   gasOptions: GasOptions;
   transactionToUpdate?: EvmTransaction;
+  status: TransactionStatus;
 };
 
-const FeesWrapper = styled(Tabbable)`
+const FeesWrapper = styled(Tabbable)<{ error?: boolean }>`
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   gap: 6px;
 
   border: ${p =>
     `1px solid ${
-      p?.selected ? p.theme.colors.palette.primary.main : p.theme.colors.palette.divider
+      p?.selected
+        ? p?.error
+          ? p.theme.colors.palette.warning.c70
+          : p.theme.colors.palette.primary.main
+        : p.theme.colors.palette.divider
     }`};
   padding: 20px 16px;
   font-family: "Inter";
@@ -49,10 +55,12 @@ const FeesWrapper = styled(Tabbable)`
   }
 `;
 
-const FeesHeader = styled(Box)<{ selected?: boolean; disabled?: boolean }>`
+const FeesHeader = styled(Box)<{ selected?: boolean; disabled?: boolean; error?: boolean }>`
   color: ${p =>
     p.selected
-      ? p.theme.colors.palette.primary.main
+      ? p?.error
+        ? p.theme.colors.palette.warning.c70
+        : p.theme.colors.palette.primary.main
       : p.disabled
       ? p.theme.colors.palette.text.shade20
       : p.theme.colors.palette.text.shade50};
@@ -63,12 +71,16 @@ const FeesValue = styled(Box)`
   text-align: center;
 `;
 
-const ApproximateTransactionTime = styled(Box)<{ selected?: boolean }>`
+const ApproximateTransactionTime = styled(Box)<{ selected?: boolean; error?: boolean }>`
   flex-direction: row;
   align-items: center;
   border-radius: 3px;
   background-color: ${p =>
-    p.selected ? p.theme.colors.palette.primary.main : p.theme.colors.palette.text.shade20};
+    p.selected
+      ? p?.error
+        ? p.theme.colors.palette.warning.c70
+        : p.theme.colors.palette.primary.main
+      : p.theme.colors.palette.text.shade20};
   padding: 5px 6px;
 `;
 
@@ -80,9 +92,12 @@ const SelectFeeStrategy = ({
   onClick,
   gasOptions,
   transactionToUpdate,
+  status,
 }: Props) => {
   const accountUnit = getAccountUnit(account);
   const feesCurrency = getAccountCurrency(account);
+  const { errors } = status;
+  const { gasPrice: messageGas } = errors;
 
   const feeStrategies = useMemo(
     () =>
@@ -103,6 +118,7 @@ const SelectFeeStrategy = ({
             key={strategy}
             selected={selected}
             disabled={disabled}
+            error={!!messageGas}
             onClick={() => {
               !disabled &&
                 onClick({
@@ -111,7 +127,13 @@ const SelectFeeStrategy = ({
             }}
           >
             <>
-              <FeesHeader horizontal alignItems="center" selected={selected} disabled={disabled}>
+              <FeesHeader
+                horizontal
+                alignItems="center"
+                selected={selected}
+                disabled={disabled}
+                error={!!messageGas}
+              >
                 {strategy === "medium" ? (
                   <TachometerMedium size={13} />
                 ) : strategy === "slow" ? (
@@ -152,9 +174,17 @@ const SelectFeeStrategy = ({
                 />
               </FeesValue>
               {feesCurrency.id === "ethereum" && (
-                <ApproximateTransactionTime selected={selected}>
-                  <Clock size={12} />
-                  <Text fontSize={2} fontWeight="500" ml={1}>
+                <ApproximateTransactionTime selected={selected} error={!!messageGas}>
+                  <Clock
+                    size={12}
+                    color={messageGas ? "palette.neutral.c00" : "palette.neutral.c100"}
+                  />
+                  <Text
+                    fontSize={2}
+                    fontWeight="500"
+                    ml={1}
+                    color={messageGas ? "palette.neutral.c00" : "palette.neutral.c100"}
+                  >
                     {strategy === "medium" ? (
                       <>
                         ≈ 30 <Trans i18nKey={"time.second_short"} />
@@ -175,7 +205,7 @@ const SelectFeeStrategy = ({
           </FeesWrapper>
         );
       }),
-    [accountUnit, feesCurrency, gasOptions, onClick, transaction, transactionToUpdate],
+    [accountUnit, feesCurrency, gasOptions, messageGas, onClick, transaction, transactionToUpdate],
   );
 
   return (

diff --git a/apps/ledger-live-desktop/src/renderer/families/evm/SendAmountFields/index.tsx b/apps/ledger-live-desktop/src/renderer/families/evm/SendAmountFields/index.tsx
@@ -12,11 +12,37 @@ import GasPriceField from "./GasPriceField";
 import MaxFeeField from "./MaxFeeField";
 import PriorityFeeField from "./PriorityFeeField";
 import SelectFeeStrategy from "./SelectFeeStrategy";
+import TranslatedError from "~/renderer/components/TranslatedError";
+import Alert from "~/renderer/components/Alert";
+import { Flex } from "@ledgerhq/react-ui";
+import { closeAllModal } from "~/renderer/actions/modals";
+import { setTrackingSource } from "~/renderer/analytics/TrackPage";
+import { useDispatch } from "react-redux";
+import { useHistory } from "react-router";
 
 const Root: NonNullable<EvmFamily["sendAmountFields"]>["component"] = props => {
   const { account, updateTransaction, transaction } = props;
   const bridge: AccountBridge<EvmTransaction> = getAccountBridge(account);
 
+  const { errors } = props.status;
+  const { gasPrice: messageGas } = errors;
+
+  const dispatch = useDispatch();
+  const history = useHistory();
+
+  const onBuyClick = useCallback(() => {
+    dispatch(closeAllModal());
+    setTrackingSource("send flow");
+    history.push({
+      pathname: "/exchange",
+      state: {
+        currency: account.currency.id,
+        account: account.id,
+        mode: "buy", // buy or sell
+      },
+    });
+  }, [account.currency.id, account.id, dispatch, history]);
+
   const [gasOptions, error, loading] = useGasOptions({
     currency: account.currency,
     transaction,
@@ -86,6 +112,13 @@ const Root: NonNullable<EvmFamily["sendAmountFields"]>["component"] = props => {
           <SelectFeeStrategy gasOptions={gasOptions} onClick={onFeeStrategyClick} {...props} />
         </>
       )}
+      {messageGas && (
+        <Flex onClick={onBuyClick}>
+          <Alert type="warning">
+            <TranslatedError error={messageGas} noLink />
+          </Alert>
+        </Flex>
+      )}
     </>
   );
 };

diff --git a/apps/ledger-live-desktop/src/renderer/modals/Send/fields/AmountField.tsx b/apps/ledger-live-desktop/src/renderer/modals/Send/fields/AmountField.tsx
@@ -70,7 +70,7 @@ const AmountField = <T extends TransactionCommon>({
 
   const { useAllAmount } = transaction;
   const { amount, errors, warnings } = status;
-  const { amount: amountError, dustLimit: messageDust, gasPrice: messageGas } = errors;
+  const { amount: amountError, dustLimit: messageDust } = errors;
   const { amount: amountWarning } = warnings;
 
   let amountErrMessage: Error | undefined = amountError;
@@ -123,7 +123,7 @@ const AmountField = <T extends TransactionCommon>({
       <RequestAmount
         disabled={!!useAllAmount || walletConnectProxy}
         account={account}
-        validTransactionError={amountErrMessage || messageGas || messageDust}
+        validTransactionError={amountErrMessage || messageDust}
         validTransactionWarning={amountWarnMessage}
         onChange={onChange}
         value={walletConnectProxy ? transaction.amount : amount}

diff --git a/apps/ledger-live-desktop/src/renderer/modals/Send/steps/StepAmount.tsx b/apps/ledger-live-desktop/src/renderer/modals/Send/steps/StepAmount.tsx
@@ -132,18 +132,14 @@ export class StepAmountFooter extends PureComponent<StepProps> {
     const isTerminated = mainAccount.currency.terminated;
     const hasErrors = Object.keys(errors).length;
     const canNext = !bridgePending && !hasErrors && !isTerminated;
-    const {
-      gasPrice: gasPriceError,
-      maxPriorityFee: maxPriorityFeeError,
-      maxFee: maxFeeError,
-    } = errors;
+    const { maxPriorityFee: maxPriorityFeeError, maxFee: maxFeeError } = errors;
 
     return (
       <>
         {!isNFTSend ? (
           <AccountFooter parentAccount={parentAccount} account={account} status={status} />
         ) : null}
-        {gasPriceError || maxPriorityFeeError || maxFeeError ? (
+        {maxPriorityFeeError || maxFeeError ? (
           <BuyButton currency={mainAccount.currency} account={mainAccount} />
         ) : null}
         <Button