git.iko.soy/bridge
on a2a5eed help sign in
bridge/src/views/Reticket/DoReticket.js
98 lines 2.7 kB history raw
1import React, { useState } from 'react';
2import { Just } from 'folktale/maybe';
4import View from 'components/View';
5import { ForwardButton } from 'components/Buttons';
6import { Warning } from 'components/old/Base';
8import { TRANSACTION_STATES, startTransactions } from 'lib/invite';
10import { useNetwork } from 'store/network';
11import { useWallet } from 'store/wallet';
12import { usePointCursor } from 'store/pointCursor';
13import useLifecycle from 'lib/useLifecycle';
15export default function DoReticket({ newWallet, completed }) {
16 const { web3, contracts } = useNetwork();
17 const { wallet, setUrbitWallet } = useWallet();
18 const { pointCursor } = usePointCursor();
20 const [transactionProgress, setTransactionProgress] = useState(
21 TRANSACTION_STATES.GENERATING
22 );
23 const [errors, setErrors] = useState([]);
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 });
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 };
46 const next = () => {
47 completed();
48 };
50 const getErrors = () => {
51 if (errors.length === 0) return null;
53 let errorElems = errors.map(e => <span>{e}</span>);
55 return (
56 <Warning>
57 <h3 className={'mb-2'}>{'Warning'}</h3>
58 {errorElems}
59 </Warning>
60 );
61 };
63 const errorDisplay = getErrors();
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 );