git.iko.soy/bridge
on a64a26c help sign in
bridge/src/Bridge.js
254 lines 6.8 kB history raw
1import Maybe from 'folktale/maybe'
2import * as lodash from 'lodash'
3import { Stack } from 'immutable'
4import React from 'react'
6import Footer from './components/Footer'
7import Header from './components/Header'
8import { Container, Row, Col } from './components/Base'
10import { ROUTE_NAMES, router } from './lib/router'
11import { NETWORK_NAMES } from './lib/network'
12import { WALLET_NAMES, DEFAULT_HD_PATH } from './lib/wallet'
13import { BRIDGE_ERROR } from './lib/error'
15class Bridge extends React.Component {
17 constructor(props) {
18 super(props)
20 this.state = {
21 // routes
22 routeCrumbs: Stack([ ROUTE_NAMES.LANDING ]),
23 // network
24 networkType: NETWORK_NAMES.MAINNET,
25 web3: Maybe.Nothing(),
26 contracts: Maybe.Nothing(),
27 // wallet
28 walletType: WALLET_NAMES.MNEMONIC,
29 wallet: Maybe.Nothing(),
30 walletHdPath: DEFAULT_HD_PATH,
31 // urbit wallet-related
32 urbitWallet: Maybe.Nothing(),
33 authMnemonic: Maybe.Nothing(),
34 // point
35 pointCursor: Maybe.Nothing(),
36 pointCache: {},
37 // txn
38 txnCursor: Maybe.Nothing()
39 }
41 this.pushRoute = this.pushRoute.bind(this)
42 this.popRoute = this.popRoute.bind(this)
43 this.skipRoute = this.skipRoute.bind(this)
44 this.setNetworkType = this.setNetworkType.bind(this)
45 this.setNetwork = this.setNetwork.bind(this)
46 this.setWalletType = this.setWalletType.bind(this)
47 this.setWallet = this.setWallet.bind(this)
48 this.setWalletHdPath = this.setWalletHdPath.bind(this)
49 this.setUrbitWallet = this.setUrbitWallet.bind(this)
50 this.setAuthMnemonic = this.setAuthMnemonic.bind(this)
51 this.setPointCursor = this.setPointCursor.bind(this)
52 this.setTxnCursor = this.setTxnCursor.bind(this)
53 this.addToPointCache = this.addToPointCache.bind(this)
54 }
56 componentDidMount() {
58 // NB (jtobin):
59 //
60 // If running in development, the following can be tweaked to get you set
61 // up with a desirable initial state.
63 // if (process.env.NODE_ENV === 'development') {
64 //
65 // const socket = 'ws://localhost:8545'
66 // const provider = new Web3.providers.WebsocketProvider(socket)
67 // const web3 = new Web3(provider)
68 // const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.DEV)
69 //
70 // const mnemonic = process.env.REACT_APP_DEV_MNEMONIC
71 // const hdpath = process.env.REACT_APP_HD_PATH
72 //
73 // this.setState({
74 // routeCrumbs: Stack([
75 // ROUTE_NAMES.CREATE_GALAXY,
76 // ROUTE_NAMES.SHIPS,
77 // // ROUTE_NAMES.MNEMONIC,
78 // ROUTE_NAMES.WALLET,
79 // ROUTE_NAMES.NETWORK,
80 // ROUTE_NAMES.LANDING
81 // ]),
82 // networkType: NETWORK_NAMES.LOCAL,
83 // web3: Maybe.Just(web3),
84 // contracts: Maybe.Just(contracts),
85 // walletType: WALLET_NAMES.MNEMONIC,
86 // wallet: walletFromMnemonic(mnemonic, hdpath),
87 // urbitWallet: Maybe.Nothing(),
88 // authMnemonic: Maybe.Nothing()
89 // })
90 // }
93 pushRoute(symbol) {
94 if (lodash.includes(ROUTE_NAMES, symbol)) {
95 this.setState((state, _) => ({
96 routeCrumbs: state.routeCrumbs.push(symbol),
97 }));
99 // Scroll to top of page with each route transition.
100 window.scrollTo(0, 0);
102 } else {
103 throw BRIDGE_ERROR.INVALID_ROUTE
104 }
105 }
107 skipRoute(len) {
108 this.setState((state, _) => ({
109 routeCrumbs: state.routeCrumbs.skip(len)
110 }))
111 }
113 popRoute() {
114 this.setState((state, _) => ({
115 routeCrumbs: state.routeCrumbs.shift()
116 }))
117 }
119 setNetworkType(symbol) {
120 if (lodash.includes(NETWORK_NAMES, symbol)) {
121 this.setState({
122 networkType: symbol
123 })
124 } else {
125 throw BRIDGE_ERROR.INVALID_NETWORK_TYPE
126 }
127 }
129 setNetwork(web3, contracts) {
130 this.setState({
131 web3: web3,
132 contracts: contracts
133 })
134 }
136 setWalletType(symbol) {
137 if (lodash.includes(WALLET_NAMES, symbol)) {
138 this.setState({
139 walletType: symbol
140 })
141 } else {
142 throw BRIDGE_ERROR.INVALID_WALLET_TYPE
143 }
144 }
146 setWallet(wallet) {
147 this.setState({ wallet })
148 }
150 setWalletHdPath(walletHdPath) {
151 this.setState({ walletHdPath })
152 }
154 setUrbitWallet(urbitWallet) {
155 this.setState({ urbitWallet })
156 }
158 setAuthMnemonic(authMnemonic) {
159 this.setState({ authMnemonic })
160 }
162 setPointCursor(pointCursor) {
163 this.setState({ pointCursor })
164 }
166 addToPointCache(entry) {
167 this.setState((state, _) => ({
168 pointCache: Object.assign(state.pointCache, entry)
169 }))
170 }
172 setTxnCursor(txn) {
173 this.setState({
174 txnCursor: txn
175 })
176 }
178 render() {
179 const {
180 routeCrumbs,
181 networkType,
182 walletType,
183 walletHdPath,
184 wallet,
185 urbitWallet,
186 authMnemonic,
187 pointCursor,
188 pointCache,
189 txnCursor,
190 web3,
191 contracts
192 } = this.state
194 const View = router(routeCrumbs.peek())
196 return (
197 <Container>
198 <Row>
199 <Col className='col-md-1' />
200 <Col className='col-md-10' style={{maxWidth: '620px'}}>
201 <Header
202 routeCrumbs={ routeCrumbs }
203 skipRoute={ this.skipRoute }
204 networkType={ networkType }
205 wallet={ wallet }
206 pointCursor={ pointCursor } />
208 <Row className={ 'row wrapper' }>
210 <View
211 // router
212 pushRoute={ this.pushRoute }
213 popRoute={ this.popRoute }
214 // network
215 setNetworkType={ this.setNetworkType }
216 setNetwork={ this.setNetwork }
217 networkType={ networkType }
218 web3={ web3 }
219 contracts={ contracts }
220 // wallet
221 setWalletType={ this.setWalletType }
222 setWalletHdPath={ this.setWalletHdPath }
223 setWallet={ this.setWallet }
224 walletType={ walletType }
225 walletHdPath={ walletHdPath }
226 wallet={ wallet }
227 // urbit wallet
228 urbitWallet={ urbitWallet }
229 setUrbitWallet={ this.setUrbitWallet }
230 authMnemonic={ authMnemonic }
231 setAuthMnemonic={ this.setAuthMnemonic }
232 // point
233 setPointCursor={ this.setPointCursor }
234 addToPointCache={ this.addToPointCache }
235 pointCursor={ pointCursor }
236 pointCache={ pointCache }
237 // txn
238 setTxnCursor={ this.setTxnCursor }
239 txnCursor={ txnCursor } />
241 <div className={'push'} />
243 </Row>
245 <Footer />
246 </Col>
247 <Col className='col-md-1' />
248 </Row>
249 </Container>
250 )
251 }
254export default Bridge