git.iko.soy/bridge
on 394090a help sign in
bridge/src/bridge/Bridge.js
160 lines 4.6 kB history raw
1import React from 'react';
2import { Just, Nothing } from 'folktale/maybe';
4import Footer from './components/Footer';
5import Header from './components/Header';
6import { Container, Row, Col } from './components/Base';
8import nest from './lib/nest';
9import { router } from './lib/router';
10import { ROUTE_NAMES } from './lib/routeNames';
11import { NETWORK_TYPES } from './lib/network';
12import { walletFromMnemonic } from './lib/wallet';
13import { isDevelopment } from './lib/flags';
15import { HistoryProvider, useHistory } from './store/history';
16import { TxnConfirmationsProvider } from './store/txnConfirmations';
17import { OnlineProvider } from './store/online';
18import { NetworkProvider } from './store/network';
19import { WalletProvider } from './store/wallet';
20import { PointCursorProvider } from './store/pointCursor';
21import { PointCacheProvider } from './store/pointCache';
23const kInitialNetworkType = isDevelopment
24 ? NETWORK_TYPES.LOCAL
25 : NETWORK_TYPES.MAINNET;
27// NB(shrugs): toggle these variables to change the default local state.
28// try not to commit changes to this line, but there shouldn't be a problem
29// if you do because we'll never stub on a production build.
30const shouldStubLocal = false;
31const kIsStubbed = isDevelopment && shouldStubLocal;
32const kInitialRoutes = kIsStubbed
33 ? [
34 { name: ROUTE_NAMES.LANDING },
35 { name: ROUTE_NAMES.NETWORK },
36 { name: ROUTE_NAMES.WALLET },
37 { name: ROUTE_NAMES.SHIPS },
38 ]
39 : [{ name: ROUTE_NAMES.LANDING }];
41const kInitialWallet = kIsStubbed
42 ? walletFromMnemonic(
43 process.env.REACT_APP_DEV_MNEMONIC,
44 process.env.REACT_APP_HD_PATH
45 )
46 : undefined;
47const kInitialMnemonic = kIsStubbed
48 ? process.env.REACT_APP_DEV_MNEMONIC
49 : Nothing();
50const kInitialPointCursor = kIsStubbed ? Just(0) : Nothing();
52// the router itself is just a component that renders a specific view
53// depending on the history
54const Router = function(props) {
55 const history = useHistory();
56 const Route = router(history.peek());
58 return <Route {...props} />;
59};
61// NB(shrugs): separate component because it needs useHistory
62// this will be must better structured as part of the UI overhaul
63const VariableWidthColumn = function({ children }) {
64 const history = useHistory();
65 // For the invite acceptance flow, widen the screen to use the full
66 // container, and hide the breadcrumbs
67 return (
68 <Col
69 className={
70 history.includes(ROUTE_NAMES.INVITE_TICKET)
71 ? 'col-md-12'
72 : 'col-md-offset-1 col-md-10'
73 }
74 style={
75 history.includes(ROUTE_NAMES.INVITE_TICKET) ? {} : { maxWidth: '620px' }
76 }>
77 {children}
78 </Col>
79 );
80};
82// nest all of the providers within each other to avoid hella depth
83const AllProviders = nest([
84 HistoryProvider,
85 TxnConfirmationsProvider,
86 OnlineProvider,
87 NetworkProvider,
88 WalletProvider,
89 PointCursorProvider,
90 PointCacheProvider,
91]);
93class Bridge extends React.Component {
94 constructor(props) {
95 super(props);
97 this.state = {
98 networkSeedCache: null,
99 // txn
100 txnHashCursor: Nothing(),
101 txnConfirmations: {},
102 };
104 this.setTxnHashCursor = this.setTxnHashCursor.bind(this);
105 this.setNetworkSeedCache = this.setNetworkSeedCache.bind(this);
106 }
108 setNetworkSeedCache(networkSeed, revision) {
109 this.setState({
110 networkSeedCache: networkSeed,
111 networkRevisionCache: revision,
112 });
113 }
115 setTxnHashCursor(txnHashCursor) {
116 this.setState({ txnHashCursor });
117 }
119 render() {
120 const {
121 networkSeedCache,
122 networkRevisionCache,
123 txnHashCursor,
124 } = this.state;
126 return (
127 <AllProviders
128 initialRoutes={kInitialRoutes}
129 initialNetworkType={kInitialNetworkType}
130 initialWallet={kInitialWallet}
131 initialMnemonic={kInitialMnemonic}
132 initialPointCursor={kInitialPointCursor}>
133 <Container>
134 <Row>
135 <VariableWidthColumn>
136 <Header />
138 <Row className={'row wrapper'}>
139 <Router
140 networkSeedCache={networkSeedCache}
141 networkRevisionCache={networkRevisionCache}
142 setNetworkSeedCache={this.setNetworkSeedCache}
143 onSent={this.setTxnHashCursor}
144 setTxnHashCursor={this.setTxnHashCursor}
145 txnHashCursor={txnHashCursor}
146 />
148 <div className={'push'} />
149 </Row>
151 <Footer />
152 </VariableWidthColumn>
153 </Row>
154 </Container>
155 </AllProviders>
156 );
157 }
160export default Bridge;