src/views/Invite/InviteEmail.js · bridge · git.iko.soy

git.iko.soy/bridge

on 930df17 help sign in

bridge/src/views/Invite/InviteEmail.js

620 lines 19 kB history raw

1import React, {

2 useCallback,

3 useEffect,

4 useRef,

5 useMemo,

6 useState,

7} from 'react';

8import cn from 'classnames';

9import * as ob from 'urbit-ob';

10import * as azimuth from 'azimuth-js';

11import {

12 Grid,

13 Flex,

14 IconButton,

15 HelpText,

16 Text,

17 ErrorText,

18 AccessoryIcon,

19} from 'indigo-react';

20import { uniq } from 'lodash';

21import { fromWei, toWei, toBN } from 'web3-utils';

22import { FieldArray } from 'react-final-form-arrays';

24import { usePointCursor } from 'store/pointCursor';

25import { useNetwork } from 'store/network';

26import { usePointCache } from 'store/pointCache';

27import { useWallet } from 'store/wallet';

29// for transaction generation and signing

30import {

31 signTransaction,

32 sendSignedTransaction,

33 waitForTransactionConfirm,

34 hexify,

35} from 'lib/txn';

36import * as tank from 'lib/tank';

37import { MIN_PLANET, GAS_LIMITS } from 'lib/constants';

38import * as need from 'lib/need';

39import * as wg from 'lib/walletgen';

40import useSetState from 'lib/useSetState';

41import pluralize from 'lib/pluralize';

42import useMailer from 'lib/useMailer';

44import ProgressButton from 'components/ProgressButton';

45import Highlighted from 'components/Highlighted';

46import BridgeForm from 'form/BridgeForm';

47import { Field } from 'react-final-form';

48import { EmailInput } from 'form/Inputs';

49import {

50 buildEmailValidator,

51 composeValidator,

52 hasErrors,

53 buildArrayValidator,

54} from 'form/validators';

55import { FORM_ERROR } from 'final-form';

56import SubmitButton from 'form/SubmitButton';

57import FormError from 'form/FormError';

58import { WARNING, onlyHasWarning } from 'form/helpers';

59import useGasPrice from 'lib/useGasPrice';

60import timeout from 'lib/timeout';

62import { ForwardButton } from 'components/Buttons';

63import CopiableAddress from 'components/CopiableAddress';

65const INITIAL_VALUES = { emails: [''] };

67const GAS_LIMIT = GAS_LIMITS.GIFT_PLANET;

68const HAS_RECEIVED_TEXT = 'This email has already received an invite.';

70const STATUS = {

71 INPUT: 'INPUT',

72 GENERATING: 'GENERATING',

73 CAN_SEND: 'CAN_SEND',

74 FUNDING: 'FUNDING',

75 SENDING: 'SENDING',

76 SUCCESS: 'SUCCESS',

77 FAILURE: 'FAILURE',

78};

80const nameForEmailField = i => `emails[${i}]`;

82const buttonText = (status, count) => {

83 switch (status) {

84 case STATUS.INPUT:

85 return `Generate ${pluralize(count, 'Invite')}`;

86 case STATUS.GENERATING:

87 return `Generating ${pluralize(count, 'Invite')}...`;

88 case STATUS.CAN_SEND:

89 return `Send ${pluralize(count, 'Invite')}`;

90 case STATUS.FUNDING:

91 return `Waiting on Funds...`;

92 case STATUS.SENDING:

93 return `Sending ${pluralize(count, 'Invite')}...`;

94 case STATUS.FAILURE:

95 default:

96 return 'Error';

97 }

98};

100const buildAccessoryFor = (dones, errors) => name => {

101 if (dones[name]) return <AccessoryIcon.Success />;

102 if (errors[name]) return <AccessoryIcon.Failure />;

103 return <AccessoryIcon.Pending />;

106export default function InviteEmail() {

107 const { contracts, web3, networkType } = useNetwork();

108 const { wallet, walletType, walletHdPath } = useWallet();

109 const { syncInvites, getInvites } = usePointCache();

110 const { pointCursor } = usePointCursor();

111 const point = need.point(pointCursor);

112 const { getHasReceived, sendMail } = useMailer();

113 const { gasPrice } = useGasPrice();

115 const cachedEmails = useRef({});

117 const { availableInvites } = getInvites(point);

118 const maxInvitesToSend = availableInvites.matchWith({

119 Nothing: () => 0,

120 Just: p => p.value,

121 });

123 // manage per-input state

124 const [hovered, setHovered] = useSetState();

125 const [invites, addInvite, clearInvites] = useSetState();

126 const [receipts, addReceipt, clearReceipts] = useSetState();

127 const [errors, addError] = useSetState();

129 // manage general state that affects the whole form

130 const [status, setStatus] = useState(STATUS.INPUT);

131 const [needFunds, setNeedFunds] = useState(null);

132 const [generalError, setGeneralError] = useState(null);

134 // derive booleans from status

135 const canInput = status === STATUS.INPUT;

136 const isGenerating = status === STATUS.GENERATING;

137 const canSend = status === STATUS.CAN_SEND;

138 const isSending = status === STATUS.SENDING;

139 const isFailed = status === STATUS.FAILURE;

140 const isDone = status === STATUS.SUCCESS;

142 const validateHasReceived = useCallback(

143 async email => {

144 const hasReceived = await getHasReceived(email);

145 if (hasReceived) {

146 return HAS_RECEIVED_TEXT;

147 }

148 },

149 [getHasReceived]

150 );

152 const validateForm = useCallback((values, errors) => {

153 if (hasErrors(errors)) {

154 return errors;

155 }

157 // check for email uniqenesss

158 const emails = values.emails.filter(d => !!d);

159 if (uniq(emails).length !== emails.length) {

160 return { [FORM_ERROR]: 'Duplicate email.' };

161 }

162 }, []);

164 const validate = useMemo(

165 () =>

166 composeValidator(

167 {

168 emails: buildArrayValidator(buildEmailValidator(validateHasReceived)),

169 },

170 validateForm

171 ),

172 [validateForm, validateHasReceived]

173 );

175 // progress is [0, .length] of invites or receipts, as we're generating them

176 const progress = isGenerating

177 ? Object.keys(invites).length

178 : isSending

179 ? Object.keys(receipts).length

180 : null;

181 const percentProgress =

182 progress !== null

183 ? progress / Object.keys(cachedEmails.current).length

184 : null;

185 const visualProgress = progress === null ? '-' : `${progress + 1}`;

187 // build a builder for the accessory to the input, depending on status

188 const accessoryFor = (() => {

189 if (isGenerating || canSend) return buildAccessoryFor(invites, errors);

190 if (isSending) return buildAccessoryFor(receipts, errors);

191 if (isFailed) return buildAccessoryFor({}, errors);

192 return () => null;

193 })();

195 const generateInvites = useCallback(

196 async values => {

197 const _contracts = contracts.getOrElse(null);

198 const _web3 = web3.getOrElse(null);

199 const _wallet = wallet.getOrElse(null);

200 if (!_contracts || !_web3 || !_wallet) {

201 // not using need because we want a custom error

202 throw new Error('Internal Error: Missing Contracts/Web3/Wallet');

203 }

205 const nonce = await _web3.eth.getTransactionCount(_wallet.address);

206 const chainId = await _web3.eth.net.getId();

207 const planets = await azimuth.delegatedSending.getPlanetsToSend(

208 _contracts,

209 point,

210 values.emails.length

211 );

213 // account for the race condition where invites got used up while we were

214 // composing our target list

215 if (planets.length < values.emails.length) {

216 // resync invites to the cache, since they're out of date

217 syncInvites(point);

219 return {

220 [FORM_ERROR]:

221 `Can currently only send ${planets.length} invites. ` +

222 `Please remove invites until you are within the limit.`,

223 };

224 }

226 clearInvites();

227 // NB(shrugs) - must be processed in serial because main thread, etc

228 let errorCount = 0;

229 for (let i = 0; i < values.emails.length; i++) {

230 const name = nameForEmailField(i);

231 try {

232 const email = values.emails[i];

233 const planet = planets[i];

235 const { ticket, owner } = await wg.generateTemporaryTicketAndWallet(

236 MIN_PLANET

237 // we're always giving planets, so generate a ticket of the correct size

238 );

240 const inviteTx = azimuth.delegatedSending.sendPoint(

241 _contracts,

242 point,

243 planet,

244 owner.keys.address

245 );

247 const signedTx = await signTransaction({

248 wallet: _wallet,

249 walletType,

250 walletHdPath,

251 networkType,

252 chainId,

253 nonce: nonce + i,

254 // TODO: ^ make a useTransactionSigner to encapsulate this logic

255 txn: inviteTx,

256 gasPrice: gasPrice.toFixed(), // expects string gwei

257 gasLimit: GAS_LIMIT.toFixed(),

258 });

260 const rawTx = hexify(signedTx.serialize());

262 addInvite({ [name]: { email, ticket, signedTx, rawTx } });

263 } catch (error) {

264 console.error(error);

265 errorCount++;

266 addError({ [name]: 'Error generating invite.' });

267 }

268 }

270 if (errorCount > 0) {

271 return {

272 [WARNING]: `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(

273 errorCount,

274 'error'

275 )} while generating wallets. You can still send the invites that generated correctly.`,

276 };

277 }

278 },

279 [

280 contracts,

281 web3,

282 wallet,

283 point,

284 clearInvites,

285 syncInvites,

286 walletType,

287 walletHdPath,

288 networkType,

289 gasPrice,

290 addInvite,

291 addError,

292 ]

293 );

295 const sendInvites = useCallback(async () => {

296 // compute all of the names of the fields

297 const allFieldNames = Object.keys(cachedEmails.current);

298 // only emails we're sending are the valid ones with invites

299 const names = allFieldNames.filter(name => !!invites[name]);

300 const emails = allFieldNames.map(name => cachedEmails.current[name]);

302 const _web3 = web3.getOrElse(null);

303 const _wallet = wallet.getOrElse(null);

304 if (!_web3 || !_wallet) {

305 throw new Error('Internal Error: Missing Contracts/Web3/Wallet');

306 }

308 setStatus(STATUS.FUNDING);

309 const totalCost = toBN(GAS_LIMIT)

310 .mul(toBN(gasPrice))

311 .mul(toBN(emails.length));

312 const tankWasUsed = await tank.ensureFundsFor(

313 _web3,

314 point,

315 _wallet.address,

316 toWei(totalCost.toString(), 'gwei'),

317 names.map(name => invites[name].rawTx),

318 (address, minBalance, balance) =>

319 setNeedFunds({ address, minBalance, balance }),

320 () => setNeedFunds(undefined)

321 );

323 setStatus(STATUS.SENDING);

324 clearReceipts();

326 let unsentInvites = [];

327 let orphanedInvites = [];

328 const txAndMailings = names.map(async name => {

329 const invite = invites[name];

330 try {

331 const txHash = await sendSignedTransaction(

332 _web3,

333 invite.signedTx,

334 tankWasUsed

335 );

337 await waitForTransactionConfirm(_web3, txHash);

338 } catch (error) {

339 console.error(error);

340 unsentInvites.push(invite);

341 return;

342 }

344 try {

345 await sendMail(

346 invite.email,

347 invite.ticket,

348 ob.patp(point),

349 invite.rawTx

350 );

351 } catch (error) {

352 console.error(error);

353 orphanedInvites.push(invite);

354 }

356 addReceipt({ [name]: true });

357 });

359 await Promise.all(txAndMailings);

360 // if there are any receipt errors, throw a general error

361 let errorString = '';

362 if (orphanedInvites.length > 0) {

363 errorString =

364 'Not all invite emails were sent. ' +

365 'Please send the following invite codes manually: ' +

366 orphanedInvites.map(i => `${i.email}: ${i.ticket}`).join(', ') +

367 '. ';

368 }

369 if (unsentInvites.length > 0) {

370 errorString =

371 errorString +

372 'Not all invites were created. ' +

373 'Did not send invites for: ' +

374 unsentInvites.map(i => i.email).join(', ') +

375 '.';

376 }

377 if (errorString !== '') {

378 throw new Error(errorString);

379 }

380 }, [

381 web3,

382 wallet,

383 point,

384 gasPrice,

385 invites,

386 clearReceipts,

387 addReceipt,

388 sendMail,

389 ]);

391 const onSubmit = useCallback(

392 async values => {

393 cachedEmails.current = values.emails.reduce((memo, email, i) => {

394 memo[nameForEmailField(i)] = email;

395 return memo;

396 }, {});

397 setStatus(STATUS.GENERATING);

398 const errors = await generateInvites(values);

399 if (hasErrors(errors)) {

400 if (onlyHasWarning(errors)) {

401 setStatus(STATUS.CAN_SEND);

402 }

404 return errors;

405 }

407 await timeout(500); // wait for progress animation to complete.

409 setStatus(STATUS.CAN_SEND);

410 },

411 [generateInvites]

412 );

414 const doSend = useCallback(async () => {

415 setGeneralError(null);

416 try {

417 setStatus(STATUS.SENDING);

418 await sendInvites();

419 setStatus(STATUS.SUCCESS);

420 } catch (error) {

421 console.error(error);

422 setGeneralError(error.message);

423 setStatus(STATUS.FAILURE);

424 }

425 }, [sendInvites]);

427 // when we transition to done, sync invites because we just sent some

428 // and therefore know that state has changed

429 useEffect(() => {

430 if (isDone) {

431 syncInvites(point);

432 }

433 }, [isDone, syncInvites, point]);

435 const renderButton = ({ handleSubmit, fields }) => {

436 if (canInput) {

437 return (

438 <Grid.Item

439 full

440 as={SubmitButton}

441 handleSubmit={handleSubmit}

442 accessory={`${visualProgress}/${fields.length}`}>

443 {buttonText(status, fields.length)}

444 </Grid.Item>

445 );

446 }

448 if (isGenerating) {

449 return (

450 <Grid.Item

451 full

452 as={ProgressButton}

453 solid

454 disabled

455 className="mt4"

456 accessory={`${visualProgress}/${fields.length}`}

457 progress={percentProgress}

458 color="black">

459 {buttonText(status, fields.length)}

460 </Grid.Item>

461 );

462 }

464 if (canSend) {

465 return (

466 <Grid.Item

467 full

468 as={ForwardButton}

469 className="mt4"

470 solid

471 success

472 accessory={`${visualProgress}/${fields.length}`}

473 onClick={doSend}>

474 {buttonText(status, fields.length)}

475 </Grid.Item>

476 );

477 }

479 if (isSending) {

480 return (

481 <Grid.Item

482 full

483 as={ProgressButton}

484 className="mt4"

485 solid

486 success

487 disabled

488 accessory={`${visualProgress}/${fields.length}`}

489 progress={percentProgress}

490 color={isGenerating ? 'black' : 'green4'}>

491 {buttonText(status, fields.length)}

492 </Grid.Item>

493 );

494 }

496 return null;

497 };

499 return (

500 <Grid gap={3}>

501 <BridgeForm

502 validate={validate}

503 onSubmit={onSubmit}

504 initialValues={INITIAL_VALUES}>

505 {({ handleSubmit }) => (

506 <FieldArray name="emails">

507 {({ fields }) => {

508 const sentInviteNames = Object.keys(receipts);

509 return (

510 <>

511 <Grid.Item full as={Flex} justify="end">

512 {/* use hidden class instead of removing component from dom */}

513 {/* in order to avoid janky reflow */}

514 <IconButton

515 onClick={() => fields.push('')}

516 disabled={!canInput || fields.length >= maxInvitesToSend}

517 className={cn({ hidden: isDone })}

518 solid>

519 +

520 </IconButton>

521 </Grid.Item>

523 {isDone ? (

524 <>

525 <Grid.Item as={Text} className="f5" full>

526 <Highlighted>

527 {pluralize(sentInviteNames.length, 'invite')}

528 </Highlighted>{' '}

529 {pluralize(sentInviteNames.length, 'has', 'have')} been

530 successfully sent

531 </Grid.Item>

533 {sentInviteNames.map(name => (

534 <Grid.Item as={HelpText} key={name} full>

535 <Field name={name}>

536 {({ input: { value } }) => value}

537 </Field>

538 </Grid.Item>

539 ))}

540 </>

541 ) : (

542 <>

543 {fields.map((name, i) => {

544 const isFirst = i === 0;

545 return (

546 <Grid.Item

547 key={name}

548 full

549 as={Grid}

550 gap={3}

551 onMouseOver={() => setHovered({ [name]: true })}

552 onMouseLeave={() => setHovered({ [name]: false })}>

553 <Grid.Item

554 cols={[1, 11]}

555 as={EmailInput}

556 name={name}

557 label={isFirst ? 'Email Address' : undefined}

558 accessory={accessoryFor(name)}

559 />

560 <Field name={name}>

561 {({ meta: { active } }) => {

562 return (

563 <>

564 {!isFirst &&

565 (active || hovered[name]) &&

566 canInput && (

567 <Grid.Item

568 cols={[11, 13]}

569 justifySelf="end"

570 alignSelf="center">

571 <IconButton

572 onClick={() => fields.remove(i)}

573 solid

574 secondary>

575 -

576 </IconButton>

577 </Grid.Item>

578 )}

579 </>

580 );

581 }}

582 </Field>

583 </Grid.Item>

584 );

585 })}

587 {renderButton({ handleSubmit, fields })}

589 {needFunds && (

590 <Grid.Item full>

591 <Highlighted warning>

592 Your ownership address{' '}

593 <CopiableAddress>

594 {needFunds.address}

595 </CopiableAddress>{' '}

596 needs at least {fromWei(needFunds.minBalance)} ETH

597 and currently has {fromWei(needFunds.balance)} ETH.

598 Waiting until the account has enough funds.

599 </Highlighted>

600 </Grid.Item>

601 )}

603 <Grid.Item full as={FormError} />

605 {generalError && (

606 <Grid.Item full as={ErrorText}>

607 {generalError}

608 </Grid.Item>

609 )}

610 </>

611 )}

612 </>

613 );

614 }}

615 </FieldArray>

616 )}

617 </BridgeForm>

618 </Grid>

619 );