245c6a0 · bridge · git.iko.soy

git.iko.soy/bridge

Updated the design and ticket validation on the activation flow

commit245c6a0cc1a7f6a1601dcd644efb2527b0b19a0e authorWill Galebach <willbach@gmail.com> dateTue 28 Dec 2021, 09:43 (5 years ago) parentc8e855d

24 files changed+248−172

compare with master

unifiedsplit

src/assets/blank-planet-sigil.svgnew file+39

@@ -0,0 +1,39 @@

1+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">

2+<rect opacity="0.9" width="96" height="96" rx="8" fill="black"/>

3+<circle cx="29" cy="29" r="1" fill="white"/>

4+<circle cx="29" cy="36" r="1" fill="white"/>

5+<circle cx="29" cy="43" r="1" fill="white"/>

6+<circle cx="36" cy="29" r="1" fill="white"/>

7+<circle cx="36" cy="36" r="1" fill="white"/>

8+<circle cx="36" cy="43" r="1" fill="white"/>

9+<circle cx="43" cy="29" r="1" fill="white"/>

10+<circle cx="43" cy="36" r="1" fill="white"/>

11+<circle cx="43" cy="43" r="1" fill="white"/>

12+<circle cx="53" cy="29" r="1" fill="white"/>

13+<circle cx="53" cy="36" r="1" fill="white"/>

14+<circle cx="53" cy="43" r="1" fill="white"/>

15+<circle cx="60" cy="29" r="1" fill="white"/>

16+<circle cx="60" cy="36" r="1" fill="white"/>

17+<circle cx="60" cy="43" r="1" fill="white"/>

18+<circle cx="67" cy="29" r="1" fill="white"/>

19+<circle cx="67" cy="36" r="1" fill="white"/>

20+<circle cx="67" cy="43" r="1" fill="white"/>

21+<circle cx="29" cy="53" r="1" fill="white"/>

22+<circle cx="29" cy="60" r="1" fill="white"/>

23+<circle cx="29" cy="67" r="1" fill="white"/>

24+<circle cx="36" cy="53" r="1" fill="white"/>

25+<circle cx="36" cy="60" r="1" fill="white"/>

26+<circle cx="36" cy="67" r="1" fill="white"/>

27+<circle cx="43" cy="53" r="1" fill="white"/>

28+<circle cx="43" cy="60" r="1" fill="white"/>

29+<circle cx="43" cy="67" r="1" fill="white"/>

30+<circle cx="53" cy="53" r="1" fill="white"/>

31+<circle cx="53" cy="60" r="1" fill="white"/>

32+<circle cx="53" cy="67" r="1" fill="white"/>

33+<circle cx="60" cy="53" r="1" fill="white"/>

34+<circle cx="60" cy="60" r="1" fill="white"/>

35+<circle cx="60" cy="67" r="1" fill="white"/>

36+<circle cx="67" cy="53" r="1" fill="white"/>

37+<circle cx="67" cy="60" r="1" fill="white"/>

38+<circle cx="67" cy="67" r="1" fill="white"/>

39+</svg>

src/components/L2/Window/Window.tsx+1−1

@@ -7,7 +7,7 @@ export interface WindowProps {

77 className?: string;

88}

10−const Window = ({ children, className }: WindowProps) => {

10+const Window = ({ children, className = '' }: WindowProps) => {

1111 return <Box className={`window ${className}`}>{children}</Box>;

1212};

1313

src/components/View.js+1−1

@@ -3,7 +3,7 @@ import cn from 'classnames';

33import { Flex } from 'indigo-react';

55import Footer from './Footer';

6−import useBreakpoints from 'lib/useBreakpoints';

6+import useBreakpoints from 'lib/useBreakpoints.tsx';

77import { MiniBackButton } from './MiniBackButton';

88import { useHistory } from 'store/history';

99import NavHeader from './NavHeader';

src/components/form/TicketInputAccessory.scssnew file+7

@@ -0,0 +1,7 @@

1+.ticket-input-accessory {

2+ .icon {

3+ height: 14px;

4+ width: 14px;

5+ margin-right: -4px;

6+ }

7+}

src/components/form/TicketInputAccessory.tsxnew file+17

@@ -0,0 +1,17 @@

1+import { Icon } from '@tlon/indigo-react';

2+import { AccessoryIcon, ToggleInput } from 'indigo-react';

4+import './TicketInputAccessory.scss';

6+export default function TicketInputAccessory({ name }: { name: any }) {

7+ return (

8+ <AccessoryIcon className="ticket-input-accessory">

9+ <ToggleInput

10+ name={name}

11+ className="mt1"

12+ inverseLabel={<Icon className="icon" icon="Visible" />}

13+ label={<Icon className="icon" icon="Hidden" />}

14+ />

15+ </AccessoryIcon>

16+ );

17+}

src/form/Inputs.tsx+1−1

@@ -21,7 +21,7 @@ import {

2121

2222const PLACEHOLDER_GALAXY = '~pel';

2323const PLACEHOLDER_STAR = '~sampel';

24−const PLACEHOLDER_PLANET = '~sampel-ponnym';

24+export const PLACEHOLDER_PLANET = '~sampel-ponnym';

2525const PLACEHOLDER_HD_PATH = DEFAULT_HD_PATH;

2626const PLACEHOLDER_MNEMONIC =

2727 'example crew supreme gesture quantum web media hazard theory mercy wing kitten';

src/lib/useBreakpoints.jsdeleted−5

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

1−import { useMediaQuery } from './MediaQuery';

2−

3−export default function useBreakpoints(values = [null, null, null]) {

4− return values[useMediaQuery()];

5−}

src/lib/useBreakpoints.tsxnew file+6

@@ -0,0 +1,6 @@

1+import { useMediaQuery } from './MediaQuery';

3+export default function useBreakpoints(values: any = [null, null, null]) {

4+ const query = useMediaQuery() || 0;

5+ return values[query];

6+}

src/lib/validators.ts+22−12

@@ -27,19 +27,19 @@ const isHexString = /[0-9A-Fa-f]/;

2727const isHexPrefixed = /^0x/;

2828

2929// Validates a bip39 mnemonic

30−export const validateMnemonic = v =>

30+export const validateMnemonic = (v: string) =>

3131 !bip39.validateMnemonic(v) && 'This is not a valid mnemonic.';

3232

3333const isHdPath = /^m(\/[0-9]+'?)*$/;

34−export const validateHdPath = v =>

34+export const validateHdPath = (v: string) =>

3535 !isHdPath.test(v) && 'Invalid HD derivation path.';

3636

3737// Checks an empty field

38−export const validateNotEmpty = v =>

38+export const validateNotEmpty = (v: string) =>

3939 (v === undefined || v.length === 0) && 'This field is required.';

4040

4141// Checks if a patp is a valid galaxy

42−export const validateGalaxy = v => {

42+export const validateGalaxy = (v: string) => {

4343 try {

4444 const point = patp2dec(v);

4545 const isValidGalaxy = point >= MIN_GALAXY && point <= MAX_GALAXY;

@@ -51,7 +51,7 @@ export const validateGalaxy = v => {

5151 }

5252};

5353

54−export const validatePoint = v => {

54+export const validatePoint = (v: string) => {

5555 try {

5656 if (!ob.isValidPatp(v)) {

5757 throw new Error();

@@ -61,7 +61,7 @@ export const validatePoint = v => {

6161 }

6262};

6363

64−export const validatePatq = v => {

64+export const validatePatq = (v: string) => {

6565 try {

6666 if (!ob.isValidPatq(v)) {

6767 throw new Error();

@@ -71,7 +71,17 @@ export const validatePatq = v => {

7171 }

7272};

7373

74−export const validateShard = v => {

74+export const validateActivationTicket = (v: string) => {

75+ try {

76+ if (v.length < 42) {

77+ throw new Error();

78+ }

79+ } catch {

80+ return 'This is not a valid activation ticket.';

81+ }

82+};

83+

84+export const validateShard = (v: string) => {

7585 try {

7686 if (v !== undefined && v !== '' && !ob.isValidPatq(v)) {

7787 throw new Error();

@@ -81,19 +91,19 @@ export const validateShard = v => {

8191 }

8292};

8393

84−export const validateOneOf = (options = []) => v =>

94+export const validateOneOf = (options = []) => (v: string) =>

8595 !includes(options, v) && 'Is not a valid option.';

8696

87−export const validateHexString = v =>

97+export const validateHexString = (v: string) =>

8898 !isHexString.test(v) && 'This is not a valid hex string.';

8999

90−export const validateHexPrefix = v =>

100+export const validateHexPrefix = (v: string) =>

91101 !isHexPrefixed.test(v) && 'Must include 0x prefix.';

92102

93−export const validateEthereumAddress = v =>

103+export const validateEthereumAddress = (v: string) =>

94104 !isValidAddress(v) && 'This is not a valid Ethereum address.';

95105

96−export const validateEmail = v =>

106+export const validateEmail = (v: string) =>

97107 !emailRegExp.test(v) && 'This is not a valid email address.';

98108

99109export const validateExactly = (value, error) => v => v !== value && error;

src/style/master-key.scss+1

@@ -18,6 +18,7 @@

1818

1919svg.master-key {

2020 height: 44px;

21+ margin: 80px 0;

2122 // Initial state

2223 path {

2324 fill-opacity: 0.2;

src/views/AcceptTransfer.tsx+16−14

@@ -150,20 +150,22 @@ export default function AcceptTransfer() {

150150 : `Accept the incoming transfer of ${name}.`}

151151 </Grid.Item>

152152

153− <BridgeForm

154− validate={validate}

155− initialValues={initialValues}

156− onValues={onValues}>

157− {() => (

158− <Grid.Item

159− full

160− as={CheckboxInput}

161− name="noReset"

162− label="Retain proxies and key configuration, in case of transferring to self"

163− disabled={inputsLocked}

164− />

165− )}

166− </BridgeForm>

153+ {!completed && (

154+ <BridgeForm

155+ validate={validate}

156+ initialValues={initialValues}

157+ onValues={onValues}>

158+ {() => (

159+ <Grid.Item

160+ full

161+ as={CheckboxInput}

162+ name="noReset"

163+ label="Retain proxies and key configuration, in case of transferring to self"

164+ disabled={inputsLocked}

165+ />

166+ )}

167+ </BridgeForm>

168+ )}

167169

168170 {point.isL2 ? (

169171 <Grid.Item

src/views/Activate/ActivateCode.tsx+15−13

@@ -7,14 +7,15 @@ import { useLocalRouter } from 'lib/LocalRouter';

77import useImpliedTicket from 'lib/useImpliedTicket';

88import useHasDisclaimed from 'lib/useHasDisclaimed';

10+import { ReactComponent as PlaceholderSigil } from 'assets/blank-planet-sigil.svg';

1011import { FadeablePointPresenter as PointPresenter } from './PointPresenter';

11−import { Box, Text } from '@tlon/indigo-react';

12+import { Box } from '@tlon/indigo-react';

1213import { FadeableActivateHeader as ActivateHeader } from './ActivateHeader';

1314import { FadeableActivateCodeForm as ActivateCodeForm } from './ActivateCodeForm';

1415import useFadeIn from './useFadeIn';

1516

1617export default function ActivateCode() {

17− const { names, push } = useLocalRouter();

18+ const { names, push }: any = useLocalRouter();

1819 const { impliedPatp, impliedTicket } = useImpliedTicket();

1920 const [hasDisclaimed] = useHasDisclaimed();

2021

@@ -30,21 +31,22 @@ export default function ActivateCode() {

3031 useFadeIn();

3132

3233 return (

33− <View centered={true}>

34+ <View inset>

3435 <ActivateView

35− header={<ActivateHeader content={'Welcome. This is your Urbit.'} />}

36+ hideBack={Boolean(impliedTicket)}

37+ header={<ActivateHeader content={'Planet Code'} />}

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

37− <Box

38− alignItems={'center'}

39− display={'flex'}

40− flexDirection={'column'}

41− flexWrap={'nowrap'}

42− height={'100%'}

43− justifyContent={'center'}>

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

4440 {!impliedTicket && (

45− <Text className="mb2">Enter your activation code to continue.</Text>

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

42+ Enter your planet code below

43+ </Box>

44+ )}

45+ {impliedPatp ? (

46+ <PointPresenter patp={impliedPatp} />

47+ ) : (

48+ <PlaceholderSigil className="mt9 mb8" />

4649 )}

47− {impliedPatp && <PointPresenter patp={impliedPatp} />}

4850 </Box>

4951 </ActivateView>

5052 </View>

src/views/Activate/ActivateCodeForm.tsx+31−40

@@ -4,7 +4,7 @@ import { WARNING } from 'form/helpers';

44import { FORM_ERROR } from 'final-form';

55import { Just } from 'folktale/maybe';

66import BridgeForm from 'form/BridgeForm';

7−import { TicketInput } from 'form/Inputs';

7+import { PLACEHOLDER_PLANET, PLACEHOLDER_TICKET, TicketInput } from 'form/Inputs';

88import {

99 composeValidator,

1010 buildPatqValidator,

@@ -12,7 +12,7 @@ import {

1212 buildCheckboxValidator,

1313} from 'form/validators';

1414import FormError from 'form/FormError';

15−import { CheckboxInput, Grid } from 'indigo-react';

15+import { Grid } from 'indigo-react';

1616import { useCallback, useMemo, useRef } from 'react';

1717import { useActivateFlow } from './ActivateFlow';

1818import WarningBox from 'components/WarningBox';

@@ -21,13 +21,15 @@ import useImpliedTicket from 'lib/useImpliedTicket';

2121import { generateWallet } from 'lib/walletgen';

2222import { urbitWalletFromTicket, walletFromMnemonic } from 'lib/wallet';

2323import { DEFAULT_HD_PATH, POINT_PROXIES } from 'lib/constants';

24−import useBreakpoints from 'lib/useBreakpoints';

24+import useBreakpoints from 'lib/useBreakpoints.tsx';

2525import { Ship } from '@urbit/roller-api';

2626import { convertToInt } from 'lib/convertToInt';

2727import { Box } from '@tlon/indigo-react';

2828import { timeout } from 'lib/timeout';

2929import withFadeable from './withFadeable';

3030import ActivateButton from './ActivateButton';

31+import TicketInputAccessory from 'components/form/TicketInputAccessory';

32+import { validateActivationTicket } from 'lib/validators';

3133

3234interface ActivateCodeFormProps {

3335 afterSubmit: VoidFunction;

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

4648 setInviteWallet,

4749 setIsIn,

4850 setSendWallet,

49− } = useActivateFlow();

51+ }: any = useActivateFlow();

5052

5153 // this is a pretty naive way to detect if we're on a mobile device

5254 // (i.e. we're checking the width of the screen)

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

6971 const validate = useMemo(

7072 () =>

7173 composeValidator(

72− { ticket: buildPatqValidator(), showTicket: buildCheckboxValidator() },

74+ {

75+ ticket: buildPatqValidator([validateActivationTicket]),

76+ showTicket: buildCheckboxValidator(),

77+ },

7378 validateForm

7479 ),

7580 [validateForm]

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

164169 setDerivedWallet,

165170 setInviteWallet,

166171 setIsIn,

172+ setSendWallet,

167173 ]

168174 );

169175

@@ -174,10 +180,8 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {

174180

175181 return (

176182 <Box

177− display="flex"

178− flexDirection="column"

183+ className="w-full h-full flex-col"

179184 flexWrap="nowrap"

180− height={'100%'}

181185 justifyContent="flex-end">

182186 <BridgeForm

183187 validate={validate}

@@ -187,40 +191,27 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {

187191 {({ valid, validating, values, submitting, handleSubmit }) => (

188192 <>

189193 {!impliedTicket && (

190− <>

191− <Grid.Item

192− full

193− as={TicketInput}

194− type={values.showTicket ? 'text' : 'password'}

195− name="ticket"

196− label="Activation Code"

197− disabled={!activationAllowed}

198− />

199−

200− <Grid.Item

201− full

202− as={CheckboxInput}

203− name="showTicket"

204− label="Show"

205− />

206− </>

194+ <Grid.Item

195+ full

196+ className="mb2"

197+ as={TicketInput}

198+ accessory={<TicketInputAccessory name="showTicket" />}

199+ type={values.showTicket ? 'text' : 'password'}

200+ name="ticket"

201+ disabled={!activationAllowed}

202+ placeholder={`${PLACEHOLDER_TICKET}-${PLACEHOLDER_PLANET.slice(

203+ 1

204+ )}`}

205+ />

207206 )}

208207

209− <Grid.Item full as={FormError} />

210−

211− <Box

212− display="flex"

213− flexDirection="column"

214− flexWrap="nowrap"

215− height={'100%'}

216− width={'100%'}

217− justifyContent="flex-end">

218− <ActivateButton

219− disabled={!valid || submitting}

220− onClick={handleSubmit}>

221− {submitting ? 'Generating...' : 'Claim'}

222− </ActivateButton>

223− </Box>

208+ <Grid.Item full as={FormError} className="mb2" />

209+

210+ <ActivateButton

211+ disabled={!valid || submitting}

212+ onClick={handleSubmit}>

213+ {submitting ? 'Activating...' : 'Activate'}

214+ </ActivateButton>

224215

225216 {!activationAllowed && (

226217 <Grid.Item full as={WarningBox} className="mt4">

src/views/Activate/ActivateMasterKey.tsx+3−7

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

11import { LocalRouterProvider, useLocalRouter } from 'lib/LocalRouter';

3−import View from 'components/View';

4−

53import useRouter from 'lib/useRouter';

75import MasterKeyDownload from './MasterKeyDownload';

@@ -33,10 +31,8 @@ export default function ActivateMasterKey() {

3331 });

3432

3533 return (

36− <View inset>

37− <LocalRouterProvider value={router}>

38− <Route resetActivateRouter={resetActivateRouter} />

39− </LocalRouterProvider>

40− </View>

34+ <LocalRouterProvider value={router}>

35+ <Route resetActivateRouter={resetActivateRouter} />

36+ </LocalRouterProvider>

4137 );

4238}

src/views/Activate/ActivateView.tsx+66−29

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

11import { Box } from '@tlon/indigo-react';

22import cn from 'classnames';

3+import View from 'components/View';

4+import { Grid, Text } from 'indigo-react';

5+import HeaderButton from 'components/L2/Headers/HeaderButton';

6+import { useHistory } from 'store/history';

7+import Window from 'components/L2/Window/Window';

8+import BodyPane from 'components/L2/Window/BodyPane';

410interface ActivateViewProps {

511 className?: string;

@@ -8,6 +14,8 @@ interface ActivateViewProps {

814 footer?: React.ReactNode;

915 gridRows?: string;

1016 gridAreas?: string;

17+ hideBack?: boolean;

18+ onBack?: () => void;

1119}

1220

1321export default function ActivateView({

@@ -17,37 +25,66 @@ export default function ActivateView({

1725 footer,

1826 gridRows,

1927 gridAreas,

28+ onBack,

29+ hideBack = false,

2030}: ActivateViewProps) {

31+ const { pop }: any = useHistory();

32+

2133 return (

22− <>

23− <Box

24− display="grid"

25− gridTemplateColumns="1fr"

26− gridTemplateRows={gridRows || '20% 60% 20%'}

27− gridTemplateAreas={gridAreas || "'header' 'content' 'footer'"}

28− border={'1px solid rgb(204, 204, 204)'}

29− borderRadius={'8px'}

30− padding={'10px'}

31− width={'512px'}

32− height={'512px'}

33− maxWidth={'calc(100vw - 48px)'}

34− className={cn(className)}

35− mb={3}>

36− <Box gridArea="header">{header}</Box>

37− <Box gridArea="content">{children}</Box>

38− <Box gridArea="footer">

39− {footer ? (

40− <Box

41− display="flex"

42− flexDirection="column"

43− flexWrap="nowrap"

44− height={'100%'}

45− justifyContent="flex-end">

46− {footer}

34+ <Grid>

35+ <Grid.Item

36+ full

37+ as={Text}

38+ className="flex justify-center mt9 mb7 w-max-mobile">

39+ <Grid.Item as={Text}>Bridge / </Grid.Item>

40+ <Grid.Item className="fw-bold" as={Text}>

41+ Activate

42+ </Grid.Item>

43+ </Grid.Item>

44+ <Grid.Item>

45+ {!hideBack && (

46+ <HeaderButton

47+ className="mb4"

48+ icon="ChevronWest"

49+ onClick={onBack || (() => pop())}

50+ />

51+ )}

52+ <Window>

53+ <BodyPane>

54+ <Box className="w-full" gridArea="header">

55+ {header}

56+ </Box>

57+ <Box className="w-full" gridArea="content">

58+ {children}

59+ </Box>

60+ <Box className="w-full" gridArea="footer">

61+ {footer ? (

62+ <Box

63+ className="h-full flex-col"

64+ flexWrap="nowrap"

65+ justifyContent="flex-end">

66+ {footer}

67+ </Box>

68+ ) : null}

4769 </Box>

48− ) : null}

49− </Box>

50− </Box>

51− </>

70+ </BodyPane>

71+ </Window>

72+ </Grid.Item>

73+ </Grid>

74+ // <Box

75+ // display="grid"

76+ // gridTemplateColumns="1fr"

77+ // gridTemplateRows={gridRows || '20% 60% 20%'}

78+ // gridTemplateAreas={gridAreas || "'header' 'content' 'footer'"}

79+ // border={'1px solid rgb(204, 204, 204)'}

80+ // borderRadius={'8px'}

81+ // padding={'10px'}

82+ // width={'512px'}

83+ // height={'512px'}

84+ // maxWidth={'calc(100vw - 48px)'}

85+ // className={cn(className)}

86+ // mb={3}>

87+

88+ // </Box>

5289 );

5390}

src/views/Activate/MasterKeyConfirm.scss+1−2

@@ -34,8 +34,7 @@

3434 flex-direction: row;

3535 width: 80%;

3636 height: min-content;

37− margin-top: 16px;

38− margin-bottom: 16px;

37+ margin: 48px 0;

3938 flex-wrap: nowrap;

4039 justify-content: center;

4140 }

src/views/Activate/MasterKeyConfirm.tsx+4−15

@@ -21,15 +21,13 @@ import FormError from 'form/FormError';

2121import useFadeIn from './useFadeIn';

2222import { HiddenInput, TicketSegmentInput } from 'form/Inputs';

2323import View from 'components/View';

24−import NavHeader from 'components/NavHeader';

25−import { MiniBackButton } from 'components/MiniBackButton';

2624

2725import './MasterKeyConfirm.scss';

2826

2927const MasterKeyConfirm = () => {

30− const { derivedWallet, setIsIn } = useActivateFlow();

28+ const { derivedWallet, setIsIn }: any = useActivateFlow();

3129 const { ticket } = need.wallet(derivedWallet);

32− const { push, names } = useLocalRouter();

30+ const { push, names }: any = useLocalRouter();

3331 const STUB_VERIFY_TICKET = isDevelopment;

3432 const ticketSegments = useMemo(() => ticketToSegments(ticket), [ticket]);

3533 const [showError, setShowError] = useState<boolean>(false);

@@ -93,18 +91,9 @@ const MasterKeyConfirm = () => {

9391 useFadeIn();

9492

9593 return (

96− <View centered={true} id={'master-key-confirm'}>

97− <NavHeader>

98− <Box marginBottom={'10px'}>

99− <MiniBackButton

100− hpadding={true}

101− vpadding={true}

102− onClick={goBack}

103− className=""

104− />

105− </Box>

106− </NavHeader>

94+ <View inset id={'master-key-confirm'}>

10795 <ActivateView

96+ onBack={goBack}

10897 header={header}

10998 gridRows={'20% 80%'}

11099 gridAreas={"'header' 'content'"}>

src/views/Activate/MasterKeyDownload.tsx+7−6

@@ -16,9 +16,9 @@ import { useLocalRouter } from 'lib/LocalRouter';

1616import PaperBuilder from 'components/PaperBuilder';

1717import { DEFAULT_FADE_TIMEOUT, MASTER_KEY_DURATION } from 'lib/constants';

1818import { timeout } from 'lib/timeout';

19−import View from 'components/View';

2019import useMultikeyFileGenerator from 'lib/useMultikeyFileGenerator';

2120import { downloadWallet } from 'lib/invite';

21+import View from 'components/View';

2222

2323const MasterKeyDownload = () => {

2424 const {

@@ -28,8 +28,8 @@ const MasterKeyDownload = () => {

2828 isIn,

2929 setGenerated,

3030 setIsIn,

31− } = useActivateFlow();

32− const { data, push, names } = useLocalRouter();

31+ }: any = useActivateFlow();

32+ const { data, push, names }: any = useLocalRouter();

3333 const point = need.point(derivedPoint);

3434 const wallet = need.wallet(derivedWallet);

3535 const ticket = wallet.ticket.replace('~', '');

@@ -119,8 +119,9 @@ const MasterKeyDownload = () => {

119119 }, [delayedFadeIn, fadeIn, setIsIn, skipAnimationDelay]);

120120

121121 return (

122− <View centered={true}>

122+ <View inset>

123123 <ActivateView

124+ hideBack

124125 header={triggerAnimation && header}

125126 footer={triggerAnimation && footer}>

126127 <Box

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

132133 justifyContent={'space-evenly'}>

133134 <DangerBox

134135 overrideFadeIn={triggerAnimation && isIn}

135− className={!isIn ? 'hidden' : ''}>

136+ className={`mv7 ${!isIn ? 'hidden' : ''}`}>

136137 Do not share this with anyone else!

137138 </DangerBox>

138139 {ticket && (

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

141142 <MasterKeyCopy

142143 text={ticket}

143144 overrideFadeIn={triggerAnimation && isIn}

144− className={!isIn ? 'hidden' : ''}

145+ className={`mv2 ${!isIn ? 'hidden' : ''}`}

145146 />

146147 </Box>

147148 </ActivateView>

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

@@ -15,7 +15,7 @@ import View from 'components/View';

1515

1616const MasterKeyReveal = () => {

1717 const { setIsIn }: any = useActivateFlow();

18− const { pop, push, names }: any = useLocalRouter();

18+ const { push, names }: any = useLocalRouter();

1919 const [triggerAnimation, setTriggerAnimation] = useState<boolean>(false);

2020 const [fadeOutKey, setFadeOutKey] = useState<boolean>(false);

2121

@@ -74,8 +74,9 @@ const MasterKeyReveal = () => {

7474 }, [delayedFadeIn, setIsIn]);

7575

7676 return (

77− <View centered={true} pop={pop} header={null} className="">

77+ <View inset>

7878 <ActivateView

79+ hideBack

7980 header={triggerAnimation && header}

8081 footer={triggerAnimation && footer}>

8182 <Box

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

@@ -110,8 +110,8 @@ const MasterKeyTransfer = () => {

110110 }, [error]);

111111

112112 return (

113− <View centered={true}>

114− <ActivateView header={header} footer={footer}>

113+ <View inset>

114+ <ActivateView hideBack header={header} footer={footer}>

115115 <Box

116116 alignItems={'center'}

117117 display={'flex'}

src/views/Login/Hardware.js+1−1

@@ -1,6 +1,6 @@

11import React, { useMemo, useState } from 'react';

3−import useBreakpoints from 'lib/useBreakpoints';

3+import useBreakpoints from 'lib/useBreakpoints.tsx';

55import Accordion from 'components/Accordion';

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

@@ -18,7 +18,7 @@ import {

1818} from 'lib/ledger';

1919import { WALLET_TYPES } from 'lib/constants';

2020import useLoginView from 'lib/useLoginView';

21−import useBreakpoints from 'lib/useBreakpoints';

21+import useBreakpoints from 'lib/useBreakpoints.tsx';

2222

2323import {

2424 composeValidator,

src/views/Login/LoginSelector.scss−5

@@ -4,11 +4,6 @@

44 width: 482px;

55 min-height: 300px;

7− .icon {

8− height: 14px;

9− width: 14px;

10− }

11−

127 .login-menu-item {

138 padding: 16px 16px;

149 font-size: 14px;

src/views/Login/Ticket.tsx+3−15

@@ -1,9 +1,9 @@

11import { useCallback, useMemo, useRef, useState } from 'react';

22import { Just } from 'folktale/maybe';

33import * as kg from 'urbit-key-generation';

4−import { Grid, ToggleInput, AccessoryIcon } from 'indigo-react';

4+import { Grid } from 'indigo-react';

55import { FORM_ERROR } from 'final-form';

6−import { Icon, Row } from '@tlon/indigo-react';

6+import { Row } from '@tlon/indigo-react';

88import { useWallet } from 'store/wallet';

99import { usePointCursor } from 'store/pointCursor';

@@ -34,19 +34,7 @@ import Window from 'components/L2/Window/Window';

3434import HeaderPane from 'components/L2/Window/HeaderPane';

3535import BodyPane from 'components/L2/Window/BodyPane';

3636import AdvancedOptions from 'components/L2/Headers/AdvancedOptions';

37−

38−function TicketInputAccessory({ name }: { name: any }) {

39− return (

40− <AccessoryIcon>

41− <ToggleInput

42− name={name}

43− className="mt1"

44− inverseLabel={<Icon className="icon" icon="Visible" />}

45− label={<Icon className="icon" icon="Hidden" />}

46− />

47− </AccessoryIcon>

48− );

49−}

37+import TicketInputAccessory from 'components/form/TicketInputAccessory';

5038

5139interface TicketProps {

5240 className?: string;