git.iko.soy/bridge
on d760cbf help sign in
bridge/src/views/Reticket/DoReticket.js
128 lines 3.7 kB history raw
1import React, { useState, useCallback } from 'react';
2import { Just } from 'folktale/maybe';
4import { Grid, H4, Text, ErrorText } from 'indigo-react';
5import { RestartButton } from 'components/Buttons';
6import WarningBox from 'components/WarningBox';
7import LoadingBar from 'components/LoadingBar';
8import Highlighted from 'components/Highlighted';
10import { claimPointFromInvite } from 'lib/invite';
11import { fromWei } from 'lib/txn';
13import * as need from 'lib/need';
14import { useNetwork } from 'store/network';
15import { useWallet } from 'store/wallet';
16import { usePointCursor } from 'store/pointCursor';
17import useLifecycle from 'lib/useLifecycle';
19//TODO maybe we want to drop in PassportTransfer here?
20export default function DoReticket({ newWallet, completed }) {
21 const { web3, contracts } = useNetwork();
22 const { wallet, setUrbitWallet } = useWallet();
23 const { pointCursor } = usePointCursor();
25 const [generalError, setGeneralError] = useState();
26 const [{ label, progress }, setState] = useState({
27 label: 'Starting...',
28 progress: 0,
29 });
30 const [needFunds, setNeedFunds] = useState();
32 // start reticketing transactions on mount
33 useLifecycle(() => {
34 (async () => {
35 try {
36 await claimPointFromInvite({
37 inviteWallet: need.wallet(wallet),
38 wallet: newWallet.value.wallet,
39 point: need.point(pointCursor),
40 web3: need.web3(web3),
41 contracts: need.contracts(contracts),
42 onUpdate: handleUpdate,
43 });
44 //TODO would it be better for this to happen in completed()?
45 setUrbitWallet(Just(newWallet.value.wallet));
46 completed(); //TODO don't auto-redirect
47 } catch (err) {
48 setGeneralError(err);
49 }
50 })();
51 });
53 const handleUpdate = useCallback(
54 ({ type, state, value }) => {
55 switch (type) {
56 case 'progress':
57 return setState(state);
58 case 'askFunding':
59 return setNeedFunds(value);
60 case 'gotFunding':
61 return setNeedFunds(false);
62 default:
63 console.error(`Unknown update: ${type}`);
64 }
65 },
66 [setState, setNeedFunds]
67 );
69 const renderAdditionalInfo = () => {
70 if (generalError) {
71 return (
72 <>
73 <Grid.Item full className="mt8">
74 <ErrorText>{generalError.message.toString()}</ErrorText>
75 </Grid.Item>
76 <Grid.Item
77 full
78 className="mt3"
79 as={RestartButton}
80 //TODO onClick={goToRestart}
81 />
82 </>
83 );
84 }
86 if (needFunds) {
87 return (
88 <Grid.Item full className="mt8">
89 <Highlighted>
90 The address {needFunds.address} needs at least{' '}
91 {fromWei(needFunds.minBalance)} ETH and currently has{' '}
92 {fromWei(needFunds.balance)} ETH. Waiting until the account has
93 enough funds.
94 </Highlighted>
95 </Grid.Item>
96 );
97 }
99 if (progress < 100) {
100 return (
101 <Grid.Item full as={WarningBox} className="mt8">
102 Never give your Master Ticket to anyone
103 </Grid.Item>
104 );
105 }
107 return null;
108 };
110 return (
111 <Grid className={'auto-rows-min'}>
112 <Grid.Item full as={H4}>
113 {label}
114 </Grid.Item>
115 <Grid.Item full as={Grid} className="mt3" gap={3}>
116 <Grid.Item full as={LoadingBar} progress={progress} />
117 <Grid.Item full>
118 <Text className="f5 green4">
119 This process can take up to 5 minutes to complete. Don't leave this
120 page until the process is complete.
121 </Text>
122 </Grid.Item>
123 </Grid.Item>
125 {renderAdditionalInfo()}
126 </Grid>
127 );