git.iko.soy/bridge
on d6291a2 help sign in
bridge/src/Bridge.js
247 lines 6.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 } from './lib/wallet'
13import { BRIDGE_ERROR } from './lib/error'
15class Bridge extends React.Component {
17 constructor(props) {
18 super(props)
20 this.state = {
21 // routes
22 routeCrumbs: Stack([ ROUTE_NAMES.LANDING ]),
23 // network
24 networkType: NETWORK_NAMES.MAINNET,
25 web3: Maybe.Nothing(),
26 contracts: Maybe.Nothing(),
27 // wallet
28 walletType: WALLET_NAMES.MNEMONIC,
29 wallet: Maybe.Nothing(),
30 // urbit wallet-related
31 urbitWallet: Maybe.Nothing(),
32 authMnemonic: Maybe.Nothing(),
33 // point
34 pointCursor: Maybe.Nothing(),
35 pointCache: {},
36 // txn
37 txnCursor: Maybe.Nothing()
38 }
40 this.pushRoute = this.pushRoute.bind(this)
41 this.popRoute = this.popRoute.bind(this)
42 this.skipRoute = this.skipRoute.bind(this)
43 this.setNetworkType = this.setNetworkType.bind(this)
44 this.setNetwork = this.setNetwork.bind(this)
45 this.setWalletType = this.setWalletType.bind(this)
46 this.setWallet = this.setWallet.bind(this)
47 this.setUrbitWallet = this.setUrbitWallet.bind(this)
48 this.setAuthMnemonic = this.setAuthMnemonic.bind(this)
49 this.setPointCursor = this.setPointCursor.bind(this)
50 this.setTxnCursor = this.setTxnCursor.bind(this)
51 this.addToPointCache = this.addToPointCache.bind(this)
52 }
54 componentDidMount() {
56 // NB (jtobin):
57 //
58 // If running in development, the following can be tweaked to get you set
59 // up with a desirable initial state.
61 // if (process.env.NODE_ENV === 'development') {
62 //
63 // const socket = 'ws://localhost:8545'
64 // const provider = new Web3.providers.WebsocketProvider(socket)
65 // const web3 = new Web3(provider)
66 // const contracts = azimuth.initContracts(web3, CONTRACT_ADDRESSES.DEV)
67 //
68 // const mnemonic = process.env.REACT_APP_DEV_MNEMONIC
69 // const hdpath = process.env.REACT_APP_HD_PATH
70 //
71 // this.setState({
72 // routeCrumbs: Stack([
73 // ROUTE_NAMES.CREATE_GALAXY,
74 // ROUTE_NAMES.SHIPS,
75 // // ROUTE_NAMES.MNEMONIC,
76 // ROUTE_NAMES.WALLET,
77 // ROUTE_NAMES.NETWORK,
78 // ROUTE_NAMES.LANDING
79 // ]),
80 // networkType: NETWORK_NAMES.LOCAL,
81 // web3: Maybe.Just(web3),
82 // contracts: Maybe.Just(contracts),
83 // walletType: WALLET_NAMES.MNEMONIC,
84 // wallet: walletFromMnemonic(mnemonic, hdpath),
85 // urbitWallet: Maybe.Nothing(),
86 // authMnemonic: Maybe.Nothing()
87 // })
88 // }
91 pushRoute(symbol) {
92 if (lodash.includes(ROUTE_NAMES, symbol)) {
93 this.setState((state, _) => ({
94 routeCrumbs: state.routeCrumbs.push(symbol),
95 }));
97 // Scroll to top of page with each route transition.
98 window.scrollTo(0, 0);
100 } else {
101 throw BRIDGE_ERROR.INVALID_ROUTE
102 }
103 }
105 skipRoute(len) {
106 this.setState((state, _) => ({
107 routeCrumbs: state.routeCrumbs.skip(len)
108 }))
109 }
111 popRoute() {
112 this.setState((state, _) => ({
113 routeCrumbs: state.routeCrumbs.shift()
114 }))
115 }
117 setNetworkType(symbol) {
118 if (lodash.includes(NETWORK_NAMES, symbol)) {
119 this.setState({
120 networkType: symbol
121 })
122 } else {
123 throw BRIDGE_ERROR.INVALID_NETWORK_TYPE
124 }
125 }
127 setNetwork(web3, contracts) {
128 this.setState({
129 web3: web3,
130 contracts: contracts
131 })
132 }
134 setWalletType(symbol) {
135 if (lodash.includes(WALLET_NAMES, symbol)) {
136 this.setState({
137 walletType: symbol
138 })
139 } else {
140 throw BRIDGE_ERROR.INVALID_WALLET_TYPE
141 }
142 }
144 setWallet(wallet) {
145 this.setState({
146 wallet: wallet
147 })
148 }
150 setUrbitWallet(urbitWallet) {
151 this.setState({ urbitWallet })
152 }
154 setAuthMnemonic(authMnemonic) {
155 this.setState({ authMnemonic })
156 }
158 setPointCursor(pointCursor) {
159 this.setState({ pointCursor })
160 }
162 addToPointCache(entry) {
163 this.setState((state, _) => ({
164 pointCache: Object.assign(state.pointCache, entry)
165 }))
166 }
168 setTxnCursor(txn) {
169 this.setState({
170 txnCursor: txn
171 })
172 }
174 render() {
175 const {
176 routeCrumbs,
177 networkType,
178 walletType,
179 wallet,
180 urbitWallet,
181 authMnemonic,
182 pointCursor,
183 pointCache,
184 txnCursor,
185 web3,
186 contracts
187 } = this.state
189 const View = router(routeCrumbs.peek())
191 return (
192 <Container>
193 <Row>
194 <Col className='col-md-1' />
195 <Col className='col-md-10' style={{maxWidth: '620px'}}>
196 <Header
197 routeCrumbs={ routeCrumbs }
198 skipRoute={ this.skipRoute }
199 networkType={ networkType }
200 wallet={ wallet }
201 pointCursor={ pointCursor } />
203 <Row className={ 'row wrapper' }>
205 <View
206 // router
207 pushRoute={ this.pushRoute }
208 popRoute={ this.popRoute }
209 // network
210 setNetworkType={ this.setNetworkType }
211 setNetwork={ this.setNetwork }
212 networkType={ networkType }
213 web3={ web3 }
214 contracts={ contracts }
215 // wallet
216 setWalletType={ this.setWalletType }
217 setWallet={ this.setWallet }
218 walletType={ walletType }
219 wallet={ wallet }
220 // urbit wallet
221 urbitWallet={ urbitWallet }
222 setUrbitWallet={ this.setUrbitWallet }
223 authMnemonic={ authMnemonic }
224 setAuthMnemonic={ this.setAuthMnemonic }
225 // point
226 setPointCursor={ this.setPointCursor }
227 addToPointCache={ this.addToPointCache }
228 pointCursor={ pointCursor }
229 pointCache={ pointCache }
230 // txn
231 setTxnCursor={ this.setTxnCursor }
232 txnCursor={ txnCursor } />
234 <div className={'push'} />
236 </Row>
238 <Footer />
239 </Col>
240 <Col className='col-md-1' />
241 </Row>
242 </Container>
243 )
244 }
247export default Bridge