@@ -56,6 +56,7 @@ import {
5656import { FORM_ERROR } from 'final-form';
5757import SubmitButton from 'form/SubmitButton';
5858import FormError from 'form/FormError';
59+import { WARNING, onlyHasWarning } from 'form/helpers';
5960
6061const INITIAL_VALUES = { emails: [''] };
6162
@@ -72,6 +73,8 @@ const STATUS = {
7273 FAILURE: 'FAILURE',
7374};
7475
76+const nameForEmailField = i => `emails[${i}]`;
77+
7578const buttonText = (status, count) => {
7679 switch (status) {
7780 case STATUS.INPUT:
@@ -105,7 +108,7 @@ export default function InviteEmail() {
105108 const { getHasReceived, sendMail } = useMailer();
106109 const { gasPrice } = useSuggestedGasPrice(networkType);
107110
108− const cachedEmails = useRef([]);
111+ const cachedEmails = useRef({});
109112
110113 const { availableInvites } = getInvites(point);
111114 const maxInvitesToSend = availableInvites.matchWith({
@@ -158,9 +161,7 @@ export default function InviteEmail() {
158161 () =>
159162 composeValidator(
160163 {
161− emails: buildArrayValidator(
162− buildEmailValidator([validateHasReceived])
163− ),
164+ emails: buildArrayValidator(buildEmailValidator(validateHasReceived)),
164165 },
165166 validateForm
166167 ),
@@ -218,6 +219,7 @@ export default function InviteEmail() {
218219 // NB(shrugs) - must be processed in serial because main thread, etc
219220 let errorCount = 0;
220221 for (let i = 0; i < values.emails.length; i++) {
222+ const name = nameForEmailField(i);
221223 try {
222224 const email = values.emails[i];
223225 const planet = planets[i];
@@ -249,20 +251,20 @@ export default function InviteEmail() {
249251
250252 const rawTx = hexify(signedTx.serialize());
251253
252− addInvite({ [email]: { email, ticket, signedTx, rawTx } });
254+ addInvite({ [name]: { email, ticket, signedTx, rawTx } });
253255 } catch (error) {
254256 console.error(error);
255257 errorCount++;
258+ addError({ [name]: 'Error generating invite.' });
256259 }
257260 }
258261
259262 if (errorCount > 0) {
260263 return {
261− [FORM_ERROR]: `There ${pluralize(
264+ [WARNING]: `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(
262265 errorCount,
263− 'was',
264− 'were'
265− )} ${pluralize(errorCount, 'error')} while generating wallets.`,
266+ 'error'
267+ )} while generating wallets. You can still send the invites that generated correctly.`,
266268 };
267269 }
268270 },
@@ -278,11 +280,17 @@ export default function InviteEmail() {
278280 networkType,
279281 gasPrice,
280282 addInvite,
283+ addError,
281284 ]
282285 );
283286
284287 const sendInvites = useCallback(async () => {
285− const emails = cachedEmails.current;
288+ // compute all of the names of the fields
289+ const allFieldNames = Object.keys(cachedEmails.current);
290+ // only emails we're sending are the valid ones with invites
291+ const names = allFieldNames.filter(name => !!invites[name]);
292+ const emails = allFieldNames.map(name => cachedEmails.current[name]);
293+
286294 const _web3 = web3.getOrElse(null);
287295 const _wallet = wallet.getOrElse(null);
288296 if (!_web3 || !_wallet) {
@@ -295,7 +303,7 @@ export default function InviteEmail() {
295303 point,
296304 _wallet.address,
297305 toWei((gasPrice * GAS_LIMIT * emails.length).toString(), 'gwei'),
298− emails.map(email => invites[email].rawTx),
306+ names.map(name => invites[name].rawTx),
299307 (address, minBalance, balance) =>
300308 setNeedFunds({ address, minBalance, balance }),
301309 () => setNeedFunds(undefined)
@@ -306,8 +314,8 @@ export default function InviteEmail() {
306314
307315 let unsentInvites = [];
308316 let orphanedInvites = [];
309− const txAndMailings = emails.map(async email => {
310− const invite = invites[email];
317+ const txAndMailings = names.map(async name => {
318+ const invite = invites[name];
311319 try {
312320 const txHash = await sendSignedTransaction(
313321 _web3,
@@ -334,7 +342,7 @@ export default function InviteEmail() {
334342 orphanedInvites.push(invite);
335343 }
336344
337− addReceipt({ [email]: true });
345+ addReceipt({ [name]: true });
338346 });
339347
340348 await Promise.all(txAndMailings);
@@ -363,20 +371,28 @@ export default function InviteEmail() {
363371 wallet,
364372 point,
365373 gasPrice,
366− clearReceipts,
367374 invites,
375+ clearReceipts,
368376 addReceipt,
369377 sendMail,
370378 ]);
371379
372380 const onSubmit = useCallback(
373381 async values => {
374− cachedEmails.current = values.emails;
382+ cachedEmails.current = values.emails.reduce((memo, email, i) => {
383+ memo[nameForEmailField(i)] = email;
384+ return memo;
385+ }, {});
375386 setStatus(STATUS.GENERATING);
376387 const errors = await generateInvites(values);
377− if (errors) {
388+ if (hasErrors(errors)) {
389+ if (onlyHasWarning(errors)) {
390+ setStatus(STATUS.CAN_SEND);
391+ }
392+
378393 return errors;
379394 }
395+
380396 setStatus(STATUS.CAN_SEND);
381397 },
382398 [generateInvites]
@@ -409,130 +425,133 @@ export default function InviteEmail() {
409425 validate={validate}
410426 onSubmit={onSubmit}
411427 initialValues={INITIAL_VALUES}>
412− {({ handleSubmit, valid, values }) => (
428+ {({ handleSubmit }) => (
413429 <FieldArray name="emails">
414− {({ fields }) => (
415− <>
416− <Grid.Item full as={Flex} justify="end">
417− {/* use hidden class instead of removing component from dom */}
418− {/* in order to avoid janky reflow */}
419− <IconButton
420− onClick={() => fields.push('')}
421− disabled={!canInput || fields.length >= maxInvitesToSend}
422− className={cn({ hidden: isDone })}
423− solid>
424− +
425− </IconButton>
426− </Grid.Item>
427−
428− {isDone ? (
429− <>
430− <Grid.Item as={Text} className="f5" full>
431− <Highlighted>
432− {pluralize(fields.length, 'invite')}
433− </Highlighted>{' '}
434− {pluralize(fields.length, 'has', 'have')} been
435− successfully sent
436− </Grid.Item>
437−
438− {fields.map(name => (
439− <Grid.Item as={HelpText} key={name} full>
440− <Field name={name}>
441− {({ input: { value } }) => value}
442− </Field>
430+ {({ fields }) => {
431+ const sentInviteNames = Object.keys(receipts);
432+ return (
433+ <>
434+ <Grid.Item full as={Flex} justify="end">
435+ {/* use hidden class instead of removing component from dom */}
436+ {/* in order to avoid janky reflow */}
437+ <IconButton
438+ onClick={() => fields.push('')}
439+ disabled={!canInput || fields.length >= maxInvitesToSend}
440+ className={cn({ hidden: isDone })}
441+ solid>
442+ +
443+ </IconButton>
444+ </Grid.Item>
445+
446+ {isDone ? (
447+ <>
448+ <Grid.Item as={Text} className="f5" full>
449+ <Highlighted>
450+ {pluralize(sentInviteNames.length, 'invite')}
451+ </Highlighted>{' '}
452+ {pluralize(sentInviteNames.length, 'has', 'have')} been
453+ successfully sent
443454 </Grid.Item>
444− ))}
445− </>
446− ) : (
447− <>
448− {fields.map((name, i) => {
449− const isFirst = i === 0;
450− return (
451− <Grid.Item
452− key={name}
453− full
454− as={Grid}
455− gap={3}
456− onMouseOver={() => setHovered({ [name]: true })}
457− onMouseLeave={() => setHovered({ [name]: false })}>
458− <Grid.Item
459− cols={[1, 11]}
460− as={EmailInput}
461− name={name}
462− label={isFirst ? 'Email Address' : undefined}
463− accessory={accessoryFor(name)}
464− />
455+
456+ {sentInviteNames.map(name => (
457+ <Grid.Item as={HelpText} key={name} full>
465458 <Field name={name}>
466− {({ meta: { active } }) => {
467− return (
468− <>
469− {!isFirst &&
470− (active || hovered[name]) &&
471− canInput && (
472− <Grid.Item
473− cols={[11, 13]}
474− justifySelf="end"
475− alignSelf="center">
476− <IconButton
477− onClick={() => fields.remove(i)}
478− solid
479− secondary>
480− -
481− </IconButton>
482− </Grid.Item>
483− )}
484− </>
485− );
486− }}
459+ {({ input: { value } }) => value}
487460 </Field>
488461 </Grid.Item>
489− );
490− })}
491−
492− {canInput ? (
493− <Grid.Item
494− full
495− as={SubmitButton}
496− handleSubmit={handleSubmit}
497− accessory={`${visualProgress}/${fields.length}`}>
498− {buttonText(status, fields.length)}
499− </Grid.Item>
500− ) : (
501− <Grid.Item
502− full
503− as={LoadableButton}
504− className="mt4"
505− disabled={!canSend}
506− accessory={`${visualProgress}/${fields.length}`}
507− onClick={doSend}
508− success={canSend}
509− solid>
510− {buttonText(status, fields.length)}
511− </Grid.Item>
512− )}
513−
514− {needFunds && (
515− <Grid.Item full>
516− <Highlighted warning>
517− Your ownership address {needFunds.address} needs at
518− least {fromWei(needFunds.minBalance)} ETH and
519− currently has {fromWei(needFunds.balance)} ETH.
520− Waiting until the account has enough funds.
521− </Highlighted>
522− </Grid.Item>
523− )}
462+ ))}
463+ </>
464+ ) : (
465+ <>
466+ {fields.map((name, i) => {
467+ const isFirst = i === 0;
468+ return (
469+ <Grid.Item
470+ key={name}
471+ full
472+ as={Grid}
473+ gap={3}
474+ onMouseOver={() => setHovered({ [name]: true })}
475+ onMouseLeave={() => setHovered({ [name]: false })}>
476+ <Grid.Item
477+ cols={[1, 11]}
478+ as={EmailInput}
479+ name={name}
480+ label={isFirst ? 'Email Address' : undefined}
481+ accessory={accessoryFor(name)}
482+ />
483+ <Field name={name}>
484+ {({ meta: { active } }) => {
485+ return (
486+ <>
487+ {!isFirst &&
488+ (active || hovered[name]) &&
489+ canInput && (
490+ <Grid.Item
491+ cols={[11, 13]}
492+ justifySelf="end"
493+ alignSelf="center">
494+ <IconButton
495+ onClick={() => fields.remove(i)}
496+ solid
497+ secondary>
498+ -
499+ </IconButton>
500+ </Grid.Item>
501+ )}
502+ </>
503+ );
504+ }}
505+ </Field>
506+ </Grid.Item>
507+ );
508+ })}
509+
510+ {canInput ? (
511+ <Grid.Item
512+ full
513+ as={SubmitButton}
514+ handleSubmit={handleSubmit}
515+ accessory={`${visualProgress}/${fields.length}`}>
516+ {buttonText(status, fields.length)}
517+ </Grid.Item>
518+ ) : (
519+ <Grid.Item
520+ full
521+ as={LoadableButton}
522+ className="mt4"
523+ disabled={!canSend}
524+ accessory={`${visualProgress}/${fields.length}`}
525+ onClick={doSend}
526+ success={canSend}
527+ solid>
528+ {buttonText(status, fields.length)}
529+ </Grid.Item>
530+ )}
531+
532+ {needFunds && (
533+ <Grid.Item full>
534+ <Highlighted warning>
535+ Your ownership address {needFunds.address} needs at
536+ least {fromWei(needFunds.minBalance)} ETH and
537+ currently has {fromWei(needFunds.balance)} ETH.
538+ Waiting until the account has enough funds.
539+ </Highlighted>
540+ </Grid.Item>
541+ )}
524542
525− <Grid.Item full as={FormError} />
543+ <Grid.Item full as={FormError} />
526544
527− {generalError && (
528− <Grid.Item full as={ErrorText}>
529− {generalError}
530− </Grid.Item>
531− )}
532− </>
533− )}
534− </>
535− )}
545+ {generalError && (
546+ <Grid.Item full as={ErrorText}>
547+ {generalError}
548+ </Grid.Item>
549+ )}
550+ </>
551+ )}
552+ </>
553+ );
554+ }}
536555 </FieldArray>
537556 )}
538557 </BridgeForm>