e9a3a34 · bridge · git.iko.soy

git.iko.soy/bridge

- (WIP) AppNavigation component created; styles are still messed up

commite9a3a34110d2793fa60395c021cfc0b465a4cdf6 authorChris Johnson <chris@cjohnson.io> dateMon 1 Apr 2019, 12:54 (8 years ago) parent153508b

5 files changed+187−78

compare with master

unifiedsplit

src/Bridge.js+62−55 src/Root.js+51 src/components/AppNavigation.js+42 src/index.js+5−2 src/walletgen/Walletgen.js+27−21

src/Bridge.js+62−55

@@ -6,14 +6,13 @@ import React from 'react'

66import Footer from './components/Footer'

77import Header from './components/Header'

88import { Container, Row, Col } from './components/Base'

9+import { AppNavigation } from './components/AppNavigation'

910

1011import { ROUTE_NAMES, router } from './lib/router'

1112import { NETWORK_NAMES } from './lib/network'

1213import { WALLET_NAMES, DEFAULT_HD_PATH } from './lib/wallet'

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

1415

15−import './style/index.css'

16−

1716class Bridge extends React.Component {

1817

1918 constructor(props) {

@@ -84,6 +83,8 @@ class Bridge extends React.Component {

8483 this.popRoute();

8584 }

8685

86+ import('./style/index.css')

87+

8788 // NB (jtobin):

8889 //

8990 // If running in development, the following can be tweaked to get you set

@@ -232,61 +233,67 @@ class Bridge extends React.Component {

232233 const View = router(routeCrumbs.peek())

233234

234235 return (

235− <Container>

236− <Row>

237− <Col className='col-md-1' />

238− <Col className='col-md-10' style={{maxWidth: '620px'}}>

239− <Header

240− routeCrumbs={ routeCrumbs }

241− skipRoute={ this.skipRoute }

242− networkType={ networkType }

243− wallet={ wallet }

244− pointCursor={ pointCursor } />

245−

246− <Row className={ 'row wrapper' }>

247−

248− <View

249− // router

250− pushRoute={ this.pushRoute }

251− popRoute={ this.popRoute }

252− routeData={ routeData }

253− // network

254− setNetworkType={ this.setNetworkType }

255− setNetwork={ this.setNetwork }

236+ <React.Fragment>

237+ <Container>

238+ <Row>

239+ <Col className='col-md-1' />

240+ <Col className='col-md-10' style={{maxWidth: '620px'}}>

241+ <Header

242+ routeCrumbs={ routeCrumbs }

243+ skipRoute={ this.skipRoute }

256244 networkType={ networkType }

257− web3={ web3 }

258− contracts={ contracts }

259− // wallet

260− setWalletType={ this.setWalletType }

261− setWalletHdPath={ this.setWalletHdPath }

262− setWallet={ this.setWallet }

263− walletType={ walletType }

264− walletHdPath={ walletHdPath }

265245 wallet={ wallet }

266− // urbit wallet

267− urbitWallet={ urbitWallet }

268− setUrbitWallet={ this.setUrbitWallet }

269− authMnemonic={ authMnemonic }

270− setAuthMnemonic={ this.setAuthMnemonic }

271− // point

272− setPointCursor={ this.setPointCursor }

273− addToPointCache={ this.addToPointCache }

274− pointCursor={ pointCursor }

275− pointCache={ pointCache }

276− networkSeedCache= { networkSeedCache }

277− setNetworkSeedCache= { this.setNetworkSeedCache }

278− // txn

279− setTxnHashCursor={ this.setTxnHashCursor }

280− txnHashCursor={ txnHashCursor } />

281−

282− <div className={'push'} />

283−

284− </Row>

285−

286− <Footer />

287− </Col>

288− </Row>

289− </Container>

246+ pointCursor={ pointCursor } />

247+

248+ <Row className={ 'row wrapper' }>

249+

250+ <View

251+ // router

252+ pushRoute={ this.pushRoute }

253+ popRoute={ this.popRoute }

254+ routeData={ routeData }

255+ // network

256+ setNetworkType={ this.setNetworkType }

257+ setNetwork={ this.setNetwork }

258+ networkType={ networkType }

259+ web3={ web3 }

260+ contracts={ contracts }

261+ // wallet

262+ setWalletType={ this.setWalletType }

263+ setWalletHdPath={ this.setWalletHdPath }

264+ setWallet={ this.setWallet }

265+ walletType={ walletType }

266+ walletHdPath={ walletHdPath }

267+ wallet={ wallet }

268+ // urbit wallet

269+ urbitWallet={ urbitWallet }

270+ setUrbitWallet={ this.setUrbitWallet }

271+ authMnemonic={ authMnemonic }

272+ setAuthMnemonic={ this.setAuthMnemonic }

273+ // point

274+ setPointCursor={ this.setPointCursor }

275+ addToPointCache={ this.addToPointCache }

276+ pointCursor={ pointCursor }

277+ pointCache={ pointCache }

278+ networkSeedCache= { networkSeedCache }

279+ setNetworkSeedCache= { this.setNetworkSeedCache }

280+ // txn

281+ setTxnHashCursor={ this.setTxnHashCursor }

282+ txnHashCursor={ txnHashCursor } />

283+

284+ <div className={'push'} />

285+

286+ </Row>

287+

288+ <Footer />

289+ </Col>

290+ </Row>

291+ </Container>

292+

293+ <AppNavigation

294+ setView={this.props.setView}

295+ appView={this.props.appView} />

296+ </React.Fragment>

290297 )

291298 }

292299}

src/Root.jsnew file+51

@@ -0,0 +1,51 @@

1+import 'babel-polyfill' // required for @ledgerhq/hw-transport-u2f

3+import React from 'react'

4+import ReactDOM from 'react-dom'

6+import Bridge from './Bridge'

7+import Walletgen from './walletgen/Walletgen'

9+class Root extends React.Component {

10+ constructor(props) {

11+ super(props)

12+

13+ this.state = {

14+ appView: "bridge"

15+ }

16+

17+ this.setView = this.setView.bind(this)

18+ }

19+

20+ setView(appView) {

21+ this.setState({

22+ appView

23+ })

24+ }

25+

26+ render() {

27+ let appComponent = null;

28+

29+ if (this.state.appView === "walletgen") {

30+ appComponent = <Walletgen

31+ appView={this.state.appView}

32+ setView={this.setView} />

33+ }

34+

35+ if (this.state.appView === "bridge") {

36+ appComponent = <Bridge

37+ appView={this.state.appView}

38+ setView={this.setView} />

39+ }

40+

41+ return (

42+ <React.Fragment>

43+ {appComponent}

44+ </React.Fragment>

45+ )

46+ }

47+}

48+

49+export {

50+ Root

51+}

src/components/AppNavigation.jsnew file+42

@@ -0,0 +1,42 @@

1+import React from 'react';

3+class AppNavigation extends React.Component {

4+ constructor(props) {

5+ super(props)

7+ this.navigate = this.navigate.bind(this)

8+ }

10+ navigate() {

11+ let appView;

12+ if (this.props.appView === "bridge") appView = "walletgen"

13+ if (this.props.appView === "walletgen") appView = "bridge"

14+

15+ this.props.setView(appView)

16+ }

17+

18+ render() {

19+ let buttonText;

20+ if (this.props.appView === "bridge") buttonText = "Go to Walletgen"

21+ if (this.props.appView === "walletgen") buttonText = "Go to Bridge"

22+

23+ let style = {

24+ position: "absolute",

25+ top: "10px",

26+ right: "10px"

27+ }

28+

29+ return (

30+ <button

31+ type="button"

32+ style={style}

33+ onClick={this.navigate}>

34+ {buttonText}

35+ </button>

36+ )

37+ }

38+}

39+

40+export {

41+ AppNavigation

42+}

src/index.js+5−2

@@ -3,11 +3,14 @@ import 'babel-polyfill' // required for @ledgerhq/hw-transport-u2f

33import React from 'react'

44import ReactDOM from 'react-dom'

6−import Bridge from './Bridge'

6+import { Root } from './Root'

8+// import Bridge from './Bridge'

79// import Walletgen from './walletgen/Walletgen'

810

911ReactDOM.render(

1012 // <Walletgen />,

11− <Bridge />,

13+ // <Bridge />,

14+ <Root />,

1215 document.getElementById('root')

1316)

src/walletgen/Walletgen.js+27−21

@@ -3,6 +3,7 @@ import * as lodash from 'lodash'

44import Header from './components/Header'

55import Footer from './components/Footer'

6+import { AppNavigation } from '../components/AppNavigation'

78import { NETWORK_STATES, PROFILE_STATES, GEN_STATES } from './lib/constants'

@@ -17,8 +18,6 @@ import Custody from './views/Custody'

1718import Download from './views/Download'

1819import Done from './views/Done'

1920

20−import './styles/index.css'

21−

2221const checkNetwork = () => navigator.onLine

2322 ? NETWORK_STATES.ONLINE

2423 : NETWORK_STATES.OFFLINE

@@ -90,6 +89,8 @@ class Walletgen extends React.Component {

9089 componentDidMount = () => {

9190 window.addEventListener('online', () => this.setState({'network': NETWORK_STATES.ONLINE}));

9291 window.addEventListener('offline', () => this.setState({'network': NETWORK_STATES.OFFLINE}));

92+

93+ import('./styles/index.css')

9394 };

9495

9596

@@ -122,26 +123,31 @@ class Walletgen extends React.Component {

122123 // const routed = this.router(NETWORK_STATES.OFFLINE, true, route) // hacky dev

123124

124125 return (

125− <main className={'container'}>

126−

127− <Header

128− network={ network }

129− currentStep={ currentStep }

130− totalSteps={ TOTAL_STEPS } />

131−

132− <div className={ 'row wrapper' }>

133− <div className={'col-'}>

134− { routed }

126+ <React.Fragment>

127+ <main className={'container'}>

128+

129+ <Header

130+ network={ network }

131+ currentStep={ currentStep }

132+ totalSteps={ TOTAL_STEPS } />

133+

134+ <div className={ 'row wrapper' }>

135+ <div className={'col-'}>

136+ { routed }

137+ </div>

138+ <div className={'push'} />

135139 </div>

136− <div className={'push'} />

137− </div>

138−

139− <Footer

140− route={ route }

141− lastRoute={ lastRoute }

142− setGlobalState={ this.setGlobalState }

143− />

144− </main>

140+

141+ <Footer

142+ route={ route }

143+ lastRoute={ lastRoute }

144+ setGlobalState={ this.setGlobalState }

145+ />

146+ </main>

147+ <AppNavigation

148+ setView={this.props.setView}

149+ appView={this.props.appView} />

150+ </React.Fragment>

145151 );

146152 };

147153};