git.iko.soy/bridge
on a3bbc03 help sign in
bridge/src/views/Invite/InviteEmail.js
530 lines 15 kB history raw
1import Maybe, { Just, Nothing } from 'folktale/maybe';
2import React, { useState } from 'react';
3import * as azimuth from 'azimuth-js';
4import { Grid, Flex, Button, Input, IconButton } from 'indigo-react';
6import * as need from 'lib/need';
7import { hasReceived, sendMail } from 'lib/inviteMail';
8import * as wg from 'lib/walletgen';
10import { H3, Warning } from 'components/old/Base';
12// for transaction generation and signing
13import {
14 signTransaction,
15 sendSignedTransaction,
16 waitForTransactionConfirm,
17 hexify,
18 fromWei,
19 toWei,
20} from 'lib/txn';
21import * as tank from 'lib/tank';
22import { useLocalRouter } from 'lib/LocalRouter';
24import View from 'components/View';
25import MiniBackButton from 'components/MiniBackButton';
26import useRenderCount from 'lib/useRenderCount';
27import useInvites from 'lib/useInvites';
28import { usePointCursor } from 'store/pointCursor';
29import LoadableButton from 'components/LoadableButton';
30import useArray from 'lib/useArray';
31import useForm from 'indigo-react/lib/useForm';
32import { buildEmailInputConfig } from 'components/Inputs';
34const GAS_PRICE_GWEI = 20; // we pay the premium for faster ux
35const GAS_LIMIT = 350000;
36const INVITE_COST = toWei((GAS_PRICE_GWEI * GAS_LIMIT).toString(), 'gwei');
38const STATUS = {
39 INPUT: 'Generate invites',
40 GENERATING: 'Generating invites',
41 CAN_SEND: 'Send invites',
42 FUNDING: 'Funding invites',
43 SENDING: 'Sending invites',
44 DONE: 'Done',
45 FAIL: 'Some failed',
46};
48const EMAIL_STATUS = {
49 BUSY: '⋯',
50 DONE: '✔',
51 FAIL: '×',
52};
54// world's simplest uid
55let id = 0;
56const buildInputConfig = (extra = {}) =>
57 buildEmailInputConfig({ name: `email-${id++}`, ...extra });
59export default function NewInviteEmail() {
60 const { pop } = useLocalRouter();
61 const { pointCursor } = usePointCursor();
62 const point = need.pointCursor(pointCursor);
64 const { availableInvites } = useInvites(point);
65 const maxInvitesToSend = availableInvites.matchWith({
66 Nothing: () => 0,
67 Just: p => p.value,
68 });
70 const [
71 inputConfigs,
72 { append: appendInput, removeAt: removeInputAt },
73 ] = useArray(
74 [buildInputConfig({ placeholder: 'Email Addresss' })],
75 buildInputConfig
76 );
78 const [hovered, _setHovered] = useState({});
79 const setHovered = (name, value) => () =>
80 _setHovered((value = { ...value, [name]: value }));
82 console.log(inputConfigs.length, inputConfigs.map(c => c.name));
84 const { inputs, pass } = useForm(inputConfigs);
86 const canAddInvite = inputs.length < maxInvitesToSend;
88 useRenderCount('InviteEmail');
90 return (
91 <Grid gap={12}>
92 <Grid.Item as={Grid} className="mb4" full>
93 <Grid.Item as={Flex} cols={[1, 11]} align="center">
94 <MiniBackButton onClick={() => pop()} />
95 </Grid.Item>
96 <Grid.Item cols={[11, 13]} justifySelf="end">
97 <IconButton onClick={appendInput} disabled={!canAddInvite} solid>
98 +
99 </IconButton>
100 </Grid.Item>
101 </Grid.Item>
103 {/* email inputs */}
104 {inputs.map((input, i) => {
105 const isFirst = i === 0;
106 return (
107 <Grid.Item
108 key={input.name}
109 as={Grid}
110 gap={12}
111 onMouseEnter={setHovered(input.name, true)}
112 onMouseLeave={setHovered(input.name, false)}
113 full>
114 <Grid.Item as={Input} cols={[1, 11]} {...input} />
115 {!isFirst && (input.focused || hovered[input.name]) && (
116 <Grid.Item cols={[11, 13]} justifySelf="end" alignSelf="center">
117 <IconButton onClick={() => removeInputAt(i)}>-</IconButton>
118 </Grid.Item>
119 )}
120 </Grid.Item>
121 );
122 })}
124 <Grid.Item as={LoadableButton} full disabled={!pass} solid>
125 Generate Invites
126 </Grid.Item>
127 </Grid>
128 );
131class InviteEmail extends React.Component {
132 constructor(props) {
133 super(props);
135 this.state = {
136 invitesAvailable: Nothing(),
137 targets: [{ email: '', hasReceived: Nothing(), status: Nothing() }],
138 status: STATUS.INPUT,
139 errors: Nothing(),
140 //
141 fundingMessage: Nothing(),
142 wipInvites: [],
143 };
145 this.generateInvites = this.generateInvites.bind(this);
146 this.sendInvites = this.sendInvites.bind(this);
147 this.canSend = this.canSend.bind(this);
148 this.addError = this.addError.bind(this);
149 this.handleEmailInput = this.handleEmailInput.bind(this);
150 this.addTarget = this.addTarget.bind(this);
151 this.removeTarget = this.removeTarget.bind(this);
152 this.setEmailStatus = this.setEmailStatus.bind(this);
153 this.askForFunding = this.askForFunding.bind(this);
154 }
156 componentDidMount() {
157 this.point = need.pointCursor(this.props.pointCursor);
158 this.address = need.addressFromWallet(this.props.wallet);
159 this.contracts = need.contracts(this.props.contracts);
160 this.web3 = need.web3(this.props.web3);
162 azimuth.delegatedSending
163 .getTotalUsableInvites(this.contracts, this.point)
164 .then(count => {
165 this.setState({ invitesAvailable: Just(count) });
166 });
167 }
169 async getTemporaryWallet() {
170 const ticket = await wg.makeTicket(0x10000); // planet-sized ticket
171 const owner = await wg.generateOwnershipWallet(0, ticket);
172 return { ticket, owner: owner.keys.address };
173 }
175 async generateInvites() {
176 this.setState({ status: STATUS.GENERATING });
178 const web3 = this.web3;
179 const targets = this.state.targets;
180 const planets = await azimuth.delegatedSending.getPlanetsToSend(
181 this.contracts,
182 this.point,
183 targets.length
184 );
186 // account for the race condition where invites got used up while we were
187 // composing our target list
188 if (planets.length < targets.length) {
189 this.addError('Can currently only send ' + planets.length + ' invites!');
190 return;
191 }
193 const nonce = await web3.eth.getTransactionCount(this.address);
194 const chainId = await web3.eth.net.getId();
196 // create invite wallets and transactions
197 let invites = []; // { email, ticket, signedTx, rawTx }
198 for (let i = 0; i < targets.length; i++) {
199 console.log('generating email', i, targets[i].email);
200 this.setEmailStatus(i, EMAIL_STATUS.BUSY);
202 const email = targets[i].email;
203 const wallet = await this.getTemporaryWallet();
205 let inviteTx = azimuth.delegatedSending.sendPoint(
206 this.contracts,
207 this.point,
208 planets[i],
209 wallet.owner
210 );
211 const signedTx = await signTransaction({
212 ...this.props,
213 txn: Just(inviteTx),
214 gasPrice: GAS_PRICE_GWEI.toString(),
215 gasLimit: GAS_LIMIT.toString(),
216 nonce: nonce + i,
217 chainId: chainId,
218 setStx: () => {},
219 });
220 const rawTx = hexify(signedTx.serialize());
222 invites.push({ email, ticket: wallet.ticket, signedTx, rawTx });
223 this.setEmailStatus(i, EMAIL_STATUS.DONE);
224 }
226 this.setState({ wipInvites: invites, status: STATUS.CAN_SEND });
227 }
229 async sendInvites() {
230 const invites = this.state.wipInvites;
231 const web3 = this.web3;
233 //TODO invite status isn't changing/re-rendering... why?
234 this.setState({
235 status: STATUS.FUNDING,
236 invites: invites.map(i => {
237 return { ...i, status: Nothing() };
238 }),
239 });
241 const tankWasUsed = await tank.ensureFundsFor(
242 web3,
243 this.point,
244 this.address,
245 INVITE_COST * invites.length,
246 invites.map(i => i.rawTx),
247 this.askForFunding,
248 () => {
249 this.setState({ fundingMessage: Nothing() });
250 }
251 );
253 this.setState({ status: STATUS.SENDING });
255 //TODO nasty loop, probably move into lib... but so many callbacks!
256 let promises = [];
257 for (let i = 0; i < invites.length; i++) {
258 const invite = invites[i];
260 // send transaction. if it fails, inform the user and skip to next
261 let txHash;
262 try {
263 txHash = await sendSignedTransaction(
264 web3,
265 Just(invite.signedTx),
266 tankWasUsed,
267 () => {}
268 );
269 } catch (err) {
270 console.error('invite tx sending failed', err);
271 this.addError('Invite transaction not sent for ' + invite.email);
272 this.setEmailStatus(i, EMAIL_STATUS.FAIL);
273 continue;
274 }
276 // ask the email sender to send this. we can do this prior to tx confirm,
277 // because the sender service waits for confirm & success for us.
278 // if this fails, inform the user and skip to next
279 try {
280 const mailSuccess = await sendMail(
281 invite.email,
282 invite.ticket,
283 invite.rawTx
284 );
285 if (!mailSuccess) throw new Error();
286 this.setEmailStatus(i, EMAIL_STATUS.DONE);
287 } catch (e) {
288 console.log('email send failed');
289 //NOTE this assumes that the transaction succeeds, but we don't know
290 // that for a fact yet...
291 this.addError(
292 'Invite email failed to send for ' +
293 invite.email +
294 '. Please give them this ticket: ' +
295 invite.ticket
296 );
297 this.setEmailStatus(i, EMAIL_STATUS.FAIL);
298 continue;
299 }
301 // update status on transaction confirm, but don't block on it
302 promises.push(
303 waitForTransactionConfirm(web3, txHash).then(success => {
304 if (success) {
305 this.setEmailStatus(i, EMAIL_STATUS.DONE);
306 } else {
307 console.log('invite tx rejected');
308 this.addError('Invite transaction failed for ' + invite.email);
309 this.setEmailStatus(i, EMAIL_STATUS.FAIL);
310 }
311 return success;
312 })
313 );
314 }
316 const txStatus = await Promise.all(promises);
317 if (txStatus.every(e => e)) {
318 this.setState({ status: STATUS.DONE });
319 } else {
320 this.setState({ status: STATUS.FAIL });
321 }
322 }
324 setEmailStatus(i, status) {
325 const targets = this.state.targets;
326 targets[i].status = Just(status);
327 this.setState({ targets });
328 }
330 addError(error) {
331 const newError = this.state.errors.matchWith({
332 Nothing: () => [error],
333 Just: errs => {
334 errs.value.push(error);
335 return errs.value;
336 },
337 });
338 this.setState({ errors: Just(newError) });
339 }
341 askForFunding(address, minBalance, balance) {
342 this.setState({
343 fundingMessage: Just(
344 `Please make sure ${address} has at least ${fromWei(minBalance)} ETH,` +
345 `we'll continue once that's true. Current balance: ${fromWei(
346 balance
347 )}.` +
348 `Waiting...`
349 ),
350 });
351 }
353 handleEmailInput(i, email) {
354 let targets = this.state.targets;
355 targets[i].email = email;
357 // if it's a valid address, check if it has received an invite before
358 if (email.match(/.*@.*\...+/)) {
359 hasReceived(email).then(res => {
360 targets[i].hasReceived = Just(res);
361 this.setState({ targets });
362 });
363 } else {
364 targets[i].hasReceived = Nothing();
365 }
367 this.setState({ targets });
368 }
370 canSend() {
371 const targets = this.state.targets;
373 // may not have duplicate targets
374 if (new Set(targets.map(t => t.email)).size !== targets.length)
375 return false;
377 // none may have received invites already
378 for (let i = 0; i < targets.length; i++) {
379 const target = targets[i];
380 const res = target.hasReceived.matchWith({
381 Nothing: () => true,
382 Just: has => has.value,
383 });
384 if (res) return false;
385 }
387 return this.state.invitesAvailable.matchWith({
388 Nothing: () => false,
389 Just: invites => invites.value > 0,
390 });
391 }
393 addTarget() {
394 let targets = this.state.targets;
395 targets.push({ email: '', hasReceived: Nothing(), status: Nothing() });
396 this.setState({ targets });
397 }
399 removeTarget() {
400 let targets = this.state.targets;
401 targets.length = targets.length - 1;
402 this.setState({ targets });
403 }
405 render() {
406 const dif =
407 this.state.status === STATUS.DONE ? this.state.targets.length : null;
409 const error = this.state.errors.matchWith({
410 Nothing: () => null,
411 Just: errors => (
412 <Warning className={'mt-8'}>
413 <H3 style={{ marginTop: 0, paddingTop: 0 }}>
414 {'Something went wrong!'}
415 </H3>
416 {errors.value.map(err => (
417 <p>{err}</p>
418 ))}
419 </Warning>
420 ),
421 });
423 const fundingMessage = this.state.fundingMessage.matchWith({
424 Nothing: () => null,
425 Just: msg => <Warning className={'mt-8'}>{msg.value}</Warning>,
426 });
428 let inputs;
429 if (this.state.status === STATUS.DONE) {
430 //TODO proper clickable router thing
431 inputs = '<- Back to Home';
432 } else {
433 const inputDisabled = this.state.status !== STATUS.INPUT;
435 const lessButton = (
436 <Button
437 prop-size={'s narrow'}
438 className={'mt-8'}
439 disabled={inputDisabled || this.state.targets.length === 1}
440 onClick={this.removeTarget}>
441 {'-'}
442 </Button>
443 );
445 const moreButton = (
446 <Button
447 prop-size={'s narrow'}
448 className={'mt-8'}
449 disabled={
450 inputDisabled ||
451 this.state.invitesAvailable.matchWith({
452 Nothing: () => true,
453 Just: inv => inv.value <= this.state.targets.length,
454 })
455 }
456 onClick={this.addTarget}>
457 {'+'}
458 </Button>
459 );
461 let targetInputs = [];
462 for (let i = 0; i < this.state.targets.length; i++) {
463 const target = this.state.targets[i];
464 let progress = target.status.matchWith({
465 Nothing: () => '',
466 Just: status => status.value,
467 });
468 targetInputs.push(
469 <>
470 <Input
471 value={target.email}
472 onChange={value => {
473 this.handleEmailInput(i, value);
474 }}
475 placeholder={'Email address'}
476 disabled={inputDisabled}
477 />
478 {target.hasReceived.matchWith({
479 Nothing: () => null,
480 Just: has =>
481 has.value ? <span>{'×'}</span> : <span>{'°'}</span>,
482 })}
483 {progress}
484 </>
485 );
486 }
488 const submitButton = (
489 <Button
490 prop-size={'xl wide'}
491 className={'mt-8'}
492 disabled={
493 (inputDisabled && this.state.status !== STATUS.CAN_SEND) ||
494 !this.canSend()
495 }
496 onClick={() => {
497 if (this.state.status === STATUS.INPUT) this.generateInvites();
498 if (this.state.status === STATUS.CAN_SEND) this.sendInvites();
499 }}>
500 {this.state.status}
501 </Button>
502 );
504 inputs = (
505 <>
506 {lessButton}
507 {moreButton}
508 {targetInputs}
509 {submitButton}
510 </>
511 );
512 }
514 return (
515 <View>
516 {error}
518 {fundingMessage}
520 {inputs}
521 </View>
522 );
523 }
526// export default compose(
527// withNetwork,
528// withWallet,
529// withPointCursor
530// )(InviteEmail);