333d26f · bridge · git.iko.soy

git.iko.soy/bridge

ux: prepare existing Activation flow for L2

commit333d26fe8a5972358154c3a61076f035f07ceb6d authortomholford <tomholford@users.noreply.github.com> dateMon 30 Aug 2021, 00:34 (5 years ago) parent1147fc8

9 files changed+208−50

compare with master

unifiedsplit

src/Bridge.js+2−2 src/form/formatters.js+9 src/form/formatters.test.ts+45 src/lib/useImpliedTicket.js−14 src/lib/useImpliedTicket.test.ts+59 src/lib/useImpliedTicket.ts+37 src/lib/walletgen.js+3−7 src/views/Activate/ActivateCode.js+42−26 src/views/Activate/useActivateFlowState.js+11−1

src/Bridge.js+2−2

@@ -42,7 +42,7 @@ const INITIAL_POINT_CURSOR = IS_STUBBED ? Just(65792) : Nothing();

4242

4343function useInitialRoutes() {

4444 const [hasDisclaimed] = useHasDisclaimed();

45− const hasImpliedTicket = !!useImpliedTicket();

45+ const { impliedTicket } = useImpliedTicket();

4646

4747 const isActivateUrl = window.location.pathname === '/activate';

4848

@@ -54,7 +54,7 @@ function useInitialRoutes() {

5454 ];

5555 }

5656

57− if (hasImpliedTicket || isActivateUrl) {

57+ if (impliedTicket || isActivateUrl) {

5858 return [{ key: ROUTE_NAMES.ACTIVATE }];

5959 }

6060

src/form/formatters.js+9

@@ -2,6 +2,7 @@ import { compose, strSplice } from 'lib/lib';

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

44const HEX_PREFIX = '0x';

5+const SIG_PREFIX = '~';

56const TICKET_MAX_BYTE_LEN = 32; // tickets can be as large as 32 bytes

67const PAT_BLOCK_CHAR_LENGTH = 6; // pat{p,q} blocks are 6 characters long

@@ -77,3 +78,11 @@ export const stripHexPrefix = s => {

7778 ? s.slice(HEX_PREFIX.length)

7879 : s;

7980};

81+

82+export const ensureSigPrefix = s => {

83+ if (!s || s.length < SIG_PREFIX.length) {

84+ return s || '';

85+ }

86+

87+ return s.indexOf(SIG_PREFIX) !== 0 ? `${SIG_PREFIX}${s}` : s;

88+};

src/form/formatters.test.tsnew file+45

@@ -0,0 +1,45 @@

1+import { ensurePatFormat } from './formatters';

3+describe('#ensurePatFormat', () => {

4+ it('ensures a valid ticket', () => {

5+ const input = '~ticket-ticket-ticket-ticket';

6+ const expected = '~ticket-ticket-ticket-ticket';

8+ expect(ensurePatFormat(input)).toEqual(expected);

9+ });

10+

11+ it('prepends a ~ when missing', () => {

12+ const input = 'ticket-ticket-ticket-ticket';

13+ const expected = '~ticket-ticket-ticket-ticket';

14+

15+ expect(ensurePatFormat(input)).toEqual(expected);

16+ });

17+

18+ it('inserts missing separators', () => {

19+ const input = 'ticketticketticketticket';

20+ const expected = '~ticket-ticket-ticket-ticket';

21+

22+ expect(ensurePatFormat(input)).toEqual(expected);

23+ });

24+

25+ it('handles uneven patp', () => {

26+ const input = 'ticket-ticket-tic';

27+ const expected = '~ticket-ticket-tic';

28+

29+ expect(ensurePatFormat(input)).toEqual(expected);

30+ });

31+

32+ it('supports master ticket + star combo for Activation flow', () => {

33+ const input = 'ticket-ticket-ticket-ticket-sampel';

34+ const expected = '~ticket-ticket-ticket-ticket-sampel';

35+

36+ expect(ensurePatFormat(input)).toEqual(expected);

37+ });

38+

39+ it('supports master ticket + planet combo for Activation flow', () => {

40+ const input = 'ticket-ticket-ticket-ticket-sampel-palnet';

41+ const expected = '~ticket-ticket-ticket-ticket-sampel-palnet';

42+

43+ expect(ensurePatFormat(input)).toEqual(expected);

44+ });

45+});

src/lib/useImpliedTicket.jsdeleted−14

@@ -1,14 +0,0 @@

1−import ob from 'urbit-ob';

2−

3−import { ensurePatFormat } from 'form/formatters';

4−

5−/**

6− * pull the suggested ticket from the #hash in the url

7− */

8−export default function useImpliedTicket() {

9− const hash = window.location.hash.slice(1);

10− const ticket = ensurePatFormat(hash);

11− const isValid = ob.isValidPatq(ticket);

12−

13− return isValid ? ticket : null;

14−}

src/lib/useImpliedTicket.test.tsnew file+59

@@ -0,0 +1,59 @@

1+import useImpliedTicket from './useImpliedTicket';

3+describe('#useImpliedTicket', () => {

4+ const { location } = window;

6+ beforeAll(() => {

7+ delete window.location;

8+ });

10+ afterAll(() => {

11+ window.location = location;

12+ });

13+

14+ describe('when hash is not present in URL', () => {

15+ it('returns null', () => {

16+ const input = '';

17+ window.location = { hash: input };

18+

19+ const { impliedTicket } = useImpliedTicket();

20+ expect(impliedTicket).toEqual(null);

21+ });

22+ });

23+

24+ describe('when hash is just a ticket', () => {

25+ it('parses the ticket, returns null point', () => {

26+ const input = '#widweb-tipfep-sabnux-nispec';

27+ window.location = { hash: input };

28+

29+ const { impliedPoint, impliedTicket } = useImpliedTicket();

30+

31+ expect(impliedPoint).toBe(null);

32+ expect(impliedTicket).toEqual('~widweb-tipfep-sabnux-nispec');

33+ });

34+ });

35+

36+ describe('when hash has both ticket and star point', () => {

37+ it('parses the ticket, returns null point', () => {

38+ const input = '#widweb-tipfep-sabnux-nispec-sampel';

39+ window.location = { hash: input };

40+

41+ const { impliedPoint, impliedTicket } = useImpliedTicket();

42+

43+ expect(impliedPoint).toBe('~sampel');

44+ expect(impliedTicket).toEqual('~widweb-tipfep-sabnux-nispec');

45+ });

46+ });

47+

48+ describe('when hash has both ticket and planet point', () => {

49+ it('parses both ticket and point', () => {

50+ const input = '#widweb-tipfep-sabnux-nispec-sampel-palnet';

51+ window.location = { hash: input };

52+

53+ const { impliedPoint, impliedTicket } = useImpliedTicket();

54+

55+ expect(impliedPoint).toBe('~sampel-palnet');

56+ expect(impliedTicket).toEqual('~widweb-tipfep-sabnux-nispec');

57+ });

58+ });

59+});

src/lib/useImpliedTicket.tsnew file+37

@@ -0,0 +1,37 @@

1+import ob from 'urbit-ob';

2+import { ensurePatFormat, ensureSigPrefix } from 'form/formatters';

4+/**

5+ * pull the implied ticket and point from the #hash in the url

6+ */

7+// e.g., https://bridge.urbit.org/#widweb-tipfep-sabnux-nispec-sampel-palnet

9+// Example tickets:

10+// ~widweb-tipfep-sabnux-nispec

11+

12+// Example tickets + points (Activation Flow):

13+// ~widweb-tipfep-sabnux-nispec-sampel

14+// ~widweb-tipfep-sabnux-nispec-sampel-palnet

15+const VALID_TICKET_REGEX = /^~(?:[[a-z]{6}-){3}[a-z]{6}/;

16+const VALID_TICKET_AND_POINT_REGEX = /^~([a-z]{6}-){4}([a-z-]{6,13})/;

17+const CAPTURE_TICKET_REGEX = /^~((?:[[a-z]{6}-){3}[a-z]{6})/;

18+const CAPTURE_POINT_REGEX = /^~(?:(?:[[a-z]{6}-){3}[a-z]{6}-{1})([a-z-]{6,13})/;

19+

20+export default function useImpliedTicket() {

21+ const hash = window.location.hash.slice(1);

22+ const pat = ensurePatFormat(hash);

23+ const impliedTicket = VALID_TICKET_REGEX.test(pat)

24+ ? pat.match(CAPTURE_TICKET_REGEX)![0]

25+ : null;

26+

27+ const impliedPoint = VALID_TICKET_AND_POINT_REGEX.test(pat)

28+ ? ensureSigPrefix(pat.match(CAPTURE_POINT_REGEX)![1])

29+ : null;

30+

31+ return {

32+ impliedPoint:

33+ impliedPoint && ob.isValidPatq(impliedPoint) ? impliedPoint : null,

34+ impliedTicket:

35+ impliedTicket && ob.isValidPatq(impliedTicket) ? impliedTicket : null,

36+ };

37+}

src/lib/walletgen.js+3−7

@@ -83,13 +83,9 @@ export const generateWallet = async (point, ticket, boot) => {

8383 return wallet;

8484};

8585

86−export const generateOwnershipWallet = (ship, ticket) =>

87− kg.generateOwnershipWallet({ ship, ticket });

88−

89−// temporary wallets need to be derivable from just the ticket,

90−// so we always use ~zod as the wallet point.

91−export const generateTemporaryOwnershipWallet = ticket =>

92− generateOwnershipWallet(ZOD, ticket);

86+export const generateOwnershipWallet = async (ship, ticket) => {

87+ return kg.generateOwnershipWallet({ ship, ticket });

88+};

9389

9490export const generateTemporaryTicketAndWallet = async point => {

9591 const ticket = await makeTicket(point);

src/views/Activate/ActivateCode.js+42−26

@@ -1,12 +1,11 @@

1−import React, { useCallback, useMemo, useRef } from 'react';

2−import { Just, Nothing } from 'folktale/maybe';

1+import { useCallback, useMemo, useRef } from 'react';

2+import { Just } from 'folktale/maybe';

33import * as azimuth from 'azimuth-js';

44import { Grid, H4, P, CheckboxInput } from 'indigo-react';

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

77import View from 'components/View';

88import { ForwardButton } from 'components/Buttons';

9−import Passport from 'components/Passport';

109import WarningBox from 'components/WarningBox';

1110import FooterButton from 'components/FooterButton';

1211

@@ -18,7 +17,7 @@ import { ROUTE_NAMES } from 'lib/routeNames';

1817import { walletFromMnemonic } from 'lib/wallet';

1918import { DEFAULT_HD_PATH } from 'lib/constants';

2019import { generateWallet } from 'lib/invite';

21−import { generateTemporaryOwnershipWallet } from 'lib/walletgen';

20+import { generateOwnershipWallet } from 'lib/walletgen';

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

2322import useImpliedTicket from 'lib/useImpliedTicket';

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

@@ -39,20 +38,20 @@ import FormError from 'form/FormError';

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

4039import { WARNING } from 'form/helpers';

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

41+import { patp2dec } from 'lib/patp2dec';

4242

4343export default function ActivateCode() {

4444 const history = useHistory();

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

4646 const { contracts } = useNetwork();

47− const impliedTicket = useImpliedTicket();

47+ const { impliedPoint, impliedTicket } = useImpliedTicket();

4848 const [hasDisclaimed] = useHasDisclaimed();

4949 const didWarn = useRef(false);

5050

5151 const {

52+ setDerivedPoint,

5253 setDerivedWallet,

5354 setInviteWallet,

54− derivedPoint,

55− setDerivedPoint,

5655 } = useActivateFlow();

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

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

@@ -90,18 +89,23 @@ export default function ActivateCode() {

9089 [validateForm]

9190 );

9291

93− // set our state on submission

92+ // derive and set our state on submission

9493 const onSubmit = useCallback(

95− async values => {

94+ async _values => {

9695 await timeout(16); // allow the ui changes to flush before we lag it out

9796

97+ // TODO: fallback logic to first use implied values if present, otherwise form values?

98+ // Derive wallet

99+ const impliedAzimuthPoint = patp2dec(impliedPoint);

98100 const _contracts = need.contracts(contracts);

99− const { seed } = await generateTemporaryOwnershipWallet(values.ticket);

100−

101+ const { seed } = await generateOwnershipWallet(

102+ impliedAzimuthPoint,

103+ impliedTicket

104+ );

101105 const inviteWallet = walletFromMnemonic(seed, DEFAULT_HD_PATH);

102−

103106 const _inviteWallet = need.wallet(inviteWallet);

104107

108+ // Load associated points

105109 const owned = await azimuth.azimuth.getOwnedPoints(

106110 _contracts,

107111 _inviteWallet.address

@@ -110,11 +114,16 @@ export default function ActivateCode() {

110114 _contracts,

111115 _inviteWallet.address

112116 );

117+

113118 const incoming = [...owned, ...transferring];

114119

120+ setInviteWallet(inviteWallet);

121+

122+ // Set derived

115123 if (incoming.length > 0) {

116124 if (incoming.length > 1 && !didWarn.current) {

117125 didWarn.current = true;

126+

118127 return {

119128 [WARNING]:

120129 'This invite code has multiple points available. ' +

@@ -126,7 +135,6 @@ export default function ActivateCode() {

126135 const point = convertToInt(incoming[0], 10);

127136

128137 setDerivedPoint(Just(point));

129− setInviteWallet(inviteWallet);

130138 setDerivedWallet(Just(await generateWallet(point, true)));

131139 } else {

132140 return {

@@ -136,7 +144,14 @@ export default function ActivateCode() {

136144 };

137145 }

138146 },

139− [contracts, setDerivedPoint, setDerivedWallet, setInviteWallet]

147+ [

148+ contracts,

149+ impliedPoint,

150+ impliedTicket,

151+ setDerivedPoint,

152+ setDerivedWallet,

153+ setInviteWallet,

154+ ]

140155 );

141156

142157 const initialValues = useMemo(

@@ -147,19 +162,20 @@ export default function ActivateCode() {

147162 return (

148163 <View inset>

149164 <Grid>

150− <Grid.Item

151− full

152− as={Passport}

153− point={derivedPoint}

154− address={Nothing()}

155− />

156165 <Grid.Item full as={H4} className="mt3">

157− Activate

158− </Grid.Item>

159− <Grid.Item full as={P} className="mb2">

160− Someone has invited you to claim your Urbit identity and join the

161− network. {!impliedTicket && 'Enter your activation code to continue.'}

166+ Welcome. This is your Urbit.

162167 </Grid.Item>

168+ {!impliedTicket && (

169+ <Grid.Item full as={P} className="mb2">

170+ Enter your activation code to continue.

171+ </Grid.Item>

172+ )}

173+

174+ {impliedPoint && (

175+ <Grid.Item full as={P} className="mb2">

176+ {impliedPoint}

177+ </Grid.Item>

178+ )}

163179 <BridgeForm

164180 validate={validate}

165181 onSubmit={onSubmit}

@@ -201,7 +217,7 @@ export default function ActivateCode() {

201217 ? 'Generating...'

202218 : isWarning

203219 ? 'Continue Activation'

204− : 'Go'

220+ : 'Claim'

205221 }

206222 </Grid.Item>

207223

src/views/Activate/useActivateFlowState.js+11−1

@@ -6,13 +6,21 @@ export default function useActivateFlowState() {

66 const [inviteWallet, setInviteWallet] = useState(Nothing());

77 const [derivedPoint, setDerivedPoint] = useState(Nothing());

88 const [generated, setGenerated] = useState(false);

9+ const [incomingPoints, setIncomingPoints] = useState(Nothing());

910

1011 const reset = useCallback(() => {

1112 setDerivedWallet(Nothing());

1213 setInviteWallet(Nothing());

1314 setDerivedPoint(Nothing());

1415 setGenerated(false);

15− }, [setDerivedWallet, setInviteWallet, setDerivedPoint, setGenerated]);

16+ setIncomingPoints(Nothing());

17+ }, [

18+ setDerivedWallet,

19+ setInviteWallet,

20+ setDerivedPoint,

21+ setGenerated,

22+ setIncomingPoints,

23+ ]);

1624

1725 return {

1826 derivedWallet,

@@ -23,6 +31,8 @@ export default function useActivateFlowState() {

2331 setDerivedPoint,

2432 generated,

2533 setGenerated,

34+ incomingPoints,

35+ setIncomingPoints,

2636 reset,

2737 };

2838}