d2ca91e · bridge · git.iko.soy

src/Bridge.js+6−1

compare with master

unifiedsplit

@@ -16,6 +16,9 @@ import useImpliedTicket from 'lib/useImpliedTicket';

16import useHasDisclaimed from 'lib/useHasDisclaimed';

17

18import 'style/index.scss';

19+import { ThemeProvider } from 'styled-components';

20+import light from '@tlon/indigo-light';

21+

19import WithErrorBoundary from 'components/WithErrorBoundary';

22import WithErrorBoundary from 'components/WithErrorBoundary';

20import GlobalErrorBoundary from 'components/GlobalErrorBoundary';

23import GlobalErrorBoundary from 'components/GlobalErrorBoundary';

21import Modal from 'components/L2/Modal';

24import Modal from 'components/L2/Modal';

@@ -94,7 +97,9 @@ function Bridge() {

94 initialMnemonic={INITIAL_MNEMONIC}

97 initialMnemonic={INITIAL_MNEMONIC}

95 initialPointCursor={INITIAL_POINT_CURSOR}>

98 initialPointCursor={INITIAL_POINT_CURSOR}>

96 <IndigoApp>

99 <IndigoApp>

100+ <ThemeProvider theme={light}>

97− <Router />

101+ <Router />

102+ </ThemeProvider>

98 </IndigoApp>

103 </IndigoApp>

99 <Modal show={modalText !== undefined} hide={() => setModalText()}>

104 <Modal show={modalText !== undefined} hide={() => setModalText()}>

100 <Box width="280px">{modalText}</Box>

105 <Box width="280px">{modalText}</Box>

src/components/L2/Headers/AdvancedOptions.tsx+4−2

@@ -1,5 +1,5 @@

1import 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';

3import './AdvancedOptions.scss';

4

5interface AdvancedOptionsProps {

@@ -39,7 +39,9 @@ export default function AdvancedOptions({ options }: AdvancedOptionsProps) {

39 height="16px"

40 width="16px"

41 />

42− <Box className="text">{option.label}</Box>

42+ <Box className="text">

43+ <Text style={{ fontSize: '14px' }}>{option.label}</Text>

44+ </Box>

43 </Row>

45 </Row>

44 ))}

46 ))}

45 </Box>

47 </Box>

src/indigo-react/components/CheckboxInput.js+13−31

@@ -1,8 +1,8 @@

1import React from 'react';

2import cn from 'classnames';

3

4−import Flex from './Flex';

5import { useField } from 'react-final-form';

4import { useField } from 'react-final-form';

5+import { Checkbox } from '@tlon/indigo-react';

6

7export default function CheckboxInput({

8 // visuals

@@ -23,9 +23,7 @@ export default function CheckboxInput({

23 disabled = disabled || submitting || submitSucceeded;

24

25 return (

26− <Flex

26+ <div

27− row

28− align="center"

29 className={cn(className, {

27 className={cn(className, {

30 mv2: !inline,

28 mv2: !inline,

31 black: !disabled,

29 black: !disabled,

@@ -38,35 +36,19 @@ export default function CheckboxInput({

38 }),

36 }),

39 }}>

37 }}>

40 {/* we totally hide the checkbox itself */}

38 {/* 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} />

42 {/* and then display a prettier one in its stead */}

40 {/* and then display a prettier one in its stead */}

43− <Flex.Item

44− flex

45− as="label"

41+ <label

46− className={cn(

42+ style={{

47− { mr3: !inline },

43+ display: 'flex',

48− 'f6 lh-tall us-none pointer flex-row align-center'

44+ alignItems: 'center',

45+ cursor: 'pointer',

46+ fontSize: '14px',

49− )}

47+ }}

50 htmlFor={name}>

48 htmlFor={name}>

51− <Flex

49+ <Checkbox selected={input.checked} style={{ marginRight: '8px' }} />

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>

68 {label}

50 {label}

69− </Flex.Item>

51+ </label>

70− </Flex>

52+ </div>

71 );

53 );

72}

54}

src/views/Activate/ActivateCode.tsx+36−3

@@ -39,12 +39,45 @@ export default function ActivateCode() {

39 <View inset hideBack>

40 <ActivateView

41 hideBack={hasInitialValues}

42+ header={

42− header={<ActivateHeader content={'Planet Code'} />}

43+ <ActivateHeader

44+ content={

45+ hasInitialValues

46+ ? 'Welcome. This is your Urbit ID.'

47+ : 'Activate a Planet'

48+ }

49+ />

50+ }

43 footer={<ActivateCodeForm afterSubmit={goToMasterKey} />}>

51 footer={<ActivateCodeForm afterSubmit={goToMasterKey} />}>

44 <Box className="flex-col align-center justify-center w-full h-full">

52 <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+ ) : (

46 <Box className="mb2 sans gray5" fontSize={14}>

79 <Box className="mb2 sans gray5" fontSize={14}>

47− Enter your planet code below

80+ Enter your planet activation code below.

48 </Box>

81 </Box>

49 )}

82 )}

50 {impliedPatp ? (

83 {impliedPatp ? (

src/views/Activate/ActivateCodeForm.tsx+1−1

@@ -229,7 +229,7 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {

229 <ActivateButton

230 disabled={(!valid && !hasInitialValues) || submitting}

231 onClick={handleSubmit}>

232− {submitting ? 'Activating...' : 'Activate'}

232+ {submitting ? 'Claiming...' : 'Claim'}

233 </ActivateButton>

234

235 {!activationAllowed && (

src/views/Activate/DownloadPortButton.tsx+3−3

@@ -9,10 +9,10 @@ interface DownloadPortButtonProps {

9export const DownloadPortButton = ({ error }: DownloadPortButtonProps) => {

10 const downloadButtonLabel = useMemo(() => {

11 return isMacOs

12− ? 'Download the Client for Mac'

12+ ? 'To use it, download Port for Mac'

13 : isWindows

14− ? 'Download the Client for Windows'

14+ ? 'To use it, download Port for Windows'

15− : 'Download the Client for Your OS';

15+ : 'To use it, download Port for your OS';

16 }, []);

17

18 const downloadUrl = useMemo(() => {

src/views/Activate/MasterKeyConfirm.tsx+2−2

@@ -81,7 +81,7 @@ const MasterKeyConfirm = () => {

81 <ActivateHeader content={'Confirm Backup'} />

82 <ActivateParagraph

83 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.'

85 }

86 />

87 </Box>

@@ -150,7 +150,7 @@ const MasterKeyConfirm = () => {

150 {showError && (

151 <Box>

152 <Text className="error-message">

153− The Master Ticket you entered is incorrect

153+ The Master Ticket you entered is incorrect.

154 </Text>

155 </Box>

156 )}

src/views/Activate/MasterKeyCopy.tsx+2−3

@@ -26,10 +26,9 @@ const MasterKeyCopy = ({ text, className }: MasterKeyCopyProps) => {

26 <Icon

27 color={color}

28 icon={icon as 'Checkmark' | 'Copy'}

29− size="18px"

29+ size="16px"

30− mx="2px"

31 />

30 />

32− <Text color={color} fontSize={'18px'} mx="2px" fontFamily={'Inter'}>

31+ <Text color={color} fontSize={'14px'} ml="4px" fontFamily={'Inter'}>

33 {label}

32 {label}

34 </Text>

33 </Text>

35 </Box>

34 </Box>

src/views/Activate/MasterKeyDownload.tsx+3−3

@@ -78,10 +78,10 @@ const MasterKeyDownload = () => {

78 const header = useMemo(() => {

79 return (

80 <Box>

81− <ActivateHeader content={'Backup your Master Ticket.'} />

81+ <ActivateHeader content={'Back up your Master Ticket.'} />

82 <ActivateParagraph

83 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.'

85 }

86 />

87 </Box>

@@ -135,7 +135,7 @@ const MasterKeyDownload = () => {

135 <DangerBox

136 overrideFadeIn={triggerAnimation && isIn}

137 className={`mv8 ${!isIn ? 'hidden' : ''}`}>

138− Do not share this with anyone else!

138+ Never share your Master Ticket with anyone.

139 </DangerBox>

140 {ticket && (

141 <MasterKeyPresenter ticket={ticket} overrideFadeIn={true} />

src/views/Activate/MasterKeyReveal.tsx+2−2

@@ -34,10 +34,10 @@ const MasterKeyReveal = () => {

34 const header = useMemo(() => {

35 return (

36 <Box>

37− <ActivateHeader content={'Here is your Master Ticket.'} />

37+ <ActivateHeader content={'This is your Master Ticket.'} />

38 <ActivateParagraph

39 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."

41 }

42 />

43 </Box>

src/views/Activate/MasterKeyTransfer.tsx+15−3

@@ -39,7 +39,12 @@ const MasterKeyTransfer = () => {

39 console.error(e);

40 setError(e);

41 }

42+ }, [

42− }, [inviteMasterTicketWallet, performL2Reticket, derivedPoint.value, sendWallet.value]);

43+ inviteMasterTicketWallet,

44+ performL2Reticket,

45+ derivedPoint.value,

46+ sendWallet.value,

47+ ]);

43

48

44 useFadeIn();

49 useFadeIn();

45

50

@@ -59,7 +64,7 @@ const MasterKeyTransfer = () => {

59 fontWeight={'600'}

64 fontWeight={'600'}

60 fontSize={'16px'}

65 fontSize={'16px'}

61 lineHeight={'24px'}>

66 lineHeight={'24px'}>

62− Congratulations

67+ Congratulations,

63 </Text>

68 </Text>

64 <Text

69 <Text

65 fontFamily="Source Code Pro"

70 fontFamily="Source Code Pro"

@@ -74,7 +79,7 @@ const MasterKeyTransfer = () => {

74 fontWeight={'600'}

79 fontWeight={'600'}

75 fontSize={'16px'}

80 fontSize={'16px'}

76 lineHeight={'24px'}>

81 lineHeight={'24px'}>

77− is now yours

82+ is now yours.

78 </Text>

83 </Text>

79 </>

84 </>

80 }

85 }

@@ -105,6 +110,13 @@ const MasterKeyTransfer = () => {

105 rel={'nofollow noopener'}>

110 rel={'nofollow noopener'}>

106 or setup via command line

111 or setup via command line

107 </Anchor>

112 </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>

108 </Box>

120 </Box>

109 );

121 );

110 }, [error]);

122 }, [error]);

src/views/Disclaimer.js+63−31

@@ -6,12 +6,15 @@ import useHasDisclaimed from 'lib/useHasDisclaimed';

6import { useLocalRouter } from 'lib/LocalRouter';

7

8import View from 'components/View';

9−import WarningBox from 'components/WarningBox';

10import BridgeForm from 'form/BridgeForm';

9import BridgeForm from 'form/BridgeForm';

11import SubmitButton from 'form/SubmitButton';

10import SubmitButton from 'form/SubmitButton';

12import { composeValidator, buildCheckboxValidator } from 'form/validators';

11import { composeValidator, buildCheckboxValidator } from 'form/validators';

13

12

14−const TEXT_STYLE = 'f5';

13+const textProps = {

14+ fontFamily: 'Inter',

15+ fontSize: '14px',

16+ lineHeight: '20px',

17+};

15

18

16export default function ActivateDisclaimer() {

19export default function ActivateDisclaimer() {

17 const { pop, popAndPush, data } = useLocalRouter();

20 const { pop, popAndPush, data } = useLocalRouter();

@@ -36,53 +39,82 @@ export default function ActivateDisclaimer() {

36 return (

39 return (

37 <View>

40 <View>

38 <Grid gap={2} className="mt8 mb10">

41 <Grid gap={2} className="mt8 mb10">

39− <Grid.Item as={H3} full>

42+ <Grid.Item full>

43+ <Text

44+ as="h3"

45+ style={{ ...textProps, fontSize: '16px', fontWeight: 'bold' }}>

40− Disclaimer

46+ Disclaimer

47+ </Text>

41 </Grid.Item>

48 </Grid.Item>

42 <Grid.Item full>

49 <Grid.Item full>

43− <Text className={cn(TEXT_STYLE, 'block mb4')}>

50+ <Text as="p" style={textProps}>

44− Welcome to Bridge. Please read this information. Your assets could

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

45− be stolen if you do not pay attention to these warnings.

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>

46 </Text>

80 </Text>

47

81

48− <Text className={cn(TEXT_STYLE, 'block mb4')}>

82+ <Text as="p" style={{ ...textProps, fontWeight: 'bold' }}>

49− <B>You own and control your assets. We do not.</B> If you send your

83+ You are responsible for keeping your information safe. This

50− assets to another address, we can’t get them back for you.

84+ includes:

51 </Text>

85 </Text>

52

86

53− <B className={TEXT_STYLE}>Please understand that nobody can:</B>

87+ <Text as={'ol'} style={{ paddingLeft: '1em' }}>

54− <Text className={cn(TEXT_STYLE, 'block mb4')}>

88+ <Text as="li" style={textProps}>

55− 1. Access your assets for you <br />

89+ Private Keys/Mnemonic Phrases and passwords;

56− 2. Recover, reset, or modify ANY of your information <br />

90+ </Text>

57− 3. Reverse, cancel, or refund transactions <br />

91+ <Text as="li" style={textProps}>

58− 4. Hold, back-up, or access your keys

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>

59 </Text>

101 </Text>

60

102

61− <B className={TEXT_STYLE}>

103+ <Text as="p" style={{ ...textProps, fontWeight: 'bold' }}>

62− You’re responsible for keeping your information safe. This includes:

104+ To be clear:

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.

70 </Text>

105 </Text>

71

106

72− <B className={TEXT_STYLE}>To be clear</B>

107+ <Text as="p" style={textProps}>

73− <Text className={cn(TEXT_STYLE, 'block')}>

74 This software is provided “as is” without warranties of any kind and

108 This software is provided “as is” without warranties of any kind and

75 our liability to you in connection with the same is limited;

109 our liability to you in connection with the same is limited;

76 </Text>

110 </Text>

77− <Text className={cn(TEXT_STYLE, 'block')}>

111+

112+ <Text as="p" style={textProps}>

78 We have no liability for any security problems or incidents that you

113 We have no liability for any security problems or incidents that you

79 may experience, including any loss or theft of your keys or any

114 may experience, including any loss or theft of your keys or any

80 problems that may arise in connection with your wallet.

115 problems that may arise in connection with your wallet.

81 </Text>

116 </Text>

82 </Grid.Item>

117 </Grid.Item>

83− <Grid.Item full as={WarningBox}>

84− Warning: Nobody but you can restore or reset your Master Ticket

85− </Grid.Item>

86 <BridgeForm

118 <BridgeForm

87 validate={validate}

119 validate={validate}

88 afterSubmit={goNext}

120 afterSubmit={goNext}

src/views/Login/LoginSelector.tsx+1−1

@@ -200,7 +200,7 @@ export default function LoginSelector({

200 <div className="mb5">

201 If you are you using a{' '}

202 <span className="fw-bold">

203− Hardware Wallet, Ethereum Keystore, or Ethereum Private Key

203+ Hardware Wallet, Ethereum Keystore, or Ethereum Private Key,

204 </span>{' '}

205 please use Metamask going forward.

206 </div>