update param define structure

Signed-off-by: nidhi-singh02 <nidhi2894@gmail.com>

Author: nidhi-singh02

components/SponsoredFeedsTable.tsx

@@ -2,17 +2,54 @@ import { useState } from "react";
 import CopyIcon from "./icons/CopyIcon";
 import { mapValues } from "../utils/ObjectHelpers";
 
+interface UpdateParameters {
+  heartbeatLength: number;
+  heartbeatUnit: "second" | "minute" | "hour";
+  priceDeviation: number;
+}
+
 interface SponsoredFeed {
   name: string;
   priceFeedId: string;
-  updateParameters: string;
+  updateParameters: UpdateParameters;
 }
 
 interface SponsoredFeedsTableProps {
   feeds: SponsoredFeed[];
   networkName: string;
 }
 
+/**
+ * Helper functions
+ */
+
+// Format update parameters as a string for grouping
+const formatUpdateParams = (params: UpdateParameters): string => {
+  return `${params.heartbeatLength} ${params.heartbeatUnit} heartbeat / ${params.priceDeviation}% price deviation`;
+};
+
+// Render update parameters with proper styling
+const renderUpdateParams = (params: UpdateParameters, isDefault: boolean) => (
+  <div className="flex items-start gap-1.5">
+    <div
+      className={`w-1.5 h-1.5 rounded-full mt-1 flex-shrink-0 ${
+        isDefault ? "bg-green-500" : "bg-orange-500"
+      }`}
+    ></div>
+    <span
+      className={`text-xs leading-relaxed font-medium ${
+        isDefault
+          ? "text-gray-700 dark:text-gray-300"
+          : "text-orange-600 dark:text-orange-400"
+      }`}
+    >
+      <strong>{params.heartbeatLength}</strong> {params.heartbeatUnit} heartbeat
+      <br />
+      <strong>{params.priceDeviation}%</strong> price deviation
+    </span>
+  </div>
+);
+
 export const SponsoredFeedsTable = ({
   feeds,
   networkName,
@@ -28,16 +65,14 @@ export const SponsoredFeedsTable = ({
 
   // Calculate parameter statistics
   const paramCounts = mapValues(
-    Object.groupBy(feeds, (feed) => feed.updateParameters),
+    Object.groupBy(feeds, (feed) => formatUpdateParams(feed.updateParameters)),
     (feeds: SponsoredFeed[]) => feeds.length
   );
 
   const defaultParams = Object.entries(paramCounts).sort(
     ([, a], [, b]) => b - a
   )[0][0];
 
-  // CSS max-h-96 will handle scrolling automatically
-
   return (
     <div className="my-6">
       <p className="mb-3">
@@ -52,11 +87,7 @@ export const SponsoredFeedsTable = ({
             <div className="flex items-center gap-1.5">
               <div className="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0"></div>
               <span className="font-medium">Default:</span>
-              <span
-                dangerouslySetInnerHTML={{
-                  __html: defaultParams.replace("<br/>", " / "),
-                }}
-              />
+              <span>{defaultParams}</span>
               <span className="text-gray-500">
                 ({paramCounts[defaultParams]})
               </span>
@@ -67,11 +98,7 @@ export const SponsoredFeedsTable = ({
                 <div key={params} className="flex items-center gap-1.5">
                   <div className="w-1.5 h-1.5 bg-orange-500 rounded-full flex-shrink-0"></div>
                   <span className="font-medium">Exception:</span>
-                  <span
-                    dangerouslySetInnerHTML={{
-                      __html: params.replace("<br/>", " / "),
-                    }}
-                  />
+                  <span>{params}</span>
                   <span className="text-gray-500">({count})</span>
                 </div>
               ))}
@@ -97,11 +124,15 @@ export const SponsoredFeedsTable = ({
               </thead>
               <tbody className="bg-white dark:bg-gray-900">
                 {feeds.map((feed, index) => {
-                  const isDefault = feed.updateParameters === defaultParams;
+                  const formattedParams = formatUpdateParams(
+                    feed.updateParameters
+                  );
+                  const isDefault = formattedParams === defaultParams;
                   const prevFeed = feeds[index - 1];
                   const isFirstInGroup =
                     !prevFeed ||
-                    prevFeed.updateParameters !== feed.updateParameters;
+                    formatUpdateParams(prevFeed.updateParameters) !==
+                      formattedParams;
 
                   return (
                     <tr
@@ -139,23 +170,7 @@ export const SponsoredFeedsTable = ({
                       </td>
                       <td className="px-3 py-2 align-top">
                         {isFirstInGroup ? (
-                          <div className="flex items-start gap-1.5">
-                            <div
-                              className={`w-1.5 h-1.5 rounded-full mt-1 flex-shrink-0 ${
-                                isDefault ? "bg-green-500" : "bg-orange-500"
-                              }`}
-                            ></div>
-                            <span
-                              className={`text-xs leading-relaxed font-medium ${
-                                isDefault
-                                  ? "text-gray-700 dark:text-gray-300"
-                                  : "text-orange-600 dark:text-orange-400"
-                              }`}
-                              dangerouslySetInnerHTML={{
-                                __html: feed.updateParameters,
-                              }}
-                            />
-                          </div>
+                          renderUpdateParams(feed.updateParameters, isDefault)
                         ) : (
                           <div className="flex items-start gap-1.5 text-gray-400 text-xs">
                             <div className="w-1.5 h-1.5 bg-green-500 rounded-full mt-1 flex-shrink-0"></div>