git.iko.soy/bridge
on a54b5ac help sign in
bridge/src/components/StatelessTransaction.js
176 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 txn: props.txn,
118 setStx: props.setStx,
119 nonce: props.nonce,
120 chainId: props.chainId,
121 gasPrice: props.gasPrice,
122 gasLimit: props.gasLimit,
123 }) }>
124 { 'Sign Transaction' }
125 </Button>
128 {
129 props.stx.matchWith({
130 Nothing: () => '',
131 Just: (tx) => {
132 const rendered = renderSignedTx(tx.value)
133 return (
134 <React.Fragment>
135 <H3 className={'mt-8'}>{'Signed Transaction'}</H3>
136 <Code> {JSON.stringify(rendered, null, 2)} </Code>
137 </React.Fragment>
138 )
139 }
140 })
141 }
143 {
144 props.web3.matchWith({
145 Nothing: () => '',
146 Just: () => {
147 return (
148 <React.Fragment>
149 <CheckboxButton
150 className={'mt-8'}
151 disabled={ !props.canApprove }
152 onClick={ () => props.setUserApproval() }
153 state={props.userApproval}>
154 <div>
155 { `I approve this transaction and wish to send.` }
156 </div>
157 </CheckboxButton>
158 <Button
159 prop-size={'xl wide'}
160 className={'mt-8'}
161 disabled={ !props.canSend }
162 onClick={ () => props.handleSubmit() }>
163 { 'Send Transaction' }
164 </Button>
165 </React.Fragment>
166 )
167 }
168 })
169 }
170 </React.Fragment>
171 )
176export default StatelessTransaction