import React, { useEffect, useCallback, useContext } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory, useLocation } from 'react-router-dom'; import { getIsUsingMyAccountForRecipientSearch, getRecipient, getRecipientUserInput, getSendStage, initializeSendState, resetRecipientInput, resetSendState, SEND_STAGES, updateRecipient, updateRecipientUserInput, } from '../../ducks/send'; import { getCurrentChainId, isCustomPriceExcessive } from '../../selectors'; import { getSendHexDataFeatureFlagState } from '../../ducks/metamask/metamask'; import { showQrScanner } from '../../store/actions'; import { MetaMetricsContext } from '../../contexts/metametrics.new'; import SendHeader from './send-header'; import AddRecipient from './send-content/add-recipient'; import SendContent from './send-content'; import SendFooter from './send-footer'; import EnsInput from './send-content/add-recipient/ens-input'; const sendSliceIsCustomPriceExcessive = (state) => isCustomPriceExcessive(state, true); export default function SendTransactionScreen() { const history = useHistory(); const chainId = useSelector(getCurrentChainId); const stage = useSelector(getSendStage); const gasIsExcessive = useSelector(sendSliceIsCustomPriceExcessive); const isUsingMyAccountsForRecipientSearch = useSelector( getIsUsingMyAccountForRecipientSearch, ); const recipient = useSelector(getRecipient); const showHexData = useSelector(getSendHexDataFeatureFlagState); const userInput = useSelector(getRecipientUserInput); const location = useLocation(); const trackEvent = useContext(MetaMetricsContext); const dispatch = useDispatch(); const cleanup = useCallback(() => { dispatch(resetSendState()); }, [dispatch]); useEffect(() => { if (chainId !== undefined) { dispatch(initializeSendState()); window.addEventListener('beforeunload', cleanup); } }, [chainId, dispatch, cleanup]); useEffect(() => { if (location.search === '?scan=true') { dispatch(showQrScanner()); // Clear the queryString param after showing the modal const cleanUrl = window.location.href.split('?')[0]; window.history.pushState({}, null, `${cleanUrl}`); window.location.hash = '#send'; } }, [location, dispatch]); useEffect(() => { return () => { dispatch(resetSendState()); window.removeEventListener('beforeunload', cleanup); }; }, [dispatch, cleanup]); let content; if ([SEND_STAGES.EDIT, SEND_STAGES.DRAFT].includes(stage)) { content = ( <> ); } else { content = ; } return (
dispatch(updateRecipientUserInput(address))} onValidAddressTyped={(address) => dispatch(updateRecipient({ address, nickname: '' })) } internalSearch={isUsingMyAccountsForRecipientSearch} selectedAddress={recipient.address} selectedName={recipient.nickname} onPaste={(text) => updateRecipient({ address: text, nickname: '' })} onReset={() => dispatch(resetRecipientInput())} scanQrCode={() => { trackEvent({ event: 'Used QR scanner', category: 'Transactions', properties: { action: 'Edit Screen', legacy_event: true, }, }); dispatch(showQrScanner()); }} /> {content}
); }