@@ -49,10 +49,7 @@ class StatelessTransaction extends React.Component {
4949 this.setGasLimit = this.setGasLimit.bind(this)
5050 this.rangeChange = this.rangeChange.bind(this)
5151 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)
52+ this.handleChainUpdate = this.handleChainUpdate.bind(this)
5653 }
5754
5855 componentDidMount() {
@@ -113,31 +110,17 @@ class StatelessTransaction extends React.Component {
113110 })
114111 }
115112
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− })
113+ handleChainUpdate(chainId) {
114+ if (chainId === "custom") {
115+ this.setState({
116+ customChain: true
117+ })
118+ } else {
119+ this.setState({
120+ customChain: false,
121+ chainId
122+ })
123+ }
141124 }
142125
143126 setUserApproval(){
@@ -219,14 +202,54 @@ class StatelessTransaction extends React.Component {
219202 this.submit()
220203 }
221204
205+ getChainTitle(chainId) {
206+ let map = {
207+ "1": "Mainnet - 1",
208+ "2": "Morden - 2",
209+ "3": "Ropsten - 3",
210+ "4": "Goerli - 4",
211+ "42": "Kovan - 42",
212+ "1337": "Geth private chains - 1337",
213+ "custom": "Custom"
214+ }
215+
216+ return map[chainId]
217+ }
218+
219+ getChainOptions() {
220+ return [{
221+ title: this.getChainTitle("1"),
222+ value: "1"
223+ }, {
224+ title: this.getChainTitle("2"),
225+ value: "2"
226+ }, {
227+ title: this.getChainTitle("3"),
228+ value: "3"
229+ }, {
230+ title: this.getChainTitle("4"),
231+ value: "4"
232+ }, {
233+ title: this.getChainTitle("42"),
234+ value: "42"
235+ }, {
236+ title: this.getChainTitle("1337"),
237+ value: "1337"
238+ }, {
239+ title: this.getChainTitle("custom"),
240+ value: "custom"
241+ }]
242+ }
243+
222244 render() {
223245 const { web3, canGenerate } = this.props
224246 const { gasPrice, gasLimit, nonce, chainId,
225247 txn, stx, userApproval, showGasDetails,
226248 customChain, chainDropdownOpen } = this.state
227249
228− const { setNonce, setChainId, setGasLimit, setGasPrice, toggleGasDetails,
229− setUserApproval, sendTxn, createUnsignedTxn, selectChain } = this
250+ const { setNonce, setChainId, setGasLimit, setGasPrice,
251+ toggleGasDetails, setUserApproval, sendTxn, createUnsignedTxn,
252+ selectChain, handleChainUpdate } = this
230253
231254 const { state } = this
232255
@@ -234,6 +257,8 @@ class StatelessTransaction extends React.Component {
234257 const canApprove = Just.hasInstance(stx)
235258 const canSend = Just.hasInstance(stx) && userApproval === true
236259
260+ const chainOptions = this.getChainOptions()
261+
237262 const generateButtonColor =
238263 Nothing.hasInstance(txn)
239264 ? 'blue'
@@ -340,66 +365,16 @@ class StatelessTransaction extends React.Component {
340365 </InnerLabel>
341366 </Input>
342367
343− const chainDialogueTitle = customChain ? "Custom" : chainId
368+ const chainDialogueTitle = customChain ? "Custom" : this.getChainTitle(chainId)
344369 const chainDialogue =
345370 <InnerLabelDropdown
346371 className={'mt-6'}
347− handleToggle={this.toggleChainDropdown}
348− handleClose={this.closeChainDropdown}
349372 fullWidth={true}
350− isOpen={chainDropdownOpen}
351373 title={'Chain ID'}
374+ options={chainOptions}
375+ handleUpdate={handleChainUpdate}
352376 currentSelectionTitle={chainDialogueTitle}
353377 >
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−
403378 </InnerLabelDropdown>
404379
405380 const customChainDialogue = !customChain ? null :