Add button to download error log

[ironng]

Uses console.history to build a log history that we can export as a json (the browser does not store the console history natively). Refactors the footer css a little to get the download button placement correct. Also adds a helper method logError to the sagas to both dispatch the error action and log the error to the console. A new onError hook to the saga middleware logs any error not caught in the sagas. There are also some other improvements - a new Description component to display the step description or error and fixes a couple lot size UI related nits.

Screenshots

 Hover  Click 

Sample json log

```json { "type": "warn", "timestamp": "Fri, 24 Jul 2020 00:09:45 GMT", "arguments": { "0": "../tbtc.js/node_modules/bcrypto/lib/node/bn.js 47:17\nModule parse failed: Identifier directly after number (47:17)\nYou may need an appropriate loader to handle this file type.\n| \n| \n> const U8_MAX = (1n << 8n) - 1n;\n| const U16_MAX = (1n << 16n) - 1n;\n| const U32_MAX = (1n << 32n) - 1n;" }, "stack": [ "at printWarnings (http://localhost:3000/static/js/0.chunk.js:265937:17)", "at handleWarnings (http://localhost:3000/static/js/0.chunk.js:265942:3)", "at SockJS.push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage (http://localhost:3000/static/js/0.chunk.js:266007:7)", "at SockJS.push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent (http://localhost:3000/static/js/0.chunk.js:305789:20)", "at http://localhost:3000/static/js/0.chunk.js:306591:16", "at Array.forEach ()", "at SockJS.push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage (http://localhost:3000/static/js/0.chunk.js:306589:17)", "at WebSocketTransport.push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit (http://localhost:3000/static/js/0.chunk.js:305683:18)", "at WebSocketTransport.ws.onmessage (http://localhost:3000/static/js/0.chunk.js:308910:10)" ] }, { "type": "warn", "timestamp": "Fri, 24 Jul 2020 00:09:45 GMT", "arguments": { "0": "../tbtc.js/node_modules/bcoin/node_modules/bcrypto/lib/node/bn.js 52:17\nModule parse failed: Identifier directly after number (52:17)\nYou may need an appropriate loader to handle this file type.\n| \n| \n> const U8_MAX = (1n << 8n) - 1n;\n| const U16_MAX = (1n << 16n) - 1n;\n| const U32_MAX = (1n << 32n) - 1n;" }, "stack": [ "at printWarnings (http://localhost:3000/static/js/0.chunk.js:265937:17)", "at handleWarnings (http://localhost:3000/static/js/0.chunk.js:265942:3)", "at SockJS.push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage (http://localhost:3000/static/js/0.chunk.js:266007:7)", "at SockJS.push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent (http://localhost:3000/static/js/0.chunk.js:305789:20)", "at http://localhost:3000/static/js/0.chunk.js:306591:16", "at Array.forEach ()", "at SockJS.push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage (http://localhost:3000/static/js/0.chunk.js:306589:17)", "at WebSocketTransport.push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit (http://localhost:3000/static/js/0.chunk.js:305683:18)", "at WebSocketTransport.ws.onmessage (http://localhost:3000/static/js/0.chunk.js:308910:10)" ] }, { "type": "warn", "timestamp": "Fri, 24 Jul 2020 00:09:47 GMT", "arguments": { "0": "MetaMask: The event 'close' is deprecated and may be removed in the future. Please use 'disconnect' instead.\nFor more information, see: https://eips.ethereum.org/EIPS/eip-1193" }, "stack": [ "at console.overrideMethod [as warn] (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:2273:24)", "at t.exports._warnOfDeprecation (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:11483)", "at Proxy.on (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:10078)", "at InjectedConnector.activate (http://localhost:3000/static/js/0.chunk.js:186486:25)", "at http://localhost:3000/static/js/0.chunk.js:185954:42", "at _catch (http://localhost:3000/static/js/0.chunk.js:185727:18)", "at http://localhost:3000/static/js/0.chunk.js:185953:30", "at chooseWallet (http://localhost:3000/static/js/main.chunk.js:4411:13)", "at onClick (http://localhost:3000/static/js/main.chunk.js:4458:24)", "at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:266269:18)", "at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:266318:20)", "at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:266371:35)", "at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/0.chunk.js:266386:29)", "at executeDispatch (http://localhost:3000/static/js/0.chunk.js:266471:7)", "at executeDispatchesInOrder (http://localhost:3000/static/js/0.chunk.js:266496:9)", "at executeDispatchesAndRelease (http://localhost:3000/static/js/0.chunk.js:269380:9)", "at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/0.chunk.js:269389:14)", "at forEachAccumulated (http://localhost:3000/static/js/0.chunk.js:269361:12)", "at runEventsInBatch (http://localhost:3000/static/js/0.chunk.js:269406:7)", "at runExtractedPluginEventsInBatch (http://localhost:3000/static/js/0.chunk.js:269616:7)", "at handleTopLevel (http://localhost:3000/static/js/0.chunk.js:269660:9)", "at batchedEventUpdates$1 (http://localhost:3000/static/js/0.chunk.js:287806:16)", "at batchedEventUpdates (http://localhost:3000/static/js/0.chunk.js:266878:16)", "at dispatchEventForLegacyPluginEventSystem (http://localhost:3000/static/js/0.chunk.js:269670:9)", "at attemptToDispatchEvent (http://localhost:3000/static/js/0.chunk.js:270390:9)", "at dispatchEvent (http://localhost:3000/static/js/0.chunk.js:270311:23)", "at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:303605:16)", "at runWithPriority$1 (http://localhost:3000/static/js/0.chunk.js:277156:14)", "at discreteUpdates$1 (http://localhost:3000/static/js/0.chunk.js:287823:16)", "at discreteUpdates (http://localhost:3000/static/js/0.chunk.js:266891:16)", "at dispatchDiscreteEvent (http://localhost:3000/static/js/0.chunk.js:270290:7)" ] }, { "type": "warn", "timestamp": "Fri, 24 Jul 2020 00:09:47 GMT", "arguments": { "0": "MetaMask: The event 'networkChanged' is deprecated and may be removed in the future. Please use 'chainChanged' instead.\nFor more information, see: https://eips.ethereum.org/EIPS/eip-1193" }, "stack": [ "at console.overrideMethod [as warn] (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:2273:24)", "at t.exports._warnOfDeprecation (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:11483)", "at Proxy.on (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:10078)", "at InjectedConnector.activate (http://localhost:3000/static/js/0.chunk.js:186487:25)", "at http://localhost:3000/static/js/0.chunk.js:185954:42", "at _catch (http://localhost:3000/static/js/0.chunk.js:185727:18)", "at http://localhost:3000/static/js/0.chunk.js:185953:30", "at chooseWallet (http://localhost:3000/static/js/main.chunk.js:4411:13)", "at onClick (http://localhost:3000/static/js/main.chunk.js:4458:24)", "at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:266269:18)", "at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:266318:20)", "at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:266371:35)", "at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/0.chunk.js:266386:29)", "at executeDispatch (http://localhost:3000/static/js/0.chunk.js:266471:7)", "at executeDispatchesInOrder (http://localhost:3000/static/js/0.chunk.js:266496:9)", "at executeDispatchesAndRelease (http://localhost:3000/static/js/0.chunk.js:269380:9)", "at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/0.chunk.js:269389:14)", "at forEachAccumulated (http://localhost:3000/static/js/0.chunk.js:269361:12)", "at runEventsInBatch (http://localhost:3000/static/js/0.chunk.js:269406:7)", "at runExtractedPluginEventsInBatch (http://localhost:3000/static/js/0.chunk.js:269616:7)", "at handleTopLevel (http://localhost:3000/static/js/0.chunk.js:269660:9)", "at batchedEventUpdates$1 (http://localhost:3000/static/js/0.chunk.js:287806:16)", "at batchedEventUpdates (http://localhost:3000/static/js/0.chunk.js:266878:16)", "at dispatchEventForLegacyPluginEventSystem (http://localhost:3000/static/js/0.chunk.js:269670:9)", "at attemptToDispatchEvent (http://localhost:3000/static/js/0.chunk.js:270390:9)", "at dispatchEvent (http://localhost:3000/static/js/0.chunk.js:270311:23)", "at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:303605:16)", "at runWithPriority$1 (http://localhost:3000/static/js/0.chunk.js:277156:14)", "at discreteUpdates$1 (http://localhost:3000/static/js/0.chunk.js:287823:16)", "at discreteUpdates (http://localhost:3000/static/js/0.chunk.js:266891:16)", "at dispatchDiscreteEvent (http://localhost:3000/static/js/0.chunk.js:270290:7)" ] }, { "type": "warn", "timestamp": "Fri, 24 Jul 2020 00:09:47 GMT", "arguments": { "0": "MetaMask: The event 'data' is deprecated and may be removed in the future.", "1": "\n at Web3ReactProvider (http://localhost:3000/static/js/0.chunk.js:186145:27)\n at Web3Wrapper (http://localhost:3000/static/js/main.chunk.js:9016:3)\n at Router (http://localhost:3000/static/js/0.chunk.js:295542:30)\n at Provider (http://localhost:3000/static/js/0.chunk.js:293490:20)\n at AppWrapper" }, "stack": [ "at console.overrideMethod [as warn] (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:2273:24)", "at t.exports._warnOfDeprecation (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:11483)", "at Proxy.on (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:10078)", "at RequestManager.push../node_modules/web3/node_modules/web3-core-requestmanager/src/index.js.RequestManager.setProvider (http://localhost:3000/static/js/0.chunk.js:322465:19)", "at new RequestManager (http://localhost:3000/static/js/0.chunk.js:322422:8)", "at Object.packageInit (http://localhost:3000/static/js/0.chunk.js:323334:29)", "at new Web3 (http://localhost:3000/static/js/0.chunk.js:330926:8)", "at instantiateWeb3 (http://localhost:3000/static/js/main.chunk.js:8985:10)", "at http://localhost:3000/static/js/0.chunk.js:186160:92", "at updateMemo (http://localhost:3000/static/js/0.chunk.js:281521:23)", "at Object.useMemo (http://localhost:3000/static/js/0.chunk.js:281972:20)", "at useMemo (http://localhost:3000/static/js/0.chunk.js:298213:25)", "at Web3ReactProvider (http://localhost:3000/static/js/0.chunk.js:186159:72)", "at renderWithHooks (http://localhost:3000/static/js/0.chunk.js:280876:22)", "at updateFunctionComponent (http://localhost:3000/static/js/0.chunk.js:283055:24)", "at beginWork (http://localhost:3000/static/js/0.chunk.js:284580:20)", "at beginWork$1 (http://localhost:3000/static/js/0.chunk.js:289108:18)", "at performUnitOfWork (http://localhost:3000/static/js/0.chunk.js:288096:16)", "at workLoopSync (http://localhost:3000/static/js/0.chunk.js:288072:26)", "at performSyncWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:287690:13)", "at http://localhost:3000/static/js/0.chunk.js:277210:28", "at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:303605:16)", "at runWithPriority$1 (http://localhost:3000/static/js/0.chunk.js:277156:14)", "at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/0.chunk.js:277205:11)", "at flushSyncCallbackQueue (http://localhost:3000/static/js/0.chunk.js:277193:7)", "at scheduleUpdateOnFiber (http://localhost:3000/static/js/0.chunk.js:287133:13)", "at dispatchAction (http://localhost:3000/static/js/0.chunk.js:281713:9)", "at http://localhost:3000/static/js/0.chunk.js:185963:13", "at async chooseWallet (http://localhost:3000/static/js/main.chunk.js:4411:7)" ] }, { "type": "debug", "timestamp": "Fri, 24 Jul 2020 00:09:47 GMT", "arguments": { "0": "netId: 1101\nchainId: 1101" }, "stack": [ "at initializeContracts (http://localhost:3000/static/js/main.chunk.js:8973:11)" ] }, { "type": "debug", "timestamp": "Fri, 24 Jul 2020 00:09:52 GMT", "arguments": { "0": "Looking up Deposit contract at address 0x8aC009D46AD61aC4b08a7f2D72577fC50d207d28..." }, "stack": [ "at Function.forAddress (http://localhost:3000/static/js/main.chunk.js:986:13)", "at DepositFactory.withAddress (http://localhost:3000/static/js/main.chunk.js:841:26)", "at runCallEffect (http://localhost:3000/static/js/0.chunk.js:183854:21)", "at runEffect (http://localhost:3000/static/js/0.chunk.js:184535:7)", "at digestEffect (http://localhost:3000/static/js/0.chunk.js:184602:5)", "at next (http://localhost:3000/static/js/0.chunk.js:184492:9)", "at currCb (http://localhost:3000/static/js/0.chunk.js:184582:7)" ] }, { "type": "debug", "timestamp": "Fri, 24 Jul 2020 00:09:52 GMT", "arguments": { "0": "Looking up Created event for deposit 0x8aC009D46AD61aC4b08a7f2D72577fC50d207d28..." }, "stack": [ "at Function.forAddress (http://localhost:3000/static/js/main.chunk.js:990:13)", "at DepositFactory.withAddress (http://localhost:3000/static/js/main.chunk.js:841:26)", "at runCallEffect (http://localhost:3000/static/js/0.chunk.js:183854:21)", "at runEffect (http://localhost:3000/static/js/0.chunk.js:184535:7)", "at digestEffect (http://localhost:3000/static/js/0.chunk.js:184602:5)", "at next (http://localhost:3000/static/js/0.chunk.js:184492:9)", "at currCb (http://localhost:3000/static/js/0.chunk.js:184582:7)" ] }, { "type": "debug", "timestamp": "Fri, 24 Jul 2020 00:09:52 GMT", "arguments": { "0": "Found keep address 0x09A51173e17bcf7fcfdF5Df1496d696ACea79215." }, "stack": [ "at Function.forAddress (http://localhost:3000/static/js/main.chunk.js:1000:13)", "at async DepositFactory.withAddress (http://localhost:3000/static/js/main.chunk.js:841:12)" ] }, { "type": "debug", "timestamp": "Fri, 24 Jul 2020 00:09:52 GMT", "arguments": { "0": "Looking up Deposit contract at address 0x8aC009D46AD61aC4b08a7f2D72577fC50d207d28..." }, "stack": [ "at Function.forAddress (http://localhost:3000/static/js/main.chunk.js:986:13)", "at DepositFactory.withAddress (http://localhost:3000/static/js/main.chunk.js:841:26)", "at restoreState (http://localhost:3000/static/js/main.chunk.js:8245:38)", "at restoreState.next ()", "at restoreRedemptionState (http://localhost:3000/static/js/main.chunk.js:8348:10)", "at restoreRedemptionState.next ()", "at next (http://localhost:3000/static/js/0.chunk.js:184488:29)", "at currCb (http://localhost:3000/static/js/0.chunk.js:184582:7)", "at runSelectEffect (http://localhost:3000/static/js/0.chunk.js:184060:5)", "at runEffect (http://localhost:3000/static/js/0.chunk.js:184535:7)", "at digestEffect (http://localhost:3000/static/js/0.chunk.js:184602:5)", "at next (http://localhost:3000/static/js/0.chunk.js:184492:9)", "at currCb (http://localhost:3000/static/js/0.chunk.js:184582:7)" ] }, { "type": "debug", "timestamp": "Fri, 24 Jul 2020 00:09:52 GMT", "arguments": { "0": "Looking up Created event for deposit 0x8aC009D46AD61aC4b08a7f2D72577fC50d207d28..." }, "stack": [ "at Function.forAddress (http://localhost:3000/static/js/main.chunk.js:990:13)", "at DepositFactory.withAddress (http://localhost:3000/static/js/main.chunk.js:841:26)", "at restoreState (http://localhost:3000/static/js/main.chunk.js:8245:38)", "at restoreState.next ()", "at restoreRedemptionState (http://localhost:3000/static/js/main.chunk.js:8348:10)", "at restoreRedemptionState.next ()", "at next (http://localhost:3000/static/js/0.chunk.js:184488:29)", "at currCb (http://localhost:3000/static/js/0.chunk.js:184582:7)", "at runSelectEffect (http://localhost:3000/static/js/0.chunk.js:184060:5)", "at runEffect (http://localhost:3000/static/js/0.chunk.js:184535:7)", "at digestEffect (http://localhost:3000/static/js/0.chunk.js:184602:5)", "at next (http://localhost:3000/static/js/0.chunk.js:184492:9)", "at currCb (http://localhost:3000/static/js/0.chunk.js:184582:7)" ] }, { "type": "debug", "timestamp": "Fri, 24 Jul 2020 00:09:52 GMT", "arguments": { "0": "Found keep address 0x09A51173e17bcf7fcfdF5Df1496d696ACea79215." }, "stack": [ "at Function.forAddress (http://localhost:3000/static/js/main.chunk.js:1000:13)", "at async DepositFactory.withAddress (http://localhost:3000/static/js/main.chunk.js:841:12)" ] }, { "type": "debug", "timestamp": "Fri, 24 Jul 2020 00:09:52 GMT", "arguments": { "0": "Found existing Bitcoin address for deposit 0x8aC009D46AD61aC4b08a7f2D72577fC50d207d28..." }, "stack": [ "at Deposit.findOrWaitForPublicKeyPoint (http://localhost:3000/static/js/main.chunk.js:1412:15)" ] }, { "type": "debug", "timestamp": "Fri, 24 Jul 2020 00:09:54 GMT", "arguments": { "0": "Found existing Bitcoin address for deposit 0x8aC009D46AD61aC4b08a7f2D72577fC50d207d28..." }, "stack": [ "at Deposit.findOrWaitForPublicKeyPoint (http://localhost:3000/static/js/main.chunk.js:1412:15)", "at async Deposit.getBitcoinAddress (http://localhost:3000/static/js/main.chunk.js:1063:12)" ] }, { "type": "error", "timestamp": "Fri, 24 Jul 2020 00:10:07 GMT", "arguments": { "0": { "message": "Account 0x3d373D872B7BA29d92Ed47CAA8605b4DD6Ec84eF does not have the required balance of 1000000000000000 to redeem; it only has 999500000000000 available.", "originalStack": [ "Error: Account 0x3d373D872B7BA29d92Ed47CAA8605b4DD6Ec84eF does not have the required balance of 1000000000000000 to redeem; it only has 999500000000000 available.", "at Deposit.requestRedemption (http://localhost:3000/static/js/main.chunk.js:1277:13)" ], "error": {} } }, "stack": [ "at console.overrideMethod [as error] (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:2273:24)", "at logError (http://localhost:3000/static/js/main.chunk.js:8606:11)", "at logError.next ()", "at requestRedemption (http://localhost:3000/static/js/main.chunk.js:8698:65)", "at requestRedemption.next ()", "at next (http://localhost:3000/static/js/0.chunk.js:184488:29)", "at currCb (http://localhost:3000/static/js/0.chunk.js:184582:7)", "at http://localhost:3000/static/js/0.chunk.js:183812:7", "at exec (http://localhost:3000/static/js/0.chunk.js:183349:5)", "at flush (http://localhost:3000/static/js/0.chunk.js:183407:5)", "at asap (http://localhost:3000/static/js/0.chunk.js:183364:5)", "at runPutEffect (http://localhost:3000/static/js/0.chunk.js:183799:3)", "at runEffect (http://localhost:3000/static/js/0.chunk.js:184535:7)", "at digestEffect (http://localhost:3000/static/js/0.chunk.js:184602:5)", "at next (http://localhost:3000/static/js/0.chunk.js:184492:9)", "at currCb (http://localhost:3000/static/js/0.chunk.js:184582:7)", "at http://localhost:3000/static/js/0.chunk.js:183727:5" ] } ] ```

Closes #257

[ironng]

Wasn't sure if the json file is fine as is - is it preferable to keep all the logs to have a better story of what happened, or should we filter to only capture the error logs? Also, any opinions on formatting it more like a typical log file instead of a json?

[ironng]

NB: there are still some errors that don't even make it to the sagas from tbtc.js, we might have to poke around to add some catch clauses to promises there.

[ironng]

@Shadowfiend I'd like to tackle #272 separately - there are a few other mobile widths issues I've seen that I'd like to tackle, and it'd be a good opportunity to just take a pass at all the screens at the same time.

[Shadowfiend]

Ok sounds good! Will merge here shortly in that case :)