requested changes

Author: aditya520

components/LazerPriceIdTable.tsx

@@ -57,17 +57,19 @@ const useLazerPriceIdState = () => {
   return state;
 };
 
-export function LazerPriceIdTable() {
-  const lazerPriceIdState = useLazerPriceIdState();
+const LoadedLazerPriceIdTable = ({
+  priceFeeds,
+}: {
+  priceFeeds: LazerPriceIdMetadata[];
+}) => {
   const [search, setSearch] = useState("");
 
   const updateSearch = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setSearch(event.target.value);
   }, []);
 
   const filteredFeeds = useMemo(() => {
-    if (lazerPriceIdState.type !== LazerPriceIdStateType.Loaded) return [];
-    return lazerPriceIdState.priceFeeds.filter((feed) => {
+    return priceFeeds.filter((feed) => {
       const searchLower = search.toLowerCase();
       return (
         feed.symbol.toLowerCase().includes(searchLower) ||
@@ -76,7 +78,47 @@ export function LazerPriceIdTable() {
         feed.pyth_lazer_id.toString().includes(searchLower)
       );
     });
-  }, [lazerPriceIdState, search]);
+  }, [priceFeeds, search]);
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search by symbol, name, description, or pyth lazer id..."
+        value={search}
+        onChange={updateSearch}
+        className="w-full p-2 mb-4 border border-gray-300 rounded-md"
+      />
+      <table>
+        <thead>
+          <tr>
+            <th>Asset Type</th>
+            <th>Description</th>
+            <th>Name</th>
+            <th>Symbol</th>
+            <th>Pyth Lazer Id</th>
+            <th>Exponent</th>
+          </tr>
+        </thead>
+        <tbody>
+          {filteredFeeds.map((priceFeed) => (
+            <tr key={priceFeed.symbol}>
+              <StyledTd>{priceFeed.asset_type}</StyledTd>
+              <StyledTd>{priceFeed.description}</StyledTd>
+              <StyledTd>{priceFeed.name}</StyledTd>
+              <StyledTd>{priceFeed.symbol}</StyledTd>
+              <StyledTd>{priceFeed.pyth_lazer_id}</StyledTd>
+              <StyledTd>{priceFeed.exponent}</StyledTd>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export function LazerPriceIdTable() {
+  const lazerPriceIdState = useLazerPriceIdState();
 
   switch (lazerPriceIdState.type) {
     case LazerPriceIdStateType.NotLoaded:
@@ -85,39 +127,7 @@ export function LazerPriceIdTable() {
       return <Spinner />;
     case LazerPriceIdStateType.Loaded:
       return (
-        <div>
-          <input
-            type="text"
-            placeholder="Search by symbol, name, description, or pyth lazer id..."
-            value={search}
-            onChange={updateSearch}
-            className="w-full p-2 mb-4 border border-gray-300 rounded-md"
-          />
-          <table>
-            <thead>
-              <tr>
-                <th>Asset Type</th>
-                <th>Description</th>
-                <th>Name</th>
-                <th>Symbol</th>
-                <th>Pyth Lazer Id</th>
-                <th>Exponent</th>
-              </tr>
-            </thead>
-            <tbody>
-              {filteredFeeds.map((priceFeed) => (
-                <tr key={priceFeed.symbol}>
-                  <StyledTd>{priceFeed.asset_type}</StyledTd>
-                  <StyledTd>{priceFeed.description}</StyledTd>
-                  <StyledTd>{priceFeed.name}</StyledTd>
-                  <StyledTd>{priceFeed.symbol}</StyledTd>
-                  <StyledTd>{priceFeed.pyth_lazer_id}</StyledTd>
-                  <StyledTd>{priceFeed.exponent}</StyledTd>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+        <LoadedLazerPriceIdTable priceFeeds={lazerPriceIdState.priceFeeds} />
       );
     case LazerPriceIdStateType.Error:
       return <div>Error</div>;