1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 20:57:12 +01:00
metamask-extension/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js

50 lines
1.5 KiB
JavaScript
Raw Normal View History

import React from 'react';
import classnames from 'classnames';
import { useDispatch, useSelector } from 'react-redux';
import { getBasicGasEstimateLoadingStatus } from '../../../../../selectors';
import {
getSendMaxModeState,
isSendFormInvalid,
toggleSendMaxMode,
} from '../../../../../ducks/send';
import { useI18nContext } from '../../../../../hooks/useI18nContext';
import { useMetricEvent } from '../../../../../hooks/useMetricEvent';
export default function AmountMaxButton() {
const buttonDataLoading = useSelector(getBasicGasEstimateLoadingStatus);
const isDraftTransactionInvalid = useSelector(isSendFormInvalid);
const maxModeOn = useSelector(getSendMaxModeState);
const dispatch = useDispatch();
const trackClickedMax = useMetricEvent({
eventOpts: {
category: 'Transactions',
action: 'Edit Screen',
name: 'Clicked "Amount Max"',
},
});
const t = useI18nContext();
const onMaxClick = () => {
trackClickedMax();
dispatch(toggleSendMaxMode());
};
return (
<button
className="send-v2__amount-max"
disabled={buttonDataLoading || isDraftTransactionInvalid}
onClick={onMaxClick}
>
<input type="checkbox" checked={maxModeOn} readOnly />
<div
className={classnames('send-v2__amount-max__button', {
'send-v2__amount-max__button__disabled':
buttonDataLoading || isDraftTransactionInvalid,
})}
>
{t('max')}
</div>
</button>
);
}