diff --git a/.changeset/late-seals-buy.md b/.changeset/late-seals-buy.md
new file mode 100644
index 000000000000..11d5bd6f4b3f
--- /dev/null
+++ b/.changeset/late-seals-buy.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+refactor: LowGasAlert to be consistent with all other errors
diff --git a/apps/ledger-live-desktop/src/renderer/families/evm/SendAmountFields/LowGasAlertBuyMore.tsx b/apps/ledger-live-desktop/src/renderer/families/evm/SendAmountFields/LowGasAlertBuyMore.tsx
new file mode 100644
index 000000000000..fc507fc4bdc1
--- /dev/null
+++ b/apps/ledger-live-desktop/src/renderer/families/evm/SendAmountFields/LowGasAlertBuyMore.tsx
@@ -0,0 +1,73 @@
+import React, { useCallback } from "react";
+import { useHistory } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { setTrackingSource } from "~/renderer/analytics/TrackPage";
+import { isCurrencySupported } from "~/renderer/screens/exchange/config";
+import Alert from "~/renderer/components/Alert";
+import { Account } from "@ledgerhq/types-live/lib/account";
+import { Flex } from "@ledgerhq/react-ui";
+import TranslatedError from "~/renderer/components/TranslatedError";
+
+type LowGasAlertBuyMoreProps = {
+ account: Account;
+ handleRequestClose: () => void;
+ gasPriceError: Error | null;
+ trackingSource: string;
+};
+
+/**
+ * LowGasAlertBuyMore
+ *
+ * This component renders an alert message when the user has insufficient gas
+ * to complete a transaction.
+ * It also provides a call to action to buy more crypto,
+ * handling redirection to the exchange flow.
+ *
+ * Usage:
+ *
+ *
+ * Note: The component only renders if the currency is supported for "buy" actions
+ * and if there's a valid error passed.
+ */
+const LowGasAlertBuyMore = ({
+ account,
+ handleRequestClose,
+ gasPriceError,
+ trackingSource,
+}: LowGasAlertBuyMoreProps) => {
+ const history = useHistory();
+ const dispatch = useDispatch();
+
+ const onBuyClick = useCallback(() => {
+ dispatch(handleRequestClose());
+ setTrackingSource(trackingSource);
+ history.push({
+ pathname: "/exchange",
+ state: {
+ currency: account.currency.id,
+ account: account.id,
+ mode: "buy",
+ },
+ });
+ }, [account.currency.id, account.id, history, trackingSource]);
+
+ if (!isCurrencySupported("BUY", account.currency)) {
+ return null;
+ }
+
+ if (!gasPriceError) return null;
+ return (
+
+
+
+
+
+ );
+};
+
+export default LowGasAlertBuyMore;
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
index bfb477d60c0f..ec7199f5bd56 100644
--- 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,36 +12,11 @@ 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["component"] = props => {
const { account, updateTransaction, transaction } = props;
const bridge: AccountBridge = getAccountBridge(account);
- const { errors } = props.status;
- const { gasPrice: messageGas, amount: messageAmount } = 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,
@@ -111,13 +86,6 @@ const Root: NonNullable["component"] = props => {
)}
- {(messageGas || messageAmount) && (
-
-
-
-
-
- )}
);
};
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
index 73e45d91cfeb..3dc3ca87c765 100644
--- a/apps/ledger-live-desktop/src/renderer/modals/Send/steps/StepAmount.tsx
+++ b/apps/ledger-live-desktop/src/renderer/modals/Send/steps/StepAmount.tsx
@@ -10,7 +10,6 @@ import Button from "~/renderer/components/Button";
import CurrencyDownStatusAlert from "~/renderer/components/CurrencyDownStatusAlert";
import ErrorBanner from "~/renderer/components/ErrorBanner";
import SpendableBanner from "~/renderer/components/SpendableBanner";
-import BuyButton from "~/renderer/components/BuyButton";
import Label from "~/renderer/components/Label";
import Input from "~/renderer/components/Input";
import { useSelector } from "react-redux";
@@ -20,6 +19,8 @@ import SendAmountFields from "../SendAmountFields";
import AmountField from "../fields/AmountField";
import { StepProps } from "../types";
import { getLLDCoinFamily } from "~/renderer/families";
+import { closeAllModal } from "~/renderer/actions/modals";
+import LowGasAlertBuyMore from "~/renderer/families/evm/SendAmountFields/LowGasAlertBuyMore";
const StepAmount = (props: StepProps) => {
const {
@@ -60,6 +61,8 @@ const StepAmount = (props: StepProps) => {
}, [specific.nft, transaction]);
if (!status) return null;
+ const { errors } = status;
+ const { gasPrice } = errors;
return (
@@ -114,6 +117,12 @@ const StepAmount = (props: StepProps) => {
bridgePending={bridgePending}
updateTransaction={updateTransaction}
/>
+
);
@@ -132,16 +141,12 @@ export class StepAmountFooter extends PureComponent {
const isTerminated = mainAccount.currency.terminated;
const hasErrors = Object.keys(errors).length;
const canNext = !bridgePending && !hasErrors && !isTerminated;
- const { maxPriorityFee: maxPriorityFeeError, maxFee: maxFeeError } = errors;
return (
<>
{!isNFTSend ? (
) : null}
- {maxPriorityFeeError || maxFeeError ? (
-
- ) : null}