git.iko.soy/bridge
on bc552c8 help sign in
bridge/src/views/Invite/InviteEmail.js
523 lines 16 kB history raw
1import React, { useCallback, useEffect, useMemo, useState } from 'react';
2import cn from 'classnames';
3import { Just } from 'folktale/maybe';
4import * as azimuth from 'azimuth-js';
5import {
6 Grid,
7 Flex,
8 Input,
9 IconButton,
10 HelpText,
11 Text,
12 ErrorText,
13 AccessoryIcon,
14 useForm,
15} from 'indigo-react';
16import { uniq } from 'lodash';
18import { usePointCursor } from 'store/pointCursor';
19import { useNetwork } from 'store/network';
20import { usePointCache } from 'store/pointCache';
21import { useWallet } from 'store/wallet';
23// for transaction generation and signing
24import {
25 signTransaction,
26 sendSignedTransaction,
27 waitForTransactionConfirm,
28 hexify,
29 fromWei,
30 toWei,
31} from 'lib/txn';
32import * as tank from 'lib/tank';
33import { useLocalRouter } from 'lib/LocalRouter';
34import useArray from 'lib/useArray';
35import { buildEmailInputConfig } from 'lib/useInputs';
36import { MIN_PLANET, GAS_LIMITS } from 'lib/constants';
37import * as need from 'lib/need';
38import * as wg from 'lib/walletgen';
39import useSetState from 'lib/useSetState';
40import pluralize from 'lib/pluralize';
41import useMailer from 'lib/useMailer';
43import MiniBackButton from 'components/MiniBackButton';
44import LoadableButton from 'components/LoadableButton';
45import Highlighted from 'components/Highlighted';
47const GAS_PRICE_GWEI = 20; // we pay the premium for faster ux
48const GAS_LIMIT = GAS_LIMITS.GIFT_PLANET;
49const INVITE_COST = toWei((GAS_PRICE_GWEI * GAS_LIMIT).toString(), 'gwei');
50const HAS_RECEIVED_TEXT = 'This email has already received an invite.';
52const STATUS = {
53 INPUT: 'INPUT',
54 GENERATING: 'GENERATING',
55 CAN_SEND: 'CAN_SEND',
56 FUNDING: 'FUNDING',
57 SENDING: 'SENDING',
58 SUCCESS: 'SUCCESS',
59 FAILURE: 'FAILURE',
60};
62const buttonText = (status, count) => {
63 switch (status) {
64 case STATUS.INPUT:
65 return `Generate ${pluralize(count, 'Invite')}`;
66 case STATUS.GENERATING:
67 return `Generating ${pluralize(count, 'Invite')}...`;
68 case STATUS.CAN_SEND:
69 return `Send ${pluralize(count, 'Invite')}`;
70 case STATUS.FUNDING:
71 return `Waiting on Funds...`;
72 case STATUS.SENDING:
73 return `Sending ${pluralize(count, 'Invite')}...`;
74 case STATUS.FAILURE:
75 default:
76 return 'Error';
77 }
78};
80// world's simplest uid
81let id = 0;
82const buildInputConfig = (extra = {}) =>
83 buildEmailInputConfig({
84 name: `email-${id++}`,
85 placeholder: 'Email Address',
86 ...extra,
87 });
89const buildAccessoryFor = (dones, errors) => name => {
90 if (dones[name]) return <AccessoryIcon.Success />;
91 if (errors[name]) return <AccessoryIcon.Failure />;
92 return <AccessoryIcon.Pending />;
93};
95// TODO: test with tank, successful txs
96export default function InviteEmail() {
97 // TODO: resumption after error?
98 const { pop } = useLocalRouter();
99 const { contracts, web3, networkType } = useNetwork();
100 const { wallet, walletType, walletHdPath } = useWallet();
101 const { syncInvites, getInvites } = usePointCache();
102 const { pointCursor } = usePointCursor();
103 const point = need.point(pointCursor);
104 const { getHasReceived, syncHasReceivedForEmail, sendMail } = useMailer();
106 const { availableInvites } = getInvites(point);
107 const maxInvitesToSend = availableInvites.matchWith({
108 Nothing: () => 0,
109 Just: p => p.value,
110 });
112 // manage the array of input configs
113 const [
114 inputConfigs,
115 { append: appendInput, removeAt: removeInputAt },
116 ] = useArray(
117 [buildInputConfig({ label: 'Email Address', autoFocus: true })],
118 buildInputConfig
119 );
121 // manage per-input state
122 const [hovered, setHovered] = useSetState();
123 const [invites, addInvite, clearInvites] = useSetState();
124 const [receipts, addReceipt, clearReceipts] = useSetState();
125 const [errors, addError, clearErrors] = useSetState();
127 // manage general state that affects the whole form
128 const [status, setStatus] = useState(STATUS.INPUT);
129 const [needFunds, setNeedFunds] = useState(null);
130 const [generalError, setGeneralError] = useState(null);
132 // derive booleans from status
133 const canInput = status === STATUS.INPUT;
134 const canSend = status === STATUS.CAN_SEND;
135 const isGenerating = status === STATUS.GENERATING;
136 const isSending = status === STATUS.SENDING;
137 const isFailed = status === STATUS.FAILURE;
138 const isDone = status === STATUS.SUCCESS;
140 // add disabled, error info to input configs
141 const dynamicConfigs = useMemo(
142 () =>
143 inputConfigs.map(config => {
144 config.disabled = !canInput;
145 const hasReceivedError = getHasReceived(config.name).matchWith({
146 Nothing: () => null, // loading
147 Just: p => p.value && HAS_RECEIVED_TEXT,
148 });
149 config.error = hasReceivedError || errors[config.name];
150 return config;
151 }),
152 [inputConfigs, errors, canInput, getHasReceived]
153 );
155 // construct the state of the set of inputs we're rendering below
156 const { inputs, pass } = useForm(dynamicConfigs);
157 // did all of the inputs pass inspection (and there are no general errors)?
158 const allPass = pass && !generalError;
159 // the form is submittable iff passing and input is allowed
160 const canGenerate = allPass && canInput;
161 // additional inputs can be added iff input is allowed and we have enough
162 // invites to send
163 const canAddInvite = canInput && inputConfigs.length < maxInvitesToSend;
165 // progress is [0, .length] of invites or receipts, as we're generating them
166 const progress = isGenerating
167 ? Object.keys(invites).length
168 : isSending
169 ? Object.keys(receipts).length
170 : null;
171 const visualProgress = progress === null ? '-' : `${progress + 1}`;
173 // build a builder for the accessory to the input, depending on status
174 const accessoryFor = (() => {
175 if (isGenerating || canSend) return buildAccessoryFor(invites, errors);
176 if (isSending) return buildAccessoryFor(receipts, errors);
177 if (isFailed) return buildAccessoryFor({}, errors);
178 return () => null;
179 })();
181 const generateInvites = useCallback(async () => {
182 const _contracts = contracts.getOrElse(null);
183 const _web3 = web3.getOrElse(null);
184 const _wallet = wallet.getOrElse(null);
185 if (!_contracts || !_web3 || !_wallet) {
186 // not using need because we want a custom error
187 throw new Error('Internal Error: Missing Contracts/Web3/Wallet');
188 }
190 //TODO want to do this on-input, but that gets weird. see #188
191 let errorCount = 0;
192 await Promise.all(
193 inputs.map(async input => {
194 const email = input.data;
195 const hasReceived = getHasReceived(email).matchWith({
196 Nothing: () => false, // loading
197 Just: p => p.value,
198 });
199 if (hasReceived) {
200 errorCount++;
201 addError({
202 [input.name]: `${email} has already received an invite.`,
203 });
204 }
205 })
206 );
207 if (errorCount > 0) {
208 throw new Error(`Some of these already have a point!`);
209 }
211 const nonce = await _web3.eth.getTransactionCount(_wallet.address);
212 const chainId = await _web3.eth.net.getId();
213 const planets = await azimuth.delegatedSending.getPlanetsToSend(
214 _contracts,
215 point,
216 inputs.length
217 );
219 // account for the race condition where invites got used up while we were
220 // composing our target list
221 if (planets.length < inputs.length) {
222 // resync invites to the cache, since they're out of date
223 syncInvites(point);
225 throw new Error(
226 `Can currently only send ${planets.length} invites. ` +
227 `Please remove invites until you are within the limit.`
228 );
229 }
231 clearInvites();
232 // NB(shrugs) - must be processed in serial because main thread, etc
233 for (let i = 0; i < inputs.length; i++) {
234 const input = inputs[i];
235 try {
236 const { data: email, name } = inputs[i];
238 const { ticket, owner } = await wg.generateTemporaryTicketAndWallet(
239 MIN_PLANET
240 // we're always giving planets, so generate a ticket of the correct size
241 );
243 const inviteTx = azimuth.delegatedSending.sendPoint(
244 _contracts,
245 point,
246 planets[i],
247 owner.keys.address
248 );
249 const signedTx = await signTransaction({
250 wallet,
251 walletType,
252 walletHdPath,
253 networkType,
254 // TODO: ^ make a useTransactionSigner to encapsulate this logic
255 txn: Just(inviteTx),
256 gasPrice: GAS_PRICE_GWEI.toString(),
257 gasLimit: GAS_LIMIT.toString(),
258 nonce: nonce + i,
259 chainId,
260 setStx: () => {},
261 });
262 const rawTx = hexify(signedTx.serialize());
264 addInvite({ [name]: { email, ticket, signedTx, rawTx } });
265 } catch (error) {
266 console.error(error);
267 errorCount++;
268 addError({ [input.name]: `Wallet Error: ${input.email}` });
269 }
270 }
272 if (errorCount > 0) {
273 throw new Error(
274 `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(
275 errorCount,
276 'error'
277 )} while generating wallets.`
278 );
279 }
280 }, [
281 point,
282 contracts,
283 web3,
284 addInvite,
285 clearInvites,
286 syncInvites,
287 inputs,
288 networkType,
289 wallet,
290 walletType,
291 walletHdPath,
292 addError,
293 ]);
295 const sendInvites = useCallback(async () => {
296 const _web3 = web3.getOrElse(null);
297 const _wallet = wallet.getOrElse(null);
298 if (!_web3 || !_wallet) {
299 throw new Error('Internal Error: Missing Contracts/Web3/Wallet');
300 }
302 setStatus(STATUS.FUNDING);
303 const tankWasUsed = await tank.ensureFundsFor(
304 _web3,
305 point,
306 _wallet.address,
307 INVITE_COST * inputs.length,
308 inputs.map(input => invites[input.name].rawTx),
309 (address, minBalance, balance) =>
310 setNeedFunds({ address, minBalance, balance }),
311 () => setNeedFunds(false)
312 );
314 setStatus(STATUS.SENDING);
315 clearReceipts();
317 let errorCount = 0;
318 const txAndMailings = inputs.map(async input => {
319 const invite = invites[input.name];
320 try {
321 const txHash = await sendSignedTransaction(
322 _web3,
323 Just(invite.signedTx),
324 tankWasUsed,
325 () => {}
326 );
328 // TODO: waitForTransactionConfirm never rejects
329 const didConfirm = await waitForTransactionConfirm(_web3, txHash);
330 if (!didConfirm) throw new Error();
331 } catch (error) {
332 console.error(error);
333 errorCount++;
334 addError({
335 [input.name]: `Transaction Failure for ${invite.email}`,
336 });
337 return;
338 }
340 try {
341 const success = await sendMail(
342 invite.email,
343 invite.ticket,
344 invite.rawTx
345 );
346 if (!success) throw new Error('Failed to send mail');
347 } catch (error) {
348 console.error(error);
349 errorCount++;
350 //TODO make sure this actually gets displayed
351 addError({
352 [input.name]: `Mailing Failure for ${invite.email}, please send them this code manually: ${invite.ticket}`,
353 });
354 }
356 addReceipt({ [input.name]: true });
357 });
359 await Promise.all(txAndMailings);
360 // if there are any receipt errors, throw a general error
361 if (errorCount > 0) {
362 throw new Error(
363 `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(
364 errorCount,
365 'error'
366 )} while sending transactions.`
367 );
368 }
369 }, [
370 web3,
371 inputs,
372 addReceipt,
373 clearReceipts,
374 invites,
375 point,
376 wallet,
377 addError,
378 sendMail,
379 ]);
381 const onClick = useCallback(async () => {
382 setGeneralError(null);
383 try {
384 if (canGenerate) {
385 setStatus(STATUS.GENERATING);
386 await generateInvites();
387 setStatus(STATUS.CAN_SEND);
388 } else if (canSend) {
389 setStatus(STATUS.SENDING);
390 await sendInvites();
391 setStatus(STATUS.SUCCESS);
392 }
393 } catch (error) {
394 console.error(error);
395 setGeneralError(error);
396 setStatus(STATUS.FAILURE);
397 }
398 }, [canGenerate, canSend, generateInvites, sendInvites]);
400 // when inputs update, check to see if any of them are duplicates
401 useEffect(() => {
402 // compute the list of valid emails
403 const emails = inputs.map(i => i.data).filter(d => !!d);
404 if (uniq(emails).length !== emails.length) {
405 setGeneralError(new Error(`Duplicate email.`));
406 } else {
407 setGeneralError(null);
408 }
409 }, [inputs]);
411 // when we transition to done, sync invites because we just sent some
412 // and therefore know that state has changed
413 useEffect(() => {
414 if (isDone) {
415 syncInvites(point);
416 }
417 }, [isDone, syncInvites, point]);
419 return (
420 <Grid gap={3}>
421 <Grid.Item as={Grid} full>
422 <Grid.Item as={Flex} cols={[1, 11]} align="center">
423 <MiniBackButton onClick={() => pop()} />
424 </Grid.Item>
425 <Grid.Item cols={[11, 13]} justifySelf="end">
426 {/* use hidden class instead of removing component from dom */}
427 {/* in order to avoid janky reflow */}
428 <IconButton
429 onClick={() => appendInput()}
430 disabled={!canAddInvite}
431 className={cn({ hidden: isDone })}
432 solid>
433 +
434 </IconButton>
435 </Grid.Item>
436 </Grid.Item>
438 {isDone && (
439 <>
440 <Grid.Item as={Text} className="f5" full>
441 <Highlighted>{pluralize(inputs.length, 'invite')}</Highlighted>{' '}
442 {pluralize(inputs.length, 'has', 'have')} been successfully sent
443 </Grid.Item>
444 {inputs.map(input => (
445 <Grid.Item as={HelpText} key={input.name} full>
446 {invites[input.name].email}
447 </Grid.Item>
448 ))}
449 </>
450 )}
452 {!isDone && (
453 <>
454 {/* email inputs */}
455 {inputs.map((input, i) => {
456 const isFirst = i === 0;
457 return (
458 <Grid.Item
459 key={input.name}
460 as={Grid}
461 gap={3}
462 onMouseOver={() => setHovered({ [input.name]: true })}
463 onMouseLeave={() => setHovered({ [input.name]: false })}
464 full>
465 <Grid.Item
466 as={Input}
467 cols={[1, 11]}
468 {...input}
469 onValue={email => syncHasReceivedForEmail(email)}
470 // NB(shrugs): ^ this feels like a hack?
471 accessory={accessoryFor(input.name)}
472 />
473 {!isFirst &&
474 (input.focused || hovered[input.name]) &&
475 canInput && (
476 <Grid.Item
477 cols={[11, 13]}
478 justifySelf="end"
479 alignSelf="center">
480 <IconButton
481 onClick={() => removeInputAt(i)}
482 solid
483 secondary>
484 -
485 </IconButton>
486 </Grid.Item>
487 )}
488 </Grid.Item>
489 );
490 })}
492 <Grid.Item
493 full
494 as={LoadableButton}
495 disabled={!canGenerate && !canSend}
496 accessory={`${visualProgress}/${inputs.length}`}
497 onClick={onClick}
498 success={canSend}
499 solid>
500 {buttonText(status, inputs.length)}
501 </Grid.Item>
503 {needFunds && (
504 <Grid.Item full>
505 <Highlighted>
506 Your ownership address {needFunds.address} needs at least{' '}
507 {fromWei(needFunds.minBalance)} ETH and currently has{' '}
508 {fromWei(needFunds.balance)} ETH. Waiting until the account has
509 enough funds.
510 </Highlighted>
511 </Grid.Item>
512 )}
514 {generalError && (
515 <Grid.Item full>
516 <ErrorText>{generalError.message.toString()}</ErrorText>
517 </Grid.Item>
518 )}
519 </>
520 )}
521 </Grid>
522 );