git.iko.soy/bridge
on 05c1914 help sign in
bridge/src/Bridge.js
285 lines 8.1 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 networkSeedCache: null,
55 // point
56 pointCursor: Maybe.Nothing(),
57 pointCache: {},
58 // txn
59 txnHashCursor: Maybe.Nothing()
60 }
62 this.pushRoute = this.pushRoute.bind(this)
63 this.popRoute = this.popRoute.bind(this)
64 this.skipRoute = this.skipRoute.bind(this)
65 this.setNetworkType = this.setNetworkType.bind(this)
66 this.setNetwork = this.setNetwork.bind(this)
67 this.setWalletType = this.setWalletType.bind(this)
68 this.setWallet = this.setWallet.bind(this)
69 this.setWalletHdPath = this.setWalletHdPath.bind(this)
70 this.setUrbitWallet = this.setUrbitWallet.bind(this)
71 this.setAuthMnemonic = this.setAuthMnemonic.bind(this)
72 this.setPointCursor = this.setPointCursor.bind(this)
73 this.setTxnHashCursor = this.setTxnHashCursor.bind(this)
74 this.setNetworkSeedCache = this.setNetworkSeedCache.bind(this)
75 this.addToPointCache = this.addToPointCache.bind(this)
76 }
78 componentDidMount() {
80 // NB (jtobin):
81 //
82 // If running in development, the following can be tweaked to get you set
83 // up with a desirable initial state.
85 // if (process.env.NODE_ENV === 'development') {
86 //
87 // const socket = 'ws://localhost:8545'
88 // const provider = new Web3.providers.WebsocketProvider(socket)
89 // const web3 = new Web3(provider)
90 // const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.DEV)
91 //
92 // const mnemonic = process.env.REACT_APP_DEV_MNEMONIC
93 // const hdpath = process.env.REACT_APP_HD_PATH
94 //
95 // this.setState({
96 // routeCrumbs: Stack([
97 // // ROUTE_NAMES.CREATE_GALAXY,
98 // // ROUTE_NAMES.SHIP,
99 // ROUTE_NAMES.SHIPS,
100 // // ROUTE_NAMES.MNEMONIC,
101 // ROUTE_NAMES.WALLET,
102 // ROUTE_NAMES.NETWORK,
103 // ROUTE_NAMES.LANDING
104 // ]),
105 // networkType: NETWORK_NAMES.LOCAL,
106 // pointCursor: Maybe.Just(0),
107 // web3: Maybe.Just(web3),
108 // contracts: Maybe.Just(contracts),
109 // walletType: WALLET_NAMES.MNEMONIC,
110 // wallet: walletFromMnemonic(mnemonic, hdpath),
111 // urbitWallet: Maybe.Nothing(),
112 // authMnemonic: Maybe.Just('benefit crew supreme gesture quantum web media hazard theory mercy wing kitten')
113 // })
114 // }
117 pushRoute(symbol) {
118 if (lodash.includes(ROUTE_NAMES, symbol)) {
119 this.setState((state, _) => ({
120 routeCrumbs: state.routeCrumbs.push(symbol),
121 }));
123 // Scroll to top of page with each route transition.
124 window.scrollTo(0, 0);
126 } else {
127 throw BRIDGE_ERROR.INVALID_ROUTE
128 }
129 }
131 skipRoute(len) {
132 this.setState((state, _) => ({
133 routeCrumbs: state.routeCrumbs.skip(len)
134 }))
135 }
137 popRoute() {
138 this.setState((state, _) => ({
139 routeCrumbs: state.routeCrumbs.shift()
140 }))
141 }
143 setNetworkType(symbol) {
144 if (lodash.includes(NETWORK_NAMES, symbol)) {
145 this.setState({
146 networkType: symbol
147 })
148 } else {
149 throw BRIDGE_ERROR.INVALID_NETWORK_TYPE
150 }
151 }
153 setNetworkSeedCache(networkSeed) {
154 this.setState({
155 networkSeedCache: networkSeed
156 })
157 }
159 setNetwork(web3, contracts) {
160 this.setState({
161 web3: web3,
162 contracts: contracts
163 })
164 }
166 setWalletType(symbol) {
167 if (lodash.includes(WALLET_NAMES, symbol)) {
168 this.setState({
169 walletType: symbol
170 })
171 } else {
172 throw BRIDGE_ERROR.INVALID_WALLET_TYPE
173 }
174 }
176 setWallet(wallet) {
177 this.setState({ wallet })
178 }
180 setWalletHdPath(walletHdPath) {
181 this.setState({ walletHdPath })
182 }
184 setUrbitWallet(urbitWallet) {
185 this.setState({ urbitWallet })
186 }
188 setAuthMnemonic(authMnemonic) {
189 this.setState({ authMnemonic })
190 }
192 setPointCursor(pointCursor) {
193 this.setState({ pointCursor })
194 }
196 addToPointCache(entry) {
197 this.setState((state, _) => ({
198 pointCache: Object.assign(state.pointCache, entry)
199 }))
200 }
202 setTxnHashCursor(txnHashCursor) {
203 this.setState({ txnHashCursor })
204 }
206 render() {
207 const {
208 routeCrumbs,
209 networkType,
210 walletType,
211 walletHdPath,
212 wallet,
213 urbitWallet,
214 authMnemonic,
215 networkSeedCache,
216 pointCursor,
217 pointCache,
218 txnHashCursor,
219 web3,
220 contracts
221 } = this.state
223 const View = router(routeCrumbs.peek())
225 return (
226 <Container>
227 <Row>
228 <Col className='col-md-1' />
229 <Col className='col-md-10' style={{maxWidth: '620px'}}>
230 <Header
231 routeCrumbs={ routeCrumbs }
232 skipRoute={ this.skipRoute }
233 networkType={ networkType }
234 wallet={ wallet }
235 pointCursor={ pointCursor } />
237 <Row className={ 'row wrapper' }>
239 <View
240 // router
241 pushRoute={ this.pushRoute }
242 popRoute={ this.popRoute }
243 // network
244 setNetworkType={ this.setNetworkType }
245 setNetwork={ this.setNetwork }
246 networkType={ networkType }
247 web3={ web3 }
248 contracts={ contracts }
249 // wallet
250 setWalletType={ this.setWalletType }
251 setWalletHdPath={ this.setWalletHdPath }
252 setWallet={ this.setWallet }
253 walletType={ walletType }
254 walletHdPath={ walletHdPath }
255 wallet={ wallet }
256 // urbit wallet
257 urbitWallet={ urbitWallet }
258 setUrbitWallet={ this.setUrbitWallet }
259 authMnemonic={ authMnemonic }
260 setAuthMnemonic={ this.setAuthMnemonic }
261 // point
262 setPointCursor={ this.setPointCursor }
263 addToPointCache={ this.addToPointCache }
264 pointCursor={ pointCursor }
265 pointCache={ pointCache }
266 networkSeedCache= { networkSeedCache }
267 setNetworkSeedCache= { this.setNetworkSeedCache }
268 // txn
269 setTxnHashCursor={ this.setTxnHashCursor }
270 txnHashCursor={ txnHashCursor } />
272 <div className={'push'} />
274 </Row>
276 <Footer />
277 </Col>
278 <Col className='col-md-1' />
279 </Row>
280 </Container>
281 )
282 }
285export default Bridge