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