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