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..a06defd580c3 --- /dev/null +++ b/apps/ledger-live-desktop/src/renderer/families/evm/SendAmountFields/LowGasAlertBuyMore.tsx @@ -0,0 +1,67 @@ +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: + * + * + */ +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, dispatch, handleRequestClose, trackingSource]); + + 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}