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