on master help sign in
Merge branch 'mino' into feat/multi-home
commitf282690989295b217268ce1ca11cd68f193a58e2 authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateTue 23 Jul 2019, 12:49 (7 years ago) parent766cfe456fd472
6 files changed+140−189
DEVELOPMENT.md+99 README.md+23−119 src/Bridge.js+15−10 src/lib/router.js−2 src/views/Disclaimer.js+3−3 src/views/Landing.js−55
DEVELOPMENT.mdnew file+99
@@ -0,0 +1,99 @@
1+# Development notes
2+
3+## Install / Build
4+
5+Clone the repo, and use a simple `npm install`. You can then use a `npm run build` to create an optimised static build (serve it with e.g. [serve](http://npmjs.com/package/serve), or with python as described above).
6+
7+## General notes
8+
9+For development, use `npm run pilot` to get going after a `npm install`. This
10+will boot up a [Ganache](https://github.com/trufflesuite/ganache-cli) node in the background, deploy the Azimuth contracts to
11+it, and fire up a local webserver. Bridge will be served on `localhost:3000`.
12+
13+Note that one of our dependencies itself depends on a library called
14+`handle-thing` which breaks under the Ledger support requirements (see below)
15+on node 11.1.0, so make sure you're using some other node version.
16+
17+You can use [nvm](https://github.com/creationix/nvm), for example, and do:
18+
19+```
20+$ nvm install 11.0.0
21+$ nvm use v11.0.0
22+```
23+
24+before running `npm run pilot`.
25+
26+## Useful accounts
27+
28+The ecliptic owner is the only account that's able to create galaxies, so
29+it's a good place to get started. On the testnet, it's the address:
30+
31+```
32+0x6DEfFb0caFDB11D175F123F6891AA64F01c24F7d
33+```
34+
35+You can authenticate as it using the following mnemonic:
36+
37+```
38+benefit crew supreme gesture quantum web media hazard theory mercy wing kitten
39+```
40+
41+Under that mnemonic, Ganache will also auto-populate the following accounts
42+with 100 ETH:
43+
44+```
45+0x6deffb0cafdb11d175f123f6891aa64f01c24f7d
46+0xd53208cf45fc9bd7938b200bff8814a26146688f
47+0x7b2a2d51e4d8fac602e20a5f6907ff9fbd88e1fd
48+0xf48062ae8bafd6ef19cd6cb89db93a0d0ca6ce26
49+0xf84a77aeb351c49dfa87e805a659d2daddff7606
50+0x167e357cf8b845370d0d408f9b389b66185b7b5b
51+0xcbecf3abc9878f07afc851aead2d8f1c436cc71d
52+0x0afc0c3f4eeea500871f464ca71eef5e54a9af36
53+0x6d654ef2489674d21aed428e8a4ad8ca4820f125
54+0x218f6f87683db546ad47a5dc8b480e5a9b694866
55+```
56+
57+To play around with any of these, authenticate using the same mnemonic, but
58+use a custom HD path of `m/44'/60'/0'/0/1`, `m/44'/60'/0'/0/2`, and so on.
59+
60+## Initial development state
61+
62+You can also tweak a couple of things to change your development state
63+somewhat (say, for example, you want to start on the points list screen, instead
64+of having to re-authenticate whenever you make a change or refresh the page):
65+
66+- The `.env.development` file contains environment variables that you can
67+ provide to the application when it's running in development. You can access
68+ them via `process.env.REACT_APP_<whatever>`.
69+
70+- Set `REACT_APP_STUB_LOCAL='true'` in `.env.development` to enabled stubbing of
71+ certain methods throughout the app.
72+
73+- The top of the Bridge component in `src/Bridge.js` can be tweaked for setting
74+ your initial state. You can provide a specific wallet,
75+ network type, and so on.
76+
77+## HTTPS
78+
79+For development, you can enable HTTPS on localhost without a certificate for
80+Chrome by pasting the following into the URL bar:
81+
82+```
83+chrome://flags/#allow-insecure-localhost
84+```
85+
86+In Firefox, you may need to allow connecting to the unsecured local node
87+websocket. Do this by going to `about:config` and setting the
88+`network.websocket.allowInsecureFromHTTPS` flag to `true`.
89+
90+Additionally you need to run with the `HTTPS` environment variable set to
91+`true`. Note that `npm run pilot` will handle this automatically.
92+
93+## Releases
94+
95+To generate a release `bridge-$VERSION.zip` file, use a simple `npm run release`.
96+
97+This will pack the build directory together with the README, `bridge-https.py`
98+script, and also generate a set of checksums for the build directory. You can
99+verify the checksums on e.g. MacOS via `shasum -c checksums.txt`.
README.md+23−119
@@ -6,147 +6,51 @@ An application for interacting with Azimuth.
66
77## Usage
88
9+The latest version of Bridge is accessible online at [bridge.azimuth.network](https://bridge.azimuth.network). No setup needed.
10+
11+If you would rather host Bridge on your own machine, read on.
12+
913### Requirements
1014
1115Python 3.7.2
1216
1317### Instructions
1418
15−#### Install
19+#### Download
1620
17−1. [Download a release](https://github.com/urbit/bridge/releases)
21+1. [Download a release](https://github.com/urbit/bridge/releases/latest)
18222. Unzip it (`bridge-$version.zip`)
19233. Open up your command line interface (Terminal on MacOS, Command Prompt on Windows)
20244. `cd` into the `bridge-$version` directory
2125
22−Follow the instructions below to run Bridge.
23−
24−#### Run Bridge
26+#### Verify checksums
2527
26−If you plan to authenticate and sign transactions with a Master Ticket, BIP39 mnemonic, Ethereum private key, or keystore file:
27−
28−1. `cd` into the `bridge-$version` directory
29−2. Run `python3 -m http.server 5000 --bind 127.0.0.1`
30−3. Navigate to http://localhost:5000 using a web browser to access Bridge (we recommend using Firefox or Chrome)
31−
32−#### Run Bridge with Ledger support
33−
34−If you plan to authenticate and sign transactions with a [Ledger](https://www.ledger.com/), Bridge must be serving over HTTPS on localhost. This requires self-signed certificates. To do this:
35−
36−1. Install [mkcert](https://github.com/FiloSottile/mkcert)
37−2. If you're using Firefox, additionally install [nss](https://github.com/nss-dev/nss)
38−3. Install a local certificate authority via `mkcert -install`
39−4. From the `bridge-$version` directory, run `mkcert localhost` to generate a certificate valid for localhost. This will produce two files: `localhost.pem`, the local certificate, and `localhost-key.pem`, its corresponding private key
40−5. Run `python bridge-https.py`
41−6. Navigate to https://localhost:4443 in a web browser to access Bridge
42−
43−### Verify checksums
44−
45−To validate your downloaded file's integrity, compare the lines in checksum.txt to SHA-256 hashes of the `bridge-$version` directory's contents.
28+Optionally, to validate your downloaded file's integrity, compare the lines in checksum.txt to SHA-256 hashes of the `bridge-$version` directory's contents.
4629
4730- On MacOS: `shasum -a 256 -c checksums.txt .`
4831- On Linux: `sha256sum -c checksums.txt .`
4932- On Windows: Go into the `build` directory and verify files individually with `CertUtil -hashFile [file_name] SHA256`
5033
51−## Development notes
52−
53−### Install / Build
54−
55−Clone the repo, and use a simple `npm install`. You can then use a `npm run build` to create an optimised static build (serve it with e.g. [serve][serv]).
56−
57−### General notes
58−
59−For development, use `npm run pilot` to get going after a `npm install`. This
60−will boot up a Ganache node in the background, deploy the Azimuth contracts to
61−it, and fire up a local webserver. Bridge will be served on `localhost:3000`.
62−
63−Note that one of our dependencies itself depends on a library called
64−`handle-thing` which breaks under the Ledger support requirements (see below)
65−on node 11.1.0, so make sure you're using some other node version.
66−
67−You can use [nvm](https://github.com/creationix/nvm), for example, and do:
68−
69−```
70−$ nvm install 11.0.0
71−$ nvm use v11.0.0
72−```
73−
74−before running `npm run pilot`.
75−
76−### Useful accounts
77−
78−The ecliptic owner is the only account that's able to create galaxies, so
79−it's a good place to get started. On the testnet, it's the address:
80−
81−```
82−0x6DEfFb0caFDB11D175F123F6891AA64F01c24F7d
83−```
84−
85−You can authenticate as it using the following mnemonic:
86−
87−```
88−benefit crew supreme gesture quantum web media hazard theory mercy wing kitten
89−```
90−
91−Under that mnemonic, Ganache will also auto-populate the following accounts
92−with 100 ETH:
93−
94−```
95−0x6deffb0cafdb11d175f123f6891aa64f01c24f7d
96−0xd53208cf45fc9bd7938b200bff8814a26146688f
97−0x7b2a2d51e4d8fac602e20a5f6907ff9fbd88e1fd
98−0xf48062ae8bafd6ef19cd6cb89db93a0d0ca6ce26
99−0xf84a77aeb351c49dfa87e805a659d2daddff7606
100−0x167e357cf8b845370d0d408f9b389b66185b7b5b
101−0xcbecf3abc9878f07afc851aead2d8f1c436cc71d
102−0x0afc0c3f4eeea500871f464ca71eef5e54a9af36
103−0x6d654ef2489674d21aed428e8a4ad8ca4820f125
104−0x218f6f87683db546ad47a5dc8b480e5a9b694866
105−```
106−
107−To play around with any of these, authenticate using the same mnemonic, but
108−use a custom HD path of `m/44'/60'/0'/0/1`, `m/44'/60'/0'/0/2`, and so on.
109−
110−### Initial development state
111−
112−You can also tweak a couple of things to change your development state
113−somewhat (say, for example, you want to start on the points list screen, instead
114−of having to re-authenticate whenever you make a change or refresh the page):
115−
116−- The `.env.development` file contains environment variables that you can
117− provide to the application when it's running in development. You can access
118− them via `process.env.REACT_APP_<whatever>`.
119−
120−- Set `REACT_APP_STUB_LOCAL='true'` in `.env.development` to enabled stubbing of
121− certain methods throughout the app.
122−
123−- The top of the Bridge component in `src/Bridge.js` can be tweaked for setting
124− your initial state. You can provide a specific wallet,
125− network type, and so on.
126−
127−### HTTPS
34+#### Run Bridge
12835
129−For development, you can enable HTTPS on localhost without a certificate for
130−Chrome by pasting the following into the URL bar:
36+1. `cd` into the `bridge-$version` directory
37+2. Run `python3 -m http.server 5000 --bind 127.0.0.1`
38+3. Navigate to http://localhost:5000 using a web browser to access Bridge (we recommend using Firefox or Chrome)
13139
132−```
133−chrome://flags/#allow-insecure-localhost
134−```
40+#### Ledger support
13541
136−In Firefox, you may need to allow connecting to the unsecured local node
137−websocket. Do this by going to `about:config` and setting the
138−`network.websocket.allowInsecureFromHTTPS` flag to `true`.
42+If you plan to authenticate with a [Ledger](https://www.ledger.com/), Bridge must be serving over HTTPS on localhost. This requires self-signed certificates. To do this:
13943
140−Additionally you need to run with the `HTTPS` environment variable set to
141−`true`. Note that `npm run pilot` will handle this automatically.
44+1. Install [mkcert](https://github.com/FiloSottile/mkcert)
45+2. Install a local certificate authority via `mkcert -install`
46+3. From the `bridge-$version` directory, run `mkcert localhost` to generate a certificate valid for localhost. This will produce two files: `localhost.pem`, the local certificate, and `localhost-key.pem`, its corresponding private key
47+4. Run `python bridge-https.py`
48+5. Navigate to https://localhost:4443 in a web browser to access Bridge
14249
143−### Releases
50+## Bridge without internet access
14451
145−To generate a release `bridge-$VERSION.zip` file, use a simple `npm run release`.
52+A proper "offline mode" for the latest iteration of Bridge is still being worked on. In the mean time, if you need to use Bridge on an airgapped machine, use [Bridge v1.4.1](https://github.com/urbit/bridge/releases/tag/v1.4.1).
14653
147−This will pack the build directory together with the README, `bridge-https.py`
148−script, and also generate a set of checksums for the build directory. You can
149−verify the checksums on e.g. OS X via `shasum -c checksums.txt`.
54+## Development
15055
151−[rele]: https://github.com/urbit/bridge/releases/latest
152−[serv]: http://npmjs.com/package/serve
56+See [development.md](DEVELOPMENT.md).
src/Bridge.js+15−10
@@ -13,6 +13,7 @@ import { NETWORK_TYPES } from 'lib/network';
1313import { walletFromMnemonic } from 'lib/wallet';
1414import { isDevelopment } from 'lib/flags';
1515import { hasDisclaimed } from 'lib/disclaimerCookie';
16+import useImpliedTicket from 'lib/useImpliedTicket';
1617
1718import 'style/index.scss';
1819
@@ -23,15 +24,6 @@ const INITIAL_NETWORK_TYPE = isDevelopment
2324// NB(shrugs): modify these variables to change the default local state.
2425const SHOULD_STUB_LOCAL = process.env.REACT_APP_STUB_LOCAL === 'true';
2526const IS_STUBBED = isDevelopment && SHOULD_STUB_LOCAL;
26−const INITIAL_ROUTES = IS_STUBBED
27− ? [
28− { key: ROUTE_NAMES.LANDING },
29− { key: ROUTE_NAMES.LOGIN },
30− { key: ROUTE_NAMES.POINTS },
31− ]
32− : hasDisclaimed()
33− ? [{ key: ROUTE_NAMES.LANDING }]
34− : [{ key: ROUTE_NAMES.DISCLAIMER }];
3527
3628const INITIAL_WALLET = IS_STUBBED
3729 ? walletFromMnemonic(
@@ -45,11 +37,24 @@ const INITIAL_MNEMONIC = IS_STUBBED
4537const INITIAL_POINT_CURSOR = IS_STUBBED ? Just(65792) : Nothing();
4638
4739function Bridge() {
40+ const landingPage = !!useImpliedTicket()
41+ ? ROUTE_NAMES.ACTIVATE
42+ : ROUTE_NAMES.LOGIN;
43+ const initialRoutes = IS_STUBBED
44+ ? [
45+ { key: ROUTE_NAMES.LOGIN },
46+ { key: ROUTE_NAMES.POINTS },
47+ { key: ROUTE_NAMES.POINT },
48+ ]
49+ : hasDisclaimed()
50+ ? [{ key: landingPage }]
51+ : [{ key: landingPage }, { key: ROUTE_NAMES.DISCLAIMER }];
52+
4853 return (
4954 <Provider
5055 views={ROUTES}
5156 names={ROUTE_NAMES}
52− initialRoutes={INITIAL_ROUTES}
57+ initialRoutes={initialRoutes}
5358 initialNetworkType={INITIAL_NETWORK_TYPE}
5459 initialWallet={INITIAL_WALLET}
5560 initialMnemonic={INITIAL_MNEMONIC}
src/lib/router.js−2
@@ -1,4 +1,3 @@
1−import Landing from 'views/Landing';
21import Disclaimer from 'views/Disclaimer';
32import Login from 'views/Login.js';
43import Admin from 'views/Admin';
@@ -18,7 +17,6 @@ import CancelTransfer from 'views/CancelTransfer';
1817import { ROUTE_NAMES } from './routeNames';
1918
2019export const ROUTES = {
21− [ROUTE_NAMES.LANDING]: Landing,
2220 [ROUTE_NAMES.DISCLAIMER]: Disclaimer,
2321 [ROUTE_NAMES.ACTIVATE]: Activate,
2422 [ROUTE_NAMES.VIEW_POINT]: ViewPoint,
src/views/Disclaimer.js+3−3
@@ -13,7 +13,7 @@ import WarningBox from 'components/WarningBox';
1313const TEXT_STYLE = 'f5';
1414
1515export default function ActivateDisclaimer() {
16− const { popAndPush, names } = useHistory();
16+ const { pop } = useHistory();
1717 const [understoodInput, { data: isUnderstood }] = useCheckboxInput({
1818 name: 'checkbox',
1919 label: 'I acknowledge and understand these rights',
@@ -21,8 +21,8 @@ export default function ActivateDisclaimer() {
2121
2222 const goToPassport = useCallback(() => {
2323 setDisclaimerCookie();
24− popAndPush(names.LANDING);
25− }, [popAndPush, names]);
24+ pop();
25+ }, [pop]);
2626
2727 return (
2828 <View>
src/views/Landing.jsdeleted−55
@@ -1,55 +0,0 @@
1−import React from 'react';
2−import { H1, P } from 'indigo-react';
3−
4−import { useHistory } from '../store/history';
5−import useImpliedPoint from 'lib/useImpliedPoint';
6−import useImpliedTicket from 'lib/useImpliedTicket';
7−
8−import View from 'components/View';
9−import { ForwardButton } from 'components/Buttons';
10−
11−function Landing() {
12− const { push, names } = useHistory();
13−
14− const impliedPoint = useImpliedPoint();
15− const impliedTicket = useImpliedTicket();
16− if (impliedPoint) {
17− push(names.LOGIN);
18− } else if (impliedTicket) {
19− push(names.ACTIVATE);
20− }
21−
22− return (
23− <View>
24− <H1>Welcome</H1>
25−
26− <P>
27− Bridge is a tool for managing and viewing assets on Azimuth, the Urbit
28− address space.
29− </P>
30−
31− <ForwardButton
32− className="mt3"
33− detail="If you were sent an Azimuth invite code."
34− onClick={() => push(names.ACTIVATE)}>
35− Activate a Point
36− </ForwardButton>
37−
38− <ForwardButton
39− className="mt3"
40− detail="Login to an activated point."
41− onClick={() => push(names.LOGIN)}>
42− Login
43− </ForwardButton>
44−
45− <ForwardButton
46− className="mt3"
47− detail="View an Azimuth point without signing into a wallet."
48− onClick={() => push(names.VIEW_POINT)}>
49− View a Point
50− </ForwardButton>
51− </View>
52− );
53−}
54−
55−export default Landing;