git.iko.soy/bridge
on 9b396e2 help sign in
bridge/src/Bridge.js
271 lines 7.5 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'
15import './style/index.css'
17class Bridge extends React.Component {
19 constructor(props) {
20 super(props)
22 const networkType =
23 process.env.NODE_ENV === 'development'
24 ? NETWORK_NAMES.LOCAL
25 : NETWORK_NAMES.MAINNET
27 // NB (jtobin):
28 //
29 // Note that the 'wallet' prop has type depending on the 'walletType' prop.
30 // These could be bound together in a single structure (so that
31 // 'walletType' acted more explicitly as a data constructor of sorts) but
32 // it doesn't necessarily help us much, since we branch on 'walletType'
33 // before setting 'wallet'.
34 //
35 // Wallets are always wrapped in Maybe. For most authentication
36 // mechanisms, Maybe wraps a BIP32 HD wallet; for Ethereum private keys,
37 // JSON keystore files, and Metamask authentication, it wraps an
38 // 'EthereumWallet'.
40 this.state = {
41 // routes
42 routeCrumbs: Stack([ ROUTE_NAMES.LANDING ]),
43 // network
44 networkType: networkType,
45 web3: Maybe.Nothing(),
46 contracts: Maybe.Nothing(),
47 // wallet
48 walletType: WALLET_NAMES.MNEMONIC,
49 wallet: Maybe.Nothing(),
50 walletHdPath: DEFAULT_HD_PATH,
51 // urbit wallet-related
52 urbitWallet: Maybe.Nothing(),
53 authMnemonic: Maybe.Nothing(),
54 // point
55 pointCursor: Maybe.Nothing(),
56 pointCache: {},
57 // txn
58 txnHashCursor: Maybe.Nothing()
59 }
61 this.pushRoute = this.pushRoute.bind(this)
62 this.popRoute = this.popRoute.bind(this)
63 this.skipRoute = this.skipRoute.bind(this)
64 this.setNetworkType = this.setNetworkType.bind(this)
65 this.setNetwork = this.setNetwork.bind(this)
66 this.setWalletType = this.setWalletType.bind(this)
67 this.setWallet = this.setWallet.bind(this)
68 this.setWalletHdPath = this.setWalletHdPath.bind(this)
69 this.setUrbitWallet = this.setUrbitWallet.bind(this)
70 this.setAuthMnemonic = this.setAuthMnemonic.bind(this)
71 this.setPointCursor = this.setPointCursor.bind(this)
72 this.setTxnHashCursor = this.setTxnHashCursor.bind(this)
73 this.addToPointCache = this.addToPointCache.bind(this)
74 }
76 componentDidMount() {
78 // NB (jtobin):
79 //
80 // If running in development, the following can be tweaked to get you set
81 // up with a desirable initial state.
83 // if (process.env.NODE_ENV === 'development') {
84 //
85 // const socket = 'wss://localhost:8545'
86 // const provider = new Web3.providers.WebsocketProvider(socket)
87 // const web3 = new Web3(provider)
88 // const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.DEV)
89 //
90 // const mnemonic = process.env.REACT_APP_DEV_MNEMONIC
91 // const hdpath = process.env.REACT_APP_HD_PATH
92 //
93 // this.setState({
94 // routeCrumbs: Stack([
95 // ROUTE_NAMES.CREATE_GALAXY,
96 // ROUTE_NAMES.SHIPS,
97 // // ROUTE_NAMES.MNEMONIC,
98 // ROUTE_NAMES.WALLET,
99 // ROUTE_NAMES.NETWORK,
100 // ROUTE_NAMES.LANDING
101 // ]),
102 // networkType: NETWORK_NAMES.LOCAL,
103 // web3: Maybe.Just(web3),
104 // contracts: Maybe.Just(contracts),
105 // walletType: WALLET_NAMES.MNEMONIC,
106 // wallet: walletFromMnemonic(mnemonic, hdpath),
107 // urbitWallet: Maybe.Nothing(),
108 // authMnemonic: Maybe.Nothing()
109 // })
110 // }
113 pushRoute(symbol) {
114 if (lodash.includes(ROUTE_NAMES, symbol)) {
115 this.setState((state, _) => ({
116 routeCrumbs: state.routeCrumbs.push(symbol),
117 }));
119 // Scroll to top of page with each route transition.
120 window.scrollTo(0, 0);
122 } else {
123 throw BRIDGE_ERROR.INVALID_ROUTE
124 }
125 }
127 skipRoute(len) {
128 this.setState((state, _) => ({
129 routeCrumbs: state.routeCrumbs.skip(len)
130 }))
131 }
133 popRoute() {
134 this.setState((state, _) => ({
135 routeCrumbs: state.routeCrumbs.shift()
136 }))
137 }
139 setNetworkType(symbol) {
140 if (lodash.includes(NETWORK_NAMES, symbol)) {
141 this.setState({
142 networkType: symbol
143 })
144 } else {
145 throw BRIDGE_ERROR.INVALID_NETWORK_TYPE
146 }
147 }
149 setNetwork(web3, contracts) {
150 this.setState({
151 web3: web3,
152 contracts: contracts
153 })
154 }
156 setWalletType(symbol) {
157 if (lodash.includes(WALLET_NAMES, symbol)) {
158 this.setState({
159 walletType: symbol
160 })
161 } else {
162 throw BRIDGE_ERROR.INVALID_WALLET_TYPE
163 }
164 }
166 setWallet(wallet) {
167 this.setState({ wallet })
168 }
170 setWalletHdPath(walletHdPath) {
171 this.setState({ walletHdPath })
172 }
174 setUrbitWallet(urbitWallet) {
175 this.setState({ urbitWallet })
176 }
178 setAuthMnemonic(authMnemonic) {
179 this.setState({ authMnemonic })
180 }
182 setPointCursor(pointCursor) {
183 this.setState({ pointCursor })
184 }
186 addToPointCache(entry) {
187 this.setState((state, _) => ({
188 pointCache: Object.assign(state.pointCache, entry)
189 }))
190 }
192 setTxnHashCursor(txnHashCursor) {
193 this.setState({ txnHashCursor })
194 }
196 render() {
197 const {
198 routeCrumbs,
199 networkType,
200 walletType,
201 walletHdPath,
202 wallet,
203 urbitWallet,
204 authMnemonic,
205 pointCursor,
206 pointCache,
207 txnHashCursor,
208 web3,
209 contracts
210 } = this.state
212 const View = router(routeCrumbs.peek())
214 return (
215 <Container>
216 <Row>
217 <Col className='col-md-1' />
218 <Col className='col-md-10' style={{maxWidth: '620px'}}>
219 <Header
220 routeCrumbs={ routeCrumbs }
221 skipRoute={ this.skipRoute }
222 networkType={ networkType }
223 wallet={ wallet }
224 pointCursor={ pointCursor } />
226 <Row className={ 'row wrapper' }>
228 <View
229 // router
230 pushRoute={ this.pushRoute }
231 popRoute={ this.popRoute }
232 // network
233 setNetworkType={ this.setNetworkType }
234 setNetwork={ this.setNetwork }
235 networkType={ networkType }
236 web3={ web3 }
237 contracts={ contracts }
238 // wallet
239 setWalletType={ this.setWalletType }
240 setWalletHdPath={ this.setWalletHdPath }
241 setWallet={ this.setWallet }
242 walletType={ walletType }
243 walletHdPath={ walletHdPath }
244 wallet={ wallet }
245 // urbit wallet
246 urbitWallet={ urbitWallet }
247 setUrbitWallet={ this.setUrbitWallet }
248 authMnemonic={ authMnemonic }
249 setAuthMnemonic={ this.setAuthMnemonic }
250 // point
251 setPointCursor={ this.setPointCursor }
252 addToPointCache={ this.addToPointCache }
253 pointCursor={ pointCursor }
254 pointCache={ pointCache }
255 // txn
256 setTxnHashCursor={ this.setTxnHashCursor }
257 txnHashCursor={ txnHashCursor } />
259 <div className={'push'} />
261 </Row>
263 <Footer />
264 </Col>
265 </Row>
266 </Container>
267 )
268 }
271export default Bridge