@@ -1,177 +1,184 @@
1−import Maybe from 'folktale/maybe'
1+import { Nothing } from 'folktale/maybe'
22import React from 'react'
33
44import { Code, H3 } from './Base'
55import { Button } from './Base'
6−import { CheckboxButton, Input, InnerLabel } from './Base'
7−
8−import {
9− renderSignedTx,
10− // createUnsignedTxn,
11− signTransaction,
12−} from '../lib/txn';
13−
6+import { CheckboxButton, Input, InnerLabel } from './Base'
147
8+import { renderSignedTx, signTransaction } from '../lib/txn'
159
1610const StatelessTransaction = props => {
17−
18− const generateButtonColor = Maybe.Nothing.hasInstance(props.txn)
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
17+
18+ const generateButtonColor =
19+ Nothing.hasInstance(txn)
1920 ? 'blue'
2021 : 'green'
2122
22− const signerButtonColor = Maybe.Nothing.hasInstance(props.stx)
23+ const signerButtonColor =
24+ Nothing.hasInstance(stx)
2325 ? 'blue'
2426 : 'green'
2527
26− return (
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>
38+
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+ })
51+
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>
64+
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>
76+
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>
89+
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>
102+
103+ const onlineParamsDialogue = web3.matchWith({
104+ Just: _ => <div />,
105+ Nothing: _ =>
106+ <React.Fragment>
107+ { nonceDialogue }
108+ { chainDialogue }
109+ </React.Fragment>
110+ })
111+
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>
122+
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+ })
135+
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>
147+
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>
157+
158+ const sendDialogue = web3.matchWith({
159+ Nothing: _ => '',
160+ Just: _ =>
27161 <React.Fragment>
162+ { confirmButton }
163+ { sendTxnButton }
164+ </React.Fragment>
165+ })
28166
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− }
167+ return (
168+ <React.Fragment>
169+ { generateTxnButton }
170+ { unsignedTxnDisplay }
171+
172+ { gasPriceDialogue }
173+ { gasLimitDialogue }
174+ { onlineParamsDialogue }
175+
176+ { signTxnButton }
177+
178+ { signedTxnDisplay }
179+ { sendDialogue }
171180 </React.Fragment>
172181 )
173182}
174183
175−
176−
177184export default StatelessTransaction