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

git.iko.soy/bridge

on 2043bfc help sign in

bridge/src/views/Invite/InviteEmail.js

497 lines 15 kB history raw

1import React, { useCallback, useEffect, useMemo, useState } from 'react';

2import cn from 'classnames';

3import Maybe from 'folktale/maybe';

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

5import {

6 Grid,

7 Flex,

8 Input,

9 IconButton,

10 HelpText,

11 Text,

12 ErrorText,

13 AccessoryIcon,

14} from 'indigo-react';

15import { uniq } from 'lodash';

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

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

20// for transaction generation and signing

21import {

22 signTransaction,

23 sendSignedTransaction,

24 waitForTransactionConfirm,

25 hexify,

26 fromWei,

27 toWei,

28} from 'lib/txn';

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

30import { useLocalRouter } from 'lib/LocalRouter';

32import MiniBackButton from 'components/MiniBackButton';

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

34import LoadableButton from 'components/LoadableButton';

35import useArray from 'lib/useArray';

36import useForm from 'indigo-react/lib/useForm';

37import { buildEmailInputConfig } from 'components/Inputs';

38import { MIN_PLANET } from 'lib/constants';

39import Highlighted from 'components/Highlighted';

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

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

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

43import useSetState from 'lib/useSetState';

44import pluralize from 'lib/pluralize';

45import useMailer from 'lib/useMailer';

47const GAS_PRICE_GWEI = 20; // we pay the premium for faster ux

48const GAS_LIMIT = 400000;

49const INVITE_COST = toWei((GAS_PRICE_GWEI * GAS_LIMIT).toString(), 'gwei');

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

52const STATUS = {

53 INPUT: 'INPUT',

54 GENERATING: 'GENERATING',

55 CAN_SEND: 'CAN_SEND',

56 FUNDING: 'FUNDING',

57 SENDING: 'SENDING',

58 SUCCESS: 'SUCCESS',

59 FAILURE: 'FAILURE',

60};

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

63 switch (status) {

64 case STATUS.INPUT:

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

66 case STATUS.GENERATING:

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

68 case STATUS.CAN_SEND:

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

70 case STATUS.FUNDING:

71 return `Waiting on Funds...`;

72 case STATUS.SENDING:

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

74 case STATUS.FAILURE:

75 default:

76 return 'Error';

77 }

78};

80// world's simplest uid

81let id = 0;

82const buildInputConfig = (extra = {}) =>

83 buildEmailInputConfig({

84 name: `email-${id++}`,

85 placeholder: 'Email Address',

86 ...extra,

87 });

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

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

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

92 return <AccessoryIcon.Pending />;

93};

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.pointCursor(pointCursor);

104 const { getHasRecieved, syncHasReceivedForEmail, sendMail } = useMailer();

106 const { availableInvites } = getInvites(point);

107 const maxInvitesToSend = availableInvites.matchWith({

108 Nothing: () => 0,

109 Just: p => p.value,

110 });

112 // manage the array of input configs

113 const [

114 inputConfigs,

115 { append: appendInput, removeAt: removeInputAt },

116 ] = useArray(

117 [buildInputConfig({ label: 'Email Address' })],

118 buildInputConfig

119 );

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, clearErrors] = 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(

142 () =>

143 inputConfigs.map(config => {

144 config.disabled = !canInput;

145 const hasReceivedError = getHasRecieved(config.name).matchWith({

146 Nothing: () => null, // loading

147 Just: p => p.value && HAS_RECEIVED_TEXT,

148 });

149 config.error = hasReceivedError || errors[config.name];

150 return config;

151 }),

152 [inputConfigs, errors, canInput, getHasRecieved]

153 );

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

162 // invites to send

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

168 : isSending

169 ? Object.keys(receipts).length

170 : null;

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);

178 return () => null;

179 })();

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');

188 }

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

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

192 const planets = await azimuth.delegatedSending.getPlanetsToSend(

193 _contracts,

194 point,

195 inputs.length

196 );

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

199 // composing our target list

200 if (planets.length < inputs.length) {

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

202 syncInvites(point);

204 throw new Error(

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

206 `Please remove invites until you are within the limit.`

207 );

208 }

210 let errorCount = 0;

211 clearInvites();

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

213 for (let i = 0; i < inputs.length; i++) {

214 const input = inputs[i];

215 try {

216 const { data: email, name } = inputs[i];

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

219 MIN_PLANET

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

221 );

223 const inviteTx = azimuth.delegatedSending.sendPoint(

224 _contracts,

225 point,

226 planets[i],

227 owner.keys.address

228 );

229 const signedTx = await signTransaction({

230 wallet,

231 walletType,

232 walletHdPath,

233 networkType,

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

235 txn: Maybe.Just(inviteTx),

236 gasPrice: GAS_PRICE_GWEI.toString(),

237 gasLimit: GAS_LIMIT.toString(),

238 nonce: nonce + i,

239 chainId,

240 setStx: () => {},

241 });

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

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

245 } catch (error) {

246 console.error(error);

247 errorCount++;

248 addError({ [input.name]: `Wallet Error: ${input.email}` });

249 }

250 }

252 if (errorCount > 0) {

253 throw new Error(

254 `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(

255 errorCount,

256 'error'

257 )} while generating wallets.`

258 );

259 }

260 }, [

261 point,

262 contracts,

263 web3,

264 addInvite,

265 clearInvites,

266 syncInvites,

267 inputs,

268 networkType,

269 wallet,

270 walletType,

271 walletHdPath,

272 addError,

273 ]);

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

276 const _web3 = web3.getOrElse(null);

277 const _wallet = wallet.getOrElse(null);

278 if (!_web3 || !_wallet) {

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

280 }

282 setStatus(STATUS.FUNDING);

283 const tankWasUsed = await tank.ensureFundsFor(

284 _web3,

285 point,

286 _wallet.address,

287 INVITE_COST * inputs.length,

288 inputs.map(input => invites[input.name].rawTx),

289 (address, minBalance, balance) =>

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

291 () => setNeedFunds(false)

292 );

294 setStatus(STATUS.SENDING);

295 clearReceipts();

297 let errorCount = 0;

298 const txAndMailings = inputs.map(async input => {

299 const invite = invites[input.name];

300 try {

301 const txHash = await sendSignedTransaction(

302 _web3,

303 Maybe.Just(invite.signedTx),

304 tankWasUsed,

305 () => {}

306 );

308 // TODO: waitForTransactionConfirm never rejects

309 const didConfirm = await waitForTransactionConfirm(_web3, txHash);

310 if (!didConfirm) throw new Error();

311 } catch (error) {

312 console.error(error);

313 errorCount++;

314 addError({

315 [input.name]: `Transaction Failure for ${invite.email}`,

316 });

317 return;

318 }

320 try {

321 await sendMail(invite.email, invite.ticket, invite.rawTx);

322 } catch (error) {

323 console.error(error);

324 errorCount++;

325 addError({

326 [input.name]: `Mailing Failure for ${invite.email}`,

327 });

328 }

330 addReceipt({ [input.name]: true });

331 });

333 await Promise.all(txAndMailings);

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

335 if (errorCount > 0) {

336 throw new Error(

337 `There ${pluralize(errorCount, 'was', 'were')} ${pluralize(

338 errorCount,

339 'error'

340 )} while sending transactions.`

341 );

342 }

343 }, [

344 web3,

345 inputs,

346 addReceipt,

347 clearReceipts,

348 invites,

349 point,

350 wallet,

351 addError,

352 sendMail,

353 ]);

355 const onClick = useCallback(async () => {

356 setGeneralError(null);

357 try {

358 if (canGenerate) {

359 setStatus(STATUS.GENERATING);

360 await generateInvites();

361 setStatus(STATUS.CAN_SEND);

362 } else if (canSend) {

363 setStatus(STATUS.SENDING);

364 await sendInvites();

365 setStatus(STATUS.SUCCESS);

366 }

367 } catch (error) {

368 console.error(error);

369 setGeneralError(error);

370 setStatus(STATUS.FAILURE);

371 }

372 }, [canGenerate, canSend, generateInvites, sendInvites]);

374 // when inputs update, check to see if any of them are duplicates

375 useEffect(() => {

376 // compute the list of valid emails

377 const emails = inputs.map(i => i.data).filter(d => !!d);

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

379 setGeneralError(new Error(`Duplicate email.`));

380 } else {

381 setGeneralError(null);

382 }

383 }, [inputs]);

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

386 // and therefore know that state has changed

387 useEffect(() => {

388 if (isDone) {

389 syncInvites(point);

390 }

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

393 return (

394 <Grid gap={12}>

395 <Grid.Item as={Grid} full>

396 <Grid.Item as={Flex} cols={[1, 11]} align="center">

397 <MiniBackButton onClick={() => pop()} />

398 </Grid.Item>

399 <Grid.Item cols={[11, 13]} justifySelf="end">

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

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

402 <IconButton

403 onClick={() => appendInput()}

404 disabled={!canAddInvite}

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

406 solid>

407 +

408 </IconButton>

409 </Grid.Item>

410 </Grid.Item>

412 {isDone && (

413 <>

414 <Grid.Item as={Text} full>

415 <Highlighted>{pluralize(inputs.length, 'invite')}</Highlighted>{' '}

416 {pluralize(inputs.length, 'has', 'have')} been successfully sent

417 </Grid.Item>

418 {inputs.map(input => (

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

420 {invites[input.name].email}

421 </Grid.Item>

422 ))}

423 </>

424 )}

426 {!isDone && (

427 <>

428 {/* email inputs */}

429 {inputs.map((input, i) => {

430 const isFirst = i === 0;

431 return (

432 <Grid.Item

433 key={input.name}

434 as={Grid}

435 gap={12}

436 onMouseOver={() => setHovered({ [input.name]: true })}

437 onMouseLeave={() => setHovered({ [input.name]: false })}

438 full>

439 <Grid.Item

440 as={Input}

441 cols={[1, 11]}

442 {...input}

443 onValue={email => syncHasReceivedForEmail(email)}

444 // NB(shrugs): ^ this feels like a hack?

445 accessory={accessoryFor(input.name)}

446 />

447 {!isFirst &&

448 (input.focused || hovered[input.name]) &&

449 canInput && (

450 <Grid.Item

451 cols={[11, 13]}

452 justifySelf="end"

453 alignSelf="center">

454 <IconButton

455 onClick={() => removeInputAt(i)}

456 solid

457 secondary>

458 -

459 </IconButton>

460 </Grid.Item>

461 )}

462 </Grid.Item>

463 );

464 })}

466 <Grid.Item

467 full

468 as={LoadableButton}

469 disabled={!canGenerate && !canSend}

470 accessory={`${visualProgress}/${inputs.length}`}

471 onClick={onClick}

472 success={canSend}

473 solid>

474 {buttonText(status, inputs.length)}

475 </Grid.Item>

477 {needFunds && (

478 <Grid.Item full>

479 <Highlighted>

480 Your ownership address {needFunds.address} needs at least{' '}

481 {fromWei(needFunds.minBalance)} ETH and currently has{' '}

482 {fromWei(needFunds.balance)} ETH. Waiting until the account has

483 enough funds.

484 </Highlighted>

485 </Grid.Item>

486 )}

488 {generalError && (

489 <Grid.Item full>

490 <ErrorText>{generalError.message.toString()}</ErrorText>

491 </Grid.Item>

492 )}

493 </>

494 )}

495 </Grid>

496 );