on master help sign in
Merge pull request #881 from urbit/james/accept-flow-copy

acceptance flow: new copy

commitd2ca91e43ff0e86b7af45062f34d9dff4d4ee38d authornerveharp <748181+nerveharp@users.noreply.github.com> dateSun 23 Jan 2022, 12:44 (5 years ago) parentd675c0316df219
13 files changed+151−86
src/Bridge.js+6−1 src/components/L2/Headers/AdvancedOptions.tsx+4−2 src/indigo-react/components/CheckboxInput.js+13−31 src/views/Activate/ActivateCode.tsx+36−3 src/views/Activate/ActivateCodeForm.tsx+1−1 src/views/Activate/DownloadPortButton.tsx+3−3 src/views/Activate/MasterKeyConfirm.tsx+2−2 src/views/Activate/MasterKeyCopy.tsx+2−3 src/views/Activate/MasterKeyDownload.tsx+3−3 src/views/Activate/MasterKeyReveal.tsx+2−2 src/views/Activate/MasterKeyTransfer.tsx+15−3 src/views/Disclaimer.js+63−31 src/views/Login/LoginSelector.tsx+1−1
src/Bridge.js+6−1
@@ -16,6 +16,9 @@ import useImpliedTicket from 'lib/useImpliedTicket';
1616import useHasDisclaimed from 'lib/useHasDisclaimed';
1717
1818import 'style/index.scss';
19+import { ThemeProvider } from 'styled-components';
20+import light from '@tlon/indigo-light';
21+
1922import WithErrorBoundary from 'components/WithErrorBoundary';
2023import GlobalErrorBoundary from 'components/GlobalErrorBoundary';
2124import Modal from 'components/L2/Modal';
@@ -94,7 +97,9 @@ function Bridge() {
9497 initialMnemonic={INITIAL_MNEMONIC}
9598 initialPointCursor={INITIAL_POINT_CURSOR}>
9699 <IndigoApp>
97− <Router />
100+ <ThemeProvider theme={light}>
101+ <Router />
102+ </ThemeProvider>
98103 </IndigoApp>
99104 <Modal show={modalText !== undefined} hide={() => setModalText()}>
100105 <Box width="280px">{modalText}</Box>
src/components/L2/Headers/AdvancedOptions.tsx+4−2
@@ -1,5 +1,5 @@
11import React, { useState } from 'react';
2−import { Box, Checkbox, Icon, Row } from '@tlon/indigo-react';
2+import { Text, Box, Checkbox, Icon, Row } from '@tlon/indigo-react';
33import './AdvancedOptions.scss';
44
55interface AdvancedOptionsProps {
@@ -39,7 +39,9 @@ export default function AdvancedOptions({ options }: AdvancedOptionsProps) {
3939 height="16px"
4040 width="16px"
4141 />
42− <Box className="text">{option.label}</Box>
42+ <Box className="text">
43+ <Text style={{ fontSize: '14px' }}>{option.label}</Text>
44+ </Box>
4345 </Row>
4446 ))}
4547 </Box>
src/indigo-react/components/CheckboxInput.js+13−31
@@ -1,8 +1,8 @@
11import React from 'react';
22import cn from 'classnames';
33
4−import Flex from './Flex';
54import { useField } from 'react-final-form';
5+import { Checkbox } from '@tlon/indigo-react';
66
77export default function CheckboxInput({
88 // visuals
@@ -23,9 +23,7 @@ export default function CheckboxInput({
2323 disabled = disabled || submitting || submitSucceeded;
2424
2525 return (
26− <Flex
27− row
28− align="center"
26+ <div
2927 className={cn(className, {
3028 mv2: !inline,
3129 black: !disabled,
@@ -38,35 +36,19 @@ export default function CheckboxInput({
3836 }),
3937 }}>
4038 {/* we totally hide the checkbox itself */}
41− <Flex.Item as="input" className="super-hidden" id={name} {...input} />
39+ <input checkbox className="super-hidden" id={name} {...input} />
4240 {/* and then display a prettier one in its stead */}
43− <Flex.Item
44− flex
45− as="label"
46− className={cn(
47− { mr3: !inline },
48− 'f6 lh-tall us-none pointer flex-row align-center'
49− )}
41+ <label
42+ style={{
43+ display: 'flex',
44+ alignItems: 'center',
45+ cursor: 'pointer',
46+ fontSize: '14px',
47+ }}
5048 htmlFor={name}>
51− <Flex
52− justify="center"
53− align="center"
54− className={cn('b1 p1', {
55− mr3: !inline,
56− mr1: inline,
57− 'bg-gray1': disabled,
58− 'bg-black white b-black': !disabled && (input.checked || white),
59− 'bg-white black b-black': !disabled && !input.checked,
60− })}
61− style={{
62− height: '14px',
63− width: '14px',
64− ...style,
65− }}>
66− {input.checked && '✓'}
67− </Flex>
49+ <Checkbox selected={input.checked} style={{ marginRight: '8px' }} />
6850 {label}
69− </Flex.Item>
70− </Flex>
51+ </label>
52+ </div>
7153 );
7254}
src/views/Activate/ActivateCode.tsx+36−3
@@ -39,12 +39,45 @@ export default function ActivateCode() {
3939 <View inset hideBack>
4040 <ActivateView
4141 hideBack={hasInitialValues}
42− header={<ActivateHeader content={'Planet Code'} />}
42+ header={
43+ <ActivateHeader
44+ content={
45+ hasInitialValues
46+ ? 'Welcome. This is your Urbit ID.'
47+ : 'Activate a Planet'
48+ }
49+ />
50+ }
4351 footer={<ActivateCodeForm afterSubmit={goToMasterKey} />}>
4452 <Box className="flex-col align-center justify-center w-full h-full">
45− {!hasInitialValues && (
53+ {hasInitialValues ? (
54+ <Box>
55+ <p
56+ className="mb2 sans gray5"
57+ style={{
58+ fontSize: 14,
59+ textAlign: 'center',
60+ maxWidth: '38ch',
61+ marginLeft: 'auto',
62+ }}>
63+ An Urbit ID is your unique identity that you use to communicate
64+ on Urbit. You own it forever.
65+ </p>
66+ <p
67+ className="mb2 sans gray5"
68+ style={{
69+ fontSize: 14,
70+ textAlign: 'center',
71+ maxWidth: '38ch',
72+ marginLeft: 'auto',
73+ }}>
74+ To activate your Urbit ID, begin by claiming it via the link
75+ below.
76+ </p>
77+ </Box>
78+ ) : (
4679 <Box className="mb2 sans gray5" fontSize={14}>
47− Enter your planet code below
80+ Enter your planet activation code below.
4881 </Box>
4982 )}
5083 {impliedPatp ? (
src/views/Activate/ActivateCodeForm.tsx+1−1
@@ -229,7 +229,7 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {
229229 <ActivateButton
230230 disabled={(!valid && !hasInitialValues) || submitting}
231231 onClick={handleSubmit}>
232− {submitting ? 'Activating...' : 'Activate'}
232+ {submitting ? 'Claiming...' : 'Claim'}
233233 </ActivateButton>
234234
235235 {!activationAllowed && (
src/views/Activate/DownloadPortButton.tsx+3−3
@@ -9,10 +9,10 @@ interface DownloadPortButtonProps {
99export const DownloadPortButton = ({ error }: DownloadPortButtonProps) => {
1010 const downloadButtonLabel = useMemo(() => {
1111 return isMacOs
12− ? 'Download the Client for Mac'
12+ ? 'To use it, download Port for Mac'
1313 : isWindows
14− ? 'Download the Client for Windows'
15− : 'Download the Client for Your OS';
14+ ? 'To use it, download Port for Windows'
15+ : 'To use it, download Port for your OS';
1616 }, []);
1717
1818 const downloadUrl = useMemo(() => {
src/views/Activate/MasterKeyConfirm.tsx+2−2
@@ -81,7 +81,7 @@ const MasterKeyConfirm = () => {
8181 <ActivateHeader content={'Confirm Backup'} />
8282 <ActivateParagraph
8383 copy={
84− 'Confirm that you have stored your Master Ticket somewhere safe by entering it below'
84+ 'To confirm that you stored your Master Ticket somewhere safe, enter it below.'
8585 }
8686 />
8787 </Box>
@@ -150,7 +150,7 @@ const MasterKeyConfirm = () => {
150150 {showError && (
151151 <Box>
152152 <Text className="error-message">
153− The Master Ticket you entered is incorrect
153+ The Master Ticket you entered is incorrect.
154154 </Text>
155155 </Box>
156156 )}
src/views/Activate/MasterKeyCopy.tsx+2−3
@@ -26,10 +26,9 @@ const MasterKeyCopy = ({ text, className }: MasterKeyCopyProps) => {
2626 <Icon
2727 color={color}
2828 icon={icon as 'Checkmark' | 'Copy'}
29− size="18px"
30− mx="2px"
29+ size="16px"
3130 />
32− <Text color={color} fontSize={'18px'} mx="2px" fontFamily={'Inter'}>
31+ <Text color={color} fontSize={'14px'} ml="4px" fontFamily={'Inter'}>
3332 {label}
3433 </Text>
3534 </Box>
src/views/Activate/MasterKeyDownload.tsx+3−3
@@ -78,10 +78,10 @@ const MasterKeyDownload = () => {
7878 const header = useMemo(() => {
7979 return (
8080 <Box>
81− <ActivateHeader content={'Backup your Master Ticket.'} />
81+ <ActivateHeader content={'Back up your Master Ticket.'} />
8282 <ActivateParagraph
8383 copy={
84− 'Download your backup and store it somewhere safe, e.g. your security deposit box or password manager.'
84+ 'Download and store your backup somewhere safe, like a security deposit box or password manager.'
8585 }
8686 />
8787 </Box>
@@ -135,7 +135,7 @@ const MasterKeyDownload = () => {
135135 <DangerBox
136136 overrideFadeIn={triggerAnimation && isIn}
137137 className={`mv8 ${!isIn ? 'hidden' : ''}`}>
138− Do not share this with anyone else!
138+ Never share your Master Ticket with anyone.
139139 </DangerBox>
140140 {ticket && (
141141 <MasterKeyPresenter ticket={ticket} overrideFadeIn={true} />
src/views/Activate/MasterKeyReveal.tsx+2−2
@@ -34,10 +34,10 @@ const MasterKeyReveal = () => {
3434 const header = useMemo(() => {
3535 return (
3636 <Box>
37− <ActivateHeader content={'Here is your Master Ticket.'} />
37+ <ActivateHeader content={'This is your Master Ticket.'} />
3838 <ActivateParagraph
3939 copy={
40− "Your Master Ticket is your 4-word password for your Urbit. Make sure you're in a private place before you reveal it."
40+ "Your Master Ticket is your 4-word password for your Urbit ID. If your Master Ticket is compromised, your Urbit ID is compromised. Before you reveal it, make sure you're somewhere private."
4141 }
4242 />
4343 </Box>
src/views/Activate/MasterKeyTransfer.tsx+15−3
@@ -39,7 +39,12 @@ const MasterKeyTransfer = () => {
3939 console.error(e);
4040 setError(e);
4141 }
42− }, [inviteMasterTicketWallet, performL2Reticket, derivedPoint.value, sendWallet.value]);
42+ }, [
43+ inviteMasterTicketWallet,
44+ performL2Reticket,
45+ derivedPoint.value,
46+ sendWallet.value,
47+ ]);
4348
4449 useFadeIn();
4550
@@ -59,7 +64,7 @@ const MasterKeyTransfer = () => {
5964 fontWeight={'600'}
6065 fontSize={'16px'}
6166 lineHeight={'24px'}>
62− Congratulations
67+ Congratulations,
6368 </Text>
6469 <Text
6570 fontFamily="Source Code Pro"
@@ -74,7 +79,7 @@ const MasterKeyTransfer = () => {
7479 fontWeight={'600'}
7580 fontSize={'16px'}
7681 lineHeight={'24px'}>
77− is now yours
82+ is now yours.
7883 </Text>
7984 </>
8085 }
@@ -105,6 +110,13 @@ const MasterKeyTransfer = () => {
105110 rel={'nofollow noopener'}>
106111 or setup via command line
107112 </Anchor>
113+ <p
114+ className="mb2 sans gray5"
115+ style={{ fontSize: 14, textAlign: 'center' }}>
116+ You need your bootkey to boot your Urbit ID. You can find your bootkey
117+ inside the Passport you downloaded. A computer running on the Urbit
118+ network is called a ship.
119+ </p>
108120 </Box>
109121 );
110122 }, [error]);
src/views/Disclaimer.js+63−31
@@ -6,12 +6,15 @@ import useHasDisclaimed from 'lib/useHasDisclaimed';
66import { useLocalRouter } from 'lib/LocalRouter';
77
88import View from 'components/View';
9−import WarningBox from 'components/WarningBox';
109import BridgeForm from 'form/BridgeForm';
1110import SubmitButton from 'form/SubmitButton';
1211import { composeValidator, buildCheckboxValidator } from 'form/validators';
1312
14−const TEXT_STYLE = 'f5';
13+const textProps = {
14+ fontFamily: 'Inter',
15+ fontSize: '14px',
16+ lineHeight: '20px',
17+};
1518
1619export default function ActivateDisclaimer() {
1720 const { pop, popAndPush, data } = useLocalRouter();
@@ -36,53 +39,82 @@ export default function ActivateDisclaimer() {
3639 return (
3740 <View>
3841 <Grid gap={2} className="mt8 mb10">
39− <Grid.Item as={H3} full>
40− Disclaimer
42+ <Grid.Item full>
43+ <Text
44+ as="h3"
45+ style={{ ...textProps, fontSize: '16px', fontWeight: 'bold' }}>
46+ Disclaimer
47+ </Text>
4148 </Grid.Item>
4249 <Grid.Item full>
43− <Text className={cn(TEXT_STYLE, 'block mb4')}>
44− Welcome to Bridge. Please read this information. Your assets could
45− be stolen if you do not pay attention to these warnings.
50+ <Text as="p" style={textProps}>
51+ Welcome to Bridge. Please read this information. Your Urbit ID is
52+ considered a digital asset. You must secure it. If you do not pay
53+ attention to these warnings, your digital assets could be stolen or
54+ compromised.
55+ </Text>
56+
57+ <Text as="p" style={textProps}>
58+ <strong>You own and control your assets. We do not.</strong> If you
59+ send your assets to another address, we cannot get them back for
60+ you.
61+ </Text>
62+
63+ <Text as="p" style={textProps}>
64+ Please understand that nobody can:
65+ </Text>
66+
67+ <Text as={'ol'} style={{ paddingLeft: '1em' }}>
68+ <Text as="li" style={textProps}>
69+ Access your assets for you;
70+ </Text>
71+ <Text as="li" style={textProps}>
72+ Recover, reset, or modify ANY of your information;
73+ </Text>
74+ <Text as="li" style={textProps}>
75+ Reverse, cancel, or refund transactions;
76+ </Text>
77+ <Text as="li" style={textProps}>
78+ Hold, back-up, or access your keys
79+ </Text>
4680 </Text>
4781
48− <Text className={cn(TEXT_STYLE, 'block mb4')}>
49− <B>You own and control your assets. We do not.</B> If you send your
50− assets to another address, we can’t get them back for you.
82+ <Text as="p" style={{ ...textProps, fontWeight: 'bold' }}>
83+ You are responsible for keeping your information safe. This
84+ includes:
5185 </Text>
5286
53− <B className={TEXT_STYLE}>Please understand that nobody can:</B>
54− <Text className={cn(TEXT_STYLE, 'block mb4')}>
55− 1. Access your assets for you <br />
56− 2. Recover, reset, or modify ANY of your information <br />
57− 3. Reverse, cancel, or refund transactions <br />
58− 4. Hold, back-up, or access your keys
87+ <Text as={'ol'} style={{ paddingLeft: '1em' }}>
88+ <Text as="li" style={textProps}>
89+ Private Keys/Mnemonic Phrases and passwords;
90+ </Text>
91+ <Text as="li" style={textProps}>
92+ JSON files;{' '}
93+ </Text>
94+ <Text as="li" style={textProps}>
95+ Hardware wallet PINs;{' '}
96+ </Text>
97+ <Text as="li" style={textProps}>
98+ Downloading this software from a reliable site, and ensuring it
99+ has not been tampered with
100+ </Text>
59101 </Text>
60102
61− <B className={TEXT_STYLE}>
62− You’re responsible for keeping your information safe. This includes:
63− </B>
64− <Text className={cn(TEXT_STYLE, 'block mb4')}>
65− 1. Private Keys/Mnemonic Phrases and passwords <br />
66− 2. JSON files <br />
67− 3. Hardware wallet PINs; <br />
68− 4. Downloading this software from a reliable site, and ensuring it
69− has not been tampered with.
103+ <Text as="p" style={{ ...textProps, fontWeight: 'bold' }}>
104+ To be clear:
70105 </Text>
71106
72− <B className={TEXT_STYLE}>To be clear</B>
73− <Text className={cn(TEXT_STYLE, 'block')}>
107+ <Text as="p" style={textProps}>
74108 This software is provided “as is” without warranties of any kind and
75109 our liability to you in connection with the same is limited;
76110 </Text>
77− <Text className={cn(TEXT_STYLE, 'block')}>
111+
112+ <Text as="p" style={textProps}>
78113 We have no liability for any security problems or incidents that you
79114 may experience, including any loss or theft of your keys or any
80115 problems that may arise in connection with your wallet.
81116 </Text>
82117 </Grid.Item>
83− <Grid.Item full as={WarningBox}>
84− Warning: Nobody but you can restore or reset your Master Ticket
85− </Grid.Item>
86118 <BridgeForm
87119 validate={validate}
88120 afterSubmit={goNext}
src/views/Login/LoginSelector.tsx+1−1
@@ -200,7 +200,7 @@ export default function LoginSelector({
200200 <div className="mb5">
201201 If you are you using a{' '}
202202 <span className="fw-bold">
203− Hardware Wallet, Ethereum Keystore, or Ethereum Private Key
203+ Hardware Wallet, Ethereum Keystore, or Ethereum Private Key,
204204 </span>{' '}
205205 please use Metamask going forward.
206206 </div>