@@ -1,4 +1,4 @@
1−import React, { useCallback } from 'react';
1+import React, { useCallback, useMemo } from 'react';
22import { Input, AccessoryIcon } from 'indigo-react';
33
44import View from 'components/View';
@@ -6,31 +6,35 @@ import { useTicketInput } from 'components/Inputs';
66import { ForwardButton } from 'components/Buttons';
77
88import { useLocalRouter } from 'lib/LocalRouter';
9+import { validateExactly } from 'lib/validators';
910
11+const STUB_VERIFY_TICKET = process.env.NODE_ENV === 'development';
12+
13+//TODO deduplicate with PassportVerify
1014export default function Verify({ STEP_NAMES, newWallet }) {
1115 const { push } = useLocalRouter();
1216
17+ const ticket = newWallet.value.wallet.ticket;
18+ const validators = useMemo(
19+ () => [validateExactly(ticket, 'Does not match expected master ticket.')],
20+ [ticket]
21+ );
1322 const ticketInput = useTicketInput({
1423 name: 'ticket',
1524 label: 'New master ticket',
25+ initialValue: STUB_VERIFY_TICKET ? ticket : undefined,
26+ autoFocus: true,
27+ validators,
1628 });
17− const ticket = ticketInput.data;
29+ const { pass } = ticketInput;
1830
1931 const next = useCallback(() => push(STEP_NAMES.RETICKET), [push, STEP_NAMES]);
2032
21− const matches = newWallet.value.wallet.ticket === ticket;
22−
23− const displayTicketStatus = matches ? (
24− <AccessoryIcon.Success />
25− ) : (
26− <AccessoryIcon.Failure />
27− );
28−
2933 return (
3034 <View>
3135 Prove that you downloaded the new secrets!
32− <Input {...ticketInput} accessory={displayTicketStatus} />
33− <ForwardButton disabled={!matches} onClick={next}>
36+ <Input {...ticketInput} />
37+ <ForwardButton disabled={!pass} onClick={next}>
3438 Reticket
3539 </ForwardButton>
3640 </View>