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