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

git.iko.soy/bridge

on dee2cd5 help sign in

bridge/src/views/Invite/InviteEmail.js

496 lines 15 kB history raw

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

2import cn from 'classnames';

3import { Just } 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 useForm,

15} from 'indigo-react';

16import { uniq } from 'lodash';

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

24import {

25 signTransaction,

26 sendSignedTransaction,

27 waitForTransactionConfirm,

28 hexify,

29 fromWei,

30 toWei,

31} from 'lib/txn';

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

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

34import useArray from 'lib/useArray';

35import { buildEmailInputConfig } from 'lib/useInputs';

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

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

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

39import useSetState from 'lib/useSetState';

40import pluralize from 'lib/pluralize';

41import useMailer from 'lib/useMailer';

43import MiniBackButton from 'components/MiniBackButton';

44import LoadableButton from 'components/LoadableButton';

45import Highlighted from 'components/Highlighted';

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

48const GAS_LIMIT = GAS_LIMITS.GIFT_PLANET;

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.point(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', autoFocus: true })],

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: 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 Just(invite.signedTx),

304 tankWasUsed

305 );

307 // TODO: waitForTransactionConfirm never rejects

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

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

310 } catch (error) {

311 console.error(error);

312 errorCount++;

313 addError({

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

315 });

316 return;

317 }

319 try {

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

321 } catch (error) {

322 console.error(error);

323 errorCount++;

324 addError({

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

326 });

327 }

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

330 });

332 await Promise.all(txAndMailings);

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

334 if (errorCount > 0) {

335 throw new Error(

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

337 errorCount,

338 'error'

339 )} while sending transactions.`

340 );

341 }

342 }, [

343 web3,

344 inputs,

345 addReceipt,

346 clearReceipts,

347 invites,

348 point,

349 wallet,

350 addError,

351 sendMail,

352 ]);

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

355 setGeneralError(null);

356 try {

357 if (canGenerate) {

358 setStatus(STATUS.GENERATING);

359 await generateInvites();

360 setStatus(STATUS.CAN_SEND);

361 } else if (canSend) {

362 setStatus(STATUS.SENDING);

363 await sendInvites();

364 setStatus(STATUS.SUCCESS);

365 }

366 } catch (error) {

367 console.error(error);

368 setGeneralError(error);

369 setStatus(STATUS.FAILURE);

370 }

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

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

374 useEffect(() => {

375 // compute the list of valid emails

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

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

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

379 } else {

380 setGeneralError(null);

381 }

382 }, [inputs]);

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

385 // and therefore know that state has changed

386 useEffect(() => {

387 if (isDone) {

388 syncInvites(point);

389 }

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

392 return (

393 <Grid gap={3}>

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

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

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

397 </Grid.Item>

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

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

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

401 <IconButton

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

403 disabled={!canAddInvite}

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

405 solid>

406 +

407 </IconButton>

408 </Grid.Item>

409 </Grid.Item>

411 {isDone && (

412 <>

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

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

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

416 </Grid.Item>

417 {inputs.map(input => (

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

419 {invites[input.name].email}

420 </Grid.Item>

421 ))}

422 </>

423 )}

425 {!isDone && (

426 <>

427 {/* email inputs */}

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

429 const isFirst = i === 0;

430 return (

431 <Grid.Item

432 key={input.name}

433 as={Grid}

434 gap={3}

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

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

437 full>

438 <Grid.Item

439 as={Input}

440 cols={[1, 11]}

441 {...input}

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

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

444 accessory={accessoryFor(input.name)}

445 />

446 {!isFirst &&

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

448 canInput && (

449 <Grid.Item

450 cols={[11, 13]}

451 justifySelf="end"

452 alignSelf="center">

453 <IconButton

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

455 solid

456 secondary>

457 -

458 </IconButton>

459 </Grid.Item>

460 )}

461 </Grid.Item>

462 );

463 })}

465 <Grid.Item

466 full

467 as={LoadableButton}

468 disabled={!canGenerate && !canSend}

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

470 onClick={onClick}

471 success={canSend}

472 solid>

473 {buttonText(status, inputs.length)}

474 </Grid.Item>

476 {needFunds && (

477 <Grid.Item full>

478 <Highlighted>

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

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

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

482 enough funds.

483 </Highlighted>

484 </Grid.Item>

485 )}

487 {generalError && (

488 <Grid.Item full>

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

490 </Grid.Item>

491 )}

492 </>

493 )}

494 </Grid>

495 );