git.iko.soy/bridge
on e7ae14d help sign in
bridge/src/components/InlineEthereumTransaction.js
161 lines 4.0 kB history raw
1import React from 'react';
2import cn from 'classnames';
3import {
4 Grid,
5 ToggleInput,
6 ErrorText,
7 Flex,
8 LinkButton,
9 H5,
10} from 'indigo-react';
11import { GenerateButton, ForwardButton, RestartButton } from './Buttons';
12import { useCheckboxInput } from 'lib/useInputs';
13import Blinky from './Blinky';
14import { hexify } from 'lib/txn';
15import { useExploreTxUrl } from 'lib/explorer';
17export default function InlineEthereumTransaction({
18 // from useEthereumTransaction.bind
19 initializing,
20 canSign,
21 generateAndSign,
22 signed,
23 broadcast,
24 broadcasted,
25 confirmed,
26 reset,
27 error,
28 setGasPrice,
29 txHash,
30 signedTransaction,
32 // additional from parent
33 className,
34 onReturn,
35}) {
36 const exploreHashUrl = useExploreTxUrl(txHash);
37 const [configureInput, { data: configurationOpen }] = useCheckboxInput({
38 name: 'configure',
39 label: 'Configure Transaction',
40 inverseLabel: 'Cancel Configure Transaction',
41 disabled: signed || broadcasted || confirmed,
42 });
44 const [
45 viewSignedTransaction,
46 { data: signedTransactionOpen },
47 ] = useCheckboxInput({
48 name: 'viewsigned',
49 label: 'View Signed Transaction',
50 inverseLabel: 'Hide Signed Transaction',
51 disabled: !signed,
52 });
54 // show receipt after successful broadcast
55 const showReceipt = broadcasted || confirmed;
56 // show configure controls pre-broadcast
57 const showConfigureInput = !(broadcasted || confirmed);
58 // show signed tx after signing
59 const showSignedTx = signed;
61 const renderButton = () => {
62 if (error) {
63 return (
64 <Grid.Item full as={RestartButton} solid onClick={() => reset()}>
65 Reset Transaction
66 </Grid.Item>
67 );
68 } else if (confirmed) {
69 return (
70 <>
71 <Grid.Divider />
72 <Grid.Item full as={RestartButton} onClick={onReturn}>
73 Return
74 </Grid.Item>
75 </>
76 );
77 } else if (broadcasted) {
78 return (
79 <Grid.Item
80 full
81 as={ForwardButton}
82 solid
83 success
84 disabled
85 accessory={<Blinky />}>
86 Sending Transaction...
87 </Grid.Item>
88 );
89 } else if (signed) {
90 return (
91 <Grid.Item
92 full
93 as={ForwardButton}
94 solid
95 success
96 onClick={() => broadcast()}>
97 Send Transaction
98 </Grid.Item>
99 );
100 } else {
101 return (
102 <Grid.Item
103 full
104 as={GenerateButton}
105 onClick={generateAndSign}
106 disabled={!canSign}
107 accessory={!canSign && initializing ? <Blinky /> : undefined}>
108 Generate & Sign Transaction
109 </Grid.Item>
110 );
111 }
112 };
114 return (
115 <Grid className={cn(className, 'mt1')}>
116 {renderButton()}
118 {error && (
119 <Grid.Item full as={ErrorText} className="mt1">
120 {error.message}
121 </Grid.Item>
122 )}
124 {showConfigureInput && (
125 <Grid.Item full as={ToggleInput} {...configureInput} />
126 )}
128 {showSignedTx && (
129 <>
130 <Grid.Item full as={ToggleInput} {...viewSignedTransaction} />
131 {signedTransactionOpen && (
132 <Grid.Item full as="code" className="f6 mono gray4 wrap">
133 {hexify(signedTransaction.serialize())}
134 </Grid.Item>
135 )}
136 </>
137 )}
139 {showReceipt && (
140 <>
141 <Grid.Divider />
142 <Grid.Item full as={Flex} col className="pv4">
143 <Flex.Item as={Flex} row justify="between">
144 <Flex.Item as={H5}>Transaction Hash</Flex.Item>
145 <Flex.Item as={LinkButton} href={exploreHashUrl}>
146 Etherscan↗
147 </Flex.Item>
148 </Flex.Item>
149 <Flex.Item as={Flex}>
150 <Flex.Item flex as="code" className="f6 mono gray4 wrap">
151 {txHash}
152 </Flex.Item>
153 <Flex.Item flex />
154 </Flex.Item>
155 </Grid.Item>
156 <Grid.Divider />
157 </>
158 )}
159 </Grid>
160 );