e9a3a34 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

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

e9a3a34Chris Johnson8 years ago

src/Bridge.js+62−55

compare with master

unifiedsplit

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

6import Footer from './components/Footer'

7import Header from './components/Header'

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

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

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

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

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

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

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

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

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

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

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

16−

17class Bridge extends React.Component {

16class Bridge extends React.Component {

19 constructor(props) {

18 constructor(props) {

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

84 this.popRoute();

83 this.popRoute();

85 }

84 }

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

87+

87 // NB (jtobin):

88 // NB (jtobin):

88 //

89 //

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

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

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

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

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

233

234

234 return (

235 return (

236+ <React.Fragment>

235− <Container>

237+ <Container>

236− <Row>

238+ <Row>

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

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

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

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

239− <Header

241+ <Header

240− routeCrumbs={ routeCrumbs }

242+ routeCrumbs={ routeCrumbs }

241− skipRoute={ this.skipRoute }

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

256 networkType={ networkType }

244 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 }

265 wallet={ wallet }

245 wallet={ wallet }

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 }

266− // urbit wallet

268+ // urbit wallet

267− urbitWallet={ urbitWallet }

269+ urbitWallet={ urbitWallet }

268− setUrbitWallet={ this.setUrbitWallet }

270+ setUrbitWallet={ this.setUrbitWallet }

269− authMnemonic={ authMnemonic }

271+ authMnemonic={ authMnemonic }

270− setAuthMnemonic={ this.setAuthMnemonic }

272+ setAuthMnemonic={ this.setAuthMnemonic }

271− // point

273+ // point

272− setPointCursor={ this.setPointCursor }

274+ setPointCursor={ this.setPointCursor }

273− addToPointCache={ this.addToPointCache }

275+ addToPointCache={ this.addToPointCache }

274− pointCursor={ pointCursor }

276+ pointCursor={ pointCursor }

275− pointCache={ pointCache }

277+ pointCache={ pointCache }

276− networkSeedCache= { networkSeedCache }

278+ networkSeedCache= { networkSeedCache }

277− setNetworkSeedCache= { this.setNetworkSeedCache }

279+ setNetworkSeedCache= { this.setNetworkSeedCache }

278− // txn

280+ // txn

279− setTxnHashCursor={ this.setTxnHashCursor }

281+ setTxnHashCursor={ this.setTxnHashCursor }

280− txnHashCursor={ txnHashCursor } />

282+ txnHashCursor={ txnHashCursor } />

281−

283+

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

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

283−

285+

284− </Row>

286+ </Row>

285−

287+

286− <Footer />

288+ <Footer />

287− </Col>

289+ </Col>

288− </Row>

290+ </Row>

289− </Container>

291+ </Container>

292+

293+ <AppNavigation

294+ setView={this.props.setView}

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

296+ </React.Fragment>

290 )

297 )

291 }

298 }

292}

299}

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

3import React from 'react'

4import ReactDOM from 'react-dom'

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

6−import Bridge from './Bridge'

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

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

9// import Walletgen from './walletgen/Walletgen'

9ReactDOM.render(

11ReactDOM.render(

10 // <Walletgen />,

12 // <Walletgen />,

11− <Bridge />,

13+ // <Bridge />,

14+ <Root />,

12 document.getElementById('root')

15 document.getElementById('root')

13)

16)

src/walletgen/Walletgen.js+27−21

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

4import Header from './components/Header'

5import Footer from './components/Footer'

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

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

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

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

17import Download from './views/Download'

18import Download from './views/Download'

18import Done from './views/Done'

19import Done from './views/Done'

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

21−

22const checkNetwork = () => navigator.onLine

21const checkNetwork = () => navigator.onLine

23 ? NETWORK_STATES.ONLINE

22 ? NETWORK_STATES.ONLINE

24 : NETWORK_STATES.OFFLINE

23 : NETWORK_STATES.OFFLINE

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

90 componentDidMount = () => {

89 componentDidMount = () => {

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

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

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

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

92+

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

93 };

94 };

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

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

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

123

124

124 return (

125 return (

126+ <React.Fragment>

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

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

126−

128+

127− <Header

129+ <Header

128− network={ network }

130+ network={ network }

129− currentStep={ currentStep }

131+ currentStep={ currentStep }

130− totalSteps={ TOTAL_STEPS } />

132+ totalSteps={ TOTAL_STEPS } />

131−

133+

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

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

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

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

134− { routed }

136+ { routed }

137+ </div>

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

135 </div>

139 </div>

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

140+

137− </div>

138−

139− <Footer

141+ <Footer

140− route={ route }

142+ route={ route }

141− lastRoute={ lastRoute }

143+ lastRoute={ lastRoute }

142− setGlobalState={ this.setGlobalState }

144+ setGlobalState={ this.setGlobalState }

143− />

145+ />

144− </main>

146+ </main>

147+ <AppNavigation

148+ setView={this.props.setView}

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

150+ </React.Fragment>

145 );

151 );

146 };

152 };

147};

153};