@@ -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,
23−} from '../../lib/txn';
25−import { withTxnConfirmations } from '../../store/txnConfirmations';
26−import { withNetwork } from '../../store/network';
27−import { withHistory } from '../../store/history';
28−import { withWallet } from '../../store/wallet';
29−import { withTxnCursor } from '../../store/txnCursor';
31−const SUBMISSION_STATES = {
32− PROMPT: 'Send transaction',
33− PREPARING: 'Preparing...',
34− FUNDING: 'Finding transaction funding...',
35− SENDING: 'Sending transaction...',
38−class StatelessTransaction extends React.Component {
44− gasLimit: GAS_LIMITS.DEFAULT.toString(),
45− showGasDetails: false,
52− txStatus: SUBMISSION_STATES.PROMPT,
56− this.createUnsignedTxn = this.createUnsignedTxn.bind(this);
57− this.setUserApproval = this.setUserApproval.bind(this);
58− this.setTxn = this.setTxn.bind(this);
59− this.setStx = this.setStx.bind(this);
60− this.sendTxn = this.sendTxn.bind(this);
61− this.setNonce = this.setNonce.bind(this);
62− this.setChainId = this.setChainId.bind(this);
63− this.setGasPrice = this.setGasPrice.bind(this);
64− this.setGasLimit = this.setGasLimit.bind(this);
65− this.rangeChange = this.rangeChange.bind(this);
66− this.toggleGasDetails = this.toggleGasDetails.bind(this);
67− this.handleChainUpdate = this.handleChainUpdate.bind(this);
70− componentDidMount() {
71− const { props } = this;
73− const addr = need.addressFromWallet(props.wallet);
75− props.web3.matchWith({
78− const validWeb3 = w3.value;
80− const getTxMetadata = [
81− validWeb3.eth.getTransactionCount(addr),
82− validWeb3.eth.net.getId(),
83− validWeb3.eth.getGasPrice(),
86− Promise.all(getTxMetadata).then(r => {
90− gasPrice: fromWei(r[2], 'gwei'),
93− this.setState({ ...txMetadata });
99− handleChainUpdate(chainId) {
100− if (chainId === 'custom') {
115− const { state } = this;
116− this.setState({ userApproval: !state.userApproval });
119− toggleGasDetails() {
121− showGasDetails: !this.state.showGasDetails,
128− userApproval: false,
133− this.setState({ txn });
136− createUnsignedTxn() {
137− const txn = this.props.createUnsignedTxn();
139− this.setState({ txn });
144− userApproval: false,
151− this.setState({ nonce });
155− setChainId(chainId) {
156− this.setState({ chainId });
160− setGasPrice(gasPrice) {
161− this.setState({ gasPrice });
166− this.setGasPrice(e.target.value);
169− setGasLimit(gasLimit) {
170− this.setState({ gasLimit });
176− userApproval: false,
182− const { props, state } = this;
183− const web3 = props.web3.value;
185− const stx = state.stx.matchWith({
186− Just: tx => tx.value,
188− throw new Error(BRIDGE_ERROR.MISSING_TXN);
192− if (props.beforeSend) {
194− this.setState({ txStatus: SUBMISSION_STATES.PREPARING });
195− const res = await props.beforeSend(stx);
196− if (res === false) throw new Error('beforeSend disallowed sending');
198− console.log('beforeSend error', e);
200− txStatus: SUBMISSION_STATES.PROMPT,
201− txError: Just('Something went wrong!'),
207− this.setState({ txStatus: SUBMISSION_STATES.FUNDING });
209− const rawTx = hexify(stx.serialize());
210− const cost = state.gasLimit * toWei(state.gasPrice, 'gwei');
212− const address = need.addressFromWallet(props.wallet);
213− let balance = await web3.eth.getBalance(address);
214− let hasBalance = balance >= cost;
216− let usedTank = false;
217− // if we need to, try and fund the transaction
219− usedTank = await this.ensureFundsFor(web3, address, cost, [rawTx]);
220− hasBalance = usedTank;
223− // if we still don't have sufficient balance, fail and tell the user
226− txStatus: SUBMISSION_STATES.PROMPT,
227− txError: Just(`Insufficient funds.
228− Address ${address} needs at least ${fromWei(cost.toString())} ETH,
229− currently has ${fromWei(balance.toString())} ETH.`),
232− // if we have the balance, proceed with submission
234− this.setState({ txStatus: SUBMISSION_STATES.SENDING });
236− sendSignedTransaction(web3, stx, usedTank, props.setTxnConfirmations)
238− props.setTxnCursor(Just(Ok(txHash)));
241− if (props.newNetworkSeed) {
242− props.setNetworkSeed(Just(props.newNetworkSeed));
243− routeData.promptKeyfile = true;
246− if (props.newRevision) {
247− props.setNetworkRevision(Just(props.newRevision));
250− props.history.popAndPush(ROUTE_NAMES.SENT_TRANSACTION, routeData);
254− txStatus: SUBMISSION_STATES.PROMPT,
261− // uses the gas tank to ensure funds, but if we have to ask the user
262− // for funding, just resolve instead of waiting
263− // returns true if the gas tank was used, false otherwise
264− ensureFundsFor(web3, address, cost, signedTxs) {
265− return new Promise((resolve, reject) => {
267− .ensureFundsFor(web3, null, address, cost, signedTxs, () => {
276− getChainTitle(chainId) {
283− '1337': 'Geth private chains - 1337',
287− return map[chainId];
293− title: this.getChainTitle('1'),
297− title: this.getChainTitle('2'),
301− title: this.getChainTitle('3'),
305− title: this.getChainTitle('4'),
309− title: this.getChainTitle('42'),
313− title: this.getChainTitle('1337'),
317− title: this.getChainTitle('custom'),
324− const { web3, canGenerate } = this.props;
350− const { state } = this;
352− const canSign = Just.hasInstance(txn);
353− const canApprove = Just.hasInstance(stx);
354− const canSend = Just.hasInstance(stx) && userApproval === true;
356− const chainOptions = this.getChainOptions();
358− const generateButtonColor = Nothing.hasInstance(txn) ? 'blue' : 'green';
360− const signerButtonColor = Nothing.hasInstance(stx) ? 'blue' : 'green';
362− const generateTxnButton = (
365− disabled={!canGenerate}
366− prop-color={generateButtonColor}
367− prop-size={'lg wide'}
368− onClick={createUnsignedTxn}>
369− {'Generate Transaction'}
373− const unsignedTxnDisplay = txn.matchWith({
377− <H3 className={'mt-8'}>{'Unsigned Transaction'}</H3>
378− <Code>{JSON.stringify(tx.value, null, 2)}</Code>
383− const gasPriceRangeDialogue = (
385− <div className="mt-12 flex space-between align-baseline">
387− <span>Gas Price:</span>
388− <span className="ml-4 text-700 text-sm">{gasPrice} gwei</span>
390− <div className="text-sm">
391− <span>Max transaction fee: </span>
392− <span className="text-700">
393− {(gasPrice * gasLimit) / 1000000000} eth
405− onChange={this.rangeChange}
408− <div className="flex space-between text-sm mb-8">
415− const toggleGasDetailsDialogue = (
416− <span className="text-link" onClick={toggleGasDetails}>
421− const gasPriceDialogue = (
423− className={'mono mt-4'}
425− prop-format={'innerLabel'}
427− onChange={setGasPrice}>
428− <InnerLabel>{'Gas Price (gwei)'}</InnerLabel>
432− const gasLimitDialogue = (
434− className={'mono mt-4'}
436− prop-format={'innerLabel'}
438− onChange={setGasLimit}>
439− <InnerLabel>{'Gas Limit'}</InnerLabel>
443− const nonceDialogue = (
445− className={'mono mt-4 mb-4'}
447− prop-format={'innerLabel'}
449− onChange={setNonce}>
450− <InnerLabel>{'Nonce'}</InnerLabel>
454− const chainDialogueTitle = customChain
456− : this.getChainTitle(chainId);
457− const chainDialogue = (
462− options={chainOptions}
463− handleUpdate={handleChainUpdate}
464− currentSelectionTitle={chainDialogueTitle}
468− const customChainDialogue = !customChain ? null : (
470− className={'mono mt-4 mb-8'}
472− prop-format={'innerLabel'}
474− onChange={setChainId}>
475− <InnerLabel>{'Chain ID'}</InnerLabel>
479− const onlineParamsDialogue = web3.matchWith({
485− {customChainDialogue}
490− const signTxnButton = (
494− prop-size={'lg wide'}
495− prop-color={signerButtonColor}
500− setStx: this.setStx,
501− wallet: this.props.wallet.value,
505− {'Sign Transaction'}
509− const signedTxnDisplay = stx.matchWith({
513− <H3 className={'mt-8'}>{'Signed Transaction'}</H3>
514− <Code>{JSON.stringify(renderSignedTx(tx.value), null, 2)}</Code>
519− const confirmButton = (
522− disabled={!canApprove}
523− onToggle={setUserApproval}
524− state={userApproval}
525− label="I approve this transaction and wish to send."
529− const sending = txStatus !== SUBMISSION_STATES.PROMPT;
530− const sendTxnSpinner = sending ? '' : 'hide';
531− const sendTxnButton = (
533− prop-size={'xl wide'}
535− disabled={!canSend || sending}
537− <span className="relative">
538− <span className={`btn-spinner ${sendTxnSpinner}`} />
544− const sendDialogue = web3.matchWith({
554− const txnErrorDialogue = Nothing.hasInstance(state.txError) ? (
557− <Warning className={'mt-8'}>
558− <H3 style={{ marginTop: 0, paddingTop: 0 }}>
559− {'There was an error sending your transaction.'}
561− {state.txError.value}
568− {unsignedTxnDisplay}
570− {gasPriceRangeDialogue}
571− {toggleGasDetailsDialogue}
573− {showGasDetails && (
579− {onlineParamsDialogue}
592−export default compose(
594− withTxnConfirmations,
598−)(StatelessTransaction);