git.iko.soy/bridge
on 557ffe7 help sign in
bridge/src/views/Activate/ActivateCode.js
194 lines 5.9 kB history raw
1import React, { useCallback, useMemo, useRef } from 'react';
2import { Just } from 'folktale/maybe';
3import * as azimuth from 'azimuth-js';
4import { Grid, H4 } from 'indigo-react';
5import { FORM_ERROR } from 'final-form';
7import View from 'components/View';
8import { ForwardButton } from 'components/Buttons';
9import Passport from 'components/Passport';
10import WarningBox from 'components/WarningBox';
11import FooterButton from 'components/FooterButton';
13import { useNetwork } from 'store/network';
14import { useHistory } from 'store/history';
16import * as need from 'lib/need';
17import { ROUTE_NAMES } from 'lib/routeNames';
18import { DEFAULT_HD_PATH, walletFromMnemonic } from 'lib/wallet';
19import { generateWallet } from 'lib/invite';
20import { generateTemporaryOwnershipWallet } from 'lib/walletgen';
21import { useLocalRouter } from 'lib/LocalRouter';
22import useImpliedTicket from 'lib/useImpliedTicket';
23import timeout from 'lib/timeout';
24import useHasDisclaimed from 'lib/useHasDisclaimed';
25import useBreakpoints from 'lib/useBreakpoints';
27import BridgeForm from 'form/BridgeForm';
28import SubmitButton from 'form/SubmitButton';
29import { TicketInput } from 'form/Inputs';
30import {
31 composeValidator,
32 buildPatqValidator,
33 hasErrors,
34} from 'form/validators';
35import FormError from 'form/FormError';
37import { useActivateFlow } from './ActivateFlow';
38import { WARNING } from 'form/helpers';
40export default function ActivateCode() {
41 const history = useHistory();
42 const { names, push } = useLocalRouter();
43 const { contracts } = useNetwork();
44 const impliedTicket = useImpliedTicket();
45 const [hasDisclaimed] = useHasDisclaimed();
46 const didWarn = useRef(false);
48 const {
49 setDerivedWallet,
50 setInviteWallet,
51 derivedPoint,
52 setDerivedPoint,
53 } = useActivateFlow();
54 // this is a pretty naive way to detect if we're on a mobile device
55 // (i.e. we're checking the width of the screen)
56 // but it will suffice for the 99% case and if someone wants to get around it
57 // well by golly they're allowed to turn their phone into landscape mode
58 // for this screen
59 const activationAllowed = useBreakpoints([false, true, true]);
61 const goToLogin = useCallback(() => history.popAndPush(ROUTE_NAMES.LOGIN), [
62 history,
63 ]);
65 const goToPassport = useCallback(() => {
66 push(names.PASSPORT);
68 if (!hasDisclaimed) {
69 push(names.DISCLAIMER);
70 }
71 }, [hasDisclaimed, names.DISCLAIMER, names.PASSPORT, push]);
73 const validateForm = useCallback((values, errors) => {
74 didWarn.current = false;
76 if (hasErrors(errors)) {
77 return errors;
78 }
79 }, []);
81 const validate = useMemo(
82 () => composeValidator({ ticket: buildPatqValidator() }, validateForm),
83 [validateForm]
84 );
86 // set our state on submission
87 const onSubmit = useCallback(
88 async values => {
89 await timeout(16); // allow the ui changes to flush before we lag it out
91 const _contracts = need.contracts(contracts);
92 const { seed } = await generateTemporaryOwnershipWallet(values.ticket);
94 const inviteWallet = walletFromMnemonic(seed, DEFAULT_HD_PATH);
96 const _inviteWallet = need.wallet(inviteWallet);
98 const owned = await azimuth.azimuth.getOwnedPoints(
99 _contracts,
100 _inviteWallet.address
101 );
102 const transferring = await azimuth.azimuth.getTransferringFor(
103 _contracts,
104 _inviteWallet.address
105 );
106 const incoming = [...owned, ...transferring];
108 if (incoming.length > 0) {
109 if (incoming.length > 1 && !didWarn.current) {
110 didWarn.current = true;
111 return {
112 [WARNING]:
113 'This invite code has multiple points available. ' +
114 "Once you've activated this point, " +
115 'activate the next with the same process.',
116 };
117 }
119 const point = parseInt(incoming[0], 10);
121 setDerivedPoint(Just(point));
122 setInviteWallet(inviteWallet);
123 setDerivedWallet(Just(await generateWallet(point)));
124 } else {
125 return {
126 [FORM_ERROR]:
127 'Invite code has no claimable point.\n' +
128 'Check your invite code and try again?',
129 };
130 }
131 },
132 [contracts, setDerivedPoint, setDerivedWallet, setInviteWallet]
133 );
135 const initialValues = useMemo(() => ({ ticket: impliedTicket || '' }), [
136 impliedTicket,
137 ]);
139 return (
140 <View inset>
141 <Grid>
142 <Grid.Item full as={Passport} point={derivedPoint} />
143 <Grid.Item full as={H4} className="mt3 mb2">
144 Activate
145 </Grid.Item>
146 <BridgeForm
147 validate={validate}
148 onSubmit={onSubmit}
149 afterSubmit={goToPassport}
150 initialValues={initialValues}>
151 {({ validating, submitting, handleSubmit }) => (
152 <>
153 <Grid.Item
154 full
155 as={TicketInput}
156 name="ticket"
157 label="Activation Code"
158 disabled={!activationAllowed}
159 />
161 <Grid.Item full as={FormError} />
163 <Grid.Item
164 full
165 as={SubmitButton}
166 className="mt4"
167 handleSubmit={handleSubmit}>
168 {isWarning =>
169 validating
170 ? 'Deriving...'
171 : submitting
172 ? 'Generating...'
173 : isWarning
174 ? 'Continue Activation'
175 : 'Go'
176 }
177 </Grid.Item>
179 {!activationAllowed && (
180 <Grid.Item full as={WarningBox} className="mt4">
181 For your security, please access Bridge on a desktop device.
182 </Grid.Item>
183 )}
184 </>
185 )}
186 </BridgeForm>
187 </Grid>
189 <FooterButton as={ForwardButton} onClick={goToLogin}>
190 Login
191 </FooterButton>
192 </View>
193 );