@@ -1,642 +0,0 @@
1−import React, {
2− useCallback,
3− useEffect,
4− useRef,
5− useMemo,
6− useState,
7−} from 'react';
8−import cn from 'classnames';
9−import ob from 'urbit-ob';
10−import * as azimuth from 'azimuth-js';
11−import {
12− Grid,
13− Flex,
14− Input,
15− IconButton,
16− HelpText,
17− Text,
18− ErrorText,
19− AccessoryIcon,
20−} from 'indigo-react';
21−import { uniq } from 'lodash';
22−import { toWei, toBN } from 'web3-utils';
23−import { FieldArray } from 'react-final-form-arrays';
24−import { Field } from 'react-final-form';
25−
26−import { usePointCursor } from 'store/pointCursor';
27−import { useNetwork } from 'store/network';
28−import { usePointCache } from 'store/pointCache';
29−import { useWallet } from 'store/wallet';
30−
31−// for transaction generation and signing
32−import {
33− signTransaction,
34− sendSignedTransaction,
35− waitForTransactionConfirm,
36− hexify,
37−} from 'lib/txn';
38−import * as tank from 'lib/tank';
39−import { MIN_PLANET, GAS_LIMITS } from 'lib/constants';
40−import * as need from 'lib/need';
41−import * as wg from 'lib/walletgen';
42−import useSetState from 'lib/useSetState';
43−import pluralize from 'lib/pluralize';
44−import useMailer from 'lib/useMailer';
45−
46−import ProgressButton from 'components/ProgressButton';
47−import Highlighted from 'components/Highlighted';
48−import { ForwardButton } from 'components/Buttons';
49−import NeedFundsNotice from 'components/NeedFundsNotice';
50−
51−import BridgeForm from 'form/BridgeForm';
52−import { EmailInput } from 'form/Inputs';
53−import {
54− buildEmailValidator,
55− composeValidator,
56− hasErrors,
57− buildArrayValidator,
58−} from 'form/validators';
59−import { FORM_ERROR } from 'final-form';
60−import SubmitButton from 'form/SubmitButton';
61−import FormError from 'form/FormError';
62−import { WARNING, onlyHasWarning } from 'form/helpers';
63−import useGasPrice from 'lib/useGasPrice';
64−import timeout from 'lib/timeout';
65−
66−const INITIAL_VALUES = { emails: [''] };
67−
68−const GAS_LIMIT = GAS_LIMITS.GIFT_PLANET;
69−const HAS_RECEIVED_TEXT = 'This email has already received an invite: ';
70−
71−const STATUS = {
72− INPUT: 'INPUT',
73− GENERATING: 'GENERATING',
74− CAN_SEND: 'CAN_SEND',
75− FUNDING: 'FUNDING',
76− SENDING: 'SENDING',
77− SUCCESS: 'SUCCESS',
78− FAILURE: 'FAILURE',
79−};
80−
81−const nameForEmailField = i => `emails[${i}]`;
82−
83−const buttonText = (status, count) => {
84− switch (status) {
85− case STATUS.INPUT:
86− return `Generate ${pluralize(count, 'Invite')}`;
87− case STATUS.GENERATING:
88− return `Generating ${pluralize(count, 'Invite')}...`;
89− case STATUS.CAN_SEND:
90− return `Send ${pluralize(count, 'Invite')}`;
91− case STATUS.FUNDING:
92− return `Waiting on Funds...`;
93− case STATUS.SENDING:
94− return `Sending ${pluralize(count, 'Invite')}...`;
95− case STATUS.FAILURE:
96− default:
97− return 'Error';
98− }
99−};
100−
101−const buildAccessoryFor = (dones, errors) => name => {
102− if (dones[name]) return <AccessoryIcon.Success />;
103− if (errors[name]) return <AccessoryIcon.Failure />;
104− return <AccessoryIcon.Pending />;
105−};
106−
107−export default function InviteEmail() {
108− const { contracts, web3, networkType } = useNetwork();
109− const { wallet, walletType, walletHdPath } = useWallet();
110− const { syncInvites, getInvites } = usePointCache();
111− const { pointCursor } = usePointCursor();
112− const point = need.point(pointCursor);
113− const { getHasReceived, sendMail } = useMailer();
114− const { gasPrice } = useGasPrice();
115−
116− const cachedEmails = useRef({});
117−
118− const { availableInvites } = getInvites(point);
119− const maxInvitesToSend = availableInvites.matchWith({
120− Nothing: () => 0,
121− Just: p => p.value,
122− });
123−
124− // manage per-input state
125− const [hovered, setHovered] = useSetState();
126− const [invites, addInvite, clearInvites] = useSetState();
127− const [receipts, addReceipt, clearReceipts] = useSetState();
128− const [errors, addError] = useSetState();
129−
130− // manage general state that affects the whole form
131− const [message, setMessage] = useState('');
132− const [status, setStatus] = useState(STATUS.INPUT);
133− const [needFunds, setNeedFunds] = useState(null);
134− const [generalError, setGeneralError] = useState(null);
135−
136− // derive booleans from status
137− const canInput = status === STATUS.INPUT;
138− const isGenerating = status === STATUS.GENERATING;
139− const canSend = status === STATUS.CAN_SEND;
140− const isFunding = status === STATUS.FUNDING;
141− const isSending = status === STATUS.SENDING;
142− const isFailed = status === STATUS.FAILURE;
143− const isDone = status === STATUS.SUCCESS;
144−
145− const validateHasReceived = useCallback(
146− async email => {
147− const hasReceived = await getHasReceived(email);
148− if (hasReceived) {
149− return HAS_RECEIVED_TEXT + email;
150− }
151− },
152− [getHasReceived]
153− );
154−
155− const validateForm = useCallback((values, errors) => {
156− if (hasErrors(errors)) {
157− return errors;
158− }
159−
160− // check for email uniqenesss
161− const emails = values.emails.filter(d => !!d);
162− if (uniq(emails).length !== emails.length) {
163− return { [FORM_ERROR]: 'Duplicate email.' };
164− }
165− }, []);
166−
167− const validate = useMemo(
168− () =>
169− composeValidator(
170− {
171− emails: buildArrayValidator(buildEmailValidator(validateHasReceived)),
172− },
173− validateForm
174− ),
175− [validateForm, validateHasReceived]
176− );
177−
178− // progress is [0, .length] of invites or receipts, as we're generating them
179− const progress = isGenerating
180− ? Object.keys(invites).length
181− : isSending
182− ? Object.keys(receipts).length
183− : null;
184− const percentProgress =
185− progress !== null
186− ? progress / Object.keys(cachedEmails.current).length
187− : null;
188− const visualProgress = progress === null ? '-' : `${progress + 1}`;
189−
190− // build a builder for the accessory to the input, depending on status
191− const accessoryFor = (() => {
192− if (isGenerating || canSend) return buildAccessoryFor(invites, errors);
193− if (isSending) return buildAccessoryFor(receipts, errors);
194− if (isFailed) return buildAccessoryFor({}, errors);
195− return () => null;
196− })();
197−
198− const generateInvites = useCallback(
199− async values => {
200− const _contracts = contracts.getOrElse(null);
201− const _web3 = web3.getOrElse(null);
202− const _wallet = wallet.getOrElse(null);
203− if (!_contracts || !_web3 || !_wallet) {
204− // not using need because we want a custom error
205− throw new Error('Internal Error: Missing Contracts/Web3/Wallet');
206− }
207−
208− const nonce = await _web3.eth.getTransactionCount(_wallet.address);
209− const chainId = await _web3.eth.net.getId();
210− const planets = await azimuth.delegatedSending.getPlanetsToSend(
211− _contracts,
212− point,
213− values.emails.length
214− );
215−
216− // account for the race condition where invites got used up while we were
217− // composing our target list
218− if (planets.length < values.emails.length) {
219− // resync invites to the cache, since they're out of date
220− syncInvites(point);
221−
222− return {
223− [FORM_ERROR]:
224− `Can currently only send ${planets.length} invites. ` +
225− `Please remove invites until you are within the limit.`,
226− };
227− }
228−
229− clearInvites();
230− // NB(shrugs) - must be processed in serial because main thread, etc
231− let errorCount = 0;
232− for (let i = 0; i < values.emails.length; i++) {
233− const name = nameForEmailField(i);
234− try {
235− const email = values.emails[i];
236− const planet = planets[i];
237−
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− );
242−
243− const inviteTx = azimuth.delegatedSending.sendPoint(
244− _contracts,
245− point,
246− planet,
247− owner.keys.address
248− );
249−
250− const signedTx = await signTransaction({
251− wallet: _wallet,
252− walletType,
253− walletHdPath,
254− networkType,
255− chainId,
256− nonce: nonce + i,
257− // TODO: ^ make a useTransactionSigner to encapsulate this logic
258− txn: inviteTx,
259− gasPrice: gasPrice.toFixed(), // expects string gwei
260− gasLimit: GAS_LIMIT.toFixed(),
261− });
262−
263− const rawTx = hexify(signedTx.serialize());
264−
265− addInvite({ [name]: { email, ticket, signedTx, rawTx } });
266− } catch (error) {
267− console.error(error);
268− errorCount++;
269− addError({ [name]: 'Error generating invite.' });
270− }
271− }
272−
273− if (errorCount > 0) {
274− return {
275− [WARNING]: `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(
276− errorCount,
277− 'error'
278− )} while generating wallets. You can still send the invites that generated correctly.`,
279− };
280− }
281− },
282− [
283− contracts,
284− web3,
285− wallet,
286− point,
287− clearInvites,
288− syncInvites,
289− walletType,
290− walletHdPath,
291− networkType,
292− gasPrice,
293− addInvite,
294− addError,
295− ]
296− );
297−
298− const sendInvites = useCallback(async () => {
299− // compute all of the names of the fields
300− const allFieldNames = Object.keys(cachedEmails.current);
301− // only emails we're sending are the valid ones with invites
302− const names = allFieldNames.filter(name => !!invites[name]);
303− const emails = allFieldNames.map(name => cachedEmails.current[name]);
304−
305− const _web3 = web3.getOrElse(null);
306− const _wallet = wallet.getOrElse(null);
307− if (!_web3 || !_wallet) {
308− throw new Error('Internal Error: Missing Contracts/Web3/Wallet');
309− }
310−
311− setStatus(STATUS.FUNDING);
312− const totalCost = toBN(GAS_LIMIT)
313− .mul(toBN(gasPrice))
314− .mul(toBN(emails.length));
315− const tankWasUsed = await tank.ensureFundsFor(
316− _web3,
317− point,
318− _wallet.address,
319− walletType,
320− toWei(totalCost.toString(), 'gwei'),
321− names.map(name => invites[name].rawTx),
322− (address, minBalance, balance) =>
323− setNeedFunds({ address, minBalance, balance }),
324− () => setNeedFunds(undefined)
325− );
326−
327− setStatus(STATUS.SENDING);
328− clearReceipts();
329−
330− let unsentInvites = [];
331− let orphanedInvites = [];
332− const txAndMailings = names.map(async name => {
333− const invite = invites[name];
334− try {
335− const txHash = await sendSignedTransaction(
336− _web3,
337− invite.signedTx,
338− tankWasUsed
339− );
340−
341− await waitForTransactionConfirm(_web3, txHash);
342− } catch (error) {
343− console.error(error);
344− unsentInvites.push(invite);
345− return;
346− }
347−
348− try {
349− await sendMail(
350− invite.email,
351− invite.ticket,
352− ob.patp(point),
353− message,
354− invite.rawTx
355− );
356− } catch (error) {
357− console.error(error);
358− orphanedInvites.push(invite);
359− }
360−
361− addReceipt({ [name]: true });
362− });
363−
364− await Promise.all(txAndMailings);
365− // if there are any receipt errors, throw a general error
366− let errorString = '';
367− if (orphanedInvites.length > 0) {
368− errorString =
369− 'Not all invite emails were sent. ' +
370− 'Please send the following invite codes manually: ' +
371− orphanedInvites.map(i => `${i.email}: ${i.ticket}`).join(', ') +
372− '. ';
373− }
374− if (unsentInvites.length > 0) {
375− errorString =
376− errorString +
377− 'Not all invites were created. ' +
378− 'Did not send invites for: ' +
379− unsentInvites.map(i => i.email).join(', ') +
380− '.';
381− }
382− if (errorString !== '') {
383− throw new Error(errorString);
384− }
385− }, [
386− web3,
387− wallet,
388− walletType,
389− gasPrice,
390− point,
391− clearReceipts,
392− invites,
393− addReceipt,
394− sendMail,
395− message,
396− ]);
397−
398− const onSubmit = useCallback(
399− async values => {
400− setMessage(values.message);
401− cachedEmails.current = values.emails.reduce((memo, email, i) => {
402− memo[nameForEmailField(i)] = email;
403− return memo;
404− }, {});
405− setStatus(STATUS.GENERATING);
406− const errors = await generateInvites(values);
407− if (hasErrors(errors)) {
408− if (onlyHasWarning(errors)) {
409− setStatus(STATUS.CAN_SEND);
410− }
411−
412− return errors;
413− }
414−
415− await timeout(500); // wait for progress animation to complete.
416−
417− setStatus(STATUS.CAN_SEND);
418− },
419− [generateInvites]
420− );
421−
422− const doSend = useCallback(async () => {
423− setGeneralError(null);
424− try {
425− setStatus(STATUS.SENDING);
426− await sendInvites();
427− setStatus(STATUS.SUCCESS);
428− } catch (error) {
429− console.error(error);
430− setGeneralError(error.message);
431− setStatus(STATUS.FAILURE);
432− }
433− }, [sendInvites]);
434−
435− // when we transition to done, sync invites because we just sent some
436− // and therefore know that state has changed
437− useEffect(() => {
438− if (isDone) {
439− syncInvites(point);
440− }
441− }, [isDone, syncInvites, point]);
442−
443− const renderButton = ({ handleSubmit, fields }) => {
444− if (canInput) {
445− return (
446− <Grid.Item
447− full
448− as={SubmitButton}
449− handleSubmit={handleSubmit}
450− accessory={`${visualProgress}/${fields.length}`}>
451− {buttonText(status, fields.length)}
452− </Grid.Item>
453− );
454− }
455−
456− if (isGenerating) {
457− return (
458− <Grid.Item
459− full
460− as={ProgressButton}
461− solid
462− disabled
463− className="mt4"
464− accessory={`${visualProgress}/${fields.length}`}
465− progress={percentProgress}
466− color="black">
467− {buttonText(status, fields.length)}
468− </Grid.Item>
469− );
470− }
471−
472− if (canSend) {
473− return (
474− <Grid.Item
475− full
476− as={ForwardButton}
477− className="mt4"
478− solid
479− success
480− onClick={doSend}>
481− {buttonText(status, fields.length)}
482− </Grid.Item>
483− );
484− }
485−
486− if (isFunding) {
487− return (
488− <Grid.Item
489− full
490− as={ForwardButton}
491− className="mt4"
492− solid
493− success
494− disabled
495− accessory={`${visualProgress}/${fields.length}`}>
496− {buttonText(status, fields.length)}
497− </Grid.Item>
498− );
499− }
500−
501− if (isSending) {
502− return (
503− <Grid.Item
504− full
505− as={ProgressButton}
506− className="mt4"
507− solid
508− success
509− disabled
510− accessory={`${visualProgress}/${fields.length}`}
511− progress={percentProgress}
512− color={isGenerating ? 'black' : 'green4'}>
513− {buttonText(status, fields.length)}
514− </Grid.Item>
515− );
516− }
517−
518− return null;
519− };
520−
521− return (
522− <Grid gap={3}>
523− <BridgeForm
524− validate={validate}
525− onSubmit={onSubmit}
526− initialValues={INITIAL_VALUES}>
527− {({ handleSubmit }) => (
528− <FieldArray name="emails">
529− {({ fields }) => {
530− const sentInviteNames = Object.keys(receipts);
531− return (
532− <>
533− <Grid.Item full as={Flex} justify="end">
534− {/* use hidden class instead of removing component from dom */}
535− {/* in order to avoid janky reflow */}
536− <IconButton
537− onClick={() => fields.push('')}
538− disabled={!canInput || fields.length >= maxInvitesToSend}
539− className={cn({ hidden: isDone })}
540− solid>
541− +
542− </IconButton>
543− </Grid.Item>
544−
545− {isDone ? (
546− <>
547− <Grid.Item as={Text} className="f5" full>
548− <Highlighted>
549− {pluralize(sentInviteNames.length, 'invite')}
550− </Highlighted>{' '}
551− {pluralize(sentInviteNames.length, 'has', 'have')} been
552− successfully sent
553− </Grid.Item>
554−
555− {sentInviteNames.map(name => (
556− <Grid.Item as={HelpText} key={name} full>
557− <Field name={name}>
558− {({ input: { value } }) => value}
559− </Field>
560− </Grid.Item>
561− ))}
562− </>
563− ) : (
564− <>
565− {fields.map((name, i) => {
566− const isFirst = i === 0;
567− return (
568− <Grid.Item
569− key={name}
570− full
571− as={Grid}
572− gap={3}
573− onMouseOver={() => setHovered({ [name]: true })}
574− onMouseLeave={() => setHovered({ [name]: false })}>
575− <Grid.Item
576− cols={[1, 11]}
577− as={EmailInput}
578− name={name}
579− label={isFirst ? 'Email Address' : undefined}
580− accessory={accessoryFor(name)}
581− />
582− <Field name={name}>
583− {({ meta: { active } }) => {
584− return (
585− <>
586− {!isFirst &&
587− (active || hovered[name]) &&
588− canInput && (
589− <Grid.Item
590− cols={[11, 13]}
591− justifySelf="end"
592− alignSelf="center">
593− <IconButton
594− onClick={() => fields.remove(i)}
595− solid
596− secondary>
597− -
598− </IconButton>
599− </Grid.Item>
600− )}
601− </>
602− );
603− }}
604− </Field>
605− </Grid.Item>
606− );
607− })}
608−
609− <Grid.Item
610− full
611− as={Input}
612− type="text"
613− name="message"
614− label="Message (optional)"
615− placeholder="Welcome aboard!"
616− value={message}
617− />
618−
619− {renderButton({ handleSubmit, fields })}
620−
621− {needFunds && (
622− <Grid.Item full as={NeedFundsNotice} {...needFunds} />
623− )}
624−
625− <Grid.Item full as={FormError} />
626−
627− {generalError && (
628− <Grid.Item full as={ErrorText}>
629− {generalError}
630− </Grid.Item>
631− )}
632− </>
633− )}
634− </>
635− );
636− }}
637− </FieldArray>
638− )}
639− </BridgeForm>
640− </Grid>
641− );
642−}