git.iko.soy/bridge
on 35f671e help sign in
bridge/src/views/Reticket/DoReticket.js
100 lines 2.9 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, claimPointFromInvite } from 'lib/invite';
10import * as need from 'lib/need';
11import { useNetwork } from 'store/network';
12import { useWallet } from 'store/wallet';
13import { usePointCursor } from 'store/pointCursor';
14import useLifecycle from 'lib/useLifecycle';
16export default function DoReticket({ newWallet, completed }) {
17 const { web3, contracts } = useNetwork();
18 const { wallet, setUrbitWallet } = useWallet();
19 const { pointCursor } = usePointCursor();
21 const [transactionProgress, setTransactionProgress] = useState(
22 TRANSACTION_STATES.GENERATING
23 );
24 const [errors, setErrors] = useState([]);
26 // start reticketing transactions on mount
27 useLifecycle(() => {
28 claimPointFromInvite({
29 inviteWallet: need.wallet(wallet),
30 wallet: newWallet.value.wallet,
31 point: need.point(pointCursor),
32 web3: need.web3(web3),
33 contracts: need.contracts(contracts),
34 onUpdate: updateProgress,
35 }).then(() => {
36 setUrbitWallet(newWallet.value.wallet);
37 });
38 });
40 const updateProgress = notification => {
41 if (notification.type === 'progress') {
42 setTransactionProgress(notification.value);
43 } else if (notification.type === 'notify') {
44 setErrors([notification.value]);
45 }
46 };
48 const next = () => {
49 completed();
50 };
52 const getErrors = () => {
53 if (errors.length === 0) return null;
55 let errorElems = errors.map(e => <span>{e}</span>);
57 return (
58 <Warning>
59 <h3 className={'mb-2'}>{'Warning'}</h3>
60 {errorElems}
61 </Warning>
62 );
63 };
65 const errorDisplay = getErrors();
67 return (
68 <View>
69 {errorDisplay}
70 {transactionProgress.label === TRANSACTION_STATES.DONE.label ? (
71 <div>
72 <h1 className="fs-6 lh-8 mb-3">
73 <span>Success</span>
74 <span className="ml-4 green">✓</span>
75 </h1>
76 <ForwardButton onClick={next}>Done!</ForwardButton>
77 </div>
78 ) : (
79 <div>
80 <h1 className="fs-6 lh-8 mb-3">Submitting</h1>
81 <p className="mt-4 mb-4">
82 This step can take up to five minutes. Please do not leave this page
83 until the transactions are complete.
84 </p>
85 <div className="passport-progress mb-2">
86 <div
87 className="passport-progress-filled"
88 style={{ width: transactionProgress.pct }}
89 />
90 </div>
91 <div className="flex justify-between">
92 <div className="text-mono text-sm lh-6 green-dark">
93 {transactionProgress.label}
94 </div>
95 </div>
96 </div>
97 )}
98 </View>
99 );