Footer and header design updates.

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -10,15 +10,18 @@ import { StateService } from 'src/app/services/state.service';
 })
 export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   @Input() markHeight = 0;
+  @Input() txFeePerVSize: number;
 
   blocks: Block[] = [];
   blocksSubscription: Subscription;
   interval: any;
   trigger = 0;
 
-
-  arrowVisible = false;
+  blockWidth = 125;
+  blockPadding = 30;
   arrowLeftPx = 30;
+  rightPosition = 0;
+  arrowVisible = false;
 
   constructor(
     private stateService: StateService,
@@ -53,10 +56,38 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
       this.arrowVisible = false;
       return;
     }
-    const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
-    if (blockindex !== -1) {
-      this.arrowVisible = true;
-      this.arrowLeftPx = blockindex * 155 + 30;
+    const block = this.blocks.find((b) => b.height === this.markHeight);
+    if (!block) {
+      return;
+    }
+    const blockindex = this.blocks.indexOf(block);
+
+    this.arrowVisible = true;
+    this.rightPosition = blockindex * -(this.blockWidth + this.blockPadding) - 30;
+
+    if (!this.txFeePerVSize) {
+      return;
+    }
+
+    for (let i = 0; i < block.feeRange.length - 1; i++) {
+      if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
+        const feeRangeIndex = block.feeRange.findIndex((val, index) => this.txFeePerVSize < block.feeRange[index + 1]);
+        const feeRangeChunkSize = 1 / (block.feeRange.length - 1);
+
+        const txFee = this.txFeePerVSize - block.feeRange[i];
+        const max = block.feeRange[i + 1] - block.feeRange[i];
+        const blockLocation = txFee / max;
+
+        const chunkPositionOffset = blockLocation * feeRangeChunkSize;
+        const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
+
+        const blockedFilledPercentage = (block.weight > 4000000 ? 4000000 : block.weight) / 4000000;
+        const arrowRightPosition = blockindex * (-this.blockWidth + this.blockPadding)
+          + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
+
+        this.rightPosition = arrowRightPosition - 93;
+        break;
+      }
     }
   }