@@ -1,4 +1,4 @@
1−import Maybe from 'folktale/maybe'
1+import { Nothing } from 'folktale/maybe'
22import React from 'react'
33
44import { Code, H3 } from './Base'
@@ -7,167 +7,173 @@ import { CheckboxButton, Input, InnerLabel } from './Base'
77
88import {
99 renderSignedTx,
10− // createUnsignedTxn,
1110 signTransaction,
12−} from '../lib/txn';
13−
14−
11+ } from '../lib/txn'
1512
1613const StatelessTransaction = props => {
1714
18− const generateButtonColor = Maybe.Nothing.hasInstance(props.txn)
15+ const generateButtonColor =
16+ Nothing.hasInstance(props.txn)
1917 ? 'blue'
2018 : 'green'
2119
22− const signerButtonColor = Maybe.Nothing.hasInstance(props.stx)
20+ const signerButtonColor =
21+ Nothing.hasInstance(props.stx)
2322 ? 'blue'
2423 : 'green'
2524
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>
35+
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+ })
48+
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>
61+
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>
73+
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>
86+
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>
99+
100+ const onlineParamsDialogue = props.web3.matchWith({
101+ Just: _ => <div />,
102+ Nothing: _ =>
103+ <React.Fragment>
104+ { nonceDialogue }
105+ { chainDialogue }
106+ </React.Fragment>
107+ })
108+
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>
119+
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+ })
132+
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>
144+
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>
154+
155+ const sendDialogue = props.web3.matchWith({
156+ Nothing: _ => '',
157+ Just: _ =>
158+ <React.Fragment>
159+ { confirmButton }
160+ { sendTxnButton }
161+ </React.Fragment>
162+ })
163+
26164 return (
27165 <React.Fragment>
166+ { generateTxnButton }
167+ { unsignedTxnDisplay }
168+
169+ { gasPriceDialogue }
170+ { gasLimitDialogue }
171+ { onlineParamsDialogue }
172+
173+ { signTxnButton }
28174
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>
37−
38−
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− }
54−
55−
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>
66−
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>
77−
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>
93−
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− }
107−
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>
127−
128−
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− }
143−
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− }
175+ { signedTxnDisplay }
176+ { sendDialogue }
171177 </React.Fragment>
172178 )
173179}