git.iko.soy/bridge
on abbbcbc help sign in
bridge/src/views/Admin/Reticket/ReticketExecute.js
164 lines 4.7 kB history raw
1import React, { useState, useCallback } from 'react';
2import { Just, Nothing } from 'folktale/maybe';
3import { Grid, H4, Text, ErrorText } from 'indigo-react';
5import { reticketPointBetweenWallets } from 'lib/invite';
6import { fromWei } from 'lib/txn';
7import * as need from 'lib/need';
8import useLifecycle from 'lib/useLifecycle';
10import { useNetwork } from 'store/network';
11import { useWallet } from 'store/wallet';
12import { usePointCursor } from 'store/pointCursor';
13import { useHistory } from 'store/history';
15import { RestartButton, ForwardButton } from 'components/Buttons';
16import WarningBox from 'components/WarningBox';
17import LoadingBar from 'components/LoadingBar';
18import Highlighted from 'components/Highlighted';
19import { WALLET_TYPES } from 'lib/wallet';
21// TODO: maybe we can merge PassportTransfer here?
22export default function ReticketExecute({ newWallet, setNewWallet }) {
23 const { popTo, names, reset } = useHistory();
24 const { web3, contracts } = useNetwork();
25 const { wallet, setWalletType, resetWallet, setUrbitWallet } = useWallet();
26 const { pointCursor } = usePointCursor();
28 const [generalError, setGeneralError] = useState();
29 const [{ label, progress }, setState] = useState({
30 label: 'Starting...',
31 progress: 0,
32 });
33 const [needFunds, setNeedFunds] = useState();
34 const isDone = progress >= 1.0;
36 // start reticketing transactions on mount
37 useLifecycle(() => {
38 (async () => {
39 try {
40 await reticketPointBetweenWallets({
41 fromWallet: need.wallet(wallet),
42 toWallet: newWallet.value.wallet,
43 point: need.point(pointCursor),
44 web3: need.web3(web3),
45 contracts: need.contracts(contracts),
46 onUpdate: handleUpdate,
47 });
48 } catch (err) {
49 setGeneralError(err);
50 }
51 })();
52 });
54 const goToRestart = useCallback(() => {
55 reset();
56 setNewWallet(Nothing());
57 }, [reset, setNewWallet]);
59 const loginAndGoHome = useCallback(() => {
60 // set wallet state
61 resetWallet();
62 setWalletType(WALLET_TYPES.TICKET);
63 setUrbitWallet(Just(newWallet.value.wallet));
64 // (implicit) pointCursor stays the same
65 // rediect to point
66 popTo(names.POINT);
67 }, [resetWallet, setWalletType, setUrbitWallet, newWallet, popTo, names]);
69 const handleUpdate = useCallback(
70 ({ type, state, value }) => {
71 switch (type) {
72 case 'progress':
73 return setState(state);
74 case 'askFunding':
75 return setNeedFunds(value);
76 case 'gotFunding':
77 return setNeedFunds(false);
78 default:
79 console.error(`Unknown update: ${type}`);
80 }
81 },
82 [setState, setNeedFunds]
83 );
85 const renderAdditionalInfo = () => {
86 if (generalError) {
87 return (
88 <>
89 <Grid.Item full>
90 <ErrorText>{generalError.message.toString()}</ErrorText>
91 </Grid.Item>
92 <Grid.Item
93 full
94 className="mt3"
95 as={RestartButton}
96 solid
97 onClick={goToRestart}>
98 Restart
99 </Grid.Item>
100 </>
101 );
102 }
104 if (needFunds) {
105 return (
106 <Grid.Item full>
107 <Highlighted>
108 The address {needFunds.address} needs at least{' '}
109 {fromWei(needFunds.minBalance)} ETH and currently has{' '}
110 {fromWei(needFunds.balance)} ETH. Waiting until the account has
111 enough funds.
112 </Highlighted>
113 </Grid.Item>
114 );
115 }
117 return (
118 <Grid.Item full as={WarningBox}>
119 Never give your Master Ticket to anyone
120 </Grid.Item>
121 );
122 };
124 return (
125 <Grid gap={4} className="mt4">
126 <Grid.Item full as={H4}>
127 {label}
128 </Grid.Item>
130 {!isDone && (
131 <>
132 <Grid.Item full as={Grid} className="mt3" gap={3}>
133 <Grid.Item full as={LoadingBar} progress={progress} />
134 <Grid.Item full>
135 <Text className="f5 green4">
136 This process can take up to 5 minutes to complete. Don't leave
137 this page until the process is complete.
138 </Text>
139 </Grid.Item>
140 </Grid.Item>
142 {renderAdditionalInfo()}
143 </>
144 )}
146 {isDone && (
147 <>
148 <Grid.Item full as={Text}>
149 Your changes are now reflected on-chain and you can use the new
150 ticket to manage your point.
151 </Grid.Item>
152 <Grid.Item
153 full
154 as={ForwardButton}
155 solid
156 accessory="↺"
157 onClick={loginAndGoHome}>
158 Login with New Master Ticket
159 </Grid.Item>
160 </>
161 )}
162 </Grid>
163 );