@@ -1,22 +1,27 @@
11import { useCallback, useEffect, useState } from 'react';
22import { Just } from 'folktale/maybe';
3−import { fromWei, toWei } from 'web3-utils';
3+import { toWei } from 'web3-utils';
44
55import { useNetwork } from 'store/network';
66import { useWallet } from 'store/wallet';
77import { usePointCursor } from 'store/pointCursor';
8−import { useSuggestedGasPrice } from 'lib/useSuggestedGasPrice';
98
10−import { GAS_LIMITS } from './constants';
9+import {
10+ GAS_LIMITS,
11+ DEFAULT_GAS_PRICE_GWEI,
12+ PROGRESS_ANIMATION_DELAY_MS,
13+} from './constants';
1114import {
1215 signTransaction,
1316 sendSignedTransaction,
1417 waitForTransactionConfirm,
1518 hexify,
1619} from './txn';
17−import * as need from './need';
18−import { ensureFundsFor } from './tank';
19−import useDeepEqualReference from './useDeepEqualReference';
20+import * as need from 'lib/need';
21+import { ensureFundsFor } from 'lib/tank';
22+import useDeepEqualReference from 'lib/useDeepEqualReference';
23+import useGasPrice from 'lib/useGasPrice';
24+import timeout from 'lib/timeout';
2025
2126const STATE = {
2227 NONE: 'NONE',
@@ -37,7 +42,7 @@ export default function useEthereumTransaction(
3742 transactionBuilder,
3843 refetch,
3944 initialGasLimit = GAS_LIMITS.DEFAULT,
40− initialGasPrice = 20
45+ initialGasPrice = DEFAULT_GAS_PRICE_GWEI
4146) {
4247 const { wallet, walletType, walletHdPath } = useWallet();
4348 const { web3, networkType } = useNetwork();
@@ -59,14 +64,13 @@ export default function useEthereumTransaction(
5964 const [state, setState] = useState(STATE.NONE);
6065 const [chainId, setChainId] = useState();
6166 const [nonce, setNonce] = useState();
62− const [gasPrice, setGasPrice] = useState(initialGasPrice); // gwei
63− const [suggestedGasPrice, setSuggestedGasPrice] = useState(gasPrice); // gwei
64− const { gasPrice: estimatedGasPrice } = useSuggestedGasPrice();
67+ const { gasPrice, setGasPrice, resetGasPrice } = useGasPrice(initialGasPrice);
6568 const [gasLimit] = useState(initialGasLimit);
6669 const [unsignedTransaction, setUnsignedTransaction] = useState();
6770 const [signedTransaction, setSignedTransaction] = useState();
6871 const [txHash, setTxHash] = useState();
6972 const [needFunds, setNeedFunds] = useState();
73+ const [confirmationProgress, setConfirmationProgress] = useState(0.0);
7074
7175 const initializing = nonce === undefined || chainId === undefined;
7276 const constructed = !!unsignedTransaction;
@@ -128,6 +132,7 @@ export default function useEthereumTransaction(
128132
129133 const broadcast = useCallback(async () => {
130134 try {
135+ setConfirmationProgress(0.0);
131136 setError(undefined);
132137
133138 const rawTx = hexify(signedTransaction.serialize());
@@ -158,8 +163,14 @@ export default function useEthereumTransaction(
158163 setState(STATE.BROADCASTED);
159164 setTxHash(txHash);
160165
166+ await timeout(PROGRESS_ANIMATION_DELAY_MS);
167+
168+ setConfirmationProgress(0.2);
169+
161170 await waitForTransactionConfirm(_web3, txHash);
162171
172+ setConfirmationProgress(0.9);
173+
163174 setState(STATE.CONFIRMED);
164175 } catch (error) {
165176 setError(error);
@@ -179,25 +190,12 @@ export default function useEthereumTransaction(
179190 setSignedTransaction(undefined);
180191 setNonce(undefined);
181192 setChainId(undefined);
182− setGasPrice(suggestedGasPrice);
193+ resetGasPrice();
183194 setState(STATE.NONE);
184195 setError(undefined);
185196 setNeedFunds(undefined);
186− }, [suggestedGasPrice, setError]);
187−
188− const resetGasPrice = useCallback(() => setGasPrice(suggestedGasPrice), [
189− setGasPrice,
190− suggestedGasPrice,
191− ]);
192−
193− useEffect(() => {
194− const gasPrice = parseInt(
195− fromWei(estimatedGasPrice.toString(), 'gwei'),
196− 10
197− );
198− setSuggestedGasPrice(gasPrice);
199− setGasPrice(gasPrice);
200− }, [estimatedGasPrice]);
197+ setConfirmationProgress(0.0);
198+ }, [resetGasPrice, setError]);
201199
202200 useEffect(() => {
203201 let mounted = true;
@@ -226,15 +224,7 @@ export default function useEthereumTransaction(
226224 })();
227225
228226 return () => (mounted = false);
229− }, [
230− _wallet,
231− _web3,
232− setError,
233− nonce,
234− chainId,
235− networkType,
236− estimatedGasPrice,
237− ]);
227+ }, [_wallet, _web3, setError, nonce, chainId, networkType, initialGasPrice]);
238228
239229 useEffect(() => {
240230 let mounted = true;
@@ -260,6 +250,14 @@ export default function useEthereumTransaction(
260250 return;
261251 }
262252
253+ setConfirmationProgress(1.0);
254+
255+ await timeout(PROGRESS_ANIMATION_DELAY_MS);
256+
257+ if (!mounted) {
258+ return;
259+ }
260+
263261 setState(STATE.COMPLETED);
264262 })();
265263 }
@@ -283,7 +281,7 @@ export default function useEthereumTransaction(
283281 reset,
284282 error,
285283 inputsLocked,
286− //
284+ confirmationProgress,
287285 txHash,
288286 signedTransaction,
289287 gasPrice,