1import React, { useCallback, useEffect, useMemo, useState } from 'react';
2import cn from 'classnames';
3import * as azimuth from 'azimuth-js';
15import { uniq } from 'lodash';
16import { fromWei, toWei } from 'web3-utils';
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
26 sendSignedTransaction,
27 waitForTransactionConfirm,
30import * as tank from 'lib/tank';
31import { useLocalRouter } from 'lib/LocalRouter';
32import useArray from 'lib/useArray';
33import { buildEmailInputConfig } from 'lib/useInputs';
34import { MIN_PLANET, GAS_LIMITS, DEFAULT_GAS_PRICE_GWEI } from 'lib/constants';
35import * as need from 'lib/need';
36import * as wg from 'lib/walletgen';
37import useSetState from 'lib/useSetState';
38import pluralize from 'lib/pluralize';
39import useMailer from 'lib/useMailer';
41import MiniBackButton from 'components/MiniBackButton';
42import LoadableButton from 'components/LoadableButton';
43import Highlighted from 'components/Highlighted';
45const GAS_LIMIT = GAS_LIMITS.GIFT_PLANET;
46const INVITE_COST = toWei(
47 (DEFAULT_GAS_PRICE_GWEI * GAS_LIMIT).toString(),
50const HAS_RECEIVED_TEXT = 'This email has already received an invite.';
54 GENERATING: 'GENERATING',
62const buttonText = (status, count) => {
65 return `Generate ${pluralize(count, 'Invite')}`;
66 case STATUS.GENERATING:
67 return `Generating ${pluralize(count, 'Invite')}...`;
69 return `Send ${pluralize(count, 'Invite')}`;
71 return `Waiting on Funds...`;
73 return `Sending ${pluralize(count, 'Invite')}...`;
80// world's simplest uid
82const buildInputConfig = (extra = {}) =>
83 buildEmailInputConfig({
84 name: `email-${id++}`,
85 placeholder: 'Email Address',
89const buildAccessoryFor = (dones, errors) => name => {
90 if (dones[name]) return <AccessoryIcon.Success />;
91 if (errors[name]) return <AccessoryIcon.Failure />;
92 return <AccessoryIcon.Pending />;
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({
112 // manage the array of input configs
115 { append: appendInput, removeAt: removeInputAt },
117 [buildInputConfig({ label: 'Email Address', autoFocus: true })],
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] = 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(
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,
149 config.error = hasReceivedError || errors[config.name];
152 [inputConfigs, errors, canInput, getHasReceived]
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
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
169 ? Object.keys(receipts).length
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);
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');
190 //TODO want to do this on-input, but that gets weird. see #188
193 inputs.map(async input => {
194 const email = input.data;
195 const hasReceived = getHasReceived(email).matchWith({
196 Nothing: () => false, // loading
202 [input.name]: `${email} has already received an invite.`,
207 if (errorCount > 0) {
208 throw new Error(`Some of these already have a point!`);
211 const nonce = await _web3.eth.getTransactionCount(_wallet.address);
212 const chainId = await _web3.eth.net.getId();
213 const planets = await azimuth.delegatedSending.getPlanetsToSend(
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
226 `Can currently only send ${planets.length} invites. ` +
227 `Please remove invites until you are within the limit.`
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];
236 const { data: email, name } = inputs[i];
238 const { ticket, owner } = await wg.generateTemporaryTicketAndWallet(
240 // we're always giving planets, so generate a ticket of the correct size
243 const inviteTx = azimuth.delegatedSending.sendPoint(
249 const signedTx = await signTransaction({
254 // TODO: ^ make a useTransactionSigner to encapsulate this logic
256 gasPrice: DEFAULT_GAS_PRICE_GWEI.toString(),
257 gasLimit: GAS_LIMIT.toString(),
261 const rawTx = hexify(signedTx.serialize());
263 addInvite({ [name]: { email, ticket, signedTx, rawTx } });
265 console.error(error);
267 addError({ [input.name]: `Wallet Error: ${input.email}` });
271 if (errorCount > 0) {
273 `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(
276 )} while generating wallets.`
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');
302 setStatus(STATUS.FUNDING);
303 const tankWasUsed = await tank.ensureFundsFor(
307 INVITE_COST * inputs.length,
308 inputs.map(input => invites[input.name].rawTx),
309 (address, minBalance, balance) =>
310 setNeedFunds({ address, minBalance, balance }),
311 () => setNeedFunds(undefined)
314 setStatus(STATUS.SENDING);
318 const txAndMailings = inputs.map(async input => {
319 const invite = invites[input.name];
321 const txHash = await sendSignedTransaction(
327 // TODO: waitForTransactionConfirm never rejects
328 const didConfirm = await waitForTransactionConfirm(_web3, txHash);
329 if (!didConfirm) throw new Error();
331 console.error(error);
334 [input.name]: `Transaction Failure for ${invite.email}`,
340 const success = await sendMail(
345 if (!success) throw new Error('Failed to send mail');
347 console.error(error);
349 //TODO make sure this actually gets displayed
351 [input.name]: `Mailing Failure for ${invite.email}, please send them this code manually: ${invite.ticket}`,
355 addReceipt({ [input.name]: true });
358 await Promise.all(txAndMailings);
359 // if there are any receipt errors, throw a general error
360 if (errorCount > 0) {
362 `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(
365 )} while sending transactions.`
380 const onClick = useCallback(async () => {
381 setGeneralError(null);
384 setStatus(STATUS.GENERATING);
385 await generateInvites();
386 setStatus(STATUS.CAN_SEND);
387 } else if (canSend) {
388 setStatus(STATUS.SENDING);
390 setStatus(STATUS.SUCCESS);
393 console.error(error);
394 setGeneralError(error);
395 setStatus(STATUS.FAILURE);
397 }, [canGenerate, canSend, generateInvites, sendInvites]);
399 // when inputs update, check to see if any of them are duplicates
401 // compute the list of valid emails
402 const emails = inputs.map(i => i.data).filter(d => !!d);
403 if (uniq(emails).length !== emails.length) {
404 setGeneralError(new Error(`Duplicate email.`));
406 setGeneralError(null);
410 // when we transition to done, sync invites because we just sent some
411 // and therefore know that state has changed
416 }, [isDone, syncInvites, point]);
419 for (const input of inputs) {
421 syncHasReceivedForEmail(input.data);
424 }, [inputs, syncHasReceivedForEmail]);
428 <Grid.Item as={Grid} full>
429 <Grid.Item as={Flex} cols={[1, 11]} align="center">
430 <MiniBackButton onClick={() => pop()} />
432 <Grid.Item cols={[11, 13]} justifySelf="end">
433 {/* use hidden class instead of removing component from dom */}
434 {/* in order to avoid janky reflow */}
436 onClick={() => appendInput()}
437 disabled={!canAddInvite}
438 className={cn({ hidden: isDone })}
447 <Grid.Item as={Text} className="f5" full>
448 <Highlighted>{pluralize(inputs.length, 'invite')}</Highlighted>{' '}
449 {pluralize(inputs.length, 'has', 'have')} been successfully sent
451 {inputs.map(input => (
452 <Grid.Item as={HelpText} key={input.name} full>
453 {invites[input.name].email}
462 {inputs.map((input, i) => {
463 const isFirst = i === 0;
469 onMouseOver={() => setHovered({ [input.name]: true })}
470 onMouseLeave={() => setHovered({ [input.name]: false })}
476 accessory={accessoryFor(input.name)}
479 (input.focused || hovered[input.name]) &&
486 onClick={() => removeInputAt(i)}
500 disabled={!canGenerate && !canSend}
501 accessory={`${visualProgress}/${inputs.length}`}
505 {buttonText(status, inputs.length)}
511 Your ownership address {needFunds.address} needs at least{' '}
512 {fromWei(needFunds.minBalance)} ETH and currently has{' '}
513 {fromWei(needFunds.balance)} ETH. Waiting until the account has
521 <ErrorText>{generalError.message.toString()}</ErrorText>
keysesc to close
- j k
- move down, up
- enter
- open
- esc
- back, or up a level
- 1 2 3 4
- readme, files, commits, refs
- /
- filter
- y
- copy the clone command
- c
- compare the chosen commit with another (or shift-click both)
- ?
- show or hide this list