git.iko.soy/bridge
on 7f9ea79 help sign in
bridge/src/components/StatelessTransaction.js
177 lines 4.8 kB history raw
1import Maybe 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 // createUnsignedTxn,
11 signTransaction,
12} from '../lib/txn';
16const StatelessTransaction = props => {
18 const generateButtonColor = Maybe.Nothing.hasInstance(props.txn)
19 ? 'blue'
20 : 'green'
22 const signerButtonColor = Maybe.Nothing.hasInstance(props.stx)
23 ? 'blue'
24 : 'green'
26 return (
27 <React.Fragment>
29 <Button
30 prop-size={'lg wide'}
31 prop-color={generateButtonColor}
32 className={'mt-8'}
33 disabled={ !props.canGenerate }
34 onClick={ () => props.createUnsignedTxn()}>
35 { 'Generate Transaction' }
36 </Button>
39 {
40 props.txn.matchWith({
41 Nothing: () => '',
42 Just: (tx) => {
43 console.log(tx.value)
44 const rendered = tx.value
45 return (
46 <React.Fragment>
47 <H3 className={'mt-8'}>{'Unsigned Transaction'}</H3>
48 <Code> {JSON.stringify(rendered, null, 2)} </Code>
49 </React.Fragment>
50 )
51 }
52 })
53 }
56 <Input
57 className='mono mt-4'
58 prop-size='md'
59 prop-format='innerLabel'
60 value={ props.gasPrice }
61 onChange={ v => props.setGasPrice(v) }>
62 <InnerLabel>
63 { 'Gas Price (gwei)' }
64 </InnerLabel>
65 </Input>
67 <Input
68 className='mono mt-4'
69 prop-size='md'
70 prop-format='innerLabel'
71 value={ props.gasLimit }
72 onChange={ v => props.setGasLimit(v) }>
73 <InnerLabel>
74 { 'Gas Limit' }
75 </InnerLabel>
76 </Input>
78 {
79 props.web3.matchWith({
80 Just: () => <div />,
81 Nothing: () =>
82 <React.Fragment>
83 <Input
84 className='mono mt-4'
85 prop-size='md'
86 prop-format='innerLabel'
87 value={ props.nonce }
88 onChange={ v => props.setNonce(v) }>
89 <InnerLabel>
90 { 'Nonce' }
91 </InnerLabel>
92 </Input>
94 <Input
95 className='mono mt-4 mb-8'
96 prop-size='md'
97 prop-format='innerLabel'
98 value={ props.chainId }
99 onChange={ v => props.setChainId(v) }>
100 <InnerLabel>
101 { 'Chain ID' }
102 </InnerLabel>
103 </Input>
104 </React.Fragment>
105 })
106 }
108 <Button
109 disabled={ !props.canSign }
110 className={'mt-8'}
111 prop-size={'lg wide'}
112 prop-color={signerButtonColor}
113 onClick={ () => signTransaction({
114 wallet: props.wallet,
115 walletType: props.walletType,
116 walletHdPath: props.walletHdPath,
117 networkType: props.networkType,
118 txn: props.txn,
119 setStx: props.setStx,
120 nonce: props.nonce,
121 chainId: props.chainId,
122 gasPrice: props.gasPrice,
123 gasLimit: props.gasLimit,
124 }) }>
125 { 'Sign Transaction' }
126 </Button>
129 {
130 props.stx.matchWith({
131 Nothing: () => '',
132 Just: (tx) => {
133 const rendered = renderSignedTx(tx.value)
134 return (
135 <React.Fragment>
136 <H3 className={'mt-8'}>{'Signed Transaction'}</H3>
137 <Code> {JSON.stringify(rendered, null, 2)} </Code>
138 </React.Fragment>
139 )
140 }
141 })
142 }
144 {
145 props.web3.matchWith({
146 Nothing: () => '',
147 Just: () => {
148 return (
149 <React.Fragment>
150 <CheckboxButton
151 className={'mt-8'}
152 disabled={ !props.canApprove }
153 onClick={ () => props.setUserApproval() }
154 state={props.userApproval}>
155 <div>
156 { `I approve this transaction and wish to send.` }
157 </div>
158 </CheckboxButton>
159 <Button
160 prop-size={'xl wide'}
161 className={'mt-8'}
162 disabled={ !props.canSend }
163 onClick={ () => props.handleSubmit() }>
164 { 'Send Transaction' }
165 </Button>
166 </React.Fragment>
167 )
168 }
169 })
170 }
171 </React.Fragment>
172 )
177export default StatelessTransaction