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