Merge branch 'release/v2021.07.05-3-otterscan'

src/special/london/BlockRow.tsx

@@ -21,7 +21,7 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
   const totalReward = block.blockReward.add(netFeeReward ?? 0);
 
   return (
-    <div className="grid grid-cols-8 gap-x-2 px-3 py-2 hover:bg-gray-100">
+    <div className="grid grid-cols-9 gap-x-2 px-3 py-2 hover:bg-gray-100">
       <div>
         <BlockLink blockTag={block.number} />
       </div>
@@ -41,21 +41,18 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
       </div>
       <div className="text-right">
         <div className="relative">
-          <span>{block.baseFeePerGas?.toString()} wei</span>
+          <span>{block.baseFeePerGas?.div(1e9).toString()} Gwei</span>
           <Blip value={baseFeeDelta} />
         </div>
       </div>
       <div className="text-right col-span-2">
         {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
       </div>
-      <div className="text-right line-through text-orange-500">
+      <div className="text-right col-span-2 line-through text-orange-500">
         {ethers.utils.commify(
-          ethers.utils.formatUnits(
+          ethers.utils.formatEther(block.gasUsed.mul(block.baseFeePerGas!))
-            block.gasUsed.mul(block.baseFeePerGas!).toString(),
-            9
-          )
         )}{" "}
-        Gwei
+        ETH
       </div>
       <div className="text-right text-gray-400">
         <TimestampAge now={now / 1000} timestamp={block.timestamp} />

src/special/london/Blocks.tsx

@@ -125,7 +125,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
         <div>
           <Line data={data} height={100} options={chartOptions} />
         </div>
-        <div className="mt-5 grid grid-cols-8 gap-x-2 px-3 py-2">
+        <div className="mt-5 grid grid-cols-9 gap-x-2 px-3 py-2">
           <div className="flex space-x-1 items-baseline">
             <span className="text-gray-500">
               <FontAwesomeIcon icon={faCube} />
@@ -146,7 +146,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
             </span>
             <span>Rewards</span>
           </div>
-          <div className="text-right flex space-x-1 justify-end items-baseline">
+          <div className="text-right col-span-2 flex space-x-1 justify-end items-baseline">
             <span className="text-orange-500">
               <FontAwesomeIcon icon={faBurn} />
             </span>
@@ -176,7 +176,10 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
               block={b}
               baseFeeDelta={
                 i < all.length - 1
-                  ? b.baseFeePerGas!.sub(all[i + 1].baseFeePerGas!).toNumber()
+                  ? b
+                      .baseFeePerGas!.sub(all[i + 1].baseFeePerGas!)
+                      .div(1e9)
+                      .toNumber()
                   : 0
               }
             />

src/special/london/chart.ts

@@ -25,7 +25,7 @@ export const burntFeesChartOptions: ChartOptions = {
         text: "Burnt fees",
       },
       ticks: {
-        callback: (v) => `${v} Gwei`,
+        callback: (v) => `${(v as number) / 1e9} ETH`,
       },
     },
     yBaseFee: {
@@ -36,7 +36,7 @@ export const burntFeesChartOptions: ChartOptions = {
         text: "Base fee",
       },
       ticks: {
-        callback: (v) => `${v} wei`,
+        callback: (v) => `${(v as number) / 1e9} Gwei`,
       },
       grid: {
         drawOnChartArea: false,
@@ -51,7 +51,7 @@ export const burntFeesChartData = (blocks: ExtendedBlock[]): ChartData => ({
     {
       label: "Burnt fees (Gwei)",
       data: blocks
-        .map((b) => b.gasUsed.mul(b.baseFeePerGas!).toNumber() / 1e9)
+        .map((b) => b.gasUsed.mul(b.baseFeePerGas!).div(1e9).toNumber())
         .reverse(),
       fill: true,
       backgroundColor: "#FDBA7470",
@@ -103,7 +103,7 @@ export const gasChartOptions: ChartOptions = {
         text: "Base fee",
       },
       ticks: {
-        callback: (v) => `${v} wei`,
+        callback: (v) => `${(v as number) / 1e9} Gwei`,
       },
       grid: {
         drawOnChartArea: false,