1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/send/send.js
2022-07-18 12:01:10 -05:00

153 lines
4.8 KiB
JavaScript

import React, { useEffect, useCallback, useContext, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory, useLocation } from 'react-router-dom';
import {
addHistoryEntry,
getDraftTransactionExists,
getIsUsingMyAccountForRecipientSearch,
getRecipient,
getRecipientUserInput,
getSendStage,
resetRecipientInput,
resetSendState,
SEND_STAGES,
startNewDraftTransaction,
updateRecipient,
updateRecipientUserInput,
} from '../../ducks/send';
import { isCustomPriceExcessive } from '../../selectors';
import { getSendHexDataFeatureFlagState } from '../../ducks/metamask/metamask';
import { showQrScanner } from '../../store/actions';
import { MetaMetricsContext } from '../../contexts/metametrics';
import { EVENT } from '../../../shared/constants/metametrics';
import { ASSET_TYPES } from '../../../shared/constants/transaction';
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 startedNewDraftTransaction = useRef(false);
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 draftTransactionExists = useSelector(getDraftTransactionExists);
const location = useLocation();
const trackEvent = useContext(MetaMetricsContext);
const dispatch = useDispatch();
const cleanup = useCallback(() => {
dispatch(resetSendState());
}, [dispatch]);
/**
* It is possible to route to this page directly, either by typing in the url
* or by clicking the browser back button after progressing to the confirm
* screen. In the case where a draft transaction does not yet exist, this
* hook is responsible for creating it. We will assume that this is a native
* asset send.
*/
useEffect(() => {
if (
draftTransactionExists === false &&
startedNewDraftTransaction.current === false
) {
startedNewDraftTransaction.current = true;
dispatch(startNewDraftTransaction({ type: ASSET_TYPES.NATIVE }));
}
}, [draftTransactionExists, dispatch]);
useEffect(() => {
window.addEventListener('beforeunload', cleanup);
}, [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 (
draftTransactionExists &&
[SEND_STAGES.EDIT, SEND_STAGES.DRAFT].includes(stage)
) {
content = (
<>
<SendContent
showHexData={showHexData}
gasIsExcessive={gasIsExcessive}
/>
<SendFooter key="send-footer" history={history} />
</>
);
} else {
content = <AddRecipient />;
}
return (
<div className="page-container">
<SendHeader history={history} />
<EnsInput
userInput={userInput}
className="send__to-row"
onChange={(address) => dispatch(updateRecipientUserInput(address))}
onValidAddressTyped={async (address) => {
dispatch(
addHistoryEntry(`sendFlow - Valid address typed ${address}`),
);
await dispatch(updateRecipientUserInput(address));
dispatch(updateRecipient({ address, nickname: '' }));
}}
internalSearch={isUsingMyAccountsForRecipientSearch}
selectedAddress={recipient.address}
selectedName={recipient.nickname}
onPaste={(text) => {
dispatch(
addHistoryEntry(
`sendFlow - User pasted ${text} into address field`,
),
);
}}
onReset={() => dispatch(resetRecipientInput())}
scanQrCode={() => {
trackEvent({
event: 'Used QR scanner',
category: EVENT.CATEGORIES.TRANSACTIONS,
properties: {
action: 'Edit Screen',
legacy_event: true,
},
});
dispatch(showQrScanner());
}}
/>
{content}
</div>
);
}