git.iko.soy/bridge
on fdeb086 help sign in
bridge/src/views/Activate/ActivateCode.js
174 lines 5.3 kB history raw
1import React, { useCallback, useMemo, useRef } from 'react';
2import { Just, Nothing } from 'folktale/maybe';
3import * as azimuth from 'azimuth-js';
4import { Grid, H4 } from 'indigo-react';
6import View from 'components/View';
7import { ForwardButton } from 'components/Buttons';
8import Passport from 'components/Passport';
10import { useHistory } from 'store/history';
12import * as need from 'lib/need';
13import { ROUTE_NAMES } from 'lib/routeNames';
14import FooterButton from 'components/FooterButton';
15import { DEFAULT_HD_PATH, walletFromMnemonic } from 'lib/wallet';
16import { useNetwork } from 'store/network';
17import { generateWallet } from 'lib/invite';
18import { generateTemporaryOwnershipWallet } from 'lib/walletgen';
19import { useActivateFlow } from './ActivateFlow';
20import { useLocalRouter } from 'lib/LocalRouter';
21import useImpliedTicket from 'lib/useImpliedTicket';
22import timeout from 'lib/timeout';
23import useHasDisclaimed from 'lib/useHasDisclaimed';
25import BridgeForm from 'form/BridgeForm';
26import SubmitButton from 'form/SubmitButton';
27import {
28 TicketInput,
29 hasErrors,
30 composeValidator,
31 buildTicketValidator,
32} from 'form/Inputs';
33import FormError from 'form/FormError';
34import { FORM_ERROR } from 'final-form';
36export default function ActivateCode() {
37 const history = useHistory();
38 const { names, push } = useLocalRouter();
39 const { contracts } = useNetwork();
40 const impliedTicket = useImpliedTicket();
41 const [hasDisclaimed] = useHasDisclaimed();
43 const cachedInviteWallet = useRef(Nothing());
44 const cachedPoint = useRef();
46 const {
47 setDerivedWallet,
48 setInviteWallet,
49 derivedPoint,
50 setDerivedPoint,
51 } = useActivateFlow();
53 const goToLogin = useCallback(() => history.popAndPush(ROUTE_NAMES.LOGIN), [
54 history,
55 ]);
56 const goToPassport = useCallback(() => {
57 push(names.PASSPORT);
59 if (!hasDisclaimed) {
60 push(names.DISCLAIMER);
61 }
62 }, [names, push, hasDisclaimed]);
64 // validate should be a pure function but we don't want to have to recompute
65 // all of this information on submit, so cache the invite wallet and avoid
66 // re-renders that may trigger re-validations (causing infinite loop)
67 const validateForm = useCallback(
68 async ({ ticket }, errors) => {
69 if (hasErrors(errors)) {
70 return errors;
71 }
73 await timeout(100); // allow the ui changes to flush before we lag it out
75 const _contracts = need.contracts(contracts);
76 const { seed } = await generateTemporaryOwnershipWallet(ticket);
78 cachedInviteWallet.current = walletFromMnemonic(seed, DEFAULT_HD_PATH);
80 const _inviteWallet = need.wallet(cachedInviteWallet.current);
82 const owned = await azimuth.azimuth.getOwnedPoints(
83 _contracts,
84 _inviteWallet.address
85 );
86 const transferring = await azimuth.azimuth.getTransferringFor(
87 _contracts,
88 _inviteWallet.address
89 );
90 const incoming = [...owned, ...transferring];
92 if (incoming.length > 0) {
93 if (incoming.length > 1) {
94 // TODO: warnings
95 // setGeneralError(
96 // 'This invite code has multiple points available.\n' +
97 // "Once you've activated this point, activate the next with the same process."
98 // );
99 }
101 const point = parseInt(incoming[0], 10);
102 setDerivedPoint(Just(point));
103 cachedPoint.current = point;
104 } else {
105 return {
106 [FORM_ERROR]:
107 'Invite code has no claimable point.\n' +
108 'Check your invite code and try again?',
109 };
110 }
111 },
112 [contracts, setDerivedPoint]
113 );
115 const validate = useMemo(
116 () => composeValidator({ ticket: buildTicketValidator() }, validateForm),
117 [validateForm]
118 );
120 // set our state on submission
121 const onSubmit = useCallback(
122 async values => {
123 setInviteWallet(cachedInviteWallet.current);
124 setDerivedWallet(Just(await generateWallet(cachedPoint)));
125 },
126 [setDerivedWallet, setInviteWallet]
127 );
129 const afterSubmit = useCallback(async () => goToPassport(), [goToPassport]);
131 return (
132 <View inset>
133 <Grid>
134 <Grid.Item full as={Passport} point={derivedPoint} />
135 <Grid.Item full as={H4} className="mt3 mb2">
136 Activate
137 </Grid.Item>
138 <BridgeForm
139 validate={validate}
140 onSubmit={onSubmit}
141 afterSubmit={afterSubmit}
142 initialValues={{ ticket: impliedTicket || '' }}>
143 {({ validating, submitting, handleSubmit }) => (
144 <>
145 <Grid.Item
146 full
147 as={TicketInput}
148 name="ticket"
149 label="Activation Code"
150 />
152 <Grid.Item full as={FormError} />
154 <Grid.Item
155 full
156 as={SubmitButton}
157 className="mt4"
158 handleSubmit={handleSubmit}>
159 {validating
160 ? 'Deriving...'
161 : submitting
162 ? 'Generating...'
163 : 'Go'}
164 </Grid.Item>
165 </>
166 )}
167 </BridgeForm>
168 </Grid>
169 <FooterButton as={ForwardButton} onClick={goToLogin}>
170 Login
171 </FooterButton>
172 </View>
173 );