565935b · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

- Add chain ID dropdown + custom chain ID input

565935bChris Johnson8 years ago

src/bridge/components/InnerLabelDropdown.js+9−7

compare with master

unifiedsplit

@@ -12,19 +12,21 @@ const InnerLabelDropdown = props => {

12 ? 'br-blue'

13 : 'br-gray-50';

15+ const fullWidthClass = props.fullWidth ? 'full-width' : ''

16+

15 return (

17 return (

16− <div className={'rel table'}>

18+ <div className={`rel table ${fullWidthClass}`}>

17− <div

19+ <div

18− className={`fix full o-0 ${menuVisibility}`}

20+ className={`fix full o-0 ${menuVisibility}`}

19− onClick={props.handleClose}

21+ onClick={props.handleClose}

20− />

22+ />

22 <button

24 <button

23− className={`h-10 mp-0 bg-white outline-blue sans ${props.className}`}

25+ className={`h-10 mp-0 bg-white outline-blue sans ${props.className} ${fullWidthClass}`}

24 onClick={props.handleToggle}

26 onClick={props.handleToggle}

25 disabled={props.disabled}>

27 disabled={props.disabled}>

26 <div className={'flex'}>

28 <div className={'flex'}>

27− <div className={`ph-4 flex-center-all b-2 br-0 b-solid h-10 ${selectedClasses}`}>

29+ <div className={`ph-4 flex-center-all b-2 br-0 b-solid h-10 ${selectedClasses} ${fullWidthClass}`}>

28 <div className={'text-400 mr-2'}>{props.title}</div>

30 <div className={'text-400 mr-2'}>{props.title}</div>

29 <div className={'text-600'}>{props.currentSelectionTitle}</div>

31 <div className={'text-600'}>{props.currentSelectionTitle}</div>

30 </div>

32 </div>

src/bridge/components/StatelessTransaction.js+113−15

@@ -3,7 +3,8 @@ import React from 'react'

4import { Code, H3 } from './Base'

5import { Button } from './Base'

6−import { CheckboxButton, Input, InnerLabel } from './Base'

6+import { CheckboxButton, Input, InnerLabel,

7+ InnerLabelDropdown, DropdownItem } from './Base'

7import { Warning } from '../components/Base'

8import { Warning } from '../components/Base'

9import { addressFromSecp256k1Public } from '../lib/wallet'

10import { addressFromSecp256k1Public } from '../lib/wallet'

@@ -28,10 +29,12 @@ class StatelessTransaction extends React.Component {

28 showGasDetails: false,

29 showGasDetails: false,

29 userApproval: false,

30 userApproval: false,

30 chainId: '',

31 chainId: '',

32+ chainDropdownOpen: false,

33+ customChain: false,

31 nonce: '',

34 nonce: '',

32 stx: Nothing(),

35 stx: Nothing(),

33 txn: Nothing(),

36 txn: Nothing(),

34− txError: Nothing(),

37+ txError: Nothing()

35 }

38 }

37 this.createUnsignedTxn = this.createUnsignedTxn.bind(this)

40 this.createUnsignedTxn = this.createUnsignedTxn.bind(this)

@@ -46,6 +49,10 @@ class StatelessTransaction extends React.Component {

46 this.setGasLimit = this.setGasLimit.bind(this)

49 this.setGasLimit = this.setGasLimit.bind(this)

47 this.rangeChange = this.rangeChange.bind(this)

50 this.rangeChange = this.rangeChange.bind(this)

48 this.toggleGasDetails = this.toggleGasDetails.bind(this)

51 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)

49 }

56 }

51 componentDidMount() {

58 componentDidMount() {

@@ -106,6 +113,33 @@ class StatelessTransaction extends React.Component {

106 })

113 })

107 }

114 }

108

115

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+

109 setUserApproval(){

143 setUserApproval(){

110 const {state} = this

144 const {state} = this

111 this.setState({ userApproval: !state.userApproval })

145 this.setState({ userApproval: !state.userApproval })

@@ -188,10 +222,11 @@ class StatelessTransaction extends React.Component {

188 render() {

222 render() {

189 const { web3, canGenerate } = this.props

223 const { web3, canGenerate } = this.props

190 const { gasPrice, gasLimit, nonce, chainId,

224 const { gasPrice, gasLimit, nonce, chainId,

191− txn, stx, userApproval, showGasDetails } = this.state

225+ txn, stx, userApproval, showGasDetails,

226+ customChain, chainDropdownOpen } = this.state

192

227

193 const { setNonce, setChainId, setGasLimit, setGasPrice, toggleGasDetails,

228 const { setNonce, setChainId, setGasLimit, setGasPrice, toggleGasDetails,

194− setUserApproval, sendTxn, createUnsignedTxn } = this

229+ setUserApproval, sendTxn, createUnsignedTxn, selectChain } = this

195

230

196 const { state } = this

231 const { state } = this

197

232

@@ -294,7 +329,7 @@ class StatelessTransaction extends React.Component {

294

329

295 const nonceDialogue =

330 const nonceDialogue =

296 <Input

331 <Input

297− className={ 'mono mt-4' }

332+ className={ 'mono mt-4 mb-4' }

298 prop-size={ 'md' }

333 prop-size={ 'md' }

299 prop-format={ 'innerLabel' }

334 prop-format={ 'innerLabel' }

300 value={ nonce }

335 value={ nonce }

@@ -305,18 +340,80 @@ class StatelessTransaction extends React.Component {

305 </InnerLabel>

340 </InnerLabel>

306 </Input>

341 </Input>

307

342

343+ const chainDialogueTitle = customChain ? "Custom" : chainId

308 const chainDialogue =

344 const chainDialogue =

309− <Input

345+ <InnerLabelDropdown

310− className={ 'mono mt-4 mb-8' }

346+ className={'mt-6'}

311− prop-size={ 'md' }

347+ handleToggle={this.toggleChainDropdown}

312− prop-format={ 'innerLabel' }

348+ handleClose={this.closeChainDropdown}

313− value={ chainId }

349+ fullWidth={true}

314− onChange={ setChainId }

350+ isOpen={chainDropdownOpen}

351+ title={'Chain ID'}

352+ currentSelectionTitle={chainDialogueTitle}

315 >

353 >

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+ >

316− <InnerLabel>

413+ <InnerLabel>

317− { 'Chain ID' }

414+ { 'Chain ID' }

318− </InnerLabel>

415+ </InnerLabel>

319− </Input>

416+ </Input>

320

417

321 const onlineParamsDialogue = web3.matchWith({

418 const onlineParamsDialogue = web3.matchWith({

322 Just: _ => <div />,

419 Just: _ => <div />,

@@ -324,6 +421,7 @@ class StatelessTransaction extends React.Component {

324 <React.Fragment>

421 <React.Fragment>

325 { nonceDialogue }

422 { nonceDialogue }

326 { chainDialogue }

423 { chainDialogue }

424+ { customChainDialogue }

327 </React.Fragment>

425 </React.Fragment>

328 })

426 })

329

427

src/bridge/style/extend.css+4

@@ -477,3 +477,7 @@ code {

477 padding: 1rem 2rem;

478 margin-bottom: 4rem;

479}

480+

481+.full-width {

482+ width: 100%;

483+}