git.iko.soy/bridge
on a3a6828 help sign in
bridge/src/components/StatelessTransaction.js
233 lines 5.5 kB history raw
1import { Nothing } from 'folktale/maybe'
2import React from 'react'
4import { Code, H3 } from './Base'
5import { Button } from './Base'
6import { CheckboxButton, Input, InnerLabel } from './Base'
8import { renderSignedTx, signTransaction } from '../lib/txn'
10const StatelessTransaction = props => {
11 const { web3, gasPrice, gasLimit, nonce, chainId } = props
12 const { setNonce, setChainId, setGasLimit, setGasPrice, showGasDetails, toggleGasDetails } = props
13 const { txn, stx, createUnsignedTxn } = props
14 const { canSign, canGenerate, canApprove } = props
15 const { setUserApproval, userApproval } = props
16 const { canSend, handleSubmit } = props
18 // setState doesn't seem to work in SetProxy/handleSubmit, so just
19 // modifying the DOM manually here. (https://imgur.com/a/i0Qsyq1)
21 const handleRangeChange = (e) => {
22 setGasPrice(e.target.value);
23 }
25 const sendTxn = (e) => {
26 e.target.setAttribute("disabled", true);
27 let spinner = e.target.querySelectorAll('.btn-spinner')[0];
28 spinner.classList.remove('hide');
29 handleSubmit()
30 }
32 const generateButtonColor =
33 Nothing.hasInstance(txn)
34 ? 'blue'
35 : 'green'
37 const signerButtonColor =
38 Nothing.hasInstance(stx)
39 ? 'blue'
40 : 'green'
42 const generateTxnButton =
43 <Button
44 className={ 'mt-8' }
45 disabled={ !canGenerate }
46 prop-color={ generateButtonColor }
47 prop-size={ 'lg wide' }
48 onClick={ createUnsignedTxn }
49 >
50 { 'Generate Transaction' }
51 </Button>
53 const unsignedTxnDisplay = txn.matchWith({
54 Nothing: _ => '',
55 Just: tx =>
56 <React.Fragment>
57 <H3 className={ 'mt-8' }>
58 { 'Unsigned Transaction' }
59 </H3>
60 <Code>
61 { JSON.stringify(tx.value, null, 2) }
62 </Code>
63 </React.Fragment>
64 })
66 const gasPriceRangeDialogue = (
67 <React.Fragment>
68 <div className="mt-8">Gas Price: <span className="ml-4 text-700 text-sm">{gasPrice} gwei</span></div>
70 <input
71 className="mt-4"
72 type="range"
73 min="4"
74 max="20"
75 list="gweiVals"
76 value={gasPrice}
77 onChange={handleRangeChange}
78 />
80 <div className="flex space-between text-sm mb-8">
81 <div>Cheap</div>
82 <div>Fast</div>
83 </div>
84 </React.Fragment>
85 )
87 const toggleGasDetailsDialogue = (
88 <a href="javascript:void(0)" onClick={toggleGasDetails}>Gas Details</a>
89 )
91 const gasPriceDialogue =
92 <Input
93 className={ 'mono mt-4' }
94 prop-size={ 'md' }
95 prop-format={ 'innerLabel' }
96 value={ gasPrice }
97 onChange={ setGasPrice }
98 >
99 <InnerLabel>
100 { 'Gas Price (gwei)' }
101 </InnerLabel>
102 </Input>
104 const gasLimitDialogue =
105 <Input
106 className={ 'mono mt-4' }
107 prop-size={ 'md' }
108 prop-format={ 'innerLabel' }
109 value={ gasLimit }
110 onChange={ setGasLimit }>
111 <InnerLabel>
112 { 'Gas Limit' }
113 </InnerLabel>
114 </Input>
116 const nonceDialogue =
117 <Input
118 className={ 'mono mt-4' }
119 prop-size={ 'md' }
120 prop-format={ 'innerLabel' }
121 value={ nonce }
122 onChange={ setNonce }
123 >
124 <InnerLabel>
125 { 'Nonce' }
126 </InnerLabel>
127 </Input>
129 const chainDialogue =
130 <Input
131 className={ 'mono mt-4 mb-8' }
132 prop-size={ 'md' }
133 prop-format={ 'innerLabel' }
134 value={ chainId }
135 onChange={ setChainId }
136 >
137 <InnerLabel>
138 { 'Chain ID' }
139 </InnerLabel>
140 </Input>
142 const onlineParamsDialogue = web3.matchWith({
143 Just: _ => <div />,
144 Nothing: _ =>
145 <React.Fragment>
146 { nonceDialogue }
147 { chainDialogue }
148 </React.Fragment>
149 })
151 const signTxnButton =
152 <Button
153 disabled={ !canSign }
154 className={ 'mt-8' }
155 prop-size={ 'lg wide' }
156 prop-color={ signerButtonColor }
157 onClick={ () => signTransaction(props) }
158 >
159 { 'Sign Transaction' }
160 </Button>
162 const signedTxnDisplay = stx.matchWith({
163 Nothing: _ => '',
164 Just: tx =>
165 <React.Fragment>
166 <H3 className={ 'mt-8' }>
167 { 'Signed Transaction' }
168 </H3>
169 <Code>
170 { JSON.stringify(renderSignedTx(tx.value), null, 2) }
171 </Code>
172 </React.Fragment>
173 })
175 const confirmButton =
176 <CheckboxButton
177 className={ 'mt-8' }
178 disabled={ !canApprove }
179 onClick={ setUserApproval }
180 state={ userApproval }
181 >
182 <div>
183 { `I approve this transaction and wish to send.` }
184 </div>
185 </CheckboxButton>
187 const sendTxnButton =
188 <Button
189 prop-size={ 'xl wide' }
190 className={ 'mt-8' }
191 disabled={ !canSend }
192 onClick={ sendTxn }
193 >
194 <span className="relative">
195 <span className="btn-spinner hide"></span>
196 { 'Send Transaction' }
197 </span>
198 </Button>
200 const sendDialogue = web3.matchWith({
201 Nothing: _ => '',
202 Just: _ =>
203 <React.Fragment>
204 { confirmButton }
205 { sendTxnButton }
206 </React.Fragment>
207 })
209 return (
210 <React.Fragment>
211 { generateTxnButton }
212 { unsignedTxnDisplay }
214 { gasPriceRangeDialogue }
215 { toggleGasDetailsDialogue }
217 { showGasDetails &&
218 <div>
219 { gasPriceDialogue }
220 { gasLimitDialogue }
221 </div>
222 }
223 { onlineParamsDialogue }
225 { signTxnButton }
227 { signedTxnDisplay }
228 { sendDialogue }
229 </React.Fragment>
230 )
233export default StatelessTransaction