git.iko.soy/bridge
on e366ef3 help sign in
bridge/src/Bridge.js
120 lines 3.5 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';
22import { TxnCursorProvider } from './store/txnCursor';
24import './style/index.scss';
26const kInitialNetworkType = isDevelopment
27 ? NETWORK_TYPES.LOCAL
28 : NETWORK_TYPES.MAINNET;
30// NB(shrugs): modify these variables to change the default local state.
31const shouldStubLocal = process.env.REACT_APP_STUB_LOCAL === 'true';
32const kIsStubbed = isDevelopment && shouldStubLocal;
33const kInitialRoutes = kIsStubbed
34 ? [
35 { name: ROUTE_NAMES.LANDING },
36 { name: ROUTE_NAMES.NETWORK },
37 { name: ROUTE_NAMES.WALLET },
38 { name: ROUTE_NAMES.SHIPS },
39 ]
40 : [{ name: ROUTE_NAMES.LANDING }];
42const kInitialWallet = kIsStubbed
43 ? walletFromMnemonic(
44 process.env.REACT_APP_DEV_MNEMONIC,
45 process.env.REACT_APP_HD_PATH
46 )
47 : undefined;
48const kInitialMnemonic = kIsStubbed
49 ? Just(process.env.REACT_APP_DEV_MNEMONIC)
50 : Nothing();
51const kInitialPointCursor = kIsStubbed ? Just(0) : Nothing();
53// the router itself is just a component that renders a specific view
54// depending on the history
55const Router = function() {
56 const history = useHistory();
57 const Route = router(history.peek());
59 return <Route />;
60};
62// NB(shrugs): separate component because it needs useHistory
63// this will be must better structured as part of the UI overhaul
64const VariableWidthColumn = function({ children }) {
65 const history = useHistory();
66 // For the invite acceptance flow, widen the screen to use the full
67 // container, and hide the breadcrumbs
68 return (
69 <Col
70 className={
71 history.includes(ROUTE_NAMES.INVITE_TICKET)
72 ? 'col-md-12'
73 : 'col-md-offset-1 col-md-10'
74 }
75 style={
76 history.includes(ROUTE_NAMES.INVITE_TICKET) ? {} : { maxWidth: '620px' }
77 }>
78 {children}
79 </Col>
80 );
81};
83// nest all of the providers within each other to avoid hella depth
84const AllProviders = nest([
85 HistoryProvider,
86 TxnConfirmationsProvider,
87 OnlineProvider,
88 NetworkProvider,
89 WalletProvider,
90 PointCursorProvider,
91 PointCacheProvider,
92 TxnCursorProvider,
93]);
95export default function Bridge() {
96 return (
97 <AllProviders
98 initialRoutes={kInitialRoutes}
99 initialNetworkType={kInitialNetworkType}
100 initialWallet={kInitialWallet}
101 initialMnemonic={kInitialMnemonic}
102 initialPointCursor={kInitialPointCursor}>
103 <Container>
104 <Row>
105 <VariableWidthColumn>
106 <Header />
108 <Row className={'row wrapper'}>
109 <Router />
111 <div className={'push'} />
112 </Row>
114 <Footer />
115 </VariableWidthColumn>
116 </Row>
117 </Container>
118 </AllProviders>
119 );