git.iko.soy/bridge
on a8a2d64 help sign in
bridge/src/views/Admin/Reticket/ReticketExecute.js
178 lines 5.4 kB history raw
1import React, { useState, useCallback } from 'react';
2import { Just, Nothing } from 'folktale/maybe';
3import { Grid, H4, Text, ErrorText } from 'indigo-react';
5import {
6 reticketPointBetweenWallets,
7 TRANSACTION_PROGRESS,
8} from 'lib/reticket';
9import * as need from 'lib/need';
10import useLifecycle from 'lib/useLifecycle';
11import { WALLET_TYPES } from 'lib/wallet';
12import convertToInt from 'lib/convertToInt';
14import { useNetwork } from 'store/network';
15import { useWallet } from 'store/wallet';
16import { usePointCursor } from 'store/pointCursor';
17import { usePointCache } from 'store/pointCache';
18import { useHistory } from 'store/history';
20import { RestartButton, ForwardButton } from 'components/Buttons';
21import WarningBox from 'components/WarningBox';
22import LoadingBar from 'components/LoadingBar';
23import NeedFundsNotice from 'components/NeedFundsNotice';
25const labelForProgress = progress => {
26 if (progress <= 0) {
27 return 'Starting...';
28 } else if (progress <= TRANSACTION_PROGRESS.GENERATING) {
29 return 'Generating Ethereum Transactions...';
30 } else if (progress <= TRANSACTION_PROGRESS.SIGNING) {
31 return 'Signing Ethereum Transactions...';
32 } else if (progress <= TRANSACTION_PROGRESS.FUNDING) {
33 return 'Funding Ethereum Transactions...';
34 } else if (progress <= TRANSACTION_PROGRESS.TRANSFERRING) {
35 return 'Transferring ID...';
36 } else if (progress <= TRANSACTION_PROGRESS.CLEANING) {
37 return 'Cleaning Up...';
38 } else if (progress <= TRANSACTION_PROGRESS.DONE) {
39 return 'Done';
40 }
41};
43export default function ReticketExecute({ newWallet, setNewWallet }) {
44 const { popTo, names, reset } = useHistory();
45 const { web3, contracts, networkType } = useNetwork();
46 const { wallet, setWalletType, resetWallet, setUrbitWallet } = useWallet();
47 const { pointCursor } = usePointCursor();
48 const { getDetails } = usePointCache();
50 const [generalError, setGeneralError] = useState();
51 const [progress, setProgress] = useState(0);
52 const [needFunds, setNeedFunds] = useState();
53 const isDone = progress >= 1.0;
55 // start reticketing transactions on mount
56 useLifecycle(() => {
57 (async () => {
58 const point = need.point(pointCursor);
59 const details = need.details(getDetails(point));
60 const networkRevision = convertToInt(details.keyRevisionNumber, 10);
61 try {
62 await reticketPointBetweenWallets({
63 fromWallet: need.wallet(wallet),
64 toWallet: newWallet.value.wallet,
65 point: point,
66 web3: need.web3(web3),
67 contracts: need.contracts(contracts),
68 networkType,
69 onUpdate: handleUpdate,
70 nextRevision: networkRevision + 1,
71 });
72 } catch (err) {
73 setGeneralError(err);
74 }
75 })();
76 });
78 const goToRestart = useCallback(() => {
79 reset();
80 setNewWallet(Nothing());
81 }, [reset, setNewWallet]);
83 const loginAndGoHome = useCallback(() => {
84 // set wallet state
85 resetWallet();
86 setWalletType(WALLET_TYPES.TICKET);
87 setUrbitWallet(Just(newWallet.value.wallet));
88 // (implicit) pointCursor stays the same
89 // rediect to point
90 popTo(names.POINT);
91 }, [resetWallet, setWalletType, setUrbitWallet, newWallet, popTo, names]);
93 const handleUpdate = useCallback(
94 ({ type, state, value }) => {
95 switch (type) {
96 case 'progress':
97 return setProgress(state);
98 case 'askFunding':
99 return setNeedFunds(value);
100 case 'gotFunding':
101 return setNeedFunds(false);
102 default:
103 console.error(`Unknown update: ${type}`);
104 }
105 },
106 [setProgress, setNeedFunds]
107 );
109 const renderAdditionalInfo = () => {
110 if (generalError) {
111 return (
112 <>
113 <Grid.Item full className="mt4">
114 <ErrorText>{generalError.message.toString()}</ErrorText>
115 </Grid.Item>
116 <Grid.Item
117 full
118 className="mt4"
119 as={RestartButton}
120 solid
121 onClick={goToRestart}>
122 Restart
123 </Grid.Item>
124 </>
125 );
126 }
128 if (needFunds) {
129 return (
130 <Grid.Item full as={NeedFundsNotice} className="mt4" {...needFunds} />
131 );
132 }
134 return (
135 <Grid.Item full as={WarningBox} className="mt4">
136 Never give your Master Ticket to anyone
137 </Grid.Item>
138 );
139 };
141 return (
142 <Grid className="mt4">
143 <Grid.Item full as={H4}>
144 {labelForProgress(progress)}
145 </Grid.Item>
147 {isDone ? (
148 <>
149 <Grid.Item full as={Text} className="mt4">
150 Your changes are now reflected on-chain and you can use the new
151 ticket to manage your point.
152 </Grid.Item>
153 <Grid.Item
154 full
155 as={ForwardButton}
156 solid
157 className="mt4"
158 accessory="↺"
159 onClick={loginAndGoHome}>
160 Login with New Master Ticket
161 </Grid.Item>
162 </>
163 ) : (
164 <>
165 <Grid.Item full as={Grid} className="mt4" gap={3}>
166 <Grid.Item full as={LoadingBar} progress={progress} />
167 <Grid.Item full as={Text} className="f5 green4">
168 This process can take up to 5 minutes to complete. Don't close
169 this page until the process is complete.
170 </Grid.Item>
171 </Grid.Item>
173 {renderAdditionalInfo()}
174 </>
175 )}
176 </Grid>
177 );