@@ -1,598 +0,0 @@
1โimport { Nothing, Just } from 'folktale/maybe';
2โimport { Ok } from 'folktale/result';
3โimport React from 'react';
4โimport * as need from '../../lib/need';
6โimport { Code, H3 } from './Base';
7โimport { Button } from './Base';
8โimport { CheckboxButton, Input, InnerLabel, InnerLabelDropdown } from './Base';
9โimport { Warning } from './Base';
11โimport { GAS_LIMITS } from '../../lib/constants';
12โimport { BRIDGE_ERROR } from '../../lib/error';
13โimport { ROUTE_NAMES } from '../../lib/routeNames';
14โimport { compose } from '../../lib/lib';
15โimport * as tank from '../../lib/tank';
17โ sendSignedTransaction,
21โ} from '../../lib/txn';
23โimport { withNetwork } from '../../store/network';
24โimport { withHistory } from '../../store/history';
25โimport { withWallet } from '../../store/wallet';
26โimport { withTxnCursor } from '../../store/txnCursor';
27โimport { fromWei, toWei } from 'web3-utils';
29โconst SUBMISSION_STATES = {
30โ PROMPT: 'Send transaction',
31โ PREPARING: 'Preparing...',
32โ FUNDING: 'Finding transaction funding...',
33โ SENDING: 'Sending transaction...',
36โclass StatelessTransaction extends React.Component {
37โ constructor(props) {
42โ gasLimit: GAS_LIMITS.DEFAULT.toString(),
43โ showGasDetails: false,
44โ userApproval: false,
46โ customChain: false,
50โ txStatus: SUBMISSION_STATES.PROMPT,
51โ txError: Nothing(),
54โ this.createUnsignedTxn = this.createUnsignedTxn.bind(this);
55โ this.setUserApproval = this.setUserApproval.bind(this);
56โ this.setTxn = this.setTxn.bind(this);
57โ this.setStx = this.setStx.bind(this);
58โ this.sendTxn = this.sendTxn.bind(this);
59โ this.setNonce = this.setNonce.bind(this);
60โ this.setChainId = this.setChainId.bind(this);
61โ this.setGasPrice = this.setGasPrice.bind(this);
62โ this.setGasLimit = this.setGasLimit.bind(this);
63โ this.rangeChange = this.rangeChange.bind(this);
64โ this.toggleGasDetails = this.toggleGasDetails.bind(this);
65โ this.handleChainUpdate = this.handleChainUpdate.bind(this);
68โ componentDidMount() {
69โ const { props } = this;
71โ const addr = need.addressFromWallet(props.wallet);
73โ props.web3.matchWith({
76โ const validWeb3 = w3.value;
78โ const getTxMetadata = [
79โ validWeb3.eth.getTransactionCount(addr),
80โ validWeb3.eth.net.getId(),
81โ validWeb3.eth.getGasPrice(),
84โ Promise.all(getTxMetadata).then(r => {
85โ const txMetadata = {
88โ gasPrice: fromWei(r[2], 'gwei'),
91โ this.setState({ ...txMetadata });
97โ handleChainUpdate(chainId) {
98โ if (chainId === 'custom') {
100โ customChain: true,
104โ customChain: false,
112โ setUserApproval() {
113โ const { state } = this;
114โ this.setState({ userApproval: !state.userApproval });
117โ toggleGasDetails() {
119โ showGasDetails: !this.state.showGasDetails,
126โ userApproval: false,
131โ this.setState({ txn });
134โ createUnsignedTxn() {
135โ const txn = this.props.createUnsignedTxn();
137โ this.setState({ txn });
142โ userApproval: false,
149โ this.setState({ nonce });
153โ setChainId(chainId) {
154โ this.setState({ chainId });
158โ setGasPrice(gasPrice) {
159โ this.setState({ gasPrice });
164โ this.setGasPrice(e.target.value);
167โ setGasLimit(gasLimit) {
168โ this.setState({ gasLimit });
174โ userApproval: false,
180โ const { props, state } = this;
181โ const web3 = props.web3.value;
183โ const stx = state.stx.matchWith({
184โ Just: tx => tx.value,
186โ throw new Error(BRIDGE_ERROR.MISSING_TXN);
190โ if (props.beforeSend) {
192โ this.setState({ txStatus: SUBMISSION_STATES.PREPARING });
193โ const res = await props.beforeSend(stx);
194โ if (res === false) throw new Error('beforeSend disallowed sending');
196โ console.log('beforeSend error', e);
198โ txStatus: SUBMISSION_STATES.PROMPT,
199โ txError: Just('Something went wrong!'),
205โ this.setState({ txStatus: SUBMISSION_STATES.FUNDING });
207โ const rawTx = hexify(stx.serialize());
208โ const cost = state.gasLimit * toWei(state.gasPrice, 'gwei');
210โ const address = need.addressFromWallet(props.wallet);
211โ let balance = await web3.eth.getBalance(address);
212โ let hasBalance = balance >= cost;
214โ let usedTank = false;
215โ // if we need to, try and fund the transaction
216โ if (!hasBalance) {
217โ usedTank = await this.ensureFundsFor(web3, address, cost, [rawTx]);
218โ hasBalance = usedTank;
221โ // if we still don't have sufficient balance, fail and tell the user
222โ if (!hasBalance) {
224โ txStatus: SUBMISSION_STATES.PROMPT,
225โ txError: Just(`Insufficient funds.
226โ Address ${address} needs at least ${fromWei(cost.toString())} ETH,
227โ currently has ${fromWei(balance.toString())} ETH.`),
230โ // if we have the balance, proceed with submission
232โ this.setState({ txStatus: SUBMISSION_STATES.SENDING });
234โ sendSignedTransaction(web3, stx, usedTank)
236โ props.setTxnCursor(Just(Ok(txHash)));
238โ let routeData = {};
239โ if (props.newNetworkSeed) {
240โ props.setNetworkSeed(Just(props.newNetworkSeed));
241โ routeData.promptKeyfile = true;
244โ if (props.newRevision) {
245โ props.setNetworkRevision(Just(props.newRevision));
248โ props.history.popAndPush(ROUTE_NAMES.SENT_TRANSACTION, routeData);
252โ txStatus: SUBMISSION_STATES.PROMPT,
253โ txError: Just(err),
259โ // uses the gas tank to ensure funds, but if we have to ask the user
260โ // for funding, just resolve instead of waiting
261โ // returns true if the gas tank was used, false otherwise
262โ ensureFundsFor(web3, address, cost, signedTxs) {
263โ return new Promise((resolve, reject) => {
265โ .ensureFundsFor(web3, null, address, cost, signedTxs, () => {
274โ getChainTitle(chainId) {
276โ '1': 'Mainnet - 1',
277โ '2': 'Morden - 2',
278โ '3': 'Ropsten - 3',
279โ '4': 'Goerli - 4',
280โ '42': 'Kovan - 42',
281โ '1337': 'Geth private chains - 1337',
285โ return map[chainId];
288โ getChainOptions() {
291โ title: this.getChainTitle('1'),
295โ title: this.getChainTitle('2'),
299โ title: this.getChainTitle('3'),
303โ title: this.getChainTitle('4'),
307โ title: this.getChainTitle('42'),
311โ title: this.getChainTitle('1337'),
315โ title: this.getChainTitle('custom'),
322โ const { web3, canGenerate } = this.props;
344โ createUnsignedTxn,
345โ handleChainUpdate,
348โ const { state } = this;
350โ const canSign = Just.hasInstance(txn);
351โ const canApprove = Just.hasInstance(stx);
352โ const canSend = Just.hasInstance(stx) && userApproval === true;
354โ const chainOptions = this.getChainOptions();
356โ const generateButtonColor = Nothing.hasInstance(txn) ? 'blue' : 'green';
358โ const signerButtonColor = Nothing.hasInstance(stx) ? 'blue' : 'green';
360โ const generateTxnButton = (
362โ className={'mt-8'}
363โ disabled={!canGenerate}
364โ prop-color={generateButtonColor}
365โ prop-size={'lg wide'}
366โ onClick={createUnsignedTxn}>
367โ {'Generate Transaction'}
371โ const unsignedTxnDisplay = txn.matchWith({
375โ <H3 className={'mt-8'}>{'Unsigned Transaction'}</H3>
376โ <Code>{JSON.stringify(tx.value, null, 2)}</Code>
381โ const gasPriceRangeDialogue = (
383โ <div className="mt-12 flex space-between align-baseline">
385โ <span>Gas Price:</span>
386โ <span className="ml-4 text-700 text-sm">{gasPrice} gwei</span>
388โ <div className="text-sm">
389โ <span>Max transaction fee: </span>
390โ <span className="text-700">
391โ {(gasPrice * gasLimit) / 1000000000} eth
403โ onChange={this.rangeChange}
406โ <div className="flex space-between text-sm mb-8">
413โ const toggleGasDetailsDialogue = (
414โ <span className="text-link" onClick={toggleGasDetails}>
419โ const gasPriceDialogue = (
421โ className={'mono mt-4'}
423โ prop-format={'innerLabel'}
425โ onChange={setGasPrice}>
426โ <InnerLabel>{'Gas Price (gwei)'}</InnerLabel>
430โ const gasLimitDialogue = (
432โ className={'mono mt-4'}
434โ prop-format={'innerLabel'}
436โ onChange={setGasLimit}>
437โ <InnerLabel>{'Gas Limit'}</InnerLabel>
441โ const nonceDialogue = (
443โ className={'mono mt-4 mb-4'}
445โ prop-format={'innerLabel'}
447โ onChange={setNonce}>
448โ <InnerLabel>{'Nonce'}</InnerLabel>
452โ const chainDialogueTitle = customChain
454โ : this.getChainTitle(chainId);
455โ const chainDialogue = (
456โ <InnerLabelDropdown
457โ className={'mt-6'}
459โ title={'Chain ID'}
460โ options={chainOptions}
461โ handleUpdate={handleChainUpdate}
462โ currentSelectionTitle={chainDialogueTitle}
466โ const customChainDialogue = !customChain ? null : (
468โ className={'mono mt-4 mb-8'}
470โ prop-format={'innerLabel'}
472โ onChange={setChainId}>
473โ <InnerLabel>{'Chain ID'}</InnerLabel>
477โ const onlineParamsDialogue = web3.matchWith({
478โ Just: _ => <div />,
483โ {customChainDialogue}
488โ const signTxnButton = (
490โ disabled={!canSign}
491โ className={'mt-8'}
492โ prop-size={'lg wide'}
493โ prop-color={signerButtonColor}
494โ onClick={async () =>
497โ await signTransaction({
500โ wallet: this.props.wallet.value,
506โ {'Sign Transaction'}
510โ const signedTxnDisplay = stx.matchWith({
514โ <H3 className={'mt-8'}>{'Signed Transaction'}</H3>
515โ <Code>{JSON.stringify(renderSignedTx(tx.value), null, 2)}</Code>
520โ const confirmButton = (
522โ className={'mt-8'}
523โ disabled={!canApprove}
524โ onToggle={setUserApproval}
525โ state={userApproval}
526โ label="I approve this transaction and wish to send."
530โ const sending = txStatus !== SUBMISSION_STATES.PROMPT;
531โ const sendTxnSpinner = sending ? '' : 'hide';
532โ const sendTxnButton = (
534โ prop-size={'xl wide'}
535โ className={'mt-8'}
536โ disabled={!canSend || sending}
537โ onClick={sendTxn}>
538โ <span className="relative">
539โ <span className={`btn-spinner ${sendTxnSpinner}`} />
545โ const sendDialogue = web3.matchWith({
555โ const txnErrorDialogue = Nothing.hasInstance(state.txError) ? (
558โ <Warning className={'mt-8'}>
559โ <H3 style={{ marginTop: 0, paddingTop: 0 }}>
560โ {'There was an error sending your transaction.'}
562โ {state.txError.value}
568โ {generateTxnButton}
569โ {unsignedTxnDisplay}
571โ {gasPriceRangeDialogue}
572โ {toggleGasDetailsDialogue}
574โ {showGasDetails && (
576โ {gasPriceDialogue}
577โ {gasLimitDialogue}
580โ {onlineParamsDialogue}
584โ {signedTxnDisplay}
587โ {txnErrorDialogue}
593โexport default compose(
598โ)(StatelessTransaction);