Display routes for volume chart instead of channels

Author: evansmj

apps/frontend/src/components/bookkeeper/BkprRoot/BkprRoot.tsx

@@ -145,10 +145,10 @@ const Bookkeeper = () => {
                     </Card.Header>
 
                     <Card.Body className="px-0 pt-0">
-                      Track channel routing performance.
+                      Track route performance.
                       <VolumeInfo
-                        bestRoutingChannel={bookkeeperLandingData?.volumeSummary.mostTrafficChannel}
-                        worstRoutingChannel={bookkeeperLandingData?.volumeSummary.leastTrafficChannel}
+                        bestRoute={bookkeeperLandingData?.volumeSummary.mostTrafficRoute}
+                        worstRoute={bookkeeperLandingData?.volumeSummary.leastTrafficRoute}
                       />
                     </Card.Body>
                     <Card.Footer className="mt-3 mb-3 d-flex justify-content-end">

apps/frontend/src/components/bookkeeper/BkprRoot/VolumeInfo.tsx

@@ -3,20 +3,20 @@ import React from 'react';
 import './VolumeInfo.scss';
 
 interface VolumeInfoProps {
-  bestRoutingChannel?: string;
-  worstRoutingChannel?: string;
+  bestRoute?: string;
+  worstRoute?: string;
 }
 
-const VolumeInfo: React.FC<VolumeInfoProps> = ({ bestRoutingChannel, worstRoutingChannel }) => {
+const VolumeInfo: React.FC<VolumeInfoProps> = ({ bestRoute, worstRoute }) => {
   return (
     <>
       <div className="mt-3 d-flex flex-column align-items-start">
-        <span className="fs-7 text-dark">Channel w/Most Traffic</span>
-        <span className={`mt-1 fs-7 fw-bold best-channel`}>{bestRoutingChannel}</span>
+        <span className="fs-7 text-dark">Route w/Most Traffic</span>
+        <span className={`mt-1 fs-7 fw-bold best-channel`}>{bestRoute}</span>
       </div>
       <div className="mt-3 d-flex flex-column align-items-start">
-        <span className="fs-7 text-dark">Channel w/Least Traffic</span>
-        <span className={`mt-1 fs-7 fw-bold worst-channel`}>{worstRoutingChannel}</span>
+        <span className="fs-7 text-dark">Route w/Least Traffic</span>
+        <span className={`mt-1 fs-7 fw-bold worst-channel`}>{worstRoute}</span>
       </div>
     </>
   );

apps/frontend/src/hooks/use-http.ts

@@ -182,7 +182,38 @@ const useHttp = () => {
     const latestSatsFlowPeriod = satsFlowData.periods[satsFlowData.periods.length - 1];
     const inflowsThisMonth = latestSatsFlowPeriod.inflowSat;
     const outflowsThisMonth = latestSatsFlowPeriod.outflowSat;
+    
+    let highestFee = 0;
+    let highestForwardIndex: number | undefined = undefined;
+    for (let i = 0; i < volumeData.forwards.length; i++) {
+      if (volumeData.forwards[i].feeSat > highestFee) {
+        highestFee = volumeData.forwards[i].feeSat;
+        highestForwardIndex = i;
+      } else {
+        continue;
+      }
+    }
 
+    let lowestFee = Number.MAX_VALUE;
+    let lowestForwardIndex: number | undefined = undefined;
+    for (let i = 0; i < volumeData.forwards.length; i++) {
+      if (volumeData.forwards[i].feeSat < lowestFee) {
+        lowestFee = volumeData.forwards[i].feeSat;
+        lowestForwardIndex = i;
+      } else {
+        continue;
+      }
+    }
+
+    let mostTrafficRoute = "";
+    if (highestForwardIndex != null) {
+      mostTrafficRoute = `${volumeData.forwards[highestForwardIndex].inboundChannelSCID} -> ${volumeData.forwards[highestForwardIndex].outboundChannelSCID}`;
+    }
+
+    let worstTrafficRoute = "";
+    if (lowestForwardIndex != null) {
+      worstTrafficRoute = `${volumeData.forwards[lowestForwardIndex].outboundChannelSCID} -> ${volumeData.forwards[lowestForwardIndex].outboundChannelSCID}`;
+    }
 
     return {
       balanceSheetSummary: {
@@ -195,8 +226,8 @@ const useHttp = () => {
         outflows: outflowsThisMonth,
       },
       volumeSummary: {
-        mostTrafficChannel: "best",
-        leastTrafficChannel: "worst",
+        mostTrafficRoute: mostTrafficRoute,
+        leastTrafficRoute: worstTrafficRoute,
       }
     };
   };

apps/frontend/src/types/lightning-bookkeeper-landing.type.ts

@@ -16,7 +16,7 @@ export type SatsFlowSummary = {
 };
 
 export type VolumeSummary = {
-  mostTrafficChannel: string;
-  leastTrafficChannel: string;
+  mostTrafficRoute: string;
+  leastTrafficRoute: string;
 }