bdcbeba · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

show actual cost of transaction once confirmed

bdcbebaLiam Fitzgerald7 years ago

src/components/InlineEthereumTransaction.js+5−4

compare with master

unifiedsplit

@@ -50,6 +50,7 @@ export default function InlineEthereumTransaction({

50 confirmationProgress,

51 gasLimit,

52 unsignedTransactions,

53+ finalCost,

54 // additional from parent

55 // additional from parent

55 label = 'Generate & Sign Transaction',

56 label = 'Generate & Sign Transaction',

@@ -113,7 +114,7 @@ export default function InlineEthereumTransaction({

113 {showReceipt && (

114 {showReceipt && (

114 <TransactionReceipt

115 <TransactionReceipt

115 txHashes={txHashes}

116 txHashes={txHashes}

116− maxCost={maxCost}

117+ finalCost={finalCost}

117 onClose={toggleShowReceipt}

118 onClose={toggleShowReceipt}

118 />

119 />

119 )}

120 )}

@@ -184,7 +185,7 @@ export default function InlineEthereumTransaction({

184 .mul(toBN(numTxs)),

185 .mul(toBN(numTxs)),

185 'gwei'

186 'gwei'

186 ),

187 ),

187− 'eth'

188+ 'ether'

188 ),

189 ),

189 [gasLimit, gasPrice, numTxs]

190 [gasLimit, gasPrice, numTxs]

190 );

191 );

@@ -328,7 +329,7 @@ function SignedTransactionList({ serializedTxsHex, nonce, maxCost }) {

328 ));

329 ));

329}

330}

330

331

331−function TransactionReceipt({ txHashes, maxCost, onClose }) {

332+function TransactionReceipt({ txHashes, finalCost, onClose }) {

332 const txUrls = useExploreTxUrls(txHashes);

333 const txUrls = useExploreTxUrls(txHashes);

333 return (

334 return (

334 <>

335 <>

@@ -340,7 +341,7 @@ function TransactionReceipt({ txHashes, maxCost, onClose }) {

340 </Grid.Item>

341 </Grid.Item>

341 <Grid.Item full as={Flex} justify="between" className="pv2 black f5">

342 <Grid.Item full as={Flex} justify="between" className="pv2 black f5">

342 <Flex.Item>Transaction Cost</Flex.Item>

343 <Flex.Item>Transaction Cost</Flex.Item>

343− <Flex.Item className="mono">{maxCost} ETH</Flex.Item>

344+ <Flex.Item className="mono">{finalCost} ETH</Flex.Item>

344 </Grid.Item>

345 </Grid.Item>

345 <Grid.Divider />

346 <Grid.Divider />

346 <Grid.Item full as={Flex} col className="pv4">

347 <Grid.Item full as={Flex} col className="pv4">

src/lib/txn.js+1

@@ -160,6 +160,7 @@ const waitForTransactionConfirm = (web3, txHash) => {

160 if (!success) {

161 return bail(new Error('Transaction failed.'));

162 }

163+ return receipt;

163 }, RETRY_OPTIONS);

164 }, RETRY_OPTIONS);

164};

165};

165

166

src/lib/useEthereumTransaction.js+22−2

@@ -22,7 +22,7 @@ import { ensureFundsFor } from 'lib/tank';

22import useDeepEqualReference from 'lib/useDeepEqualReference';

23import useGasPrice from 'lib/useGasPrice';

24import timeout from 'lib/timeout';

25−import { safeToWei } from 'lib/lib';

25+import { safeToWei, safeFromWei } from 'lib/lib';

27const STATE = {

28 NONE: 'NONE',

@@ -73,6 +73,8 @@ export default function useEthereumTransaction(

73 const [needFunds, setNeedFunds] = useState();

74 const [confirmationProgress, setConfirmationProgress] = useState(0.0);

76+ const [finalCost, setFinalCost] = useState();

77+

76 const initializing = nonce === undefined || chainId === undefined;

78 const initializing = nonce === undefined || chainId === undefined;

77 const constructed = !!unsignedTransactions;

79 const constructed = !!unsignedTransactions;

78 const isDefaultState = state === STATE.NONE;

80 const isDefaultState = state === STATE.NONE;

@@ -186,10 +188,26 @@ export default function useEthereumTransaction(

186

188

187 setConfirmationProgress(0.2);

189 setConfirmationProgress(0.2);

188

190

189− await Promise.all(

191+ const receipts = await Promise.all(

190 txHashes.map(txHash => waitForTransactionConfirm(_web3, txHash))

192 txHashes.map(txHash => waitForTransactionConfirm(_web3, txHash))

191 );

193 );

192

194

195+ setFinalCost(

196+ safeFromWei(

197+ safeToWei(

198+ receipts.reduce(

199+ (acc, receipt) =>

200+ toBN(receipt.gasUsed)

201+ .mul(toBN(gasPrice))

202+ .add(acc),

203+ toBN(0)

204+ ),

205+ 'gwei'

206+ ),

207+ 'ether'

208+ )

209+ );

210+

193 setConfirmationProgress(0.9);

211 setConfirmationProgress(0.9);

194

212

195 setState(STATE.CONFIRMED);

213 setState(STATE.CONFIRMED);

@@ -217,6 +235,7 @@ export default function useEthereumTransaction(

217 setError(undefined);

235 setError(undefined);

218 setNeedFunds(undefined);

236 setNeedFunds(undefined);

219 setConfirmationProgress(0.0);

237 setConfirmationProgress(0.0);

238+ setFinalCost(undefined);

220 }, [resetGasPrice, setError]);

239 }, [resetGasPrice, setError]);

221

240

222 useEffect(() => {

241 useEffect(() => {

@@ -314,6 +333,7 @@ export default function useEthereumTransaction(

314 needFunds,

333 needFunds,

315 gasLimit,

334 gasLimit,

316 unsignedTransactions,

335 unsignedTransactions,

336+ finalCost,

317 });

337 });

318

338

319 return { ...values, bind: values };

339 return { ...values, bind: values };