added copy button

Author: aditya520

components/PriceFeedTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 import {
   Table,
   TableHead,
@@ -8,46 +8,56 @@ import {
   TextField,
   Select,
   MenuItem,
-  Box
-} from '@mui/material'
-import { HermesClient } from '@pythnetwork/hermes-client'
+  Box,
+  Snackbar,
+} from "@mui/material";
+import { HermesClient } from "@pythnetwork/hermes-client";
+import copy from "copy-to-clipboard";
 
 interface PriceFeed {
-  id: string
-  name: string
-  assetType: string
+  id: string;
+  name: string;
+  assetType: string;
 }
 
 export function PriceFeedTable() {
-  const [priceFeeds, setPriceFeeds] = useState<PriceFeed[]>([])
-  const [searchTerm, setSearchTerm] = useState("")
-  const [selectedAssetType, setSelectedAssetType] = useState("All")
+  const [priceFeeds, setPriceFeeds] = useState<PriceFeed[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedAssetType, setSelectedAssetType] = useState("All");
+  const [openSnackbar, setOpenSnackbar] = useState(false);
 
   useEffect(() => {
     const fetchPriceFeeds = async () => {
-      const hermesClient = new HermesClient("https://hermes.pyth.network")
-      const feeds = await hermesClient.getPriceFeeds()
-      const transformedFeeds = feeds.map(feed => ({
+      const hermesClient = new HermesClient("https://hermes.pyth.network");
+      const feeds = await hermesClient.getPriceFeeds();
+      const transformedFeeds = feeds.map((feed) => ({
         id: feed.id,
-        name: feed.attributes.display_symbol || '',
-        assetType: feed.attributes.asset_type || ''
-      }))
-      setPriceFeeds(transformedFeeds)
-    }
-    
-    fetchPriceFeeds()
-  }, [])
+        name: feed.attributes.display_symbol || "",
+        assetType: feed.attributes.asset_type || "",
+      }));
+      setPriceFeeds(transformedFeeds);
+    };
 
-  const filteredData = priceFeeds.filter(feed => {
-    const matchesSearch = feed.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         feed.name.toLowerCase().includes(searchTerm.toLowerCase())
-    const matchesAssetType = selectedAssetType === "All" || feed.assetType === selectedAssetType
-    return matchesSearch && matchesAssetType
-  })
+    fetchPriceFeeds();
+  }, []);
+
+  const filteredData = priceFeeds.filter((feed) => {
+    const matchesSearch =
+      feed.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      feed.name.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesAssetType =
+      selectedAssetType === "All" || feed.assetType === selectedAssetType;
+    return matchesSearch && matchesAssetType;
+  });
+
+  const handleCopy = (id: string) => {
+    copy(id);
+    setOpenSnackbar(true);
+  };
 
   return (
     <Box>
-      <Box sx={{ mb: 3, display: 'flex', gap: 2 }}>
+      <Box sx={{ mb: 3, display: "flex", gap: 2 }}>
         <TextField
           label="Search price feeds"
           variant="outlined"
@@ -63,11 +73,13 @@ export function PriceFeedTable() {
           sx={{ width: 200 }}
         >
           <MenuItem value="All">All Asset Types</MenuItem>
-          {Array.from(new Set(priceFeeds.map(feed => feed.assetType))).map(type => (
-            <MenuItem key={type} value={type}>
-              {type || 'Uncategorized'}
-            </MenuItem>
-          ))}
+          {Array.from(new Set(priceFeeds.map((feed) => feed.assetType))).map(
+            (type) => (
+              <MenuItem key={type} value={type}>
+                {type || "Uncategorized"}
+              </MenuItem>
+            )
+          )}
         </Select>
       </Box>
 
@@ -84,11 +96,28 @@ export function PriceFeedTable() {
             <TableRow key={feed.id}>
               <TableCell>{feed.name}</TableCell>
               <TableCell>{feed.assetType}</TableCell>
-              <TableCell>{feed.id}</TableCell>
+              <TableCell
+                onClick={() => handleCopy(feed.id)}
+                sx={{
+                  cursor: "pointer",
+                  "&:hover": {
+                    backgroundColor: "#BB86FC",
+                  },
+                }}
+              >
+                {feed.id}
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
       </Table>
+
+      <Snackbar
+        open={openSnackbar}
+        autoHideDuration={2000}
+        onClose={() => setOpenSnackbar(false)}
+        message="Feed ID copied to clipboard"
+      />
     </Box>
-  )
-} 
+  );
+}

pages/price-feeds/price-feeds/price-feed-ids.mdx

@@ -1,8 +1,5 @@
 # Price Feed IDs
 
-import { PriceFeedTable } from '@/components/PriceFeedTable'
+import { PriceFeedTable } from "@/components/PriceFeedTable";
 
 <PriceFeedTable />
-
-
-