git.iko.soy/bridge
on ee3c56d help sign in
bridge/src/Bridge.js
277 lines 7.7 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() {
77 window.history.pushState(null, null, null);
79 window.onpopstate = (e) => {
80 window.history.pushState(null, null, null);
81 this.popRoute();
82 }
84 // NB (jtobin):
85 //
86 // If running in development, the following can be tweaked to get you set
87 // up with a desirable initial state.
89 // if (process.env.NODE_ENV === 'development') {
90 //
91 // const socket = 'wss://localhost:8545'
92 // const provider = new Web3.providers.WebsocketProvider(socket)
93 // const web3 = new Web3(provider)
94 // const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.DEV)
95 //
96 // const mnemonic = process.env.REACT_APP_DEV_MNEMONIC
97 // const hdpath = process.env.REACT_APP_HD_PATH
98 //
99 // this.setState({
100 // routeCrumbs: Stack([
101 // ROUTE_NAMES.CREATE_GALAXY,
102 // ROUTE_NAMES.SHIPS,
103 // // ROUTE_NAMES.MNEMONIC,
104 // ROUTE_NAMES.WALLET,
105 // ROUTE_NAMES.NETWORK,
106 // ROUTE_NAMES.LANDING
107 // ]),
108 // networkType: NETWORK_NAMES.LOCAL,
109 // web3: Maybe.Just(web3),
110 // contracts: Maybe.Just(contracts),
111 // walletType: WALLET_NAMES.MNEMONIC,
112 // wallet: walletFromMnemonic(mnemonic, hdpath),
113 // urbitWallet: Maybe.Nothing(),
114 // authMnemonic: Maybe.Nothing()
115 // })
116 // }
119 pushRoute(symbol) {
120 if (lodash.includes(ROUTE_NAMES, symbol)) {
121 this.setState((state, _) => ({
122 routeCrumbs: state.routeCrumbs.push(symbol),
123 }));
125 // Scroll to top of page with each route transition.
126 window.scrollTo(0, 0);
128 } else {
129 throw BRIDGE_ERROR.INVALID_ROUTE
130 }
131 }
133 skipRoute(len) {
134 this.setState((state, _) => ({
135 routeCrumbs: state.routeCrumbs.skip(len)
136 }))
137 }
139 popRoute() {
140 this.setState((state, _) => ({
141 routeCrumbs: state.routeCrumbs.shift()
142 }))
143 }
145 setNetworkType(symbol) {
146 if (lodash.includes(NETWORK_NAMES, symbol)) {
147 this.setState({
148 networkType: symbol
149 })
150 } else {
151 throw BRIDGE_ERROR.INVALID_NETWORK_TYPE
152 }
153 }
155 setNetwork(web3, contracts) {
156 this.setState({
157 web3: web3,
158 contracts: contracts
159 })
160 }
162 setWalletType(symbol) {
163 if (lodash.includes(WALLET_NAMES, symbol)) {
164 this.setState({
165 walletType: symbol
166 })
167 } else {
168 throw BRIDGE_ERROR.INVALID_WALLET_TYPE
169 }
170 }
172 setWallet(wallet) {
173 this.setState({ wallet })
174 }
176 setWalletHdPath(walletHdPath) {
177 this.setState({ walletHdPath })
178 }
180 setUrbitWallet(urbitWallet) {
181 this.setState({ urbitWallet })
182 }
184 setAuthMnemonic(authMnemonic) {
185 this.setState({ authMnemonic })
186 }
188 setPointCursor(pointCursor) {
189 this.setState({ pointCursor })
190 }
192 addToPointCache(entry) {
193 this.setState((state, _) => ({
194 pointCache: Object.assign(state.pointCache, entry)
195 }))
196 }
198 setTxnHashCursor(txnHashCursor) {
199 this.setState({ txnHashCursor })
200 }
202 render() {
203 const {
204 routeCrumbs,
205 networkType,
206 walletType,
207 walletHdPath,
208 wallet,
209 urbitWallet,
210 authMnemonic,
211 pointCursor,
212 pointCache,
213 txnHashCursor,
214 web3,
215 contracts
216 } = this.state
218 const View = router(routeCrumbs.peek())
220 return (
221 <Container>
222 <Row>
223 <Col className='col-md-1' />
224 <Col className='col-md-10' style={{maxWidth: '620px'}}>
225 <Header
226 routeCrumbs={ routeCrumbs }
227 skipRoute={ this.skipRoute }
228 networkType={ networkType }
229 wallet={ wallet }
230 pointCursor={ pointCursor } />
232 <Row className={ 'row wrapper' }>
234 <View
235 // router
236 pushRoute={ this.pushRoute }
237 popRoute={ this.popRoute }
238 // network
239 setNetworkType={ this.setNetworkType }
240 setNetwork={ this.setNetwork }
241 networkType={ networkType }
242 web3={ web3 }
243 contracts={ contracts }
244 // wallet
245 setWalletType={ this.setWalletType }
246 setWalletHdPath={ this.setWalletHdPath }
247 setWallet={ this.setWallet }
248 walletType={ walletType }
249 walletHdPath={ walletHdPath }
250 wallet={ wallet }
251 // urbit wallet
252 urbitWallet={ urbitWallet }
253 setUrbitWallet={ this.setUrbitWallet }
254 authMnemonic={ authMnemonic }
255 setAuthMnemonic={ this.setAuthMnemonic }
256 // point
257 setPointCursor={ this.setPointCursor }
258 addToPointCache={ this.addToPointCache }
259 pointCursor={ pointCursor }
260 pointCache={ pointCache }
261 // txn
262 setTxnHashCursor={ this.setTxnHashCursor }
263 txnHashCursor={ txnHashCursor } />
265 <div className={'push'} />
267 </Row>
269 <Footer />
270 </Col>
271 </Row>
272 </Container>
273 )
274 }
277export default Bridge