@@ -1,25 +1,28 @@
11import React, { useState, useCallback } from 'react';
22import { Just } from 'folktale/maybe';
3−
43import { Grid, H4, Text, ErrorText } from 'indigo-react';
5−import { RestartButton } from 'components/Buttons';
6−import WarningBox from 'components/WarningBox';
7−import LoadingBar from 'components/LoadingBar';
8−import Highlighted from 'components/Highlighted';
94
10−import { claimPointFromInvite } from 'lib/invite';
5+import { reticketPointBetweenWallets } from 'lib/invite';
116import { fromWei } from 'lib/txn';
12−
137import * as need from 'lib/need';
8+import useLifecycle from 'lib/useLifecycle';
9+
1410import { useNetwork } from 'store/network';
1511import { useWallet } from 'store/wallet';
1612import { usePointCursor } from 'store/pointCursor';
17−import useLifecycle from 'lib/useLifecycle';
13+import { useHistory } from 'store/history';
1814
19−//TODO maybe we want to drop in PassportTransfer here?
20−export default function DoReticket({ newWallet, completed }) {
15+import { RestartButton, ForwardButton } from 'components/Buttons';
16+import WarningBox from 'components/WarningBox';
17+import LoadingBar from 'components/LoadingBar';
18+import Highlighted from 'components/Highlighted';
19+import { WALLET_TYPES } from 'lib/wallet';
20+
21+// TODO: maybe we can merge PassportTransfer here?
22+export default function ReticketExecute({ newWallet }) {
23+ const { popTo, names } = useHistory();
2124 const { web3, contracts } = useNetwork();
22− const { wallet, setUrbitWallet } = useWallet();
25+ const { wallet, setWalletType, resetWallet, setUrbitWallet } = useWallet();
2326 const { pointCursor } = usePointCursor();
2427
2528 const [generalError, setGeneralError] = useState();
@@ -28,28 +31,36 @@ export default function DoReticket({ newWallet, completed }) {
2831 progress: 0,
2932 });
3033 const [needFunds, setNeedFunds] = useState();
34+ const isDone = progress >= 1.0;
3135
3236 // start reticketing transactions on mount
3337 useLifecycle(() => {
3438 (async () => {
3539 try {
36− await claimPointFromInvite({
37− inviteWallet: need.wallet(wallet),
38− wallet: newWallet.value.wallet,
40+ await reticketPointBetweenWallets({
41+ fromWallet: need.wallet(wallet),
42+ toWallet: newWallet.value.wallet,
3943 point: need.point(pointCursor),
4044 web3: need.web3(web3),
4145 contracts: need.contracts(contracts),
4246 onUpdate: handleUpdate,
4347 });
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
4748 } catch (err) {
4849 setGeneralError(err);
4950 }
5051 })();
5152 });
5253
54+ const loginAndGoHome = useCallback(() => {
55+ // set wallet state
56+ resetWallet();
57+ setWalletType(WALLET_TYPES.TICKET);
58+ setUrbitWallet(Just(newWallet.value.wallet));
59+ // (implicit) pointCursor stays the same
60+ // rediect to point
61+ popTo(names.POINT);
62+ }, [resetWallet, setWalletType, setUrbitWallet, newWallet, popTo, names]);
63+
5364 const handleUpdate = useCallback(
5465 ({ type, state, value }) => {
5566 switch (type) {
@@ -70,7 +81,7 @@ export default function DoReticket({ newWallet, completed }) {
7081 if (generalError) {
7182 return (
7283 <>
73− <Grid.Item full className="mt8">
84+ <Grid.Item full>
7485 <ErrorText>{generalError.message.toString()}</ErrorText>
7586 </Grid.Item>
7687 <Grid.Item
@@ -85,7 +96,7 @@ export default function DoReticket({ newWallet, completed }) {
8596
8697 if (needFunds) {
8798 return (
88− <Grid.Item full className="mt8">
99+ <Grid.Item full>
89100 <Highlighted>
90101 The address {needFunds.address} needs at least{' '}
91102 {fromWei(needFunds.minBalance)} ETH and currently has{' '}
@@ -96,33 +107,51 @@ export default function DoReticket({ newWallet, completed }) {
96107 );
97108 }
98109
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− }
106−
107− return null;
110+ return (
111+ <Grid.Item full as={WarningBox}>
112+ Never give your Master Ticket to anyone
113+ </Grid.Item>
114+ );
108115 };
109116
110117 return (
111− <Grid className={'auto-rows-min'}>
118+ <Grid gap={4} className="mt4">
112119 <Grid.Item full as={H4}>
113120 {label}
114121 </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>
124122
125− {renderAdditionalInfo()}
123+ {!isDone && (
124+ <>
125+ <Grid.Item full as={Grid} className="mt3" gap={3}>
126+ <Grid.Item full as={LoadingBar} progress={progress} />
127+ <Grid.Item full>
128+ <Text className="f5 green4">
129+ This process can take up to 5 minutes to complete. Don't leave
130+ this page until the process is complete.
131+ </Text>
132+ </Grid.Item>
133+ </Grid.Item>
134+
135+ {renderAdditionalInfo()}
136+ </>
137+ )}
138+
139+ {isDone && (
140+ <>
141+ <Grid.Item full as={Text}>
142+ Your changes are now reflected on-chain and you can use the new
143+ ticket to manage your point.
144+ </Grid.Item>
145+ <Grid.Item
146+ full
147+ as={ForwardButton}
148+ solid
149+ accessory="↺"
150+ onClick={loginAndGoHome}>
151+ Login with New Master Ticket
152+ </Grid.Item>
153+ </>
154+ )}
126155 </Grid>
127156 );
128157}