feat/update-market-historical-pair-token-atlas-graph#283
Conversation
WalkthroughThe changes introduce a new API endpoint for retrieving token market history pairs using retry logic (up to 5 attempts). Updates span several files: the API definition in Changes
Sequence Diagram(s)sequenceDiagram
participant UI as UI Component
participant Hook as useGetTokenMarketHistoryPairQuery
participant API as Token API Endpoint
participant Retry as Retry Handler
participant Store as Redux Store
UI->>Hook: Trigger market history query with parameters
Hook->>API: Call getTokenMarketHistoryPair (POST request)
API->>Retry: Process request with retry logic (max 5 attempts)
Retry-->>API: Return success response or error after retries
API->>Hook: Return MarketHistoryPairData
Hook->>Store: Dispatch action to update tokenDataGraph
Store->>UI: Update component with new market history data
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🧰 Additional context used🧬 Code Definitions (2)src/apps/token-atlas/index.tsx (4)
src/apps/token-atlas/reducer/tokenAtlasSlice.ts (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🔇 Additional comments (22)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/apps/pillarx-app/components/PointsTile/test/__snapshots__/PointsTile.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (10)
src/apps/token-atlas/api/token.ts(2 hunks)src/apps/token-atlas/components/TokenGraph/TokenGraph.tsx(5 hunks)src/apps/token-atlas/components/TokenGraph/test/TokenGraph.test.tsx(2 hunks)src/apps/token-atlas/components/TokenGraphColumn/TokenGraphColumn.tsx(3 hunks)src/apps/token-atlas/components/TokenGraphColumn/test/TokenGraphColumn.test.tsx(1 hunks)src/apps/token-atlas/index.tsx(6 hunks)src/apps/token-atlas/reducer/tokenAtlasSlice.ts(3 hunks)src/apps/token-atlas/utils/converters.ts(2 hunks)src/services/pillarXApiSearchTokens.ts(1 hunks)src/types/api.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (7)
src/apps/token-atlas/components/TokenGraphColumn/test/TokenGraphColumn.test.tsx (1)
src/types/api.ts (1)
MarketHistoryPairData(432-443)
src/apps/token-atlas/components/TokenGraph/test/TokenGraph.test.tsx (2)
src/types/api.ts (1)
MarketHistoryPairData(432-443)src/apps/token-atlas/reducer/tokenAtlasSlice.ts (1)
setTokenDataGraph(85-90)
src/apps/token-atlas/components/TokenGraph/TokenGraph.tsx (1)
src/types/api.ts (1)
MarketHistoryPairData(432-443)
src/apps/token-atlas/api/token.ts (3)
src/utils/blockchain.ts (1)
isTestnet(29-35)src/types/api.ts (1)
MarketHistoryPairData(432-443)src/store.ts (1)
addMiddleware(48-58)
src/apps/token-atlas/components/TokenGraphColumn/TokenGraphColumn.tsx (1)
src/types/api.ts (1)
MarketHistoryPairData(432-443)
src/apps/token-atlas/index.tsx (4)
src/apps/token-atlas/hooks/useReducerHooks.tsx (1)
useAppSelector(6-6)src/services/tokensData.ts (1)
chainIdToChainNameTokensData(211-232)src/apps/token-atlas/utils/converters.ts (1)
getGraphResolution(28-48)src/apps/token-atlas/reducer/tokenAtlasSlice.ts (2)
setTokenDataGraph(85-90)setIsGraphLoading(100-102)
src/apps/token-atlas/reducer/tokenAtlasSlice.ts (1)
src/types/api.ts (1)
MarketHistoryPairData(432-443)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (33)
src/services/pillarXApiSearchTokens.ts (1)
22-22: Reduced retry count looks appropriate.The change from 10 to 5 retries is reasonable, as 5 attempts should be sufficient to handle transient API issues while preventing excessive wait times for clients when the service is genuinely unavailable.
src/types/api.ts (1)
432-443: Well-structured type definition for market data.The
MarketHistoryPairDatatype follows standard OHLCV (Open, High, Low, Close, Volume) structure commonly used in financial charts, with an appropriate timestamp field. This will provide good type safety when working with the market history data from the API.src/apps/token-atlas/utils/converters.ts (2)
1-1: Import added for new utility function.The PeriodFilter import is correctly added to support the new graph resolution function.
28-48: Good implementation of time-based resolution mapping.The
getGraphResolutionfunction properly maps different time periods to appropriate data granularity. The implementation includes clear comments explaining each resolution and handles all cases with a sensible default.src/apps/token-atlas/components/TokenGraph/test/TokenGraph.test.tsx (3)
18-18: Updated import to use new data type.The import is correctly updated from
TokenMarketHistorytoMarketHistoryPairDatato align with the new data structure being used.
26-55: Well-structured test data for the new format.The mock data has been thoroughly updated to match the new
MarketHistoryPairDatatype. The test data includes multiple entries with realistic values for all required fields (volume, open, high, low, close, time), which provides good test coverage for the component.
105-105: Test case correctly updated for empty data scenario.The empty data test case has been properly updated to use the new data structure, ensuring that the "no data" scenario is still being tested.
src/apps/token-atlas/components/TokenGraphColumn/test/TokenGraphColumn.test.tsx (2)
20-21: Updated import to use MarketHistoryPairData typeThe import has been changed from
TokenMarketHistorytoMarketHistoryPairDatato reflect the new data structure used for token market history data.
25-53: Updated mock data structure to match new API response formatThe mock data structure has been updated to match the new
MarketHistoryPairDatatype, which has a nested structure with aresultobject containing adataarray of OHLCV (Open, High, Low, Close, Volume) price points. This change is consistent with the updated API response format.Each data point now includes:
- volume, open, high, low, close values
- time as a Unix timestamp (instead of the previous timestamp format)
This change ensures the test accurately reflects the actual data structure used in the application.
src/apps/token-atlas/index.tsx (7)
11-13: Updated imports to include the new market history pair queryThe imports have been modified to include
useGetTokenMarketHistoryPairQuerywhich replaces the previoususeGetTokenGraphQuery, reflecting the transition to the new API endpoint for retrieving token market history data.
27-29: Added imports for chain name mapping and graph resolutionNew utility imports have been added:
chainIdToChainNameTokensData- Used for converting chain IDs to blockchain names required by the new APIgetGraphResolution- Used for determining the appropriate graph resolution based on the period filterThese utilities support the new market history pair API requirements.
41-49: Updated default token addressThe default token address has been updated to a specific Ethereum address for the PLR token. This ensures that when no token is explicitly selected, the application will display data for the PLR token.
69-71: Added selector for period filterA new selector for the
periodFilterhas been added to retrieve the current period filter state from Redux. This is used to determine the appropriate graph resolution for the market history pair API query.
137-149: Replaced token graph query with market history pair queryThe previous token graph query has been replaced with the new market history pair query. The new query:
- Uses more descriptive variable names (marketHistoryPair, isMarketHistoryPairLoading, etc.)
- Passes the required parameters to the API:
- asset or symbol depending on token type
- blockchain name derived from chain ID
- period resolution based on the selected period filter
- time range parameters (from/to)
This implementation properly handles the transition to the new API endpoint.
189-196: Updated effect hook for token graph dataThe useEffect hook for updating the token graph data has been modified to use the new market history pair query response. It now checks for
marketHistoryPairandisMarketHistoryPairSuccessinstead of the previous variables.
200-207: Updated effect hook for graph loading statusThe useEffect hook for updating the graph loading status has been modified to use the new market history pair loading and fetching states. This ensures the loading indicator is displayed appropriately while the new API is fetching data.
src/apps/token-atlas/components/TokenGraph/TokenGraph.tsx (6)
27-30: Updated imports to use MarketHistoryPairData typeThe imports have been updated to use the new
MarketHistoryPairDatatype instead of the previousTokenMarketHistorytype, reflecting the change in the data structure used for token market history.
53-56: Updated tokenDataGraph typeThe type of
tokenDataGraphhas been updated toMarketHistoryPairData | undefinedto match the new data structure returned by the API. This ensures type safety throughout the component.
99-103: Updated data access pattern in comments and codeThe comment and code have been updated to reflect the new data structure. The component now checks for
tokenDataGraph?.result.data.lengthinstead of the previous structure.
128-129: Updated dependency array for useCallbackThe dependency array for the
graphXScalecallback has been updated to usetokenDataGraph?.result.data.lengthto match the new data structure. This ensures the callback is correctly re-computed when the data changes.
135-137: Updated conditional check for empty dataThe conditional check for empty data has been updated to use
!tokenDataGraph?.result.data.lengthto match the new data structure. This ensures the "Price history not found" message is displayed correctly when there is no data.
151-159: Updated data mapping for chartThe data mapping for the chart has been updated to use the new data structure:
- Labels now use
tokenDataGraph.result.data.map((x) => x.time)to extract timestamps- Dataset data now uses
tokenDataGraph.result.data.map((price) => price.close)to extract closing pricesThis correctly maps the OHLCV data to the chart's expected format.
src/apps/token-atlas/api/token.ts (6)
1-1: Added retry import for implementing retry logicThe import statement has been updated to include
retryfrom Redux Toolkit, which is used to implement retry logic for API requests that might fail temporarily.
9-10: Added import for MarketHistoryPairData typeImport for the
MarketHistoryPairDatatype has been added, which defines the structure of the response from the new market history pair API endpoint.
96-106: Implemented retry logic for API requestsA new fetch base query with retry logic has been created:
const fetchBaseTokenMarketHistoryPairWithRetry = retry( fetchBaseQuery({ baseUrl: isTestnet ? 'https://hifidata-nubpgwxpiq-uc.a.run.app' : 'https://hifidata-7eu4izffpa-uc.a.run.app', headers: { 'Content-Type': 'application/json', }, }), { maxRetries: 5 } );This implementation:
- Uses the appropriate base URL based on whether the app is in testnet mode
- Sets the content type header to JSON
- Configures retry behavior with a maximum of 5 retries for failed requests
This improves reliability when fetching market history data, which is essential for a good user experience.
108-144: Added new API for token market history pairsA new API has been created for fetching token market history pairs:
- Uses a unique reducer path 'tokenMarketHistoryPair'
- Uses the base query with retry logic
- Implements the getTokenMarketHistoryPair endpoint that:
- Accepts parameters for asset, symbol, blockchain, period, time range, and amount
- Constructs a POST request with the appropriate path and parameters
- Returns data in the MarketHistoryPairData format
This implementation properly replaces the previous token graph API with a more robust solution.
153-153: Added new API to store middlewareThe new token market history pair API has been added to the store middleware using
addMiddleware(tokenMarketHistoryPair). This ensures the API is properly integrated with the Redux store.
159-159: Exported hook for the new APIThe hook
useGetTokenMarketHistoryPairQueryhas been exported, making it available for use in components that need to fetch market history data.src/apps/token-atlas/reducer/tokenAtlasSlice.ts (3)
9-10: Import updated correctly to use MarketHistoryPairData.The import statement has been properly updated to include the new
MarketHistoryPairDatatype, which is a part of replacing the previous endpoint with the Market History Pair endpoint from Mobula.
25-25: Type definition properly updated for tokenDataGraph.The
tokenDataGraphproperty type in theTokenAltasStateinterface has been correctly updated to use the newMarketHistoryPairDatatype. This aligns with the implementation of the new Market History Pair endpoint.
87-87: Action payload type updated correctly.The
setTokenDataGraphaction's payload type has been properly updated to useMarketHistoryPairData, ensuring type safety throughout the state management flow.src/apps/token-atlas/components/TokenGraphColumn/TokenGraphColumn.tsx (2)
18-21: Imports updated correctly to use new types.The imports have been properly updated to include both
MarketHistoryPairDataandTokenAtlasInfoData, using a named imports structure to better organize the code.
50-52: Type assertion updated for MarketHistoryPairData.The type assertion for the tokenDataGraph state selector has been correctly updated to match the new data structure.
| tokenDataGraph?.result.data.length | ||
| ? 'hover:bg-green hover:text-dark_grey' | ||
| : '' | ||
| } ${periodFilter === filter && tokenDataGraph?.price_history ? 'bg-green text-dark_grey' : 'text-white_grey bg-medium_grey'}`} | ||
| } ${periodFilter === filter && tokenDataGraph?.result.data.length ? 'bg-green text-dark_grey' : 'text-white_grey bg-medium_grey'}`} |
There was a problem hiding this comment.
Add null check for tokenDataGraph.result.
The current implementation might cause runtime errors if tokenDataGraph is defined but tokenDataGraph.result is undefined. Consider adding a more defensive check.
- tokenDataGraph?.result.data.length
+ tokenDataGraph?.result?.data?.lengthThis ensures the component handles cases where the response might have an unexpected structure or when partial data is available.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| tokenDataGraph?.result.data.length | |
| ? 'hover:bg-green hover:text-dark_grey' | |
| : '' | |
| } ${periodFilter === filter && tokenDataGraph?.price_history ? 'bg-green text-dark_grey' : 'text-white_grey bg-medium_grey'}`} | |
| } ${periodFilter === filter && tokenDataGraph?.result.data.length ? 'bg-green text-dark_grey' : 'text-white_grey bg-medium_grey'}`} | |
| tokenDataGraph?.result?.data?.length | |
| ? 'hover:bg-green hover:text-dark_grey' | |
| : '' | |
| } ${periodFilter === filter && tokenDataGraph?.result?.data?.length ? 'bg-green text-dark_grey' : 'text-white_grey bg-medium_grey'}`} |
Deploying x with
|
| Latest commit: |
1b79a78
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1d821384.x-e62.pages.dev |
| Branch Preview URL: | https://feat-update-market-historica.x-e62.pages.dev |
2 participants
Description
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Summary by CodeRabbit
New Features
Refactor
Tests
Chores