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