Skip to content

Commit afeee5c

Browse files
aditya520aditya520
committed
small addition
1 parent 6dcfe1b commit afeee5c

File tree

3 files changed

+157
-2
lines changed

3 files changed

+157
-2
lines changed

‎components/PriceFeedTable.tsx

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import { useState, useCallback } from "react";
2+
import { StyledTd } from "./Table";
3+
4+
interface PriceFeed {
5+
ids: string;
6+
assetType: string;
7+
name: string;
8+
}
9+
10+
interface TableColumnWidths {
11+
assetType: string;
12+
name: string;
13+
ids: any;
14+
}
15+
16+
const columnWidths: TableColumnWidths = {
17+
assetType: "w-3/10",
18+
name: "w-1/5",
19+
ids: "w-1/2",
20+
};
21+
22+
const PriceFeedTable = ({ priceFeeds }: { priceFeeds: PriceFeed[] }) => {
23+
const [selectedAssetType, setSelectedAssetType] = useState<string>("All");
24+
const [copiedId, setCopiedId] = useState<string | null>(null);
25+
26+
const assetTypes = [
27+
"All",
28+
...Array.from(new Set(priceFeeds.map((feed) => feed.assetType))),
29+
];
30+
31+
const filteredFeeds =
32+
selectedAssetType === "All"
33+
? priceFeeds
34+
: priceFeeds.filter((feed) => feed.assetType === selectedAssetType);
35+
36+
const copyToClipboard = useCallback((text: string) => {
37+
navigator.clipboard
38+
.writeText(text)
39+
.then(() => {
40+
setCopiedId(text);
41+
setTimeout(() => setCopiedId(null), 2000); // Hide the popup after 2 seconds
42+
})
43+
.catch((err) => {
44+
console.error("Failed to copy: ", err);
45+
});
46+
}, []);
47+
48+
return (
49+
<div>
50+
<div className="mb-4">
51+
<label htmlFor="assetTypeFilter" className="mr-2">
52+
Filter by Asset Type:
53+
</label>
54+
<select
55+
id="assetTypeFilter"
56+
value={selectedAssetType}
57+
onChange={(e) => setSelectedAssetType(e.target.value)}
58+
className="p-2 border rounded"
59+
>
60+
{assetTypes.map((type) => (
61+
<option key={type} value={type}>
62+
{type}
63+
</option>
64+
))}
65+
</select>
66+
</div>
67+
<table>
68+
<thead>
69+
<tr>
70+
<th className={columnWidths.assetType}>Asset Type</th>
71+
<th className={columnWidths.name}>Name</th>
72+
<th className={columnWidths.ids}>Feed ID</th>
73+
</tr>
74+
</thead>
75+
<tbody>
76+
{filteredFeeds.map((feed, index) => (
77+
<tr key={index}>
78+
<StyledTd>{feed.assetType}</StyledTd>
79+
<StyledTd>{feed.name}</StyledTd>
80+
<StyledTd>
81+
<div className="relative">
82+
<button
83+
onClick={() => copyToClipboard(feed.ids)}
84+
className="flex items-center space-x-2 px-2 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-darkGray2 dark:hover:bg-darkGray3 rounded transition duration-200"
85+
>
86+
<code className="dark:text-darkLinks text-lightLinks dark:bg-darkGray2 bg-gray-100 px-2 py-1 rounded">
87+
{feed.ids}
88+
</code>
89+
<svg
90+
xmlns="http://www.w3.org/2000/svg"
91+
className="h-4 w-4"
92+
fill="none"
93+
viewBox="0 0 24 24"
94+
stroke="currentColor"
95+
>
96+
<path
97+
strokeLinecap="round"
98+
strokeLinejoin="round"
99+
strokeWidth={2}
100+
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
101+
/>
102+
</svg>
103+
</button>
104+
{copiedId === feed.ids && (
105+
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-800 text-white text-sm rounded shadow">
106+
Copied to clipboard
107+
</div>
108+
)}
109+
</div>
110+
</StyledTd>
111+
</tr>
112+
))}
113+
</tbody>
114+
</table>
115+
</div>
116+
);
117+
};
118+
119+
export default PriceFeedTable;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ At the time of writing, Pyth provides price feeds of the following asset types:
1313
- **Crypto**
1414
These asset types represent various cryptocurrencies. For example: Crypto.ADA/USD, Crypto.ETH/USD, Crypto.BTC/USD, etc.
1515
- **Redemption Rates** (Coming soon)
16-
These asset types represent various redemption rates. These prices will be sourced directly from the smart contract. This asset class will be important for assets like liquid staking derivatives or interest bearing assets, whose values change based on internal mechanisms like accumulated rewards or interest accruals.
16+
These asset types represent various redemption rates. These prices will be sourced directly from the smart contract. This asset class will be important for assets like liquid staking derivatives or interest bearing assets, whose values change based on internal mechanisms like accumulated rewards or interest accruals.
1717
- **Crypto.Index**
1818
These asset types represent various cryptocurrency indexes. For example: Crypto.Index.GML2/USD, Crypto.Index.GMCI30/USD, etc.
1919
- **Forex (FX)**
@@ -25,7 +25,6 @@ At the time of writing, Pyth provides price feeds of the following asset types:
2525
- **Rates** (Coming soon)
2626
These asset types represent various interest rates. For example: Rates.US10Y, Rates.US2Y, Rates.US6M, etc.
2727

28-
2928
## Solana Price Feed Accounts
3029

3130
On Solana, each feed additionally has a collection of **price feed accounts** containing the feed's data.

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import PriceFeedTable from "../../../components/PriceFeedTable";
2+
import { useState, useEffect } from 'react';
3+
4+
export const PriceFeedData = () => {
5+
const [priceFeeds, setPriceFeeds] = useState([]);
6+
7+
useEffect(() => {
8+
const fetchPriceFeeds = async () => {
9+
try {
10+
const response = await fetch('https://hermes.pyth.network/v2/price_feeds');
11+
const data = await response.json();
12+
13+
// Transform the data to match our PriceFeed interface
14+
const transformedData = data.map(feed => ({
15+
assetType: feed.attributes.asset_type,
16+
name: feed.attributes.display_symbol,
17+
ids: feed.id
18+
}));
19+
20+
setPriceFeeds(transformedData);
21+
} catch (error) {
22+
console.error('Error fetching price feeds:', error);
23+
}
24+
};
25+
26+
fetchPriceFeeds();
27+
28+
}, []);
29+
30+
return <PriceFeedTable priceFeeds={priceFeeds} />;
31+
};
32+
33+
# Price Feed IDs
34+
35+
Below is a table of all available price feed IDs:
36+
37+
<PriceFeedData />

0 commit comments

Comments
 (0)