git.iko.soy/bridge
on master help sign in
ux: restore Access Code to Urbit OS view
commit08176cfbc87118b7ee2c4e06295a760cb61ea288 authortomholford <tomholford@users.noreply.github.com> dateMon 26 Jul 2021, 17:54 (5 years ago) parent5a0fc64
8 files changed+266−21
compare with master
unifiedsplit
package-lock.json+188 package.json+3−1 src/components/Buttons.js+8 src/components/CopyButton.js+10−19 src/setupTests.ts+1 src/views/UrbitOS/AccessCode.test.tsx+30 src/views/UrbitOS/AccessCode.tsx+23 src/views/UrbitOS/Home.tsx+3−1
package-lock.json+188
@@ -6788,6 +6788,155 @@
67886788 "defer-to-connect": "^1.0.1"
67896789 }
67906790 },
6791+ "@testing-library/dom": {
6792+ "version": "8.1.0",
6793+ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.1.0.tgz",
6794+ "integrity": "sha512-kmW9alndr19qd6DABzQ978zKQ+J65gU2Rzkl8hriIetPnwpesRaK4//jEQyYh8fEALmGhomD/LBQqt+o+DL95Q==",
6795+ "dev": true,
6796+ "requires": {
6797+ "@babel/code-frame": "^7.10.4",
6798+ "@babel/runtime": "^7.12.5",
6799+ "@types/aria-query": "^4.2.0",
6800+ "aria-query": "^4.2.2",
6801+ "chalk": "^4.1.0",
6802+ "dom-accessibility-api": "^0.5.6",
6803+ "lz-string": "^1.4.4",
6804+ "pretty-format": "^27.0.2"
6805+ },
6806+ "dependencies": {
6807+ "@jest/types": {
6808+ "version": "27.0.6",
6809+ "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.0.6.tgz",
6810+ "integrity": "sha512-aSquT1qa9Pik26JK5/3rvnYb4bGtm1VFNesHKmNTwmPIgOrixvhL2ghIvFRNEpzy3gU+rUgjIF/KodbkFAl++g==",
6811+ "dev": true,
6812+ "requires": {
6813+ "@types/istanbul-lib-coverage": "^2.0.0",
6814+ "@types/istanbul-reports": "^3.0.0",
6815+ "@types/node": "*",
6816+ "@types/yargs": "^16.0.0",
6817+ "chalk": "^4.0.0"
6818+ }
6819+ },
6820+ "@types/yargs": {
6821+ "version": "16.0.4",
6822+ "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
6823+ "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
6824+ "dev": true,
6825+ "requires": {
6826+ "@types/yargs-parser": "*"
6827+ }
6828+ },
6829+ "ansi-styles": {
6830+ "version": "5.2.0",
6831+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
6832+ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
6833+ "dev": true
6834+ },
6835+ "pretty-format": {
6836+ "version": "27.0.6",
6837+ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.0.6.tgz",
6838+ "integrity": "sha512-8tGD7gBIENgzqA+UBzObyWqQ5B778VIFZA/S66cclyd5YkFLYs2Js7gxDKf0MXtTc9zcS7t1xhdfcElJ3YIvkQ==",
6839+ "dev": true,
6840+ "requires": {
6841+ "@jest/types": "^27.0.6",
6842+ "ansi-regex": "^5.0.0",
6843+ "ansi-styles": "^5.0.0",
6844+ "react-is": "^17.0.1"
6845+ }
6846+ },
6847+ "react-is": {
6848+ "version": "17.0.2",
6849+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
6850+ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
6851+ "dev": true
6852+ }
6853+ }
6854+ },
6855+ "@testing-library/jest-dom": {
6856+ "version": "5.14.1",
6857+ "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
6858+ "integrity": "sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==",
6859+ "dev": true,
6860+ "requires": {
6861+ "@babel/runtime": "^7.9.2",
6862+ "@types/testing-library__jest-dom": "^5.9.1",
6863+ "aria-query": "^4.2.2",
6864+ "chalk": "^3.0.0",
6865+ "css": "^3.0.0",
6866+ "css.escape": "^1.5.1",
6867+ "dom-accessibility-api": "^0.5.6",
6868+ "lodash": "^4.17.15",
6869+ "redent": "^3.0.0"
6870+ },
6871+ "dependencies": {
6872+ "chalk": {
6873+ "version": "3.0.0",
6874+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
6875+ "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
6876+ "dev": true,
6877+ "requires": {
6878+ "ansi-styles": "^4.1.0",
6879+ "supports-color": "^7.1.0"
6880+ }
6881+ },
6882+ "css": {
6883+ "version": "3.0.0",
6884+ "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
6885+ "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
6886+ "dev": true,
6887+ "requires": {
6888+ "inherits": "^2.0.4",
6889+ "source-map": "^0.6.1",
6890+ "source-map-resolve": "^0.6.0"
6891+ }
6892+ },
6893+ "redent": {
6894+ "version": "3.0.0",
6895+ "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
6896+ "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
6897+ "dev": true,
6898+ "requires": {
6899+ "indent-string": "^4.0.0",
6900+ "strip-indent": "^3.0.0"
6901+ }
6902+ },
6903+ "source-map": {
6904+ "version": "0.6.1",
6905+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
6906+ "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
6907+ "dev": true
6908+ },
6909+ "source-map-resolve": {
6910+ "version": "0.6.0",
6911+ "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
6912+ "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
6913+ "dev": true,
6914+ "requires": {
6915+ "atob": "^2.1.2",
6916+ "decode-uri-component": "^0.2.0"
6917+ }
6918+ },
6919+ "strip-indent": {
6920+ "version": "3.0.0",
6921+ "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
6922+ "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
6923+ "dev": true,
6924+ "requires": {
6925+ "min-indent": "^1.0.0"
6926+ }
6927+ }
6928+ }
6929+ },
6930+ "@testing-library/react": {
6931+ "version": "12.0.0",
6932+ "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.0.0.tgz",
6933+ "integrity": "sha512-sh3jhFgEshFyJ/0IxGltRhwZv2kFKfJ3fN1vTZ6hhMXzz9ZbbcTgmDYM4e+zJv+oiVKKEWZPyqPAh4MQBI65gA==",
6934+ "dev": true,
6935+ "requires": {
6936+ "@babel/runtime": "^7.12.5",
6937+ "@testing-library/dom": "^8.0.0"
6938+ }
6939+ },
67916940 "@textile/buckets": {
67926941 "version": "6.0.5",
67936942 "resolved": "https://registry.npmjs.org/@textile/buckets/-/buckets-6.0.5.tgz",
@@ -7958,6 +8107,12 @@
79588107 "@types/node": "*"
79598108 }
79608109 },
8110+ "@types/aria-query": {
8111+ "version": "4.2.2",
8112+ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
8113+ "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
8114+ "dev": true
8115+ },
79618116 "@types/babel__core": {
79628117 "version": "7.1.14",
79638118 "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.14.tgz",
@@ -8386,6 +8541,15 @@
83868541 "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.7.tgz",
83878542 "integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ=="
83888543 },
8544+ "@types/testing-library__jest-dom": {
8545+ "version": "5.14.1",
8546+ "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.1.tgz",
8547+ "integrity": "sha512-Gk9vaXfbzc5zCXI9eYE9BI5BNHEp4D3FWjgqBE/ePGYElLAP+KvxBcsdkwfIVvezs605oiyd/VrpiHe3Oeg+Aw==",
8548+ "dev": true,
8549+ "requires": {
8550+ "@types/jest": "*"
8551+ }
8552+ },
83898553 "@types/to-json-schema": {
83908554 "version": "0.2.0",
83918555 "resolved": "https://registry.npmjs.org/@types/to-json-schema/-/to-json-schema-0.2.0.tgz",
@@ -12789,6 +12953,12 @@
1278912953 "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
1279012954 "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
1279112955 },
12956+ "css.escape": {
12957+ "version": "1.5.1",
12958+ "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
12959+ "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
12960+ "dev": true
12961+ },
1279212962 "cssdb": {
1279312963 "version": "4.4.0",
1279412964 "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
@@ -13474,6 +13644,12 @@
1347413644 "esutils": "^2.0.2"
1347513645 }
1347613646 },
13647+ "dom-accessibility-api": {
13648+ "version": "0.5.6",
13649+ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz",
13650+ "integrity": "sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==",
13651+ "dev": true
13652+ },
1347713653 "dom-converter": {
1347813654 "version": "0.2.0",
1347913655 "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -23293,6 +23469,12 @@
2329323469 "integrity": "sha1-81ypHEk/e3PaDgdJUwTxezH4fuU=",
2329423470 "optional": true
2329523471 },
23472+ "lz-string": {
23473+ "version": "1.4.4",
23474+ "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
23475+ "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
23476+ "dev": true
23477+ },
2329623478 "magic-string": {
2329723479 "version": "0.25.7",
2329823480 "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -23628,6 +23810,12 @@
2362823810 "dom-walk": "^0.1.0"
2362923811 }
2363023812 },
23813+ "min-indent": {
23814+ "version": "1.0.1",
23815+ "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
23816+ "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
23817+ "dev": true
23818+ },
2363123819 "mini-css-extract-plugin": {
2363223820 "version": "0.11.3",
2363323821 "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
package.json+3−1
@@ -79,6 +79,8 @@
7979 "web3-utils": "^1.3.6"
8080 },
8181 "devDependencies": {
82+ "@testing-library/jest-dom": "^5.14.1",
83+ "@testing-library/react": "^12.0.0",
8284 "@types/keccak": "^3.0.1",
8385 "@types/lodash": "^4.14.170",
8486 "eslint-config-prettier": "^5.0.0",
@@ -97,7 +99,7 @@
9799 "start": "react-scripts start",
98100 "build": "react-scripts build",
99101 "build:ropsten": "REACT_APP_ROPSTEN=true react-scripts build",
100− "test": "react-scripts test --env=jsdom",
102+ "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@tlon\/indigo-react)/\" --env=jsdom",
101103 "eject": "react-scripts eject",
102104 "checksum": "cd build && find . -exec shasum -a256 {} ';' > ../checksums.txt && cd ..",
103105 "zip": "BRIDGE_VERSION=${REACT_APP_BRIDGE_VERSION:-$npm_package_version}; zip -ur bridge-$BRIDGE_VERSION.zip README.md bridge-https.py checksums.txt && cd build && zip -ur ../bridge-$BRIDGE_VERSION.zip ./* && cd ..",
src/components/Buttons.js+8
@@ -1,5 +1,6 @@
11import React from 'react';
22import { Button } from 'indigo-react';
3+import { Icon } from '@tlon/indigo-react';
34
45import { blinkIf } from './Blinky';
56
@@ -23,3 +24,10 @@ export const OfflineButton = props => (
2324 Offline
2425 </OutButton>
2526);
27+
28+export const CopyButton = props => (
29+ <Button
30+ accessory={<Icon icon="Copy" size="18px" color={'black'} />}
31+ {...props}
32+ />
33+);
src/components/CopyButton.js+10−19
@@ -2,7 +2,7 @@ import React from 'react';
22import cn from 'classnames';
33import { LinkButton } from 'indigo-react';
44
5−import { ForwardButton } from 'components/Buttons';
5+import { CopyButton as BaseCopyButton } from 'components/Buttons';
66
77import useCopiable from 'lib/useCopiable';
88
@@ -30,28 +30,19 @@ export default function CopyButton({
3030 );
3131}
3232
33−export function CopyButtonWide({
34− as: As = ForwardButton,
35− text,
36− children,
37− accessory = renderDefaultCopyText,
38− ...rest
39−}) {
33+export function CopyButtonWide({ text, children, ...rest }) {
4034 const [doCopy, didCopy] = useCopiable(text);
4135 return (
42− <As
36+ <BaseCopyButton
37+ as="span"
4338 onClick={doCopy}
44− accessory={
45− <LinkButton
46− className={{
47− black: !didCopy,
48− green3: didCopy,
49− }}>
50− {accessory(didCopy)}
51− </LinkButton>
52− }
39+ text={text}
40+ className={cn({
41+ black: !didCopy,
42+ green3: didCopy,
43+ })}
5344 {...rest}>
5445 {children}
55− </As>
46+ </BaseCopyButton>
5647 );
5748}
src/setupTests.tsnew file+1
@@ -0,0 +1 @@
1+import '@testing-library/jest-dom';
src/views/UrbitOS/AccessCode.test.tsxnew file+30
@@ -0,0 +1,30 @@
1+import React from 'react';
2+import { render, screen } from '@testing-library/react';
3+import AccessCode from './AccessCode';
4+
5+describe('AccessCode', () => {
6+ describe('when code is not available', () => {
7+ // Value is initialized as `false` in `useKeyfileGenerator`
8+ const testCode = false;
9+
10+ it('does not render the component', () => {
11+ render(<AccessCode code={testCode} />);
12+ const accessCode = screen.queryByText(
13+ 'This is your code to access Urbit OS'
14+ );
15+ expect(accessCode).not.toBeInTheDocument()
16+ });
17+ });
18+
19+ describe('when code is available', () => {
20+ // Value has been loaded from `useKeyfileGenerator`
21+ const testCode = 'foo-bar';
22+
23+ it('renders the component', () => {
24+ render(<AccessCode code={testCode} />);
25+ expect(
26+ screen.getByText('This is your code to access Urbit OS')
27+ ).toBeInTheDocument();
28+ });
29+ });
30+});
src/views/UrbitOS/AccessCode.tsxnew file+23
@@ -0,0 +1,23 @@
1+import { CopyButtonWide } from 'components/CopyButton';
2+import { Grid } from 'indigo-react';
3+
4+type AccessCodeArgs = {
5+ code: boolean | string;
6+};
7+
8+const AccessCode = ({ code }: AccessCodeArgs) => {
9+ return code ? (
10+ <>
11+ <Grid.Divider />
12+ <Grid.Item
13+ full
14+ detail="This is your code to access Urbit OS"
15+ as={CopyButtonWide}
16+ text={code}>
17+ Access Key
18+ </Grid.Item>
19+ </>
20+ ) : null;
21+};
22+
23+export default AccessCode;
src/views/UrbitOS/Home.tsx+3−1
@@ -16,6 +16,7 @@ import { L1Point } from 'types/L1Point';
1616import AlertBox from 'components/AlertBox';
1717import DownloadKeyfileButton from 'components/DownloadKeyfileButton';
1818import useKeyfileGenerator from 'lib/useKeyfileGenerator';
19+import AccessCode from './AccessCode';
1920
2021export default function UrbitOSHome({ manualNetworkSeed }) {
2122 const { pointCursor } = usePointCursor();
@@ -47,7 +48,7 @@ export default function UrbitOSHome({ manualNetworkSeed }) {
4748 names,
4849 ]);
4950
50− const { bind: keyBind } = useKeyfileGenerator();
51+ const { bind: keyBind, code } = useKeyfileGenerator();
5152
5253 return (
5354 <>
@@ -80,6 +81,7 @@ export default function UrbitOSHome({ manualNetworkSeed }) {
8081 />
8182 </>
8283 )}
84+ <AccessCode code={code} />
8385 <Grid.Divider />
8486 <Grid.Item full as={ForwardButton} onClick={goNetworkingKeys}>
8587 {networkKeysAction} Networking Keys