Skip to content

Commit 5111e22

Browse files
matt416github-actions[bot]
matt416
and
github-actions[bot]
authored
Add example to useGetCoinPrices, clarify the params requirements (#182)
* Add example to useGetCoinPrices, clarify the params requirements * chore(i18n): update translations [en] Sync file structure, format locales. Branch: 182/merge --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent aa9298e commit 5111e22

File tree

6 files changed

+275
-31
lines changed

6 files changed

+275
-31
lines changed

‎es/sdk/web/hooks-sdk/hooks/useGetCoinPrices.mdx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,27 @@ export default TokenPriceDisplay;
6363
## Parámetros
6464

6565
### tokens
66-
`Token[]`
67-
68-
Arreglo de tokens para obtener precios. Cada token debe incluir:
66+
`Token[]`: Arreglo de objetos con `chainId` y `contractAddress` que representan los tokens para los cuales desea obtener el precio.
6967

7068
```tsx
7169
interface Token {
72-
chainId: number // The chain ID where the token exists
73-
contractAddress: string // The token's contract address
70+
chainId: number // EVM chain ID (e.g., 1 = Ethereum, 137 = Polygon)
71+
contractAddress: string // Token contract address on that chain
7472
}
7573
```
7674

77-
Use `ZERO_ADDRESS` para tokens nativos (por ejemplo, ETH en Ethereum, MATIC en Polygon).
75+
- Para tokens nativos (por ejemplo, ETH en Ethereum, MATIC en Polygon), establezca `contractAddress` como **`ZERO_ADDRESS`**.
76+
- Para tokens ERC-20, proporcione la dirección real del contrato del token en el `chainId` especificado.
77+
78+
**Ejemplos**
79+
80+
```tsx
81+
const tokens: Token[] = [
82+
{ chainId: 1, contractAddress: ZERO_ADDRESS }, // ETH (native)
83+
{ chainId: 137, contractAddress: ZERO_ADDRESS }, // MATIC (native)
84+
{ chainId: 1, contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48" }, // USDC on Ethereum
85+
];
86+
```
7887

7988
### options
8089
`HooksOptions` (opcional)

‎es/sdk/web/hooks-sdk/hooks/useGetCollectiblePrices.mdx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: useGetCollectiblePrices
3+
description: Hook para obtener precios de mercado actuales de NFTs/coleccionables
4+
sidebarTitle: useGetCollectiblePrices
5+
---
6+
7+
## Importar
8+
9+
```tsx
10+
import { useGetCollectiblePrices } from '@0xsequence/hooks'
11+
```
12+
13+
## Uso
14+
15+
```tsx
16+
import { useGetCollectiblePrices } from '@0xsequence/hooks'
17+
18+
function NFTPriceDisplay() {
19+
const tokens = [
20+
{
21+
chainId: 1,
22+
contractAddress: '0x34d85c9CDeB23FA97cb08333b511ac86E1C4E258', // Example NFT collection
23+
tokenId: '123'
24+
}
25+
]
26+
27+
const {
28+
data: prices,
29+
isLoading,
30+
error,
31+
isError,
32+
isSuccess
33+
} = useGetCollectiblePrices(tokens)
34+
35+
if (isLoading) {
36+
return <div>Loading prices...</div>
37+
}
38+
39+
if (isError) {
40+
return <div>Error: {error.message}</div>
41+
}
42+
43+
return (
44+
<div>
45+
<h2>NFT Prices</h2>
46+
{isSuccess && prices && (
47+
<ul>
48+
{prices.map((price, index) => (
49+
<li key={`${tokens[index].chainId}-${tokens[index].contractAddress}-${tokens[index].tokenId}`}>
50+
<div>Collection: {tokens[index].contractAddress}</div>
51+
<div>Token ID: {tokens[index].tokenId}</div>
52+
<div>Floor Price: {price.floorPrice.value} {price.floorPrice.currency}</div>
53+
<div>Buy Price: {price.buyPrice.value} {price.buyPrice.currency}</div>
54+
<div>Sell Price: {price.sellPrice.value} {price.sellPrice.currency}</div>
55+
</li>
56+
))}
57+
</ul>
58+
)}
59+
</div>
60+
)
61+
}
62+
```
63+
64+
### tokens
65+
`Token[]`: Arreglo de objetos con `chainId` y `contractAddress` que representan los tokens para los cuales desea obtener el precio.
66+
67+
```tsx
68+
interface Token {
69+
chainId: number // EVM chain ID (e.g., 1 = Ethereum, 137 = Polygon)
70+
contractAddress: string // Token contract address on that chain
71+
tokenId: string // The specific token ID within the collection
72+
}
73+
```
74+
75+
### options
76+
`HooksOptions` (opcional)
77+
78+
```tsx
79+
interface HooksOptions {
80+
retry?: boolean // Whether to retry failed requests (defaults to true)
81+
disabled?: boolean // Whether to disable the query
82+
}
83+
```
84+
85+
## Tipo de retorno
86+
El hook retorna un objeto resultado de React Query:
87+
88+
```tsx
89+
interface Price {
90+
value: number
91+
currency: string
92+
}
93+
94+
{
95+
data: {
96+
token: Token,
97+
price?: Price,
98+
price24hChange?: Price,
99+
floorPrice?: Price,
100+
buyPrice?: Price,
101+
sellPrice?: Price,
102+
updatedAt: string
103+
}[]
104+
isLoading: boolean // Whether the initial request is in progress
105+
error: Error | null // Any error that occurred
106+
isError: boolean // Whether an error occurred
107+
isSuccess: boolean // Whether the request was successful
108+
}
109+
```

‎ja/sdk/web/hooks-sdk/hooks/useGetCoinPrices.mdx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,27 @@ export default TokenPriceDisplay;
6363
## パラメータ
6464

6565
### tokens
66-
`Token[]`
67-
68-
価格を取得するトークンの配列です。各トークンには以下が必要です。
66+
`Token[]`：価格を取得したいトークンを表す、`chainId` と `contractAddress` を持つオブジェクトの配列です。
6967

7068
```tsx
7169
interface Token {
72-
chainId: number // The chain ID where the token exists
73-
contractAddress: string // The token's contract address
70+
chainId: number // EVM chain ID (e.g., 1 = Ethereum, 137 = Polygon)
71+
contractAddress: string // Token contract address on that chain
7472
}
7573
```
7674

77-
ネイティブトークン（例: EthereumのETH、PolygonのMATIC）には`ZERO_ADDRESS`を使用してください。
75+
- ネイティブトークン（例：Ethereum の ETH、Polygon の MATIC）の場合、`contractAddress` を **`ZERO_ADDRESS`** に設定してください。
76+
- ERC-20 トークンの場合は、指定した `chainId` 上のトークンの実際のコントラクトアドレスを入力してください。
77+
78+
**例**
79+
80+
```tsx
81+
const tokens: Token[] = [
82+
{ chainId: 1, contractAddress: ZERO_ADDRESS }, // ETH (native)
83+
{ chainId: 137, contractAddress: ZERO_ADDRESS }, // MATIC (native)
84+
{ chainId: 1, contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48" }, // USDC on Ethereum
85+
];
86+
```
7887

7988
### options
8089
`HooksOptions`（オプション）

‎ja/sdk/web/hooks-sdk/hooks/useGetCollectiblePrices.mdx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: useGetCollectiblePrices
3+
description: NFTやコレクティブルの現在の市場価格を取得するためのフック
4+
sidebarTitle: useGetCollectiblePrices
5+
---
6+
7+
## インポート
8+
9+
```tsx
10+
import { useGetCollectiblePrices } from '@0xsequence/hooks'
11+
```
12+
13+
## 使い方
14+
15+
```tsx
16+
import { useGetCollectiblePrices } from '@0xsequence/hooks'
17+
18+
function NFTPriceDisplay() {
19+
const tokens = [
20+
{
21+
chainId: 1,
22+
contractAddress: '0x34d85c9CDeB23FA97cb08333b511ac86E1C4E258', // Example NFT collection
23+
tokenId: '123'
24+
}
25+
]
26+
27+
const {
28+
data: prices,
29+
isLoading,
30+
error,
31+
isError,
32+
isSuccess
33+
} = useGetCollectiblePrices(tokens)
34+
35+
if (isLoading) {
36+
return <div>Loading prices...</div>
37+
}
38+
39+
if (isError) {
40+
return <div>Error: {error.message}</div>
41+
}
42+
43+
return (
44+
<div>
45+
<h2>NFT Prices</h2>
46+
{isSuccess && prices && (
47+
<ul>
48+
{prices.map((price, index) => (
49+
<li key={`${tokens[index].chainId}-${tokens[index].contractAddress}-${tokens[index].tokenId}`}>
50+
<div>Collection: {tokens[index].contractAddress}</div>
51+
<div>Token ID: {tokens[index].tokenId}</div>
52+
<div>Floor Price: {price.floorPrice.value} {price.floorPrice.currency}</div>
53+
<div>Buy Price: {price.buyPrice.value} {price.buyPrice.currency}</div>
54+
<div>Sell Price: {price.sellPrice.value} {price.sellPrice.currency}</div>
55+
</li>
56+
))}
57+
</ul>
58+
)}
59+
</div>
60+
)
61+
}
62+
```
63+
64+
### tokens
65+
`Token[]`：価格を取得したいトークンを表す、`chainId` と `contractAddress` を持つオブジェクトの配列です。
66+
67+
```tsx
68+
interface Token {
69+
chainId: number // EVM chain ID (e.g., 1 = Ethereum, 137 = Polygon)
70+
contractAddress: string // Token contract address on that chain
71+
tokenId: string // The specific token ID within the collection
72+
}
73+
```
74+
75+
### options
76+
`HooksOptions`（オプション）
77+
78+
```tsx
79+
interface HooksOptions {
80+
retry?: boolean // Whether to retry failed requests (defaults to true)
81+
disabled?: boolean // Whether to disable the query
82+
}
83+
```
84+
85+
## 返り値の型
86+
このフックはReact Queryの結果オブジェクトを返します:
87+
88+
```tsx
89+
interface Price {
90+
value: number
91+
currency: string
92+
}
93+
94+
{
95+
data: {
96+
token: Token,
97+
price?: Price,
98+
price24hChange?: Price,
99+
floorPrice?: Price,
100+
buyPrice?: Price,
101+
sellPrice?: Price,
102+
updatedAt: string
103+
}[]
104+
isLoading: boolean // Whether the initial request is in progress
105+
error: Error | null // Any error that occurred
106+
isError: boolean // Whether an error occurred
107+
isSuccess: boolean // Whether the request was successful
108+
}
109+
```

‎sdk/web/hooks-sdk/hooks/useGetCoinPrices.mdx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,28 @@ export default TokenPriceDisplay;
6464

6565
### tokens
6666

67-
`Token[]`
67+
`Token[]`: Array of objects with `chainId` and `contractAddress` representing the tokens you'd like prices for.
6868

69-
Array of tokens to get prices for. Each token must include:
7069

7170
```tsx
7271
interface Token {
73-
chainId: number // The chain ID where the token exists
74-
contractAddress: string // The token's contract address
72+
chainId: number // EVM chain ID (e.g., 1 = Ethereum, 137 = Polygon)
73+
contractAddress: string // Token contract address on that chain
7574
}
7675
```
7776

78-
Use `ZERO_ADDRESS` for native tokens (e.g., ETH on Ethereum, MATIC on Polygon).
77+
* For native tokens (e.g., ETH on Ethereum, MATIC on Polygon), set `contractAddress` to **`ZERO_ADDRESS`**.
78+
* For ERC-20 tokens, provide the token’s actual contract address on the specified `chainId`.
79+
80+
**Examples**
81+
82+
```tsx
83+
const tokens: Token[] = [
84+
{ chainId: 1, contractAddress: ZERO_ADDRESS }, // ETH (native)
85+
{ chainId: 137, contractAddress: ZERO_ADDRESS }, // MATIC (native)
86+
{ chainId: 1, contractAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48" }, // USDC on Ethereum
87+
];
88+
```
7989

8090
### options
8191

‎sdk/web/hooks-sdk/hooks/useGetCollectiblePrices.mdx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,23 @@ function NFTPriceDisplay() {
2323
tokenId: '123'
2424
}
2525
]
26-
27-
const {
28-
data: prices,
29-
isLoading,
26+
27+
const {
28+
data: prices,
29+
isLoading,
3030
error,
3131
isError,
32-
isSuccess
32+
isSuccess
3333
} = useGetCollectiblePrices(tokens)
34-
34+
3535
if (isLoading) {
3636
return <div>Loading prices...</div>
3737
}
38-
38+
3939
if (isError) {
4040
return <div>Error: {error.message}</div>
4141
}
42-
42+
4343
return (
4444
<div>
4545
<h2>NFT Prices</h2>
@@ -61,22 +61,20 @@ function NFTPriceDisplay() {
6161
}
6262
```
6363

64-
## Parameters
65-
6664
### tokens
6765

68-
`Token[]`
66+
`Token[]`: Array of objects with `chainId` and `contractAddress` representing the tokens you'd like prices for.
6967

70-
Array of tokens to get prices for. Each token must include:
7168

7269
```tsx
7370
interface Token {
74-
chainId: number // The chain ID where the NFT exists
75-
contractAddress: string // The NFT collection's contract address
71+
chainId: number // EVM chain ID (e.g., 1 = Ethereum, 137 = Polygon)
72+
contractAddress: string // Token contract address on that chain
7673
tokenId: string // The specific token ID within the collection
7774
}
7875
```
7976

77+
8078
### options
8179

8280
`HooksOptions` (optional)

0 commit comments

Comments
 (0)