36b05fc · bridge · git.iko.soy

src/views/AcceptTransfer.js+1−4

compare with master

unifiedsplit

@@ -1,6 +1,6 @@

1import Maybe from 'folktale/maybe'

2import React from 'react'

3−import { Row, Col, H1, H3, P, Form, Warning } from '../components/Base'

3+import { Row, Col, H1, H3, P, Warning } from '../components/Base'

4import { InnerLabel, AddressInput, ShowBlockie, Anchor } from '../components/Base'

5import * as azimuth from 'azimuth-js'

6import * as ob from 'urbit-ob'

@@ -277,7 +277,6 @@ class AcceptTransfer extends React.Component {

277 "as. But you can transfer to any address you like."

278 }

279 </P>

280− <Form>

281 <AddressInput

280 <AddressInput

282 className='mono mt-8'

281 className='mono mt-8'

283 prop-size='lg'

282 prop-size='lg'

@@ -329,8 +328,6 @@ class AcceptTransfer extends React.Component {

329 setGasLimit={this.handleSetGasLimit}

328 setGasLimit={this.handleSetGasLimit}

330 handleSubmit={this.handleSubmit} />

329 handleSubmit={this.handleSubmit} />

331

330

332− </Form>

333−

334 {

331 {

335 Maybe.Nothing.hasInstance(state.txError)

332 Maybe.Nothing.hasInstance(state.txError)

336 ? ''

333 ? ''

src/views/CancelTransfer.js+46−48

@@ -1,6 +1,6 @@

1import Maybe from 'folktale/maybe'

2import React from 'react'

3−import { Row, Col, H1, P, Form, Warning, H3 } from '../components/Base'

3+import { Row, Col, H1, P, Warning, H3 } from '../components/Base'

4import * as azimuth from 'azimuth-js'

5import * as ob from 'urbit-ob'

6

@@ -227,53 +227,51 @@ class CancelTransfer extends React.Component {

227 `This action will cancel the transfer to ${proxy}.`

228 }

229 </P>

230− <Form>

231− <StatelessTransaction

230+ <StatelessTransaction

232− // Upper scope

231+ // Upper scope

233− web3={props.web3}

232+ web3={props.web3}

234− contracts={props.contracts}

233+ contracts={props.contracts}

235− wallet={props.wallet}

234+ wallet={props.wallet}

236− walletType={props.walletType}

235+ walletType={props.walletType}

237− walletHdPath={props.walletHdPath}

236+ walletHdPath={props.walletHdPath}

238− // Tx

237+ // Tx

239− txn={state.txn}

238+ txn={state.txn}

240− stx={state.stx}

239+ stx={state.stx}

241− // Tx details

240+ // Tx details

242− nonce={state.nonce}

241+ nonce={state.nonce}

243− gasPrice={state.gasPrice}

242+ gasPrice={state.gasPrice}

244− chainId={state.chainId}

243+ chainId={state.chainId}

245− gasLimit={state.gasLimit}

244+ gasLimit={state.gasLimit}

246− // Checks

245+ // Checks

247− userApproval={state.userApproval}

246+ userApproval={state.userApproval}

248− canGenerate={ canGenerate }

247+ canGenerate={ canGenerate }

249− canSign={ canSign }

248+ canSign={ canSign }

250− canApprove={ canApprove }

249+ canApprove={ canApprove }

251− canSend={ canSend }

250+ canSend={ canSend }

252− // Methods

251+ // Methods

253− createUnsignedTxn={this.handleCreateUnsignedTxn}

252+ createUnsignedTxn={this.handleCreateUnsignedTxn}

254− setUserApproval={this.handleSetUserApproval}

253+ setUserApproval={this.handleSetUserApproval}

255− setTxn={this.handleSetTxn}

254+ setTxn={this.handleSetTxn}

256− setStx={this.handleSetStx}

255+ setStx={this.handleSetStx}

257− setNonce={this.handleSetNonce}

256+ setNonce={this.handleSetNonce}

258− setChainId={this.handleSetChainId}

257+ setChainId={this.handleSetChainId}

259− setGasPrice={this.handleSetGasPrice}

258+ setGasPrice={this.handleSetGasPrice}

260− setGasLimit={this.handleSetGasLimit}

259+ setGasLimit={this.handleSetGasLimit}

261− handleSubmit={this.handleSubmit} />

260+ handleSubmit={this.handleSubmit} />

262−

261+

263− {

262+ {

264− Maybe.Nothing.hasInstance(state.txError)

263+ Maybe.Nothing.hasInstance(state.txError)

265− ? ''

264+ ? ''

266− : <Warning className={'mt-8'}>

265+ : <Warning className={'mt-8'}>

267− <H3 style={{marginTop: 0, paddingTop: 0}}>

266+ <H3 style={{marginTop: 0, paddingTop: 0}}>

268− {

267+ {

269− 'There was an error sending your transaction.'

268+ 'There was an error sending your transaction.'

270− }

269+ }

271− </H3>

270+ </H3>

272− { state.txError.value }

271+ { state.txError.value }

273− </Warning>

272+ </Warning>

274− }

273+ }

275−

274+

276− </Form>

277 </Col>

275 </Col>

278 </Row>

276 </Row>

279 )

277 )

src/views/CreateGalaxy.js+84−87

@@ -5,7 +5,7 @@ import * as ob from 'urbit-ob'

5

6import { Button, } from '../components/Base'

7import { Row, Col, H1, P, Anchor } from '../components/Base'

8−import { InnerLabel, GalaxyInput, AddressInput, ValidatedSigil, ShowBlockie, Form } from '../components/Base'

8+import { InnerLabel, GalaxyInput, AddressInput, ValidatedSigil, ShowBlockie } from '../components/Base'

9import StatelessTransaction from '../components/StatelessTransaction'

10

11import { BRIDGE_ERROR } from '../lib/error'

@@ -192,93 +192,90 @@ class CreateGalaxy extends React.Component {

192 }

193 </P>

194

195− <Form>

196−

197− <GalaxyInput

195+ <GalaxyInput

198− className='mono'

196+ className='mono'

199− prop-size='lg'

197+ prop-size='lg'

200− prop-format='innerLabel'

198+ prop-format='innerLabel'

201− autoFocus

199+ autoFocus

202− placeholder='e.g. ~zod'

200+ placeholder='e.g. ~zod'

203− value={state.galaxyName}

201+ value={state.galaxyName}

204− onChange={v => this.handleGalaxyNameInput(v)}>

202+ onChange={v => this.handleGalaxyNameInput(v)}>

205− <InnerLabel>{ 'Galaxy Name' }</InnerLabel>

203+ <InnerLabel>{ 'Galaxy Name' }</InnerLabel>

206− <ValidatedSigil

204+ <ValidatedSigil

207− className='tr-0 mt-05 mr-0 abs'

205+ className='tr-0 mt-05 mr-0 abs'

208− patp={state.galaxyName}

206+ patp={state.galaxyName}

209− size={76}

207+ size={76}

210− margin={8} />

208+ margin={8} />

211− </GalaxyInput>

209+ </GalaxyInput>

212−

210+

213− <AddressInput

211+ <AddressInput

214− className='mono mt-8'

212+ className='mono mt-8'

215− prop-size='lg'

213+ prop-size='lg'

216− prop-format='innerLabel'

214+ prop-format='innerLabel'

217− value={ state.galaxyOwner }

215+ value={ state.galaxyOwner }

218− onChange={ v => this.handleAddressInput(v) }>

216+ onChange={ v => this.handleAddressInput(v) }>

219− <InnerLabel>

217+ <InnerLabel>

220− { 'Address that will own this galaxy' }

218+ { 'Address that will own this galaxy' }

221− </InnerLabel>

219+ </InnerLabel>

222− <ShowBlockie

220+ <ShowBlockie

223− className={'mt-1'}

224− address={state.galaxyOwner} />

225− </AddressInput>

226−

227− <Anchor

228 className={'mt-1'}

221 className={'mt-1'}

222+ address={state.galaxyOwner} />

223+ </AddressInput>

224+

225+ <Anchor

226+ className={'mt-1'}

229− prop-size={'sm'}

227+ prop-size={'sm'}

230− prop-disabled={!validAddress}

228+ prop-disabled={!validAddress}

231− target={'_blank'}

229+ target={'_blank'}

232− href={`https://etherscan.io/address/${state.galaxyOwner}`}>

230+ href={`https://etherscan.io/address/${state.galaxyOwner}`}>

233− {'View on Etherscan ↗'}

231+ {'View on Etherscan ↗'}

234− </Anchor>

232+ </Anchor>

235−

233+

236− <Button

234+ <Button

237− prop-size='lg wide'

235+ prop-size='lg wide'

238− className='mt-8'

236+ className='mt-8'

239− prop-color={buttonTriState(state.isAvailable)}

237+ prop-color={buttonTriState(state.isAvailable)}

240− disabled={!validGalaxy}

238+ disabled={!validGalaxy}

241− onClick={() => this.confirmAvailability()}>

239+ onClick={() => this.confirmAvailability()}>

242− {buttonTriStateText(state.isAvailable)}

240+ {buttonTriStateText(state.isAvailable)}

243− </Button>

241+ </Button>

244−

242+

245− <StatelessTransaction

243+ <StatelessTransaction

246− address={state.galaxyOwner}

244+ address={state.galaxyOwner}

247− shipName={state.galaxyName}

245+ shipName={state.galaxyName}

248− isAvailable={state.isAvailable}

246+ isAvailable={state.isAvailable}

249− web3={props.web3}

247+ web3={props.web3}

250− contracts={props.contracts}

248+ contracts={props.contracts}

251− wallet={props.wallet}

249+ wallet={props.wallet}

252− walletType={props.walletType}

250+ walletType={props.walletType}

253− walletHdPath={props.walletHdPath}

251+ walletHdPath={props.walletHdPath}

254− // Tx

252+ // Tx

255− txApproval={state.txApproval}

253+ txApproval={state.txApproval}

256− txn={state.txn}

254+ txn={state.txn}

257− stx={state.stx}

255+ stx={state.stx}

258− nonce={state.nonce}

256+ nonce={state.nonce}

259− gasPrice={state.gasPrice}

257+ gasPrice={state.gasPrice}

260− chainId={state.chainId}

258+ chainId={state.chainId}

261− gasLimit={state.gasLimit}

259+ gasLimit={state.gasLimit}

262− canGenerate={

260+ canGenerate={

263− validAddress === true &&

261+ validAddress === true &&

264− validGalaxy === true &&

262+ validGalaxy === true &&

265− state.isAvailable === true

263+ state.isAvailable === true

266− }

264+ }

267− canSign={!Maybe.Nothing.hasInstance(state.txn)}

265+ canSign={!Maybe.Nothing.hasInstance(state.txn)}

268− canSend={!Maybe.Nothing.hasInstance(state.stx)}

266+ canSend={!Maybe.Nothing.hasInstance(state.stx)}

269− // Methods

267+ // Methods

270− createUnsignedTxn={() => this.createUnsignedTxn()}

268+ createUnsignedTxn={() => this.createUnsignedTxn()}

271− clearTransaction={() => this.clearTransaction()}

269+ clearTransaction={() => this.clearTransaction()}

272− setApproval={() => this.setState({txApproval: !state.txApproval})}

270+ setApproval={() => this.setState({txApproval: !state.txApproval})}

273− setTxn={txn => this.setState({txn})}

271+ setTxn={txn => this.setState({txn})}

274− setStx={stx => this.setState({stx})}

272+ setStx={stx => this.setState({stx})}

275− setNonce={nonce => this.setState({nonce})}

273+ setNonce={nonce => this.setState({nonce})}

276− setChainId={chainId => this.setState({chainId})}

274+ setChainId={chainId => this.setState({chainId})}

277− setGasPrice={gasPrice => this.setState({gasPrice})}

275+ setGasPrice={gasPrice => this.setState({gasPrice})}

278− setGasLimit={gasLimit => this.setState({gasLimit})}

276+ setGasLimit={gasLimit => this.setState({gasLimit})}

279− handleSubmit={this.handleSubmit} />

277+ handleSubmit={this.handleSubmit} />

280−

278+

281− </Form>

282 </Col>

279 </Col>

283 </Row>

280 </Row>

284 )

281 )

src/views/GenKeyfile.js+23−25

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

3import { Button } from '../components/Base'

4import { RequiredInput, InnerLabel } from '../components/Base'

5import { Row, Col, H1, P } from '../components/Base'

6−import { Form, Code } from '../components/Base'

6+import { Code } from '../components/Base'

7

8import * as ob from 'urbit-ob'

9import * as kg from '../../node_modules/urbit-key-generation/dist/index'

@@ -124,32 +124,30 @@ class GenKeyfile extends React.Component {

124 }

125 </P>

126

127− <Form>

128− <RequiredInput

127+ <RequiredInput

129− className='mono'

128+ className='mono'

130− prop-size='lg'

129+ prop-size='lg'

131− prop-format='innerLabel'

130+ prop-format='innerLabel'

132− autoFocus

131+ autoFocus

133− value={ networkSeed }

132+ value={ networkSeed }

134− onChange={ this.handleNetworkSeedInput }>

133+ onChange={ this.handleNetworkSeedInput }>

135− <InnerLabel>{ 'Network seed' }</InnerLabel>

134+ <InnerLabel>{ 'Network seed' }</InnerLabel>

136− </RequiredInput>

135+ </RequiredInput>

137−

136+

138− <Button

137+ <Button

139− className={'mt-8'}

138+ className={'mt-8'}

140− color={'blue'}

139+ color={'blue'}

141− onClick={

140+ onClick={

142− () => {

141+ () => {

143− if (hexRegExp.test(networkSeed)) {

142+ if (hexRegExp.test(networkSeed)) {

144− const keyfile = genKey(networkSeed, point, revision)

143+ const keyfile = genKey(networkSeed, point, revision)

145− this.setState({ keyfile })

144+ this.setState({ keyfile })

146− }

147 }

145 }

148 }

146 }

147+ }

149− >

148+ >

150− { 'Generate →' }

149+ { 'Generate →' }

151− </Button>

150+ </Button>

152− </Form>

153

151

154 <Code>

152 <Code>

155 { keyfile }

153 { keyfile }

src/views/IssueChild.js+82−85

@@ -5,7 +5,7 @@ import * as ob from 'urbit-ob'

5

6import { Row, Col, H1, H3, P, Anchor, Warning } from '../components/Base'

7import { Button, ShowBlockie, ValidatedSigil } from '../components/Base'

8−import { PointInput, AddressInput, Form, InnerLabel } from '../components/Base'

8+import { PointInput, AddressInput, InnerLabel } from '../components/Base'

9

10import StatelessTransaction from '../components/StatelessTransaction'

11

@@ -402,92 +402,89 @@ class IssueChild extends React.Component {

402 { '.' }

403 </P>

404

405− <Form>

406− <PointInput

405+ <PointInput

407− prop-size='lg'

406+ prop-size='lg'

408− prop-format='innerLabel'

407+ prop-format='innerLabel'

409− className={'mono mt-8'}

408+ className={'mono mt-8'}

410− placeholder={ `e.g. ${state.suggestions[3]}` }

409+ placeholder={ `e.g. ${state.suggestions[3]}` }

411− value={ state.desiredPoint }

410+ value={ state.desiredPoint }

412− onChange={ this.handlePointInput }>

411+ onChange={ this.handlePointInput }>

413− <InnerLabel>{ 'Point to Issue' }</InnerLabel>

412+ <InnerLabel>{ 'Point to Issue' }</InnerLabel>

414− <ValidatedSigil

413+ <ValidatedSigil

415− className={'tr-0 mt-05 mr-0 abs'}

414+ className={'tr-0 mt-05 mr-0 abs'}

416− patp={state.desiredPoint}

415+ patp={state.desiredPoint}

417− size={76}

416+ size={76}

418− margin={8}

417+ margin={8}

419− validator={() => this.validatePoint(state.desiredPoint)} />

418+ validator={() => this.validatePoint(state.desiredPoint)} />

420− </PointInput>

419+ </PointInput>

421−

420+

422− <AddressInput

421+ <AddressInput

423− className='text-mono mt-8'

422+ className='text-mono mt-8'

424− prop-size='lg'

423+ prop-size='lg'

425− prop-format='innerLabel'

424+ prop-format='innerLabel'

426− placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }

425+ placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }

427− value={ state.receivingAddress }

426+ value={ state.receivingAddress }

428− disabled={ !state.available }

427+ disabled={ !state.available }

429− onChange={ v => this.handleAddressInput(v) }>

428+ onChange={ v => this.handleAddressInput(v) }>

430− <InnerLabel>{ 'Receiving Address' }</InnerLabel>

429+ <InnerLabel>{ 'Receiving Address' }</InnerLabel>

431− <ShowBlockie className={'mt-1'} address={state.receivingAddress} />

430+ <ShowBlockie className={'mt-1'} address={state.receivingAddress} />

432− </AddressInput>

431+ </AddressInput>

433−

432+

434− <Anchor

433+ <Anchor

435− className={'mt-1'}

434+ className={'mt-1'}

436− prop-size={'sm'}

435+ prop-size={'sm'}

437− prop-disabled={!isValidAddress(state.receivingAddress)}

436+ prop-disabled={!isValidAddress(state.receivingAddress)}

438− target={'_blank'}

437+ target={'_blank'}

439− href={`https://etherscan.io/address/${state.receivingAddress}`}>

438+ href={`https://etherscan.io/address/${state.receivingAddress}`}>

440− {'View on Etherscan ↗'}

439+ {'View on Etherscan ↗'}

441− </Anchor>

440+ </Anchor>

442

441

443− {

442+ {

444− props.web3.matchWith({

443+ props.web3.matchWith({

445− Nothing: _ => <div />,

444+ Nothing: _ => <div />,

446− Just: _ =>

445+ Just: _ =>

447− <Button

446+ <Button

448− prop-size='lg wide'

447+ prop-size='lg wide'

449− prop-color={this.buttonTriState()}

448+ prop-color={this.buttonTriState()}

450− className={'mt-8'}

449+ className={'mt-8'}

451− disabled={!validPoint}

450+ disabled={!validPoint}

452− onClick={this.handleConfirmAvailability}>

451+ onClick={this.handleConfirmAvailability}>

453− {this.buttonTriStateText()}

452+ {this.buttonTriStateText()}

454− </Button>

453+ </Button>

455− })

454+ })

456− }

455+ }

457

456

458− <StatelessTransaction

457+ <StatelessTransaction

459− // Upper scope

458+ // Upper scope

460− web3={props.web3}

459+ web3={props.web3}

461− contracts={props.contracts}

460+ contracts={props.contracts}

462− wallet={props.wallet}

461+ wallet={props.wallet}

463− walletType={props.walletType}

462+ walletType={props.walletType}

464− walletHdPath={props.walletHdPath}

463+ walletHdPath={props.walletHdPath}

465− // Tx

464+ // Tx

466− txn={state.txn}

465+ txn={state.txn}

467− stx={state.stx}

466+ stx={state.stx}

468− // Tx details

467+ // Tx details

469− nonce={state.nonce}

468+ nonce={state.nonce}

470− gasPrice={state.gasPrice}

469+ gasPrice={state.gasPrice}

471− chainId={state.chainId}

470+ chainId={state.chainId}

472− gasLimit={state.gasLimit}

471+ gasLimit={state.gasLimit}

473− // Checks

472+ // Checks

474− userApproval={state.userApproval}

473+ userApproval={state.userApproval}

475− canGenerate={ canGenerate }

474+ canGenerate={ canGenerate }

476− canSign={ canSign }

475+ canSign={ canSign }

477− canApprove={ canApprove }

476+ canApprove={ canApprove }

478− canSend={ canSend }

477+ canSend={ canSend }

479− // Methods

478+ // Methods

480− createUnsignedTxn={this.handleCreateUnsignedTxn}

479+ createUnsignedTxn={this.handleCreateUnsignedTxn}

481− setUserApproval={this.handleSetUserApproval}

480+ setUserApproval={this.handleSetUserApproval}

482− setTxn={this.handleSetTxn}

481+ setTxn={this.handleSetTxn}

483− setStx={this.handleSetStx}

482+ setStx={this.handleSetStx}

484− setNonce={this.handleSetNonce}

483+ setNonce={this.handleSetNonce}

485− setChainId={this.handleSetChainId}

484+ setChainId={this.handleSetChainId}

486− setGasPrice={this.handleSetGasPrice}

485+ setGasPrice={this.handleSetGasPrice}

487− setGasLimit={this.handleSetGasLimit}

486+ setGasLimit={this.handleSetGasLimit}

488− handleSubmit={this.handleSubmit} />

487+ handleSubmit={this.handleSubmit} />

489−

490− </Form>

491

488

492 {

489 {

493 Maybe.Nothing.hasInstance(state.txError)

490 Maybe.Nothing.hasInstance(state.txError)

src/views/Keystore.js+49−51

@@ -4,7 +4,7 @@ import React from 'react'

4import * as keythereum from 'keythereum'

5import { Button, UploadButton } from '../components/Base'

6import { Input, InnerLabel, InputCaption } from '../components/Base'

7−import { Row, Col, H1, H3, Form, Warning } from '../components/Base'

7+import { Row, Col, H1, H3, Warning } from '../components/Base'

8

9import { BRIDGE_ERROR } from '../lib/error'

10import { ROUTE_NAMES } from '../lib/router'

@@ -107,58 +107,56 @@ class Keystore extends React.Component {

107 <Row>

108 <Col className={'measure-md'}>

109 <H1 className={'mb-4'}>{ 'Upload Your Keystore File' }</H1>

110− <Form>

111− <InputCaption>

110+ <InputCaption>

112− { `Please upload your Ethereum keystore file. If your keystore

111+ { `Please upload your Ethereum keystore file. If your keystore

113− file is encrypted with a password, you'll also need to enter

112+ file is encrypted with a password, you'll also need to enter

114− that below.` }

113+ that below.` }

115− </InputCaption>

114+ </InputCaption>

116−

115+

117− <UploadButton

116+ <UploadButton

118− className={ `btn ${uploadButtonClass} mt-10` }

117+ className={ `btn ${uploadButtonClass} mt-10` }

119− onChange={ this.handleKeystoreUpload }

118+ onChange={ this.handleKeystoreUpload }

120− >

119+ >

121− <div className={'flex-center-all fs-4 h-11 pointer'}>{ 'Upload Keystore file' }</div>

120+ <div className={'flex-center-all fs-4 h-11 pointer'}>{ 'Upload Keystore file' }</div>

122− </UploadButton>

121+ </UploadButton>

123−

122+

124− <Input

123+ <Input

125− className='pt-8 mt-8'

124+ className='pt-8 mt-8'

126− prop-size='md'

125+ prop-size='md'

127− prop-format='innerLabel'

126+ prop-format='innerLabel'

128− type='password'

127+ type='password'

129− name='password'

128+ name='password'

130− onChange={ this.handlePasswordInput }

129+ onChange={ this.handlePasswordInput }

131− value={ password }

130+ value={ password }

132− autocomplete='off'

131+ autocomplete='off'

133− autoFocus>

132+ autoFocus>

134− <InnerLabel>{'Password'}</InnerLabel>

133+ <InnerLabel>{'Password'}</InnerLabel>

135− </Input>

134+ </Input>

136−

135+

137− <Button

136+ <Button

138− className={` mt-10`}

137+ className={` mt-10`}

139− prop-size={ 'wide lg' }

138+ prop-size={ 'wide lg' }

140− disabled={ Nothing.hasInstance(keystore) }

139+ disabled={ Nothing.hasInstance(keystore) }

141− onClick={ this.constructWallet }

140+ onClick={ this.constructWallet }

142− >

141+ >

143− { 'Decrypt' }

142+ { 'Decrypt' }

144− </Button>

143+ </Button>

145−

144+

146− { decryptMessage }

145+ { decryptMessage }

147−

146+

148− <Button

147+ <Button

149− className={'mt-10'}

148+ className={'mt-10'}

150− prop-size={ 'wide lg' }

149+ prop-size={ 'wide lg' }

151− disabled={ Nothing.hasInstance(wallet) }

150+ disabled={ Nothing.hasInstance(wallet) }

152− onClick={ () => {

151+ onClick={ () => {

153− popRoute()

152+ popRoute()

154− pushRoute(ROUTE_NAMES.SHIPS)

153+ pushRoute(ROUTE_NAMES.SHIPS)

155− }

156 }

154 }

155+ }

157− >

156+ >

158− { 'Continue →' }

157+ { 'Continue →' }

159− </Button>

158+ </Button>

160

159

161− </Form>

162 </Col>

160 </Col>

163 </Row>

161 </Row>

164

162

src/views/Ledger.js+31−33

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

3import Maybe from 'folktale/maybe'

4import { Button } from '../components/Base'

5import { Row, Col, H1, P, H2 } from '../components/Base'

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

6+import { Input, InnerLabel } from '../components/Base'

7import Transport from '@ledgerhq/hw-transport-u2f'

8import Eth from '@ledgerhq/hw-app-eth'

9import * as secp256k1 from 'secp256k1'

@@ -99,38 +99,36 @@ class Ledger extends React.Component {

99 <li className={'mt-4'}>{'Run '}<code>{'python bridge-https.py'}</code></li>

100 </ol>

101

102− <Form>

103− <Input

102+ <Input

104− className='pt-8 mt-8'

103+ className='pt-8 mt-8'

105− prop-size='md'

104+ prop-size='md'

106− prop-format='innerLabel'

105+ prop-format='innerLabel'

107− name='hdpath'

106+ name='hdpath'

108− value={ addHdPrefix(hdpath) }

107+ value={ addHdPrefix(hdpath) }

109− autocomplete='off'

108+ autocomplete='off'

110− onChange={ this.handleHdPathInput }>

109+ onChange={ this.handleHdPathInput }>

111− <InnerLabel>{'HD Path'}</InnerLabel>

110+ <InnerLabel>{'HD Path'}</InnerLabel>

112− </Input>

111+ </Input>

113−

112+

114− <Button

113+ <Button

115− prop-size={'wide lg'}

114+ prop-size={'wide lg'}

116− className={'mt-8'}

115+ className={'mt-8'}

117− onClick={ this.pollDevice }>

116+ onClick={ this.pollDevice }>

118− { 'Authenticate →' }

117+ { 'Authenticate →' }

119− </Button>

118+ </Button>

120−

119+

121− <Button

120+ <Button

122− className={'mt-8'}

121+ className={'mt-8'}

123− prop-size={'wide lg'}

122+ prop-size={'wide lg'}

124− disabled={ Maybe.Nothing.hasInstance(wallet) }

123+ disabled={ Maybe.Nothing.hasInstance(wallet) }

125− onClick={

124+ onClick={

126− () => {

125+ () => {

127− popRoute()

126+ popRoute()

128− pushRoute(ROUTE_NAMES.SHIPS)

127+ pushRoute(ROUTE_NAMES.SHIPS)

129− }

128+ }

130− }>

129+ }>

131− { 'Continue →' }

130+ { 'Continue →' }

132− </Button>

131+ </Button>

133− </Form>

134

132

135 </Col>

133 </Col>

136 </Row>

134 </Row>

src/views/Mnemonic.js+1−3

@@ -3,7 +3,7 @@ import Maybe from 'folktale/maybe'

3import React from 'react'

4import { Button } from '../components/Base'

5import { Input, MnemonicInput, InnerLabel, InputCaption } from '../components/Base'

6−import { Row, Col, H1, Form } from '../components/Base'

6+import { Row, Col, H1 } from '../components/Base'

7

8import { ROUTE_NAMES } from '../lib/router'

9import { DEFAULT_HD_PATH, walletFromMnemonic } from '../lib/wallet'

@@ -78,7 +78,6 @@ class Mnemonic extends React.Component {

78 <Row>

79 <Col>

80 <H1 className={'mb-4'}>{ 'Enter Your Mnemonic' }</H1>

81− <Form>

82 <InputCaption>

81 <InputCaption>

83 { "Please enter your BIP39 mnemonic here." }

82 { "Please enter your BIP39 mnemonic here." }

84 </InputCaption>

83 </InputCaption>

@@ -124,7 +123,6 @@ class Mnemonic extends React.Component {

124 >

123 >

125 { 'Continue →' }

124 { 'Continue →' }

126 </Button>

125 </Button>

127− </Form>

128 </Col>

126 </Col>

129 </Row>

127 </Row>

130

128

src/views/PrivateKey.js+2−4

@@ -2,7 +2,7 @@ import Maybe from 'folktale/maybe'

2import React from 'react'

3import { Button } from '../components/Base'

4import { RequiredInput, InnerLabel, InputCaption } from '../components/Base'

5−import { Row, Col, H1, Form } from '../components/Base'

5+import { Row, Col, H1 } from '../components/Base'

6

7import { ROUTE_NAMES } from '../lib/router'

8import { EthereumWallet } from '../lib/wallet'

@@ -45,7 +45,6 @@ class PrivateKey extends React.Component {

45 <Row>

46 <Col className={'measure-md'}>

47 <H1 className={'mb-4'}>{ 'Enter Your Private Key' }</H1>

48− <Form>

49 <InputCaption>

48 <InputCaption>

50 { `Please enter your raw Ethereum private key here.` }

49 { `Please enter your raw Ethereum private key here.` }

51 </InputCaption>

50 </InputCaption>

@@ -54,7 +53,7 @@ class PrivateKey extends React.Component {

54 className='pt-8 mt-8'

53 className='pt-8 mt-8'

55 prop-size='md'

54 prop-size='md'

56 prop-format='innerLabel'

55 prop-format='innerLabel'

57− type='text'

56+ type='password'

58 name='privateKey'

57 name='privateKey'

59 onChange={ this.handlePrivateKeyInput }

58 onChange={ this.handlePrivateKeyInput }

60 value={ privateKey }

59 value={ privateKey }

@@ -75,7 +74,6 @@ class PrivateKey extends React.Component {

75 >

74 >

76 { 'Continue →' }

75 { 'Continue →' }

77 </Button>

76 </Button>

78− </Form>

79 </Col>

77 </Col>

80 </Row>

78 </Row>

81

79

src/views/SetKeys.js+54−57

@@ -2,7 +2,7 @@ import React from 'react'

2import Maybe from 'folktale/maybe'

3import * as azimuth from 'azimuth-js'

4import * as ob from 'urbit-ob'

5−import { Row, Col, H1, P, Warning, Form, H3 } from '../components/Base'

5+import { Row, Col, H1, P, Warning, H3 } from '../components/Base'

6import { RequiredInput, InnerLabel } from '../components/Base'

7

8import StatelessTransaction from '../components/StatelessTransaction'

@@ -313,62 +313,59 @@ class SetKeys extends React.Component {

313 </Warning>

314 : <div /> }

315

316− <Form>

317− <RequiredInput

316+ <RequiredInput

318− className='mono'

317+ className='mono'

319− prop-size='lg'

318+ prop-size='lg'

320− prop-format='innerLabel'

319+ prop-format='innerLabel'

321− autoFocus

320+ autoFocus

322− value={ state.networkSeed }

321+ value={ state.networkSeed }

323− onChange={ this.handleNetworkSeedInput }>

322+ onChange={ this.handleNetworkSeedInput }>

324− <InnerLabel>{ 'Network seed' }</InnerLabel>

323+ <InnerLabel>{ 'Network seed' }</InnerLabel>

325− </RequiredInput>

324+ </RequiredInput>

326−

325+

327− <StatelessTransaction

326+ <StatelessTransaction

328− // Upper scope

327+ // Upper scope

329− web3={props.web3}

328+ web3={props.web3}

330− contracts={props.contracts}

329+ contracts={props.contracts}

331− wallet={props.wallet}

330+ wallet={props.wallet}

332− walletType={props.walletType}

331+ walletType={props.walletType}

333− // Tx

332+ // Tx

334− txn={state.txn}

333+ txn={state.txn}

335− stx={state.stx}

334+ stx={state.stx}

336− // Tx details

335+ // Tx details

337− nonce={state.nonce}

336+ nonce={state.nonce}

338− gasPrice={state.gasPrice}

337+ gasPrice={state.gasPrice}

339− chainId={state.chainId}

338+ chainId={state.chainId}

340− gasLimit={state.gasLimit}

339+ gasLimit={state.gasLimit}

341− // Checks

340+ // Checks

342− userApproval={state.userApproval}

341+ userApproval={state.userApproval}

343− canGenerate={ canGenerate }

342+ canGenerate={ canGenerate }

344− canSign={ canSign }

343+ canSign={ canSign }

345− canApprove={ canApprove }

344+ canApprove={ canApprove }

346− canSend={ canSend }

345+ canSend={ canSend }

347− // Methods

346+ // Methods

348− createUnsignedTxn={this.handleCreateUnsignedTxn}

347+ createUnsignedTxn={this.handleCreateUnsignedTxn}

349− setUserApproval={this.handleSetUserApproval}

348+ setUserApproval={this.handleSetUserApproval}

350− setTxn={this.handleSetTxn}

349+ setTxn={this.handleSetTxn}

351− setStx={this.handleSetStx}

350+ setStx={this.handleSetStx}

352− setNonce={this.handleSetNonce}

351+ setNonce={this.handleSetNonce}

353− setChainId={this.handleSetChainId}

352+ setChainId={this.handleSetChainId}

354− setGasPrice={this.handleSetGasPrice}

353+ setGasPrice={this.handleSetGasPrice}

355− setGasLimit={this.handleSetGasLimit}

354+ setGasLimit={this.handleSetGasLimit}

356− handleSubmit={this.handleSubmit} />

355+ handleSubmit={this.handleSubmit} />

357−

356+

358− {

357+ {

359− Maybe.Nothing.hasInstance(state.txError)

358+ Maybe.Nothing.hasInstance(state.txError)

360− ? ''

359+ ? ''

361− : <Warning className={'mt-8'}>

360+ : <Warning className={'mt-8'}>

362− <H3 style={{marginTop: 0, paddingTop: 0}}>

361+ <H3 style={{marginTop: 0, paddingTop: 0}}>

363− {

362+ {

364− 'There was an error sending your transaction.'

363+ 'There was an error sending your transaction.'

365− }

364+ }

366− </H3>

365+ </H3>

367− { state.txError.value }

366+ { state.txError.value }

368− </Warning>

367+ </Warning>

369− }

368+ }

370−

371− </Form>

372

369

373 </Col>

370 </Col>

374 </Row>

371 </Row>

src/views/SetProxy.js+66−68

@@ -2,7 +2,7 @@ import Maybe from 'folktale/maybe'

2import React from 'react'

3import * as azimuth from 'azimuth-js'

4import { Row, Col, H1, H3, P, InnerLabel, ShowBlockie, Anchor } from '../components/Base'

5−import { AddressInput, Form, Warning } from '../components/Base'

5+import { AddressInput, Warning } from '../components/Base'

6import * as ob from 'urbit-ob'

7

8import { PROXY_TYPE, renderProxyType } from '../lib/proxy'

@@ -293,73 +293,71 @@ class SetProxy extends React.Component {

293 'Generator to generate a keypair.'

294 }

295 </P>

296− <Form>

297− <AddressInput

296+ <AddressInput

298− className='mono mt-8'

297+ className='mono mt-8'

299− prop-size='lg'

298+ prop-size='lg'

300− prop-format='innerLabel'

299+ prop-format='innerLabel'

301− placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }

300+ placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }

302− value={ state.proxyAddress }

301+ value={ state.proxyAddress }

303− onChange={ v => this.handleAddressInput(v) }>

302+ onChange={ v => this.handleAddressInput(v) }>

304− <InnerLabel>{ 'Proxy Address' }</InnerLabel>

303+ <InnerLabel>{ 'Proxy Address' }</InnerLabel>

305− <ShowBlockie className={'mt-1'} address={state.proxyAddress} />

304+ <ShowBlockie className={'mt-1'} address={state.proxyAddress} />

306− </AddressInput>

305+ </AddressInput>

307−

306+

308− <Anchor

307+ <Anchor

309− className={'mt-1'}

308+ className={'mt-1'}

310− prop-size={'sm'}

309+ prop-size={'sm'}

311− disabled={!isValidAddress(state.proxyAddress)}

310+ disabled={!isValidAddress(state.proxyAddress)}

312− target={'_blank'}

311+ target={'_blank'}

313− href={`https://etherscan.io/address/${state.proxyAddress}`}>

312+ href={`https://etherscan.io/address/${state.proxyAddress}`}>

314− {'View on Etherscan ↗'}

313+ {'View on Etherscan ↗'}

315− </Anchor>

314+ </Anchor>

316−

315+

317− <StatelessTransaction

316+ <StatelessTransaction

318− // Upper scope

317+ // Upper scope

319− web3={props.web3}

318+ web3={props.web3}

320− contracts={props.contracts}

319+ contracts={props.contracts}

321− wallet={props.wallet}

320+ wallet={props.wallet}

322− walletType={props.walletType}

321+ walletType={props.walletType}

323− walletHdPath={props.walletHdPath}

322+ walletHdPath={props.walletHdPath}

324− // Tx

323+ // Tx

325− txn={state.txn}

324+ txn={state.txn}

326− stx={state.stx}

325+ stx={state.stx}

327− // Tx details

326+ // Tx details

328− nonce={state.nonce}

327+ nonce={state.nonce}

329− gasPrice={state.gasPrice}

328+ gasPrice={state.gasPrice}

330− chainId={state.chainId}

329+ chainId={state.chainId}

331− gasLimit={state.gasLimit}

330+ gasLimit={state.gasLimit}

332− // Checks

331+ // Checks

333− userApproval={state.userApproval}

332+ userApproval={state.userApproval}

334− canGenerate={ canGenerate }

333+ canGenerate={ canGenerate }

335− canSign={ canSign }

334+ canSign={ canSign }

336− canApprove={ canApprove }

335+ canApprove={ canApprove }

337− canSend={ canSend }

336+ canSend={ canSend }

338− // Methods

337+ // Methods

339− createUnsignedTxn={this.handleCreateUnsignedTxn}

338+ createUnsignedTxn={this.handleCreateUnsignedTxn}

340− setUserApproval={this.handleSetUserApproval}

339+ setUserApproval={this.handleSetUserApproval}

341− setTxn={this.handleSetTxn}

340+ setTxn={this.handleSetTxn}

342− setStx={this.handleSetStx}

341+ setStx={this.handleSetStx}

343− setNonce={this.handleSetNonce}

342+ setNonce={this.handleSetNonce}

344− setChainId={this.handleSetChainId}

343+ setChainId={this.handleSetChainId}

345− setGasPrice={this.handleSetGasPrice}

344+ setGasPrice={this.handleSetGasPrice}

346− setGasLimit={this.handleSetGasLimit}

345+ setGasLimit={this.handleSetGasLimit}

347− handleSubmit={this.handleSubmit} />

346+ handleSubmit={this.handleSubmit} />

348−

347+

349− {

348+ {

350− Maybe.Nothing.hasInstance(state.txError)

349+ Maybe.Nothing.hasInstance(state.txError)

351− ? ''

350+ ? ''

352− : <Warning className={'mt-8'}>

351+ : <Warning className={'mt-8'}>

353− <H3 style={{marginTop: 0, paddingTop: 0}}>

352+ <H3 style={{marginTop: 0, paddingTop: 0}}>

354− {

353+ {

355− 'There was an error sending your transaction.'

354+ 'There was an error sending your transaction.'

356− }

355+ }

357− </H3>

356+ </H3>

358− { state.txError.value }

357+ { state.txError.value }

359− </Warning>

358+ </Warning>

360− }

359+ }

361−

360+

362− </Form>

363 </Col>

361 </Col>

364 </Row>

362 </Row>

365 )

363 )

src/views/Shards.js+77−80

@@ -2,7 +2,7 @@ import Maybe from 'folktale/maybe'

2import React from 'react'

3import { Button } from '../components/Base'

4import { InnerLabel, ValidatedSigil, PointInput, ShardInput } from '../components/Base'

5−import { Row, Col, H1, P, Form } from '../components/Base'

5+import { Row, Col, H1, P } from '../components/Base'

6import * as kg from '../../node_modules/urbit-key-generation/dist/index'

7import * as ob from 'urbit-ob'

8

@@ -115,87 +115,84 @@ class Shards extends React.Component {

115

116 </P>

117

118− <Form>

118+ <PointInput

119−

120− <PointInput

121− className='mono mt-8'

119+ className='mono mt-8'

122− prop-size='lg'

120+ prop-size='lg'

123− prop-format='innerLabel'

121+ prop-format='innerLabel'

124− type='text'

122+ type='text'

125− autoFocus

123+ autoFocus

126− placeholder={ `e.g. ${phPoint}` }

124+ placeholder={ `e.g. ${phPoint}` }

127− value={ pointName }

125+ value={ pointName }

128− onChange={ this.handlePointNameInput }>

126+ onChange={ this.handlePointNameInput }>

129− <InnerLabel>{ 'Point' }</InnerLabel>

127+ <InnerLabel>{ 'Point' }</InnerLabel>

130− <ValidatedSigil

128+ <ValidatedSigil

131− className={'tr-0 mt-05 mr-0 abs'}

129+ className={'tr-0 mt-05 mr-0 abs'}

132− patp={pointName}

130+ patp={pointName}

133− size={68}

131+ size={68}

134− margin={8} />

132+ margin={8} />

135− </PointInput>

133+ </PointInput>

136−

134+

137−

135+

138− <ShardInput

136+ <ShardInput

139− className='mono mt-8'

137+ className='mono mt-8'

140− prop-size='md'

138+ prop-size='md'

141− prop-format='innerLabel'

139+ prop-format='innerLabel'

142− type='text'

140+ type='text'

143− name='shard1'

141+ name='shard1'

144− placeholder={ `e.g. ${phTick}` }

142+ placeholder={ `e.g. ${phTick}` }

145− value={ shard1 }

143+ value={ shard1 }

146− onChange={ inp => this.handleShardInput(SHARDS.SHARD1, inp) }>

144+ onChange={ inp => this.handleShardInput(SHARDS.SHARD1, inp) }>

147− <InnerLabel>{ 'Shard 1' }</InnerLabel>

145+ <InnerLabel>{ 'Shard 1' }</InnerLabel>

148− </ShardInput>

146+ </ShardInput>

149−

147+

150− <ShardInput

148+ <ShardInput

151− className='mono mt-8'

149+ className='mono mt-8'

152− prop-size='md'

150+ prop-size='md'

153− prop-format='innerLabel'

151+ prop-format='innerLabel'

154− type='text'

152+ type='text'

155− name='shard2'

153+ name='shard2'

156− placeholder={ `e.g. ${phTick}` }

154+ placeholder={ `e.g. ${phTick}` }

157− value={ shard2 }

155+ value={ shard2 }

158− onChange={ inp => this.handleShardInput(SHARDS.SHARD2, inp) }>

156+ onChange={ inp => this.handleShardInput(SHARDS.SHARD2, inp) }>

159− <InnerLabel>{ 'Shard 2' }</InnerLabel>

157+ <InnerLabel>{ 'Shard 2' }</InnerLabel>

160− </ShardInput>

158+ </ShardInput>

161−

159+

162− <ShardInput

160+ <ShardInput

163− className='mono mt-8'

161+ className='mono mt-8'

164− prop-size='md'

162+ prop-size='md'

165− prop-format='innerLabel'

163+ prop-format='innerLabel'

166− type='text'

164+ type='text'

167− name='shard3'

165+ name='shard3'

168− placeholder={ `e.g. ${phTick}` }

166+ placeholder={ `e.g. ${phTick}` }

169− value={ shard3 }

167+ value={ shard3 }

170− onChange={ inp => this.handleShardInput(SHARDS.SHARD3, inp) }>

168+ onChange={ inp => this.handleShardInput(SHARDS.SHARD3, inp) }>

171− <InnerLabel>{ 'Shard 3' }</InnerLabel>

169+ <InnerLabel>{ 'Shard 3' }</InnerLabel>

172− </ShardInput>

170+ </ShardInput>

173−

171+

174− <Button

172+ <Button

175− disabled={ !ready }

173+ disabled={ !ready }

176− className={'mt-8'}

174+ className={'mt-8'}

177− prop-size={'lg wide'}

175+ prop-size={'lg wide'}

178− // prop-color={this.buttonTriState(wallet)}

176+ // prop-color={this.buttonTriState(wallet)}

179− onClick={() =>

177+ onClick={() =>

180− this.walletFromShards(shard1, shard2, shard3, pointName)

178+ this.walletFromShards(shard1, shard2, shard3, pointName)

181− }>

179+ }>

182− {'Unlock Wallet →'}

180+ {'Unlock Wallet →'}

183− </Button>

181+ </Button>

184−

182+

185− <Button

183+ <Button

186− className={'mt-4'}

184+ className={'mt-4'}

187− prop-size={'xl wide'}

185+ prop-size={'xl wide'}

188− disabled={ Maybe.Nothing.hasInstance(wallet) }

186+ disabled={ Maybe.Nothing.hasInstance(wallet) }

189− onClick={ () => {

187+ onClick={ () => {

190− popRoute()

188+ popRoute()

191− pushRoute(ROUTE_NAMES.SHIPS)

189+ pushRoute(ROUTE_NAMES.SHIPS)

192− }

193 }

190 }

191+ }

194− >

192+ >

195− { 'Continue →' }

193+ { 'Continue →' }

196− </Button>

194+ </Button>

197

195

198− </Form>

199 </Col>

196 </Col>

200 </Row>

197 </Row>

201 )

198 )

src/views/Ticket.js+50−53

@@ -2,7 +2,7 @@ import Maybe from 'folktale/maybe'

2import React from 'react'

3import { Button } from '../components/Base'

4import { InnerLabel, ValidatedSigil, PointInput, TicketInput } from '../components/Base'

5−import { Row, Col, H1, P, Form } from '../components/Base'

5+import { Row, Col, H1, P } from '../components/Base'

6import * as kg from '../../node_modules/urbit-key-generation/dist/index'

7import * as ob from 'urbit-ob'

8

@@ -79,60 +79,57 @@ class Ticket extends React.Component {

79 { `Please enter your point and Urbit master ticket here. This information is written on your Urbit HD paper wallets.` }

80 </P>

81

82− <Form>

82+ <PointInput

83−

84− <PointInput

85− className='mono mt-8'

83+ className='mono mt-8'

86− prop-size='lg'

84+ prop-size='lg'

87− prop-format='innerLabel'

85+ prop-format='innerLabel'

88− type='text'

86+ type='text'

89− autoFocus

87+ autoFocus

90− placeholder={ `e.g. ${phPoint}` }

88+ placeholder={ `e.g. ${phPoint}` }

91− value={ pointName }

89+ value={ pointName }

92− onChange={ this.handlePointNameInput }>

90+ onChange={ this.handlePointNameInput }>

93− <InnerLabel>{ 'Point' }</InnerLabel>

91+ <InnerLabel>{ 'Point' }</InnerLabel>

94− <ValidatedSigil

92+ <ValidatedSigil

95− className={'tr-0 mt-05 mr-0 abs'}

93+ className={'tr-0 mt-05 mr-0 abs'}

96− patp={pointName}

94+ patp={pointName}

97− size={68}

95+ size={68}

98− margin={8} />

96+ margin={8} />

99− </PointInput>

97+ </PointInput>

100−

98+

101−

99+

102− <TicketInput

100+ <TicketInput

103− className='mono mt-8'

101+ className='mono mt-8'

104− prop-size='md'

102+ prop-size='md'

105− prop-format='innerLabel'

103+ prop-format='innerLabel'

106− type='text'

104+ type='text'

107− name='ticket'

105+ name='ticket'

108− placeholder={ `e.g. ${phTick}` }

106+ placeholder={ `e.g. ${phTick}` }

109− value={ ticket }

107+ value={ ticket }

110− onChange={ this.handleTicketInput }>

108+ onChange={ this.handleTicketInput }>

111− <InnerLabel>{ 'Ticket' }</InnerLabel>

109+ <InnerLabel>{ 'Ticket' }</InnerLabel>

112− </TicketInput>

110+ </TicketInput>

113−

111+

114− <Button

112+ <Button

115− className={'mt-8'}

113+ className={'mt-8'}

116− prop-size={'lg wide'}

114+ prop-size={'lg wide'}

117− // prop-color={this.buttonTriState(wallet)}

115+ // prop-color={this.buttonTriState(wallet)}

118− onClick={() => this.walletFromTicket(ticket, pointName)}>

116+ onClick={() => this.walletFromTicket(ticket, pointName)}>

119− {'Unlock Wallet →'}

117+ {'Unlock Wallet →'}

120− </Button>

118+ </Button>

121−

119+

122− <Button

120+ <Button

123− className={'mt-4'}

121+ className={'mt-4'}

124− prop-size={'xl wide'}

122+ prop-size={'xl wide'}

125− disabled={ Maybe.Nothing.hasInstance(wallet) }

123+ disabled={ Maybe.Nothing.hasInstance(wallet) }

126− onClick={ () => {

124+ onClick={ () => {

127− popRoute()

125+ popRoute()

128− pushRoute(ROUTE_NAMES.SHIPS)

126+ pushRoute(ROUTE_NAMES.SHIPS)

129− }

130 }

127 }

128+ }

131− >

129+ >

132− { 'Continue →' }

130+ { 'Continue →' }

133− </Button>

131+ </Button>

134

132

135− </Form>

136 </Col>

133 </Col>

137 </Row>

134 </Row>

138 )

135 )

src/views/Transfer.js+52−55

@@ -4,7 +4,7 @@ import * as azimuth from 'azimuth-js'

4import * as ob from 'urbit-ob'

5

6import { Row, Col, H1, InnerLabel, ShowBlockie, P, Anchor } from '../components/Base'

7−import { AddressInput, Form, Warning, H3 } from '../components/Base'

7+import { AddressInput, Warning, H3 } from '../components/Base'

8import StatelessTransaction from '../components/StatelessTransaction'

9

10import { BRIDGE_ERROR } from '../lib/error'

@@ -265,60 +265,57 @@ class Transfer extends React.Component {

265 You may cancel the transfer until the transfer is accepted.`

266 }

267 </P>

268− <Form>

269− <AddressInput

268+ <AddressInput

270− className={'mono mt-8'}

269+ className={'mono mt-8'}

271− prop-size='lg'

270+ prop-size='lg'

272− prop-format='innerLabel'

271+ prop-format='innerLabel'

273− value={ state.receivingAddress }

272+ value={ state.receivingAddress }

274− placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }

273+ placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }

275− onChange={ v => this.handleAddressInput(v) }>

274+ onChange={ v => this.handleAddressInput(v) }>

276− <InnerLabel>{ 'New ownership address' }</InnerLabel>

275+ <InnerLabel>{ 'New ownership address' }</InnerLabel>

277− <ShowBlockie className={'mt-1'} address={state.receivingAddress} />

276+ <ShowBlockie className={'mt-1'} address={state.receivingAddress} />

278− </AddressInput>

277+ </AddressInput>

279−

278+

280− <Anchor

279+ <Anchor

281− className={'mt-1'}

280+ className={'mt-1'}

282− prop-size={'s'}

281+ prop-size={'s'}

283− disabled={!isValidAddress(state.receivingAddress)}

282+ disabled={!isValidAddress(state.receivingAddress)}

284− target={'_blank'}

283+ target={'_blank'}

285− href={`https://etherscan.io/address/${state.receivingAddress}`}>

284+ href={`https://etherscan.io/address/${state.receivingAddress}`}>

286− {'View on Etherscan ↗'}

285+ {'View on Etherscan ↗'}

287− </Anchor>

286+ </Anchor>

288−

287+

289− <StatelessTransaction

288+ <StatelessTransaction

290− // Upper scope

289+ // Upper scope

291− web3={props.web3}

290+ web3={props.web3}

292− contracts={props.contracts}

291+ contracts={props.contracts}

293− wallet={props.wallet}

292+ wallet={props.wallet}

294− walletType={props.walletType}

293+ walletType={props.walletType}

295− walletHdPath={props.walletHdPath}

294+ walletHdPath={props.walletHdPath}

296− // Tx

295+ // Tx

297− txn={state.txn}

296+ txn={state.txn}

298− stx={state.stx}

297+ stx={state.stx}

299− // Tx details

298+ // Tx details

300− nonce={state.nonce}

299+ nonce={state.nonce}

301− gasPrice={state.gasPrice}

300+ gasPrice={state.gasPrice}

302− chainId={state.chainId}

301+ chainId={state.chainId}

303− gasLimit={state.gasLimit}

302+ gasLimit={state.gasLimit}

304− // Checks

303+ // Checks

305− userApproval={state.userApproval}

304+ userApproval={state.userApproval}

306− canGenerate={ canGenerate }

305+ canGenerate={ canGenerate }

307− canSign={ canSign }

306+ canSign={ canSign }

308− canApprove={ canApprove }

307+ canApprove={ canApprove }

309− canSend={ canSend }

308+ canSend={ canSend }

310− // Methods

309+ // Methods

311− createUnsignedTxn={this.handleCreateUnsignedTxn}

310+ createUnsignedTxn={this.handleCreateUnsignedTxn}

312− setUserApproval={this.handleSetUserApproval}

311+ setUserApproval={this.handleSetUserApproval}

313− setTxn={this.handleSetTxn}

312+ setTxn={this.handleSetTxn}

314− setStx={this.handleSetStx}

313+ setStx={this.handleSetStx}

315− setNonce={this.handleSetNonce}

314+ setNonce={this.handleSetNonce}

316− setChainId={this.handleSetChainId}

315+ setChainId={this.handleSetChainId}

317− setGasPrice={this.handleSetGasPrice}

316+ setGasPrice={this.handleSetGasPrice}

318− setGasLimit={this.handleSetGasLimit}

317+ setGasLimit={this.handleSetGasLimit}

319− handleSubmit={this.handleSubmit} />

318+ handleSubmit={this.handleSubmit} />

320−

321− </Form>

322

319

323 {

320 {

324 Maybe.Nothing.hasInstance(state.txError)

321 Maybe.Nothing.hasInstance(state.txError)

src/views/Trezor.js+31−34

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

3import Maybe from 'folktale/maybe'

4import { Button } from '../components/Base'

5import { Row, Col, H1, P } from '../components/Base'

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

6+import { InnerLabel, Input } from '../components/Base'

7import TrezorConnect from 'trezor-connect'

8import * as secp256k1 from 'secp256k1'

9

@@ -62,39 +62,36 @@ class Trezor extends React.Component {

62 }

63 </P>

64

65− <Form>

66− <Input

65+ <Input

67− className='pt-8'

66+ className='pt-8'

68− prop-size='md'

67+ prop-size='md'

69− prop-format='innerLabel'

68+ prop-format='innerLabel'

70− name='hdpath'

69+ name='hdpath'

71− value={ hdpath }

70+ value={ hdpath }

72− autocomplete='off'

71+ autocomplete='off'

73− onChange={ this.handleHdPathInput }>

72+ onChange={ this.handleHdPathInput }>

74− <InnerLabel>{'HD Path'}</InnerLabel>

73+ <InnerLabel>{'HD Path'}</InnerLabel>

75− </Input>

74+ </Input>

76−

75+

77− <Button

76+ <Button

78− className={'mt-8'}

77+ className={'mt-8'}

79− prop-size={'wide lg'}

78+ prop-size={'wide lg'}

80− onClick={ this.pollDevice }>

79+ onClick={ this.pollDevice }>

81− { 'Authenticate →' }

80+ { 'Authenticate →' }

82− </Button>

81+ </Button>

83−

82+

84− <Button

83+ <Button

85− className={'mt-8'}

84+ className={'mt-8'}

86− prop-size={'wide lg'}

85+ prop-size={'wide lg'}

87− disabled={ Maybe.Nothing.hasInstance(wallet) }

86+ disabled={ Maybe.Nothing.hasInstance(wallet) }

88− onClick={

87+ onClick={

89− () => {

88+ () => {

90− popRoute()

89+ popRoute()

91− pushRoute(ROUTE_NAMES.SHIPS)

90+ pushRoute(ROUTE_NAMES.SHIPS)

92− }

91+ }

93− }>

92+ }>

94− { 'Continue →' }

93+ { 'Continue →' }

95− </Button>

94+ </Button>

96−

97− </Form>

98

95

99 </Col>

96 </Col>

100 </Row>

97 </Row>

src/views/ViewPoint.js+29−31

@@ -4,7 +4,7 @@ import * as ob from 'urbit-ob'

4

5import { Button } from '../components/Base'

6import { Row, Col, H1, P } from '../components/Base'

7−import { InnerLabel, PointInput, ValidatedSigil, Form } from '../components/Base'

7+import { InnerLabel, PointInput, ValidatedSigil } from '../components/Base'

8

9import { ROUTE_NAMES } from '../lib/router'

10

@@ -48,38 +48,36 @@ class ViewPoint extends React.Component {

48 { "Enter a point name to view its public information." }

49 </P>

50

51− <Form>

52− <PointInput

51+ <PointInput

53− autoFocus

52+ autoFocus

54− prop-size='lg'

53+ prop-size='lg'

55− prop-format='innerLabel'

54+ prop-format='innerLabel'

56− className='mono'

55+ className='mono'

57− placeholder='e.g. ~zod'

56+ placeholder='e.g. ~zod'

58− onChange={ this.handlePointInput }

57+ onChange={ this.handlePointInput }

59− value={pointName}>

58+ value={pointName}>

60− <InnerLabel>{'Point Name'}</InnerLabel>

59+ <InnerLabel>{'Point Name'}</InnerLabel>

61− <ValidatedSigil

60+ <ValidatedSigil

62− className={'tr-0 mt-05 mr-0 abs'}

61+ className={'tr-0 mt-05 mr-0 abs'}

63− patp={pointName}

62+ patp={pointName}

64− show

63+ show

65− size={68}

64+ size={68}

66− margin={8} />

65+ margin={8} />

67− </PointInput>

66+ </PointInput>

68

67

69− <Button

68+ <Button

70− className={'mt-8'}

69+ className={'mt-8'}

71− disabled={ valid === false }

70+ disabled={ valid === false }

72− onClick={

71+ onClick={

73− () => {

72+ () => {

74− setPointCursor(Maybe.Just(ob.patp2dec(pointName)))

73+ setPointCursor(Maybe.Just(ob.patp2dec(pointName)))

75− popRoute()

74+ popRoute()

76− pushRoute(ROUTE_NAMES.SHIP)

75+ pushRoute(ROUTE_NAMES.SHIP)

77− }

78 }

76 }

77+ }

79− >

78+ >

80− { 'Continue →' }

79+ { 'Continue →' }

81− </Button>

80+ </Button>

82− </Form>

83 </Col>

81 </Col>

84 </Row>

82 </Row>

85 )

83 )