@@ -3,7 +3,8 @@ import React from 'react'
33
44import { Code, H3 } from './Base'
55import { Button } from './Base'
6−import { CheckboxButton, Input, InnerLabel } from './Base'
6+import { CheckboxButton, Input, InnerLabel,
7+ InnerLabelDropdown, DropdownItem } from './Base'
78import { Warning } from '../components/Base'
89
910import { addressFromSecp256k1Public } from '../lib/wallet'
@@ -28,10 +29,12 @@ class StatelessTransaction extends React.Component {
2829 showGasDetails: false,
2930 userApproval: false,
3031 chainId: '',
32+ chainDropdownOpen: false,
33+ customChain: false,
3134 nonce: '',
3235 stx: Nothing(),
3336 txn: Nothing(),
34− txError: Nothing(),
37+ txError: Nothing()
3538 }
3639
3740 this.createUnsignedTxn = this.createUnsignedTxn.bind(this)
@@ -46,6 +49,10 @@ class StatelessTransaction extends React.Component {
4649 this.setGasLimit = this.setGasLimit.bind(this)
4750 this.rangeChange = this.rangeChange.bind(this)
4851 this.toggleGasDetails = this.toggleGasDetails.bind(this)
52+ this.toggleChainDropdown = this.toggleChainDropdown.bind(this)
53+ this.closeChainDropdown = this.closeChainDropdown.bind(this)
54+ this.selectChain = this.selectChain.bind(this)
55+ this.openCustomChain = this.openCustomChain.bind(this)
4956 }
5057
5158 componentDidMount() {
@@ -106,6 +113,33 @@ class StatelessTransaction extends React.Component {
106113 })
107114 }
108115
116+ openCustomChain() {
117+ this.setState({
118+ chainDropdownOpen: false,
119+ customChain: true
120+ })
121+ }
122+
123+ toggleChainDropdown() {
124+ this.setState({
125+ chainDropdownOpen: !this.state.chainDropdownOpen
126+ })
127+ }
128+
129+ closeChainDropdown() {
130+ this.setState({
131+ chainDropdownOpen: false
132+ })
133+ }
134+
135+ selectChain(chainId) {
136+ this.setState({
137+ chainId,
138+ chainDropdownOpen: false,
139+ customChain: false
140+ })
141+ }
142+
109143 setUserApproval(){
110144 const {state} = this
111145 this.setState({ userApproval: !state.userApproval })
@@ -188,10 +222,11 @@ class StatelessTransaction extends React.Component {
188222 render() {
189223 const { web3, canGenerate } = this.props
190224 const { gasPrice, gasLimit, nonce, chainId,
191− txn, stx, userApproval, showGasDetails } = this.state
225+ txn, stx, userApproval, showGasDetails,
226+ customChain, chainDropdownOpen } = this.state
192227
193228 const { setNonce, setChainId, setGasLimit, setGasPrice, toggleGasDetails,
194− setUserApproval, sendTxn, createUnsignedTxn } = this
229+ setUserApproval, sendTxn, createUnsignedTxn, selectChain } = this
195230
196231 const { state } = this
197232
@@ -294,7 +329,7 @@ class StatelessTransaction extends React.Component {
294329
295330 const nonceDialogue =
296331 <Input
297− className={ 'mono mt-4' }
332+ className={ 'mono mt-4 mb-4' }
298333 prop-size={ 'md' }
299334 prop-format={ 'innerLabel' }
300335 value={ nonce }
@@ -305,18 +340,80 @@ class StatelessTransaction extends React.Component {
305340 </InnerLabel>
306341 </Input>
307342
343+ const chainDialogueTitle = customChain ? "Custom" : chainId
308344 const chainDialogue =
309− <Input
310− className={ 'mono mt-4 mb-8' }
311− prop-size={ 'md' }
312− prop-format={ 'innerLabel' }
313− value={ chainId }
314− onChange={ setChainId }
345+ <InnerLabelDropdown
346+ className={'mt-6'}
347+ handleToggle={this.toggleChainDropdown}
348+ handleClose={this.closeChainDropdown}
349+ fullWidth={true}
350+ isOpen={chainDropdownOpen}
351+ title={'Chain ID'}
352+ currentSelectionTitle={chainDialogueTitle}
315353 >
316− <InnerLabel>
317− { 'Chain ID' }
318− </InnerLabel>
319− </Input>
354+ <DropdownItem
355+ isSelected={ false }
356+ onClick={() => selectChain("1")}
357+ >
358+ { '1 - Mainnet' }
359+ </DropdownItem>
360+
361+ <DropdownItem
362+ isSelected={false}
363+ onClick={() => selectChain("2")}
364+ >
365+ {'2 - Morden'}
366+ </DropdownItem>
367+
368+ <DropdownItem
369+ isSelected={false}
370+ onClick={() => selectChain("3")}
371+ >
372+ {'3 - Ropsten'}
373+ </DropdownItem>
374+
375+ <DropdownItem
376+ isSelected={false}
377+ onClick={() => selectChain("4")}
378+ >
379+ {'4 - Goerli'}
380+ </DropdownItem>
381+
382+ <DropdownItem
383+ isSelected={false}
384+ onClick={() => selectChain("42")}
385+ >
386+ {'42 - Kovan'}
387+ </DropdownItem>
388+
389+ <DropdownItem
390+ isSelected={false}
391+ onClick={() => selectChain("1337")}
392+ >
393+ {'1337 - Geth private chains'}
394+ </DropdownItem>
395+
396+ <DropdownItem
397+ isSelected={false}
398+ onClick={this.openCustomChain}
399+ >
400+ {'Custom'}
401+ </DropdownItem>
402+
403+ </InnerLabelDropdown>
404+
405+ const customChainDialogue = !customChain ? null :
406+ <Input
407+ className={ 'mono mt-4 mb-8' }
408+ prop-size={ 'md' }
409+ prop-format={ 'innerLabel' }
410+ value={ chainId }
411+ onChange={ setChainId }
412+ >
413+ <InnerLabel>
414+ { 'Chain ID' }
415+ </InnerLabel>
416+ </Input>
320417
321418 const onlineParamsDialogue = web3.matchWith({
322419 Just: _ => <div />,
@@ -324,6 +421,7 @@ class StatelessTransaction extends React.Component {
324421 <React.Fragment>
325422 { nonceDialogue }
326423 { chainDialogue }
424+ { customChainDialogue }
327425 </React.Fragment>
328426 })
329427