@@ -57,6 +57,8 @@ import SubmitButton from 'form/SubmitButton';
5757import FormError from 'form/FormError';
5858import { WARNING, onlyHasWarning } from 'form/helpers';
5959import useGasPrice from 'lib/useGasPrice';
60+import timeout from 'lib/timeout';
61+import { ForwardButton } from 'components/Buttons';
6062
6163const INITIAL_VALUES = { emails: [''] };
6264
@@ -129,8 +131,8 @@ export default function InviteEmail() {
129131
130132 // derive booleans from status
131133 const canInput = status === STATUS.INPUT;
132− const canSend = status === STATUS.CAN_SEND;
133134 const isGenerating = status === STATUS.GENERATING;
135+ const canSend = status === STATUS.CAN_SEND;
134136 const isSending = status === STATUS.SENDING;
135137 const isFailed = status === STATUS.FAILURE;
136138 const isDone = status === STATUS.SUCCESS;
@@ -174,6 +176,10 @@ export default function InviteEmail() {
174176 : isSending
175177 ? Object.keys(receipts).length
176178 : null;
179+ const percentProgress =
180+ progress !== null
181+ ? progress / Object.keys(cachedEmails.current).length
182+ : null;
177183 const visualProgress = progress === null ? '-' : `${progress + 1}`;
178184
179185 // build a builder for the accessory to the input, depending on status
@@ -245,8 +251,8 @@ export default function InviteEmail() {
245251 nonce: nonce + i,
246252 // TODO: ^ make a useTransactionSigner to encapsulate this logic
247253 txn: inviteTx,
248− gasPrice: gasPrice.toString(), // expects string gwei
249− gasLimit: GAS_LIMIT.toString(),
254+ gasPrice: gasPrice.toFixed(), // expects string gwei
255+ gasLimit: GAS_LIMIT.toFixed(),
250256 });
251257
252258 const rawTx = hexify(signedTx.serialize());
@@ -302,7 +308,7 @@ export default function InviteEmail() {
302308 _web3,
303309 point,
304310 _wallet.address,
305− toWei((gasPrice * GAS_LIMIT * emails.length).toString(), 'gwei'),
311+ toWei((gasPrice * GAS_LIMIT * emails.length).toFixed(), 'gwei'),
306312 names.map(name => invites[name].rawTx),
307313 (address, minBalance, balance) =>
308314 setNeedFunds({ address, minBalance, balance }),
@@ -393,6 +399,8 @@ export default function InviteEmail() {
393399 return errors;
394400 }
395401
402+ await timeout(500); // wait for progress animation to complete.
403+
396404 setStatus(STATUS.CAN_SEND);
397405 },
398406 [generateInvites]
@@ -419,6 +427,70 @@ export default function InviteEmail() {
419427 }
420428 }, [isDone, syncInvites, point]);
421429
430+ const renderButton = ({ handleSubmit, fields }) => {
431+ if (canInput) {
432+ return (
433+ <Grid.Item
434+ full
435+ as={SubmitButton}
436+ handleSubmit={handleSubmit}
437+ accessory={`${visualProgress}/${fields.length}`}>
438+ {buttonText(status, fields.length)}
439+ </Grid.Item>
440+ );
441+ }
442+
443+ if (isGenerating) {
444+ return (
445+ <Grid.Item
446+ full
447+ as={ProgressButton}
448+ solid
449+ disabled
450+ className="mt4"
451+ accessory={`${visualProgress}/${fields.length}`}
452+ progress={percentProgress}
453+ color="black">
454+ {buttonText(status, fields.length)}
455+ </Grid.Item>
456+ );
457+ }
458+
459+ if (canSend) {
460+ return (
461+ <Grid.Item
462+ full
463+ as={ForwardButton}
464+ className="mt4"
465+ solid
466+ success
467+ accessory={`${visualProgress}/${fields.length}`}
468+ onClick={doSend}>
469+ {buttonText(status, fields.length)}
470+ </Grid.Item>
471+ );
472+ }
473+
474+ if (isSending) {
475+ return (
476+ <Grid.Item
477+ full
478+ as={ProgressButton}
479+ className="mt4"
480+ solid
481+ success
482+ disabled
483+ accessory={`${visualProgress}/${fields.length}`}
484+ progress={percentProgress}
485+ color={isGenerating ? 'black' : 'green4'}>
486+ {buttonText(status, fields.length)}
487+ </Grid.Item>
488+ );
489+ }
490+
491+ return null;
492+ };
493+
422494 return (
423495 <Grid gap={3}>
424496 <BridgeForm
@@ -507,27 +579,7 @@ export default function InviteEmail() {
507579 );
508580 })}
509581
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={ProgressButton}
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− )}
582+ {renderButton({ handleSubmit, fields })}
531583
532584 {needFunds && (
533585 <Grid.Item full>