git.iko.soy/bridge
on b16048c help sign in
bridge/src/components/old/StatelessTransaction.js
597 lines 15 kB history raw
1import { Nothing, Just } from 'folktale/maybe';
2import { Ok } from 'folktale/result';
3import React from 'react';
4import * as need from '../../lib/need';
6import { Code, H3 } from './Base';
7import { Button } from './Base';
8import { CheckboxButton, Input, InnerLabel, InnerLabelDropdown } from './Base';
9import { Warning } from './Base';
11import { GAS_LIMITS } from '../../lib/constants';
12import { BRIDGE_ERROR } from '../../lib/error';
13import { ROUTE_NAMES } from '../../lib/routeNames';
14import { compose } from '../../lib/lib';
15import * as tank from '../../lib/tank';
16import {
17 sendSignedTransaction,
18 fromWei,
19 toWei,
20 hexify,
21 renderSignedTx,
22 signTransaction,
23} from '../../lib/txn';
25import { withNetwork } from '../../store/network';
26import { withHistory } from '../../store/history';
27import { withWallet } from '../../store/wallet';
28import { withTxnCursor } from '../../store/txnCursor';
30const SUBMISSION_STATES = {
31 PROMPT: 'Send transaction',
32 PREPARING: 'Preparing...',
33 FUNDING: 'Finding transaction funding...',
34 SENDING: 'Sending transaction...',
35};
37class StatelessTransaction extends React.Component {
38 constructor(props) {
39 super(props);
41 this.state = {
42 gasPrice: '5',
43 gasLimit: GAS_LIMITS.DEFAULT.toString(),
44 showGasDetails: false,
45 userApproval: false,
46 chainId: '1',
47 customChain: false,
48 nonce: '0',
49 stx: Nothing(),
50 txn: Nothing(),
51 txStatus: SUBMISSION_STATES.PROMPT,
52 txError: Nothing(),
53 };
55 this.createUnsignedTxn = this.createUnsignedTxn.bind(this);
56 this.setUserApproval = this.setUserApproval.bind(this);
57 this.setTxn = this.setTxn.bind(this);
58 this.setStx = this.setStx.bind(this);
59 this.sendTxn = this.sendTxn.bind(this);
60 this.setNonce = this.setNonce.bind(this);
61 this.setChainId = this.setChainId.bind(this);
62 this.setGasPrice = this.setGasPrice.bind(this);
63 this.setGasLimit = this.setGasLimit.bind(this);
64 this.rangeChange = this.rangeChange.bind(this);
65 this.toggleGasDetails = this.toggleGasDetails.bind(this);
66 this.handleChainUpdate = this.handleChainUpdate.bind(this);
67 }
69 componentDidMount() {
70 const { props } = this;
72 const addr = need.addressFromWallet(props.wallet);
74 props.web3.matchWith({
75 Nothing: () => {},
76 Just: w3 => {
77 const validWeb3 = w3.value;
79 const getTxMetadata = [
80 validWeb3.eth.getTransactionCount(addr),
81 validWeb3.eth.net.getId(),
82 validWeb3.eth.getGasPrice(),
83 ];
85 Promise.all(getTxMetadata).then(r => {
86 const txMetadata = {
87 nonce: r[0],
88 chainId: r[1],
89 gasPrice: fromWei(r[2], 'gwei'),
90 };
92 this.setState({ ...txMetadata });
93 });
94 },
95 });
96 }
98 handleChainUpdate(chainId) {
99 if (chainId === 'custom') {
100 this.setState({
101 customChain: true,
102 });
103 } else {
104 this.setState({
105 customChain: false,
106 chainId,
107 });
108 }
110 this.clearStx();
111 }
113 setUserApproval() {
114 const { state } = this;
115 this.setState({ userApproval: !state.userApproval });
116 }
118 toggleGasDetails() {
119 this.setState({
120 showGasDetails: !this.state.showGasDetails,
121 });
122 }
124 setStx(stx) {
125 this.setState({
126 stx,
127 userApproval: false,
128 });
129 }
131 setTxn(txn) {
132 this.setState({ txn });
133 }
135 createUnsignedTxn() {
136 const txn = this.props.createUnsignedTxn();
138 this.setState({ txn });
139 }
141 clearTxn() {
142 this.setState({
143 userApproval: false,
144 txn: Nothing(),
145 stx: Nothing(),
146 });
147 }
149 setNonce(nonce) {
150 this.setState({ nonce });
151 this.clearStx();
152 }
154 setChainId(chainId) {
155 this.setState({ chainId });
156 this.clearStx();
157 }
159 setGasPrice(gasPrice) {
160 this.setState({ gasPrice });
161 this.clearStx();
162 }
164 rangeChange(e) {
165 this.setGasPrice(e.target.value);
166 }
168 setGasLimit(gasLimit) {
169 this.setState({ gasLimit });
170 this.clearStx();
171 }
173 clearStx() {
174 this.setState({
175 userApproval: false,
176 stx: Nothing(),
177 });
178 }
180 async sendTxn() {
181 const { props, state } = this;
182 const web3 = props.web3.value;
184 const stx = state.stx.matchWith({
185 Just: tx => tx.value,
186 Nothing: () => {
187 throw new Error(BRIDGE_ERROR.MISSING_TXN);
188 },
189 });
191 if (props.beforeSend) {
192 try {
193 this.setState({ txStatus: SUBMISSION_STATES.PREPARING });
194 const res = await props.beforeSend(stx);
195 if (res === false) throw new Error('beforeSend disallowed sending');
196 } catch (e) {
197 console.log('beforeSend error', e);
198 this.setState({
199 txStatus: SUBMISSION_STATES.PROMPT,
200 txError: Just('Something went wrong!'),
201 });
202 return;
203 }
204 }
206 this.setState({ txStatus: SUBMISSION_STATES.FUNDING });
208 const rawTx = hexify(stx.serialize());
209 const cost = state.gasLimit * toWei(state.gasPrice, 'gwei');
211 const address = need.addressFromWallet(props.wallet);
212 let balance = await web3.eth.getBalance(address);
213 let hasBalance = balance >= cost;
215 let usedTank = false;
216 // if we need to, try and fund the transaction
217 if (!hasBalance) {
218 usedTank = await this.ensureFundsFor(web3, address, cost, [rawTx]);
219 hasBalance = usedTank;
220 }
222 // if we still don't have sufficient balance, fail and tell the user
223 if (!hasBalance) {
224 this.setState({
225 txStatus: SUBMISSION_STATES.PROMPT,
226 txError: Just(`Insufficient funds.
227 Address ${address} needs at least ${fromWei(cost.toString())} ETH,
228 currently has ${fromWei(balance.toString())} ETH.`),
229 });
231 // if we have the balance, proceed with submission
232 } else {
233 this.setState({ txStatus: SUBMISSION_STATES.SENDING });
235 sendSignedTransaction(web3, stx, usedTank)
236 .then(txHash => {
237 props.setTxnCursor(Just(Ok(txHash)));
239 let routeData = {};
240 if (props.newNetworkSeed) {
241 props.setNetworkSeed(Just(props.newNetworkSeed));
242 routeData.promptKeyfile = true;
243 }
245 if (props.newRevision) {
246 props.setNetworkRevision(Just(props.newRevision));
247 }
249 props.history.popAndPush(ROUTE_NAMES.SENT_TRANSACTION, routeData);
250 })
251 .catch(err => {
252 this.setState({
253 txStatus: SUBMISSION_STATES.PROMPT,
254 txError: Just(err),
255 });
256 });
257 }
258 }
260 // uses the gas tank to ensure funds, but if we have to ask the user
261 // for funding, just resolve instead of waiting
262 // returns true if the gas tank was used, false otherwise
263 ensureFundsFor(web3, address, cost, signedTxs) {
264 return new Promise((resolve, reject) => {
265 tank
266 .ensureFundsFor(web3, null, address, cost, signedTxs, () => {
267 resolve(false);
268 })
269 .then(res => {
270 resolve(res);
271 });
272 });
273 }
275 getChainTitle(chainId) {
276 let map = {
277 '1': 'Mainnet - 1',
278 '2': 'Morden - 2',
279 '3': 'Ropsten - 3',
280 '4': 'Goerli - 4',
281 '42': 'Kovan - 42',
282 '1337': 'Geth private chains - 1337',
283 custom: 'Custom',
284 };
286 return map[chainId];
287 }
289 getChainOptions() {
290 return [
291 {
292 title: this.getChainTitle('1'),
293 value: '1',
294 },
295 {
296 title: this.getChainTitle('2'),
297 value: '2',
298 },
299 {
300 title: this.getChainTitle('3'),
301 value: '3',
302 },
303 {
304 title: this.getChainTitle('4'),
305 value: '4',
306 },
307 {
308 title: this.getChainTitle('42'),
309 value: '42',
310 },
311 {
312 title: this.getChainTitle('1337'),
313 value: '1337',
314 },
315 {
316 title: this.getChainTitle('custom'),
317 value: 'custom',
318 },
319 ];
320 }
322 render() {
323 const { web3, canGenerate } = this.props;
324 const {
325 gasPrice,
326 gasLimit,
327 nonce,
328 chainId,
329 txn,
330 stx,
331 userApproval,
332 showGasDetails,
333 customChain,
334 txStatus,
335 } = this.state;
337 const {
338 setNonce,
339 setChainId,
340 setGasLimit,
341 setGasPrice,
342 toggleGasDetails,
343 setUserApproval,
344 sendTxn,
345 createUnsignedTxn,
346 handleChainUpdate,
347 } = this;
349 const { state } = this;
351 const canSign = Just.hasInstance(txn);
352 const canApprove = Just.hasInstance(stx);
353 const canSend = Just.hasInstance(stx) && userApproval === true;
355 const chainOptions = this.getChainOptions();
357 const generateButtonColor = Nothing.hasInstance(txn) ? 'blue' : 'green';
359 const signerButtonColor = Nothing.hasInstance(stx) ? 'blue' : 'green';
361 const generateTxnButton = (
362 <Button
363 className={'mt-8'}
364 disabled={!canGenerate}
365 prop-color={generateButtonColor}
366 prop-size={'lg wide'}
367 onClick={createUnsignedTxn}>
368 {'Generate Transaction'}
369 </Button>
370 );
372 const unsignedTxnDisplay = txn.matchWith({
373 Nothing: _ => '',
374 Just: tx => (
375 <React.Fragment>
376 <H3 className={'mt-8'}>{'Unsigned Transaction'}</H3>
377 <Code>{JSON.stringify(tx.value, null, 2)}</Code>
378 </React.Fragment>
379 ),
380 });
382 const gasPriceRangeDialogue = (
383 <React.Fragment>
384 <div className="mt-12 flex space-between align-baseline">
385 <div>
386 <span>Gas Price:</span>
387 <span className="ml-4 text-700 text-sm">{gasPrice} gwei</span>
388 </div>
389 <div className="text-sm">
390 <span>Max transaction fee: </span>
391 <span className="text-700">
392 {(gasPrice * gasLimit) / 1000000000} eth
393 </span>
394 </div>
395 </div>
397 <input
398 className="mt-4"
399 type="range"
400 min="2"
401 max="20"
402 list="gweiVals"
403 value={gasPrice}
404 onChange={this.rangeChange}
405 />
407 <div className="flex space-between text-sm mb-8">
408 <div>Cheap</div>
409 <div>Fast</div>
410 </div>
411 </React.Fragment>
412 );
414 const toggleGasDetailsDialogue = (
415 <span className="text-link" onClick={toggleGasDetails}>
416 Gas Details
417 </span>
418 );
420 const gasPriceDialogue = (
421 <Input
422 className={'mono mt-4'}
423 prop-size={'md'}
424 prop-format={'innerLabel'}
425 value={gasPrice}
426 onChange={setGasPrice}>
427 <InnerLabel>{'Gas Price (gwei)'}</InnerLabel>
428 </Input>
429 );
431 const gasLimitDialogue = (
432 <Input
433 className={'mono mt-4'}
434 prop-size={'md'}
435 prop-format={'innerLabel'}
436 value={gasLimit}
437 onChange={setGasLimit}>
438 <InnerLabel>{'Gas Limit'}</InnerLabel>
439 </Input>
440 );
442 const nonceDialogue = (
443 <Input
444 className={'mono mt-4 mb-4'}
445 prop-size={'md'}
446 prop-format={'innerLabel'}
447 value={nonce}
448 onChange={setNonce}>
449 <InnerLabel>{'Nonce'}</InnerLabel>
450 </Input>
451 );
453 const chainDialogueTitle = customChain
454 ? 'Custom'
455 : this.getChainTitle(chainId);
456 const chainDialogue = (
457 <InnerLabelDropdown
458 className={'mt-6'}
459 fullWidth={true}
460 title={'Chain ID'}
461 options={chainOptions}
462 handleUpdate={handleChainUpdate}
463 currentSelectionTitle={chainDialogueTitle}
464 />
465 );
467 const customChainDialogue = !customChain ? null : (
468 <Input
469 className={'mono mt-4 mb-8'}
470 prop-size={'md'}
471 prop-format={'innerLabel'}
472 value={chainId}
473 onChange={setChainId}>
474 <InnerLabel>{'Chain ID'}</InnerLabel>
475 </Input>
476 );
478 const onlineParamsDialogue = web3.matchWith({
479 Just: _ => <div />,
480 Nothing: _ => (
481 <React.Fragment>
482 {nonceDialogue}
483 {chainDialogue}
484 {customChainDialogue}
485 </React.Fragment>
486 ),
487 });
489 const signTxnButton = (
490 <Button
491 disabled={!canSign}
492 className={'mt-8'}
493 prop-size={'lg wide'}
494 prop-color={signerButtonColor}
495 onClick={async () =>
496 this.setStx(
497 await signTransaction({
498 ...this.props,
499 ...this.state,
500 wallet: this.props.wallet.value,
501 txn: txn.value,
502 })
503 )
504 }>
505 {'Sign Transaction'}
506 </Button>
507 );
509 const signedTxnDisplay = stx.matchWith({
510 Nothing: _ => '',
511 Just: tx => (
512 <React.Fragment>
513 <H3 className={'mt-8'}>{'Signed Transaction'}</H3>
514 <Code>{JSON.stringify(renderSignedTx(tx.value), null, 2)}</Code>
515 </React.Fragment>
516 ),
517 });
519 const confirmButton = (
520 <CheckboxButton
521 className={'mt-8'}
522 disabled={!canApprove}
523 onToggle={setUserApproval}
524 state={userApproval}
525 label="I approve this transaction and wish to send."
526 />
527 );
529 const sending = txStatus !== SUBMISSION_STATES.PROMPT;
530 const sendTxnSpinner = sending ? '' : 'hide';
531 const sendTxnButton = (
532 <Button
533 prop-size={'xl wide'}
534 className={'mt-8'}
535 disabled={!canSend || sending}
536 onClick={sendTxn}>
537 <span className="relative">
538 <span className={`btn-spinner ${sendTxnSpinner}`} />
539 {txStatus}
540 </span>
541 </Button>
542 );
544 const sendDialogue = web3.matchWith({
545 Nothing: _ => '',
546 Just: _ => (
547 <React.Fragment>
548 {confirmButton}
549 {sendTxnButton}
550 </React.Fragment>
551 ),
552 });
554 const txnErrorDialogue = Nothing.hasInstance(state.txError) ? (
555 ''
556 ) : (
557 <Warning className={'mt-8'}>
558 <H3 style={{ marginTop: 0, paddingTop: 0 }}>
559 {'There was an error sending your transaction.'}
560 </H3>
561 {state.txError.value}
562 </Warning>
563 );
565 return (
566 <React.Fragment>
567 {generateTxnButton}
568 {unsignedTxnDisplay}
570 {gasPriceRangeDialogue}
571 {toggleGasDetailsDialogue}
573 {showGasDetails && (
574 <div>
575 {gasPriceDialogue}
576 {gasLimitDialogue}
577 </div>
578 )}
579 {onlineParamsDialogue}
581 {signTxnButton}
583 {signedTxnDisplay}
584 {sendDialogue}
586 {txnErrorDialogue}
587 </React.Fragment>
588 );
589 }
592export default compose(
593 withNetwork,
594 withHistory,
595 withWallet,
596 withTxnCursor
597)(StatelessTransaction);