@@ -0,0 +1,98 @@
1+import React, { useState } from 'react';
2+import { Just } from 'folktale/maybe';
3+
4+import View from 'components/View';
5+import { ForwardButton } from 'components/Buttons';
6+import { Warning } from 'components/old/Base';
7+
8+import { TRANSACTION_STATES, startTransactions } from 'lib/invite';
9+
10+import { useNetwork } from 'store/network';
11+import { useWallet } from 'store/wallet';
12+import { usePointCursor } from 'store/pointCursor';
13+import useLifecycle from 'lib/useLifecycle';
14+
15+export default function DoReticket({ newWallet, completed }) {
16+ const { web3, contracts } = useNetwork();
17+ const { wallet, setUrbitWallet } = useWallet();
18+ const { pointCursor } = usePointCursor();
19+
20+ const [transactionProgress, setTransactionProgress] = useState(
21+ TRANSACTION_STATES.GENERATING
22+ );
23+ const [errors, setErrors] = useState([]);
24+
25+ // start reticketing transactions on mount
26+ useLifecycle(() => {
27+ startTransactions({
28+ realPointM: pointCursor,
29+ web3,
30+ contracts,
31+ inviteWalletM: wallet,
32+ realWalletM: Just(newWallet.value.wallet),
33+ setUrbitWallet,
34+ updateProgress,
35+ });
36+ });
37+
38+ const updateProgress = notification => {
39+ if (notification.type === 'progress') {
40+ setTransactionProgress(notification.value);
41+ } else if (notification.type === 'notify') {
42+ setErrors([notification.value]);
43+ }
44+ };
45+
46+ const next = () => {
47+ completed();
48+ };
49+
50+ const getErrors = () => {
51+ if (errors.length === 0) return null;
52+
53+ let errorElems = errors.map(e => <span>{e}</span>);
54+
55+ return (
56+ <Warning>
57+ <h3 className={'mb-2'}>{'Warning'}</h3>
58+ {errorElems}
59+ </Warning>
60+ );
61+ };
62+
63+ const errorDisplay = getErrors();
64+
65+ return (
66+ <View>
67+ {errorDisplay}
68+ {transactionProgress.label === TRANSACTION_STATES.DONE.label ? (
69+ <div>
70+ <h1 className="fs-6 lh-8 mb-3">
71+ <span>Success</span>
72+ <span className="ml-4 green">✓</span>
73+ </h1>
74+ <ForwardButton onClick={next}>Done!</ForwardButton>
75+ </div>
76+ ) : (
77+ <div>
78+ <h1 className="fs-6 lh-8 mb-3">Submitting</h1>
79+ <p className="mt-4 mb-4">
80+ This step can take up to five minutes. Please do not leave this page
81+ until the transactions are complete.
82+ </p>
83+ <div className="passport-progress mb-2">
84+ <div
85+ className="passport-progress-filled"
86+ style={{ width: transactionProgress.pct }}
87+ />
88+ </div>
89+ <div className="flex justify-between">
90+ <div className="text-mono text-sm lh-6 green-dark">
91+ {transactionProgress.label}
92+ </div>
93+ </div>
94+ </div>
95+ )}
96+ </View>
97+ );
98+}