git.iko.soy/bridge
on 764521d help sign in
bridge/src/components/InlineEthereumTransaction.js
201 lines 5.2 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 Text,
11 HelpText,
12} from 'indigo-react';
13import { GenerateButton, ForwardButton, RestartButton } from './Buttons';
14import { useCheckboxInput } from 'lib/useInputs';
15import Blinky from './Blinky';
16import { hexify } from 'lib/txn';
17import { useExploreTxUrl } from 'lib/explorer';
19export default function InlineEthereumTransaction({
20 // from useEthereumTransaction.bind
21 initializing,
22 canSign,
23 generateAndSign,
24 signed,
25 broadcast,
26 broadcasted,
27 confirmed,
28 reset,
29 error,
30 gasPrice,
31 setGasPrice,
32 txHash,
33 nonce,
34 chainId,
35 signedTransaction,
37 // additional from parent
38 className,
39 onReturn,
40}) {
41 // show receipt after successful broadcast
42 const showReceipt = broadcasted || confirmed;
43 // show configure controls pre-broadcast
44 const showConfigureInput = !(signed || broadcasted || confirmed);
45 // show signed tx after signing
46 const showSignedTx = signed;
48 const exploreHashUrl = useExploreTxUrl(txHash);
49 const [advancedInput, { data: advancedOpen }] = useCheckboxInput({
50 name: 'advanced',
51 label: 'Advanced Configuration',
52 inverseLabel: 'Hide Advanced Configuration',
53 disabled: !showConfigureInput,
54 });
56 const [
57 viewSignedTransaction,
58 { data: signedTransactionOpen },
59 ] = useCheckboxInput({
60 name: 'viewsigned',
61 label: 'View Signed Transaction',
62 inverseLabel: 'Hide Signed Transaction',
63 disabled: !showSignedTx,
64 });
66 const renderButton = () => {
67 if (error) {
68 return (
69 <Grid.Item full as={RestartButton} solid onClick={() => reset()}>
70 Reset Transaction
71 </Grid.Item>
72 );
73 } else if (confirmed) {
74 return (
75 <>
76 <Grid.Divider />
77 <Grid.Item full as={RestartButton} onClick={onReturn}>
78 Return
79 </Grid.Item>
80 </>
81 );
82 } else if (broadcasted) {
83 return (
84 <Grid.Item
85 full
86 as={ForwardButton}
87 solid
88 success
89 disabled
90 accessory={<Blinky />}>
91 Sending Transaction...
92 </Grid.Item>
93 );
94 } else if (signed) {
95 return (
96 <Grid.Item
97 full
98 as={ForwardButton}
99 solid
100 success
101 onClick={() => broadcast()}>
102 Send Transaction
103 </Grid.Item>
104 );
105 } else {
106 return (
107 <Grid.Item
108 full
109 as={GenerateButton}
110 onClick={generateAndSign}
111 disabled={!canSign}
112 accessory={!canSign && initializing ? <Blinky /> : undefined}>
113 Generate & Sign Transaction
114 </Grid.Item>
115 );
116 }
117 };
119 return (
120 <Grid className={cn(className, 'mt1')}>
121 {renderButton()}
123 {error && (
124 <Grid.Item full as={ErrorText} className="mt1">
125 {error.message}
126 </Grid.Item>
127 )}
129 {showConfigureInput && (
130 <>
131 {!advancedOpen ? (
132 <Grid.Item full as={ToggleInput} {...advancedInput} />
133 ) : (
134 <>
135 <Grid.Item full as={Flex} row justify="between" className="mt2">
136 <Flex.Item as={H5}>Gas Price</Flex.Item>
137 <Flex.Item as={H5}>{gasPrice} Gwei</Flex.Item>
138 </Grid.Item>
139 <Grid.Item
140 full
141 as="input"
142 type="range"
143 min="1"
144 max="100"
145 value={gasPrice}
146 onChange={e => setGasPrice(parseInt(e.target.value, 10))}
147 />
148 <Grid.Item
149 full
150 as={Flex}
151 row
152 justify="between"
153 className="f6 mt1">
154 <Flex.Item as={Text}>Cheap</Flex.Item>
155 <Flex.Item as={Text}>Fast</Flex.Item>
156 </Grid.Item>
157 <Grid.Item full as={HelpText} className="mt3">
158 Nonce: {nonce}
159 </Grid.Item>
160 <Grid.Item full as={HelpText} className="mt1">
161 Chain ID: {chainId}
162 </Grid.Item>
163 </>
164 )}
165 </>
166 )}
168 {showSignedTx && (
169 <>
170 <Grid.Item full as={ToggleInput} {...viewSignedTransaction} />
171 {signedTransactionOpen && (
172 <Grid.Item full as="code" className="f6 mono gray4 wrap">
173 {hexify(signedTransaction.serialize())}
174 </Grid.Item>
175 )}
176 </>
177 )}
179 {showReceipt && (
180 <>
181 <Grid.Divider />
182 <Grid.Item full as={Flex} col className="pv4">
183 <Flex.Item as={Flex} row justify="between">
184 <Flex.Item as={H5}>Transaction Hash</Flex.Item>
185 <Flex.Item as={LinkButton} href={exploreHashUrl}>
186 Etherscan↗
187 </Flex.Item>
188 </Flex.Item>
189 <Flex.Item as={Flex}>
190 <Flex.Item flex as="code" className="f6 mono gray4 wrap">
191 {txHash}
192 </Flex.Item>
193 <Flex.Item flex />
194 </Flex.Item>
195 </Grid.Item>
196 <Grid.Divider />
197 </>
198 )}
199 </Grid>
200 );