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