daad500 · bridge · git.iko.soy

src/components/View.js+9−1

compare with master

unifiedsplit

@@ -17,6 +17,7 @@ function View({

17 hideBack = false,

18 pop,

19 header,

20+ centered = false,

20 ...rest

21 ...rest

21}) {

22}) {

22 const { reset } = useHistory();

23 const { reset } = useHistory();

@@ -87,7 +88,14 @@ function View({

87 )}

88 )}

88 </Flex.Item>

89 </Flex.Item>

89

90

90− <Flex.Item flex={1} as={Flex} col justify="between">

91+ <Flex.Item

92+ flex={1}

93+ as={Flex}

94+ col

95+ className={cn({

96+ 'justify-between': !centered,

97+ 'justify-center': centered,

98+ })}>

91 <Flex.Item className="pb5 ">

99 <Flex.Item className="pb5 ">

92 {header || <Header logout={goBack} />}

100 {header || <Header logout={goBack} />}

93 {children}

101 {children}

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

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

1import { useCallback } from 'react';

2

3import View from 'components/View';

4−import { ForwardButton } from 'components/Buttons';

5−import FooterButton from 'components/FooterButton';

6import ActivateView from './ActivateView';

4import ActivateView from './ActivateView';

7

5

8−import { useHistory } from 'store/history';

9−

10−import { ROUTE_NAMES } from 'lib/routeNames';

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

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

12import useImpliedTicket from 'lib/useImpliedTicket';

7import useImpliedTicket from 'lib/useImpliedTicket';

13import useHasDisclaimed from 'lib/useHasDisclaimed';

8import useHasDisclaimed from 'lib/useHasDisclaimed';

@@ -19,15 +14,10 @@ import { FadeableActivateCodeForm as ActivateCodeForm } from './ActivateCodeForm

19import useFadeIn from './useFadeIn';

14import useFadeIn from './useFadeIn';

20

15

21export default function ActivateCode() {

16export default function ActivateCode() {

22− const history = useHistory();

23 const { names, push } = useLocalRouter();

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

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

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

25 const [hasDisclaimed] = useHasDisclaimed();

19 const [hasDisclaimed] = useHasDisclaimed();

26

20

27− const goToLogin = useCallback(() => history.popAndPush(ROUTE_NAMES.LOGIN), [

28− history,

29− ]);

30−

31 const goToMasterKey = useCallback(() => {

21 const goToMasterKey = useCallback(() => {

32 if (!hasDisclaimed) {

22 if (!hasDisclaimed) {

33 push(names.DISCLAIMER, { next: names.MASTER_KEY });

23 push(names.DISCLAIMER, { next: names.MASTER_KEY });

@@ -40,7 +30,7 @@ export default function ActivateCode() {

40 useFadeIn();

30 useFadeIn();

41

31

42 return (

32 return (

43− <View inset>

33+ <View centered={true} inset>

44 <ActivateView

34 <ActivateView

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

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

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

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

@@ -57,10 +47,6 @@ export default function ActivateCode() {

57 {impliedPatp && <PointPresenter patp={impliedPatp} />}

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

58 </Box>

48 </Box>

59 </ActivateView>

49 </ActivateView>

60−

61− <FooterButton as={ForwardButton} onClick={goToLogin}>

62− Login

63− </FooterButton>

64 </View>

50 </View>

65 );

51 );

66}

52}

src/views/Activate/ActivateView.tsx+4−4

@@ -28,10 +28,10 @@ export default function ActivateView({

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

29 border-radius={'5px'}

30 padding={'10px'}

31− width={'550px'}

31+ width={'512px'}

32− height={'550px'}

32+ height={'512px'}

33− max-width={'550px'}

33+ max-width={'512px'}

34− max-height={'550px'}

34+ max-height={'512px'}

35 className={cn(className)}

36 mb={3}>

37 <Box gridArea="header">{header}</Box>

src/views/Activate/MasterKeyConfirm.tsx+5−3

@@ -19,6 +19,7 @@ import BridgeForm from 'form/BridgeForm';

19import FormError from 'form/FormError';

20import useFadeIn from './useFadeIn';

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

22+import View from 'components/View';

22

23

23const MasterKeyConfirm = () => {

24const MasterKeyConfirm = () => {

24 const { derivedWallet, setIsIn } = useActivateFlow();

25 const { derivedWallet, setIsIn } = useActivateFlow();

@@ -52,7 +53,8 @@ const MasterKeyConfirm = () => {

52 ticket0: STUB_VERIFY_TICKET ? ticketSegments[0] : undefined,

53 ticket0: STUB_VERIFY_TICKET ? ticketSegments[0] : undefined,

53 ticket1: STUB_VERIFY_TICKET ? ticketSegments[1] : undefined,

54 ticket1: STUB_VERIFY_TICKET ? ticketSegments[1] : undefined,

54 ticket2: STUB_VERIFY_TICKET ? ticketSegments[2] : undefined,

55 ticket2: STUB_VERIFY_TICKET ? ticketSegments[2] : undefined,

55− ticket3: STUB_VERIFY_TICKET ? ticketSegments[3] : undefined,

56+ // ticket3: STUB_VERIFY_TICKET ? ticketSegments[3] : undefined,

57+ ticket3: undefined,

56 }),

58 }),

57 [STUB_VERIFY_TICKET, ticket, ticketSegments]

59 [STUB_VERIFY_TICKET, ticket, ticketSegments]

58 );

60 );

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

79 useFadeIn();

81 useFadeIn();

80

82

81 return (

83 return (

82− <>

84+ <View centered={true} inset>

83 <ActivateView

85 <ActivateView

84 header={header}

86 header={header}

85 gridRows={'20% 80%'}

87 gridRows={'20% 80%'}

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

185 </Box>

187 </Box>

186 </ActivateView>

188 </ActivateView>

187 <ActivateSteps currentStep={2} totalSteps={4} overrideFadeIn={true} />

189 <ActivateSteps currentStep={2} totalSteps={4} overrideFadeIn={true} />

188− </>

190+ </View>

189 );

191 );

190};

192};

191

193

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

@@ -19,6 +19,7 @@ import { downloadWallet } from 'lib/invite';

19import PaperBuilder from 'components/PaperBuilder';

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

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

22+import View from 'components/View';

22

23

23const MasterKeyDownload = () => {

24const MasterKeyDownload = () => {

24 const {

25 const {

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

104 }, [delayedReveal, setIsIn]);

105 }, [delayedReveal, setIsIn]);

105

106

106 return (

107 return (

107− <>

108+ <View centered={true} inset>

108 <ActivateView

109 <ActivateView

109 header={triggerAnimation && header}

110 header={triggerAnimation && header}

110 footer={triggerAnimation && footer}>

111 footer={triggerAnimation && footer}>

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

132 setPaper(Just(data));

133 setPaper(Just(data));

133 }}

134 }}

134 />

135 />

135− </>

136+ </View>

136 );

137 );

137};

138};

138

139

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

@@ -11,6 +11,7 @@ import { timeout } from 'lib/timeout';

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

12import { FadeableActivateButton as ActivateButton } from './ActivateButton';

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

14+import View from 'components/View';

14

15

15const MasterKeyReveal = () => {

16const MasterKeyReveal = () => {

16 const { setIsIn } = useActivateFlow();

17 const { setIsIn } = useActivateFlow();

@@ -71,7 +72,7 @@ const MasterKeyReveal = () => {

71 }, [delayedFadeIn, setIsIn]);

72 }, [delayedFadeIn, setIsIn]);

72

73

73 return (

74 return (

74− <>

75+ <View centered={true} inset>

75 <ActivateView

76 <ActivateView

76 header={triggerAnimation && header}

77 header={triggerAnimation && header}

77 footer={triggerAnimation && footer}>

78 footer={triggerAnimation && footer}>

@@ -96,7 +97,7 @@ const MasterKeyReveal = () => {

96 {triggerAnimation && (

97 {triggerAnimation && (

97 <ActivateSteps currentStep={0} totalSteps={4} overrideFadeIn={true} />

98 <ActivateSteps currentStep={0} totalSteps={4} overrideFadeIn={true} />

98 )}

99 )}

99− </>

100+ </View>

100 );

101 );

101};

102};

102

103

src/views/Activate/MasterKeyTransfer.tsx+21−18

@@ -11,6 +11,7 @@ import { FadeableActivateButton as ActivateButton } from './ActivateButton';

11import useFadeIn from './useFadeIn';

12import PointPresenter from './PointPresenter';

13import DangerBox from './DangerBox';

14+import View from 'components/View';

14

15

15const MasterKeyTransfer = () => {

16const MasterKeyTransfer = () => {

16 const { api, transferPoint } = useRoller();

17 const { api, transferPoint } = useRoller();

@@ -88,15 +89,15 @@ const MasterKeyTransfer = () => {

88 flexDirection={'column'}

89 flexDirection={'column'}

89 flexWrap={'nowrap'}

90 flexWrap={'nowrap'}

90 justifyContent={'space-between'}>

91 justifyContent={'space-between'}>

91− {error && <DangerBox>{error.toString()}</DangerBox>}

92+ {/* {error && <DangerBox>{error.toString()}</DangerBox>} */}

92 <ActivateButton

93 <ActivateButton

93 onClick={() =>

94 onClick={() =>

94 window.open(

95 window.open(

95 'https://github.com/urbit/port/releases/latest/download/Port.dmg'

96 'https://github.com/urbit/port/releases/latest/download/Port.dmg'

96 )

97 )

97 }

98 }

99+ // disabled={error}

98− success={true}

100+ success={true}>

99− disabled={error}>

100 Download the Client for Mac

101 Download the Client for Mac

101 </ActivateButton>

102 </ActivateButton>

102 <Anchor

103 <Anchor

@@ -118,21 +119,23 @@ const MasterKeyTransfer = () => {

118 }, [error]);

119 }, [error]);

119

120

120 return (

121 return (

122+ <View centered={true} inset>

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

123+ <ActivateView header={header} footer={footer}>

122− <Box

124+ <Box

123− alignItems={'center'}

125+ alignItems={'center'}

124− display={'flex'}

126+ display={'flex'}

125− flexDirection={'column'}

127+ flexDirection={'column'}

126− flexWrap={'nowrap'}

128+ flexWrap={'nowrap'}

127− height={'100%'}

129+ height={'100%'}

128− justifyContent={'center'}>

130+ justifyContent={'center'}>

129− <PointPresenter

131+ <PointPresenter

130− patp={derivedPatp.value}

132+ patp={derivedPatp.value}

131− showLabel={false}

133+ showLabel={false}

132− success={true}

134+ success={true}

133− />

135+ />

134− </Box>

136+ </Box>

135− </ActivateView>

137+ </ActivateView>

138+ </View>

136 );

139 );

137};

140};

138

141