git.iko.soy/bridge
on 1031df9 help sign in
bridge/src/components/StatelessTransaction.js
189 lines 4.3 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 } = props
13 const { txn, stx, createUnsignedTxn } = props
14 const { canSign, canGenerate, canApprove } = props
15 const { setUserApproval, userApproval } = props
16 const { canSend, handleSubmit } = props
18 const sendTxn = (e) => {
19 e.target.setAttribute("disabled", true);
20 handleSubmit()
21 }
23 const generateButtonColor =
24 Nothing.hasInstance(txn)
25 ? 'blue'
26 : 'green'
28 const signerButtonColor =
29 Nothing.hasInstance(stx)
30 ? 'blue'
31 : 'green'
33 const generateTxnButton =
34 <Button
35 className={ 'mt-8' }
36 disabled={ !canGenerate }
37 prop-color={ generateButtonColor }
38 prop-size={ 'lg wide' }
39 onClick={ createUnsignedTxn }
40 >
41 { 'Generate Transaction' }
42 </Button>
44 const unsignedTxnDisplay = txn.matchWith({
45 Nothing: _ => '',
46 Just: tx =>
47 <React.Fragment>
48 <H3 className={ 'mt-8' }>
49 { 'Unsigned Transaction' }
50 </H3>
51 <Code>
52 { JSON.stringify(tx.value, null, 2) }
53 </Code>
54 </React.Fragment>
55 })
57 const gasPriceDialogue =
58 <Input
59 className={ 'mono mt-4' }
60 prop-size={ 'md' }
61 prop-format={ 'innerLabel' }
62 value={ gasPrice }
63 onChange={ setGasPrice }
64 >
65 <InnerLabel>
66 { 'Gas Price (gwei)' }
67 </InnerLabel>
68 </Input>
70 const gasLimitDialogue =
71 <Input
72 className={ 'mono mt-4' }
73 prop-size={ 'md' }
74 prop-format={ 'innerLabel' }
75 value={ gasLimit }
76 onChange={ setGasLimit }>
77 <InnerLabel>
78 { 'Gas Limit' }
79 </InnerLabel>
80 </Input>
82 const nonceDialogue =
83 <Input
84 className={ 'mono mt-4' }
85 prop-size={ 'md' }
86 prop-format={ 'innerLabel' }
87 value={ nonce }
88 onChange={ setNonce }
89 >
90 <InnerLabel>
91 { 'Nonce' }
92 </InnerLabel>
93 </Input>
95 const chainDialogue =
96 <Input
97 className={ 'mono mt-4 mb-8' }
98 prop-size={ 'md' }
99 prop-format={ 'innerLabel' }
100 value={ chainId }
101 onChange={ setChainId }
102 >
103 <InnerLabel>
104 { 'Chain ID' }
105 </InnerLabel>
106 </Input>
108 const onlineParamsDialogue = web3.matchWith({
109 Just: _ => <div />,
110 Nothing: _ =>
111 <React.Fragment>
112 { nonceDialogue }
113 { chainDialogue }
114 </React.Fragment>
115 })
117 const signTxnButton =
118 <Button
119 disabled={ !canSign }
120 className={ 'mt-8' }
121 prop-size={ 'lg wide' }
122 prop-color={ signerButtonColor }
123 onClick={ () => signTransaction(props) }
124 >
125 { 'Sign Transaction' }
126 </Button>
128 const signedTxnDisplay = stx.matchWith({
129 Nothing: _ => '',
130 Just: tx =>
131 <React.Fragment>
132 <H3 className={ 'mt-8' }>
133 { 'Signed Transaction' }
134 </H3>
135 <Code>
136 { JSON.stringify(renderSignedTx(tx.value), null, 2) }
137 </Code>
138 </React.Fragment>
139 })
141 const confirmButton =
142 <CheckboxButton
143 className={ 'mt-8' }
144 disabled={ !canApprove }
145 onClick={ setUserApproval }
146 state={ userApproval }
147 >
148 <div>
149 { `I approve this transaction and wish to send.` }
150 </div>
151 </CheckboxButton>
153 const sendTxnButton =
154 <Button
155 prop-size={ 'xl wide' }
156 className={ 'mt-8' }
157 disabled={ !canSend }
158 onClick={ sendTxn }
159 >
160 { 'Send Transaction' }
161 </Button>
163 const sendDialogue = web3.matchWith({
164 Nothing: _ => '',
165 Just: _ =>
166 <React.Fragment>
167 { confirmButton }
168 { sendTxnButton }
169 </React.Fragment>
170 })
172 return (
173 <React.Fragment>
174 { generateTxnButton }
175 { unsignedTxnDisplay }
177 { gasPriceDialogue }
178 { gasLimitDialogue }
179 { onlineParamsDialogue }
181 { signTxnButton }
183 { signedTxnDisplay }
184 { sendDialogue }
185 </React.Fragment>
186 )
189export default StatelessTransaction