31:T11c8,{ if (lastBlock != null) { return html`

#${lastBlock.number}

${distanceFromNowInWords}

${connectionStatusMessage.cloneNode(true)}

${formatBaseFeePerGas( lastBlock.baseFeePerGas )}gwei ${trendIcon.cloneNode(true)}

($${baseFeePerGasToUsd(lastBlock.baseFeePerGas)})

${formatPercentile(networkCongestion)}

${formatBaseFeePerGas( baseFeeAtPercentile(66) )}gwei

($${baseFeePerGasToUsd(baseFeeAtPercentile(66))})

`; } else { return html``; } }32:T880,benchmark("graph1", () => { if (blocks.length > 0) { /* const domain = blocks.length > 0 ? [ new Date( // Q: Math.max or Math.min? Math.min( blocks[0].time.getTime(), lastBlock.time.getTime() - fixedTimeWindowForGraph ) ), lastBlock.time ] : [ new Date(lastBlock.time.getTime() - fixedTimeWindowForGraph), lastBlock.time ]; */ return Plot.plot({ width, height: 200, x: { // domain: domain, label: "time (in your tz) →" }, y: { // grid: true, // nice: true, // type: "sqrt", label: "↑ base fee per gas (gwei)" }, marks: [ Plot.ruleY([0]), Plot.line(blocks, { x: "time", y: "baseFeePerGas", stroke: colors.blue, strokeOpacity: 0.25 }), // Plot.line( // blocks, // Plot.windowY({ // x: "time", // y: "baseFeePerGas", // // moving average // reduce: "mean", // k: 100, // anchor: "end", // stroke: colors.blue // }) // ), Plot.ruleY([blocks[blocks.length - 1].baseFeePerGas], { // stroke: colors.brightRed, strokeOpacity: 1, strokeWidth: 1 }) // Plot.ruleY([averageBaseFee], { // stroke: colors.brightRed, // strokeOpacity: 0.5, // strokeWidth: 2 // }), // Plot.ruleY([baseFeesAtKeyPercentiles["90"]], { // stroke: colors.violet, // strokeOpacity: 1, // strokeWidth: 1 // }) // Plot.ruleY([baseFeesAtKeyPercentiles["95"]], { // stroke: colors.red, // strokeOpacity: 1, // strokeWidth: 1 // }) // Plot.ruleY([baseFeeAtDoubleStdDevAboveAverage], { // stroke: colors.teal, // strokeOpacity: 1, // strokeWidth: 1 // }) ] }); } else { return html``; } })33:T715,benchmark("graph2", () => { if (blocks.length > 0) { const last20Blocks = blocks.length > 20 ? blocks.slice(-20) : blocks; return Plot.plot({ width, height: 200, marginRight: 30, marginTop: 30, x: { /* domain: [ // new Date( // subsetOfBlocksForTrendDetection[0].time.getTime() + // (tick.getTime() - lastBlock.time.getTime()) // ), new Date( last20Blocks[0].time.getTime() + (tick.getTime() - lastBlock.time.getTime()) ), tick ], */ ticks: 10, tickFormat: (tick) => tick, label: "block number →" }, y: { label: "↑ base fee per gas (gwei)" // nice: true, // type: "log" }, marks: [ Plot.ruleY([0]), Plot.line(last20Blocks, { x: "number", y: "baseFeePerGas", stroke: colors.blue, strokeOpacity: 0.25 }), Plot.line( [ subsetOfBlocksForTrendDetection[0], subsetOfBlocksForTrendDetection[ subsetOfBlocksForTrendDetection.length - 1 ] ], { x: "number", y: "baseFeePerGas", stroke: trendColor } ), Plot.text( [ subsetOfBlocksForTrendDetection[0], subsetOfBlocksForTrendDetection[ subsetOfBlocksForTrendDetection.length - 1 ] ], { x: "number", y: (d) => d.baseFeePerGas + 20, text: (d) => `${formatBaseFeePerGas(d.baseFeePerGas)} gwei`, fill: trendColor } ) ] }); } else { return html``; } })34:T55f,/* benchmark("graph2", () => { if (blocks.length > 0) { const baseFee66 = baseFeeAtPercentile(66); return Plot.plot({ height: 200, marginLeft: 50, x: { label: "base fee per gas (gwei) →" }, y: { type: "sqrt", label: "↑ frequency" }, marks: [ Plot.ruleY([0]), Plot.rectY(baseFeePerGasBins, { x1: (d) => d.threshold.start, x2: (d) => d.threshold.end, y: (d) => d.size, fill: colors.blue, fillOpacity: 0.25 }), Plot.ruleX([largestBaseFeePerGasBin], { x: (d) => d.threshold.start + (d.threshold.end - d.threshold.start) / 2 }), Plot.text([largestBaseFeePerGasBin], { x: (d) => d.threshold.start + 120, y: (d) => d.size - 2000, text: (d) => `most popular: ${Math.round(d.threshold.start)}–${Math.round( d.threshold.end + 1 )} gwei` }), Plot.ruleX([baseFee66], { stroke: colors.red }), Plot.text([baseFee66], { fill: colors.red, x: (d) => d + 90, y: () => largestBaseFeePerGasBin.size - 6000, text: () => `66th percentile: ${formatBaseFeePerGas(baseFee66)} gwei` }) ] }); } else { return html``; } }) */35:T86e,baseFeePerGasBins = { // Partition into percentiles // Source: /* const bin = d3 .bin() .thresholds((data, min, max) => d3.range(10).map((t) => min + (t / 10) * (max - min)) ) .value((d) => d.baseFeePerGas); const bins = bin(blocks); // console.log("bins", bins); return bins.map((bin) => { const threshold = { start: bin.x0, end: bin.x1 }; const size = bin.length; return { threshold, size }; }); */ const allBaseFeesPerGas = blocks .map((block) => block.baseFeePerGas) .sort((a, b) => a - b); const chunkRequests = _.uniqBy( [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((percentile) => { const index = Math.floor(allBaseFeesPerGas.length * (percentile / 100)); return { percentile, index }; }), "index" ); // console.log( // "allBaseFeesPerGas", // allBaseFeesPerGas, // "chunkRequests", // chunkRequests // ); const bins = []; for (let i = 0; i < chunkRequests.length - 1; i++) { const [chunkRequest, nextChunkRequest] = [ chunkRequests[i], chunkRequests[i + 1] ]; const chunk = allBaseFeesPerGas.slice( chunkRequest.index, nextChunkRequest.index ); bins.push({ threshold: { start: chunk[0], end: chunk[chunk.length - 1] }, size: chunk.length }); } return bins; /* const minBaseFeePerGas = _.min(baseFeesPerGas); const maxBaseFeePerGas = _.max(baseFeesPerGas); const size const binThresholds = _.range( 0, Math.floor(maxBaseFeePerGas / binSize) * binSize, binSize ); const initialBins = binThresholds.reduce((bins, threshold) => { return { ...bins, [threshold]: 0 }; }, {}); const bins = blocks.reduce((bins, block) => { const nearestThreshold = Math.floor(block.baseFeePerGas / binSize) * binSize; return { ...bins, [nearestThreshold]: bins[nearestThreshold] + 1 }; }, initialBins); return binThresholds.map((threshold) => { return { threshold: { start: threshold, end: threshold + binSize - 1 }, size: bins[threshold] }; }); */ }36:T63a,subscription = Generators.observe((notify) => { // const receivedBlocks = []; notify({ connectionStatus: "pending" }); if (isDisabled || requestedBlocks.length === 0) { return; } if (web3Ws != null) { console.log("Subscribing to newBlockHeaders..."); let subscription; const subscribe = () => { subscription = web3Ws.eth.subscribe( "newBlockHeaders", (error, blockHeader) => { if (error != null) { // if (/^connection not open/.test(error.message)) { // console.error("Connection not open, resubscribing..."); // subscribe(); // } else { console.error("Encountered an error", error); notify({ connectionStatus: "disconnected" }); // } } else if (blockHeader != null) { const block = { number: blockHeader.number, baseFeePerGas: weiToGwei(hexToDec(blockHeader.baseFeePerGas)), time: new Date() }; // receivedBlocks.push(block); upsertBlocks([block]); } } ); notify({ connectionStatus: "connected" }); }; const unsubscribe = () => { console.log("Unsubscribing from newBlockHeaders..."); subscription.unsubscribe((error, success) => { if (error != null) { console.error("Could not unsubscribe from newBlockHeaders", error); } else { notify({ connectionStatus: "pending" }); } }); }; subscribe(); return () => unsubscribe(); } })37:T556,requestedBlocks = { if (oldestBlockToRequest == null) { return []; } const oldestBlockTimeToRequest = oldestBlockToRequest.timestamp * 1000; const newestBlockTime = newestBlock.timestamp * 1000; const blockNumbers = _.range(oldestBlockToRequest.number, newestBlock.number); const baseFeesPerGas = feeHistory.baseFeePerGas; const requestedBlocks = _.zip( blockNumbers.slice(0, baseFeesPerGas.length), baseFeesPerGas ).map(([number, baseFeePerGas], i) => { // eth_feeHistory doesn't give us timestamps, // so we have to fill them in linearly based on the start and end block time const time = new Date( oldestBlockTimeToRequest + (newestBlockTime - oldestBlockTimeToRequest) * (i / (blockNumbers.length - 1)) ); /* const time = i === 0 ? oldestBlockTime : i === blockNumbers.length - 1 ? newestBlockTime : null; */ // const baseFeePerGas = weiToGwei(hexToDec(baseFeePerGasAsWeiHex)); return { number, baseFeePerGas, time }; }); console.log("requestedBlocks", requestedBlocks); try { await upsertBlocks(requestedBlocks); } catch (error) { if (error instanceof Dexie.BulkError) { console.log("Some blocks failed to get upserted", error); } else { throw error; } } return requestedBlocks; }38:T733,feeHistory = { const feeHistory = { baseFeePerGas: [] }; yield feeHistory; if (isDisabled) { return; } /* for (let i = 0; i < chunkRequests.length; i++) { const { blockCount, newestBlock } = chunkRequests[i]; await Promises.delay(200); const baseFeePerGas = _.times(blockCount, () => decToHex(Math.floor(gweiToWei(100 + Math.random() * 20))) ); feeHistory.baseFeePerGas = [...feeHistory.baseFeePerGas, ...baseFeePerGas]; yield feeHistory; } */ /* for (const { blockCount, newestBlock } of chunkRequests) { // Returns block information starting from the given newestBlock - given blockCount and going forward const result = await web3Http.eth.getFeeHistory(blockCount, newestBlock); feeHistory.baseFeePerGas = [ ...feeHistory.baseFeePerGas, ...result.baseFeePerGas.slice(0, blockCount) ]; yield feeHistory; } */ const lookback = newestBlockNumber - oldestBlockNumberToRequest; const response = await fetch( `https://gas-api.metaswap.codefi.network/networks/1/baseFeeHistory?lookback=${lookback}` ); if (response.ok) { const json = await response.json(); // Each chunk contains an extra item, so make sure we exclude the extras const chunkEnds = _.times(numberOfChunks, (i) => [ i * numberOfBlocksPerEthFeeHistoryRequest + i, Math.min( json.length - 2, (i + 1) * numberOfBlocksPerEthFeeHistoryRequest - 1 + i ) ]); feeHistory.baseFeePerGas = chunkEnds .flatMap(([startIndex, endIndex]) => { return json.slice(startIndex, endIndex + 1); }) .map((str) => parseFloat(str, 10)); yield feeHistory; } else { const text = await response.text(); throw new Error( `Request to fetch fee history failed (${response.status}}): ${text}` ); } }39:T579,3a:T41e,## Resources Thanks to these blog posts and notebooks for help and inspiration. * * * * * * [https://observablehq.com/@tmcw/streaming-data/](https://observablehq.com/@tmcw/streaming-data/) * [https://observablehq.com/@tmcw/secret/](https://observablehq.com/@tmcw/secret/) * [https://observablehq.com/@mbostock/animation-loops/](https://observablehq.com/@mbostock/animation-loops/) * [https://observablehq.com/@mbostock/sticky-views/](https://observablehq.com/@mbostock/sticky-views/)3b:[] 2f:{"title":"Realtime Ethereum gas fees","cells":[{"id":0,"value":"# Realtime Ethereum gas fees","pinned":false,"hidden":false,"mode":"md"},{"id":1616,"value":"networkCongestionMessage = {\n if (blocks.length === 0 && _.isEmpty(infuraProjectId)) {\n return html`

Please set your Infura project ID below, and then you can start seeing the graph!

`;\n } else if (blocks.length > 0) {\n return html`

Network report: ${networkStatusMessage.cloneNode(\n true\n )}

`;\n } else {\n return html`

Loading, please wait...

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1768,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2396,"value":"### Last ${formatWholeNumber(defaultNumberOfBlocksAgo)} blocks","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1832,"value":"### Last 20 blocks","pinned":false,"hidden":false,"mode":"md"},{"id":1741,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2072,"value":"### Distribution of gas fees","pinned":false,"hidden":false,"mode":"md"},{"id":1393,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2560,"value":"### Blocks","pinned":false,"hidden":false,"mode":"md"},{"id":2565,"value":"/*\n{\n const tableableBlocks = _.sortBy(blocks, \"time\").reduce((array, block) => {\n return array.concat([\n {\n Number: block.number,\n \"Base Fee Per Gas\": block.baseFeePerGas,\n Time: block.time,\n \"Time Since Previous\":\n array.length > 0\n ? `${\n (block.time.getTime() -\n array[array.length - 1].Time.getTime()) /\n 60 /\n 1000\n } s`\n : null\n }\n ]);\n }, []);\n return Inputs.table(tableableBlocks);\n}\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"## Settings","pinned":false,"hidden":false,"mode":"md"},{"id":2332,"value":"These will only be saved on your computer and will not be made public.","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"viewof infuraProjectId = secret(\"infuraProjectId\", {\n label: \"Infura project ID\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1522,"value":"## Graph helpers","pinned":false,"hidden":false,"mode":"md"},{"id":1659,"value":"tick = {\n yield new Date();\n while (!isDisabled) {\n await Promises.tick(1000);\n yield new Date();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1612,"value":"connectionStatusMessage = {\n if (subscription.connectionStatus === \"connected\") {\n return html`[Live]`;\n } else if (subscription.connectionStatus === \"disconnected\") {\n return html`[Disconnected — refresh to restart]`;\n } else {\n return html``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"networkStatusMessage = {\n const networkCongestionStatusDescription = `Gas fees are ${networkCongestionStatus}`;\n const connector =\n isPositiveTrend === isPositiveNetworkCongestionLevel ||\n trendingStatus === \"holding steady\"\n ? \"and\"\n : \"but\";\n const trendingStatusDescription = `, ${connector} they are ${trendingStatus}`;\n return html`${iconsByNetworkCongestionStatus[networkCongestionStatus]} ${networkCongestionStatusDescription}${trendingStatusDescription}.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1706,"value":"trendIcon = html`➙`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":"trendColor = {\n switch (trendingStatus) {\n case \"surging\":\n return colors.red;\n case \"rising\":\n return colors.orange;\n case \"falling\":\n case \"falling fast\":\n return colors.green;\n default:\n return \"gray\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2416,"value":"isPositiveTrend = [\"holding steady\", \"falling\", \"falling fast\"].includes(\n trendingStatus\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"trendingStatus = {\n if (trendRotation != null) {\n if (trendRotation >= Math.PI / 4) {\n return \"falling fast\";\n } else if (trendRotation >= Math.PI / 64) {\n return \"falling\";\n } else if (trendRotation <= -Math.PI / 4) {\n return \"surging\";\n } else if (trendRotation <= -Math.PI / 64) {\n return \"rising\";\n } else {\n return \"holding steady\";\n }\n } else {\n return \"\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2199,"value":"trendRotation = {\n return Math.atan(-trend);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2167,"value":"trend = {\n // const numberToFlattenAngle = 30 * (trendDetectionSpan - 1);\n if (subsetOfBlocksForTrendDetection.length > 0) {\n const firstBlock = subsetOfBlocksForTrendDetection[0];\n const lastBlock =\n subsetOfBlocksForTrendDetection[\n subsetOfBlocksForTrendDetection.length - 1\n ];\n // return (\n // (lastBlock.baseFeePerGas - firstBlock.baseFeePerGas) /\n // numberToFlattenAngle\n // );\n return (\n (lastBlock.baseFeePerGas - firstBlock.baseFeePerGas) /\n firstBlock.baseFeePerGas\n );\n } else {\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2426,"value":"iconsByNetworkCongestionStatus = ({\n \"very high\": \"😵\",\n high: \"👀\",\n normal: \"☀️\",\n low: \"😎\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1626,"value":"networkStatusColorByNetworkCongestionStatus = ({\n \"very high\": colors.red,\n high: colors.orange,\n normal: colors.green,\n low: colors.green\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2419,"value":"isPositiveNetworkCongestionLevel = [\"low\", \"normal\"].includes(\n networkCongestionStatus\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"networkCongestionStatus = benchmark(\"networkCongestionStatus\", () => {\n // if (lastBlock != null) {\n // if (lastBlock.baseFeePerGas > baseFeesAtKeyPercentiles[\"95\"]) {\n // return \"very high\";\n // } else if (lastBlock.baseFeePerGas > baseFeesAtKeyPercentiles[\"90\"]) {\n // return \"high\";\n // } else if (lastBlock.baseFeePerGas < baseFeesAtKeyPercentiles[\"10\"]) {\n // return \"low\";\n // } else {\n // return \"normal\";\n // }\n // } else {\n // return \"\";\n // }\n if (networkCongestion >= 0.66) {\n return \"high\";\n } else if (networkCongestion >= 0.33) {\n return \"stable\";\n } else {\n return \"low\";\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"baseFeeAtDoubleStdDevAboveAverage = averageBaseFee + 2 * stdDevBaseFee","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"stdDevBaseFee = benchmark(\"stdDevBaseFee\", () =>\n blocks.length > 0 ? stdDevOf(blocks.map((block) => block.baseFeePerGas)) : 0\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"averageBaseFee = benchmark(\"averageBaseFee\", () =>\n blocks.length > 0 ? _.mean(blocks.map((block) => block.baseFeePerGas)) : 0\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1896,"value":"// baseFeesAtKeyPercentiles = {\n// const allBaseFeesPerGas = blocks\n// .map((block) => block.baseFeePerGas)\n// .sort((a, b) => a - b);\n// return [10, 20, 30, 40, 50, 60, 70, 80, 90, 95].reduce((obj, percentile) => {\n// const index = Math.floor(allBaseFeesPerGas.length * (percentile / 100)) - 1;\n// return { ...obj, [percentile]: allBaseFeesPerGas[index] };\n// }, {});\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":2653,"value":"baseFeeAtPercentile = (percentile) => {\n const allBaseFeesPerGas = blocks\n .map((block) => block.baseFeePerGas)\n .sort((a, b) => a - b);\n const index = Math.floor(allBaseFeesPerGas.length * (percentile / 100));\n return allBaseFeesPerGas[index];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2589,"value":"networkCongestion = {\n const latestBaseFeePerGas = lastBlock?.baseFeePerGas;\n const sortedBaseFeesPerGas = blocks\n .map((block) => block.baseFeePerGas)\n .sort((a, b) => a - b);\n const indexOfBaseFeeNearestToLatest = sortedBaseFeesPerGas.findIndex(\n (baseFeePerGas) => baseFeePerGas >= latestBaseFeePerGas\n );\n return indexOfBaseFeeNearestToLatest !== -1\n ? indexOfBaseFeeNearestToLatest / (sortedBaseFeesPerGas.length - 1)\n : null;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"fixedTimeWindowForGraph = defaultNumberOfBlocksAgo *\n avgNumberOfSecondsPerBlock *\n 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":1287,"value":"lastBlock = blocks[blocks.length - 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1936,"value":"largestBaseFeePerGasBin = _.maxBy(\n baseFeePerGasBins,\n ({ threshold, size }) => size\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1917,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":2040,"value":"binSize = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"mutable blocks = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1724,"value":"subsetOfBlocksForTrendDetection = blocks.length > trendDetectionSpan\n ? blocks.slice(-trendDetectionSpan)\n : blocks","pinned":false,"hidden":false,"mode":"ojs"},{"id":2179,"value":"trendDetectionSpan = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":1276,"value":"stdDevOf = (numbers) => {\n const mean = _.mean(numbers);\n return Math.sqrt(\n _.sum(numbers.map((n) => (n - mean) * (n - mean))) / numbers.length\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1990,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1531,"value":"## Subscription helpers","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"web3Ws = infuraProjectId.length > 0\n ? new Web3(`wss://mainnet.infura.io/ws/v3/${infuraProjectId}`)\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"## Request helpers","pinned":false,"hidden":false,"mode":"md"},{"id":415,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"// chunkRequests = {\n// const chunkRequests = [];\n// for (\n// let newestBlock = newestBlockNumber;\n// newestBlock > oldestBlockNumberToRequest;\n// newestBlock -= numberOfBlocksPerEthFeeHistoryRequest\n// ) {\n// const distanceToEnd = newestBlock - oldestBlockNumberToRequest;\n// const blockCount =\n// distanceToEnd < numberOfBlocksPerEthFeeHistoryRequest\n// ? distanceToEnd\n// : numberOfBlocksPerEthFeeHistoryRequest;\n// chunkRequests.push({ blockCount, newestBlock });\n// }\n// return chunkRequests;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1189,"value":"numberOfChunks = Math.ceil(\n (numberOfBlocksToRequest) /\n numberOfBlocksPerEthFeeHistoryRequest\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"numberOfBlocksToRequest = oldestBlockNumberToRequest != null\n ? newestBlockNumber - oldestBlockNumberToRequest\n : 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"oldestBlockToRequest = web3Http != null\n ? await web3Http.eth.getBlock(oldestBlockNumberToRequest)\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"oldestBlockNumberToRequest = {\n return initiallyCachedBlocks.length > 0\n ? initiallyCachedBlocks[initiallyCachedBlocks.length - 1].number + 1\n : defaultOldestBlockNumber;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"defaultOldestBlock = web3Http != null\n ? await web3Http.eth.getBlock(defaultOldestBlockNumber)\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"defaultOldestBlockNumber = newestBlock != null\n ? newestBlock?.number - defaultNumberOfBlocksAgo\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"newestBlockNumber = newestBlock?.number","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"// NOTE: This will never change during the duration of the notebook\nnewestBlock = {\n if (web3Http != null) {\n const blockNumber = await web3Http.eth.getBlockNumber();\n try {\n return web3Http?.eth.getBlock(blockNumber);\n } catch (error) {\n return web3Http.eth.getBlock(blockNumber - 1);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"numberOfBlocksPerEthFeeHistoryRequest = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"web3Http = infuraProjectId.length > 0\n ? new Web3(`https://mainnet.infura.io/v3/${infuraProjectId}`)\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"## Database helpers","pinned":false,"hidden":false,"mode":"md"},{"id":1889,"value":"*Note: for now, caching doesn't work — I'm working on it!*","pinned":false,"hidden":false,"mode":"md"},{"id":1242,"value":"// db.blocks.reverse().limit(100).toArray()","pinned":true,"hidden":false,"mode":"ojs"},{"id":713,"value":"clearBlocks()","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"// NOTE: This will never change during the duration of the notebook\ninitiallyCachedBlocks = {\n return [];\n\n const time = defaultOldestBlock.timestamp * 1000;\n console.log(\"time\", time);\n const sortedBlocks = await db.blocks\n .where(\"time\")\n .aboveOrEqual(time)\n .sortBy(\"number\");\n const initiallyCachedBlocks = sortedBlocks.map((block) => {\n return {\n ...block,\n time: new Date(block.time)\n };\n });\n mutable blocks = initiallyCachedBlocks;\n return initiallyCachedBlocks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"async function upsertBlocks(givenBlocks) {\n // remove block headers older than 30 seconds\n // while (\n // blockHeaders.length > 0 &&\n // blockHeaders[0].time.getTime() < new Date().getTime() - 30000\n // ) {\n // blockHeaders.shift();\n // }\n\n // await db.blocks.bulkPut(\n // givenBlocks.map((block) => ({ ...block, time: block.time.getTime() }))\n // );\n\n const blocksByNumber = {\n ..._.keyBy(mutable blocks, \"number\"),\n ..._.keyBy(givenBlocks, \"number\")\n };\n const sortedBlocks = _.sortBy(Object.values(blocksByNumber), \"number\");\n mutable blocks =\n sortedBlocks.length > defaultNumberOfBlocksAgo\n ? sortedBlocks.slice(-defaultNumberOfBlocksAgo)\n : sortedBlocks;\n\n return `Inserted ${givenBlocks.length} blocks`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"function clearBlocks() {\n db.blocks.clear();\n mutable blocks = [];\n // mutable initiallyCachedBlocks = []; // just for consistency\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"db = {\n const db = new Dexie(\"ethereum\");\n db.version(1).stores({\n blocks: \"++id,&number,time\"\n });\n return db;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"## Conversion utils","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"stripHexPrefix = (str) => str.replace(/^0x/, \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2500,"value":"formatWholeNumber = (number) => new Intl.NumberFormat(\"en-US\").format(number)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2491,"value":"formatBaseFeePerGas = (baseFeePerGas) => baseFeePerGas.toFixed(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2496,"value":"formatCurrencyAmount = (number) => {\n return new Intl.NumberFormat(\"en-US\", {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2\n }).format(number);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2592,"value":"formatPercentile = (number) => {\n const percentage = Math.round(number * 100);\n const percentageAsString = percentage.toString();\n let suffix;\n switch (percentageAsString[percentageAsString.length - 1]) {\n case \"1\":\n suffix = \"st\";\n break;\n case \"2\":\n suffix = \"nd\";\n break;\n case \"3\":\n suffix = \"rd\";\n break;\n default:\n suffix = \"th\";\n break;\n }\n return `${percentage}${suffix}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"hexToDec = (hex) => parseInt(new BN(stripHexPrefix(hex), 16).toString(10), 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"decToHex = (dec) => {\n const hexString = new BN(dec.toString(), 10).toString(16);\n return `0x${hexString}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"weiToGwei = (wei) => wei / 1_000_000_000","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"gweiToWei = (gwei) => gwei * 1_000_000_000","pinned":false,"hidden":false,"mode":"ojs"},{"id":2481,"value":"gweiToEth = (gwei) => gwei / 1_000_000_000","pinned":false,"hidden":false,"mode":"ojs"},{"id":2475,"value":"gweiToUsd = (gwei) => {\n return currentEthPriceInUsd * gweiToEth(gwei);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2486,"value":"baseFeePerGasToUsd = (baseFeePerGas) => {\n return formatCurrencyAmount(gweiToUsd(baseFeePerGas * 21000));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2476,"value":"currentEthPriceInUsd = {\n while (true) {\n const response = await fetch(\n \"https://api.coingecko.com/api/v3/coins/ethereum\"\n );\n if (response.ok) {\n const json = await response.json();\n yield json.market_data.current_price.usd;\n\n if (isDisabled) {\n break;\n } else {\n await Promises.delay(15000);\n }\n } else {\n const text = await response.text();\n throw new Error(\n `Could not retrieve current price of ETH in USD: ${text}`\n );\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1556,"value":"## Constants","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"defaultNumberOfBlocksAgo = {\n // 2 weeks' worth\n // return avgNumberOfNewBlocksPerDay * 14;\n // 1 day's worth\n // return avgNumberOfNewBlocksPerDay;\n // 1 hour's worth\n // return Math.floor(avgNumberOfNewBlocksPerDay / 24);\n\n // See \n return 20000;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"// Source: \navgNumberOfNewBlocksPerDay = 6500","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"// Source: <\navgNumberOfSecondsPerBlock = 13","pinned":false,"hidden":false,"mode":"ojs"},{"id":1757,"value":"isDisabled = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":1678,"value":"## Misc helpers","pinned":false,"hidden":false,"mode":"md"},{"id":1664,"value":"distanceFromNowInWords = {\n if (lastBlock != null) {\n const duration = dateFns.intervalToDuration({\n start: lastBlock.time,\n end: tick\n });\n\n const parts = [\n \"years\",\n \"months\",\n \"days\",\n \"hours\",\n \"minutes\",\n \"seconds\"\n ].reduce((parts, partName) => {\n if (duration[partName] > 0) {\n return [\n ...parts,\n duration[partName] === 1\n ? `${duration[partName]} ${partName.slice(0, -1)}`\n : `${duration[partName]} ${partName}`\n ];\n } else {\n return parts;\n }\n }, []);\n\n return parts.length > 0\n ? parts.length > 1\n ? `${\n parts.slice(0, -1).join(\", \") + \", and \" + parts[parts.length - 1]\n } ago`\n : `${parts[0]} ago`\n : \"just now\";\n } else {\n return \"\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"colors = ({\n gray: \"#999\",\n blue: \"#365ac3\",\n red: \"hsl(11.1, 83%, 50.6%)\", // hsluv(16, 95%, 53%)\n green: \"hsl(149, 71.1%, 33.2%)\", // hsluv(140, 95%, 53%)\n violet: \"hsl(288, 75%, 57%)\",\n orange: \"hsl(36, 88%, 45%)\",\n teal: \"hsl(178, 78%, 44%)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"async function benchmark(name, fn) {\n // const then = new Date().getTime();\n const result = await fn();\n // const now = new Date().getTime();\n // const diff = now - then;\n // console.log(`${name} took ${diff} ms`);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1560,"value":"## Secret","pinned":false,"hidden":false,"mode":"md"},{"id":1000,"value":"// Copied from ,\n// but using Inputs.text instead of @jashkenas/inputs\nfunction secret(name, { type = \"text\", ...options } = {}) {\n const value = localStorage.getItem(name);\n\n const form = Inputs[type]({\n value,\n submit: \"Save\",\n ...options\n });\n form.classList.add(\"secret-form\");\n form.addEventListener(\"change\", (event) => {\n localStorage.setItem(name, event.target.value);\n });\n\n const input = form.querySelector(\n type === \"textarea\" ? \"textarea\" : \"input[type='text']\"\n );\n input.style.backgroundImage = `url(data:image/svg+xml;base64,${btoa(lock)})`;\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"// secret(\"foo\", { label: \"something else\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"// secret(\"foo2\", { label: \"something else\", type: \"textarea\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1001,"value":"lock = ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"$39","pinned":false,"hidden":false,"mode":"html"},{"id":102,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"Web3 = require(\"web3@1.6.0/dist/web3.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"BN = require(\"https://bundle.run/bn.js@5.2.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"Dexie = require(\"dexie\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"dateFns = import(\"https://cdn.skypack.dev/date-fns@2.25.0?min\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2612,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2151,"value":"## Old stuff","pinned":false,"hidden":false,"mode":"md"},{"id":1404,"value":"// Plot.plot({\n// width,\n// height: 200,\n// x: {\n// domain: [\n// new Date(latestBlock.time.getTime() - 60 * 60 * 24 * 1 * 1000),\n// latestBlock.time\n// ],\n// nice: true,\n// label: \"time (in your tz) →\"\n// },\n// y: {\n// grid: true,\n// label: \"↑ base fee per gas (gwei)\"\n// },\n// marks: [\n// Plot.ruleY([0]),\n// Plot.line(blocks, {\n// x: \"time\",\n// y: \"baseFeePerGas\",\n// stroke: colors.blue,\n// strokeOpacity: 0.25\n// }),\n// Plot.line(\n// blocks,\n// Plot.windowY({\n// x: \"time\",\n// y: \"baseFeePerGas\",\n// reduce: \"mean\",\n// k: 50,\n// anchor: \"end\",\n// stroke: colors.blue\n// })\n// )\n// ]\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$3a","pinned":false,"hidden":false,"mode":"md"}],"files":"$W3b","stdlib":"1","titling":"auto"}