Add trades visualization chart with price line and volume bars to Order Detail #2382
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add price line and buy/sell volume histogram - Add pair selector dropdown and flip button - Add time range filters (24H, 7D, 30D, 1Y) - Add data transform service with unit tests
- Add horizontal zero line on volume scale to separate buy/sell bars - Change price line color from gray to blue (#5c6bc0) for better visibility
- Import time constants from time.ts instead of duplicating - Add CHART_COLORS constant for centralized color management - Simplify transformPairTrades to return data directly (remove unused error wrapper) - Update tests to match simplified return type - Add afterEach to restore timers in tests
- Use CHART_COLORS constants and CrosshairMode enum - Add dynamic time formatting based on selected range - Fix pairs update logic to handle data refetch - Fix bug where switching to empty time range broke the chart - Show overlay message instead of unmounting chart when no data
Contributor
WalkthroughAdds a new pair trades charting service and tests, refactors OrderTradesChart to use Lightweight Charts with pair/time controls and lifecycle management, and removes the removed Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant OrderTradesChart as Chart
participant PairService as pairTradesChartData
participant LWC as LightweightCharts
User->>Chart: open order page / interact (select pair/time)
Chart->>Chart: fetch trades (order.getTradesList)
Chart->>PairService: extractPairsFromTrades(trades)
PairService-->>Chart: list of TradingPair
Chart->>PairService: transformPairTrades({trades, base, quote, timeDelta})
activate PairService
PairService->>PairService: filter by pair & time window
PairService->>PairService: group by second, compute price (quote/base)
PairService->>PairService: bucket volumes (buy/sell), merge same-timestamp trades
PairService-->>Chart: {pricePoints, buyVolumePoints, sellVolumePoints}
deactivate PairService
Chart->>LWC: setSeriesData(price, buyHistogram, sellHistogram)
LWC-->>Chart: rendered
Chart-->>User: display updated chart
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/ui-components/src/lib/services/pairTradesChartData.ts
🧰 Additional context used
📓 Path-based instructions (7)
packages/ui-components/**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
For UI components (
packages/ui-components), run lints and format checks usingnix develop -c npm run svelte-lint-format-check -w @rainlanguage/ui-components
Files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/ui-components/src/lib/services/pairTradesChartData.ts
packages/{webapp,ui-components}/**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
If you modify frontend code or functionality affecting the frontend, you MUST provide a screenshot of the built webapp reflecting your change.
Files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/ui-components/src/lib/services/pairTradesChartData.ts
packages/**/*.{js,ts,svelte}
📄 CodeRabbit inference engine (AGENTS.md)
JavaScript/Svelte organized as
packages/*including webapp, ui-components, and orderbook (wasm wrapper published to npm)
Files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/ui-components/src/lib/services/pairTradesChartData.ts
**/*.{ts,tsx,svelte}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,svelte}: TypeScript/Svelte: format withnix develop -c npm run format
TypeScript/Svelte: lint withnix develop -c npm run lint
TypeScript/Svelte: type-check withnix develop -c npm run check
Files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/ui-components/src/lib/services/pairTradesChartData.ts
**/*.svelte
📄 CodeRabbit inference engine (AGENTS.md)
Svelte components should use
PascalCase.sveltenaming convention; other files use kebab or snake case as appropriate
Files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.svelte
packages/ui-components/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
For UI components (
packages/ui-components), run tests usingnix develop -c npm run test -w @rainlanguage/ui-components
Files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/services/pairTradesChartData.ts
**/*.{test,spec}.ts
📄 CodeRabbit inference engine (AGENTS.md)
TypeScript/Svelte: run tests with
nix develop -c npm run test(Vitest). Name test files*.test.tsor*.spec.ts
Files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
🧠 Learnings (17)
📓 Common learnings
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2297
File: tauri-app/src/lib/components/MetricChart.test.ts:68-85
Timestamp: 2025-11-06T15:31:40.811Z
Learning: In tauri-app/src/lib/components/MetricChart.test.ts, findolor considers it acceptable to duplicate Float parsing and formatting logic within test helper functions like buildPlotData, rather than extracting it to shared utilities or reusing production code like decodeRainFloat from chartData.ts.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1907
File: packages/orderbook/test/common/test.test.ts:75-77
Timestamp: 2025-06-04T10:21:01.388Z
Learning: The DotrainOrder.create API in packages/orderbook/test/common/test.test.ts is internal and not used directly in consumer applications, so API changes here don't require external breaking change documentation.
📚 Learning: 2025-04-11T06:05:46.473Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1599
File: tauri-app/src/routes/orders/add/+page.svelte:287-287
Timestamp: 2025-04-11T06:05:46.473Z
Learning: The ScenarioDebugTable component in tauri-app/src/routes/orders/add/+page.svelte has been designed to manage its own data fetching internally without requiring a chartData prop.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-11-06T15:31:40.811Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2297
File: tauri-app/src/lib/components/MetricChart.test.ts:68-85
Timestamp: 2025-11-06T15:31:40.811Z
Learning: In tauri-app/src/lib/components/MetricChart.test.ts, findolor considers it acceptable to duplicate Float parsing and formatting logic within test helper functions like buildPlotData, rather than extracting it to shared utilities or reusing production code like decodeRainFloat from chartData.ts.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/services/pairTradesChartData.ts
📚 Learning: 2025-06-04T10:21:01.388Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1907
File: packages/orderbook/test/common/test.test.ts:75-77
Timestamp: 2025-06-04T10:21:01.388Z
Learning: The DotrainOrder.create API in packages/orderbook/test/common/test.test.ts is internal and not used directly in consumer applications, so API changes here don't require external breaking change documentation.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/services/pairTradesChartData.ts
📚 Learning: 2025-04-17T08:47:59.930Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1599
File: tauri-app/src/lib/components/ScenarioDebugTable.svelte:46-53
Timestamp: 2025-04-17T08:47:59.930Z
Learning: The ScenarioDebugTable component in tauri-app/src/lib/components/ScenarioDebugTable.svelte has been designed to manage its own data fetching internally without requiring a chartData prop.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-09-02T08:04:44.814Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2117
File: packages/ui-components/src/__tests__/VaultIdInformation.test.ts:9-13
Timestamp: 2025-09-02T08:04:44.814Z
Learning: In packages/ui-components/src/__tests__/VaultIdInformation.test.ts and similar test files in the rain.orderbook project, the passthrough vi.mock('rainlanguage/orderbook', async (importOriginal) => { return { ...(await importOriginal()) }; }); block is required for tests to run properly, even when not overriding any exports. This is needed due to the specific Vitest configuration or test environment setup in the project.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-07-09T12:35:45.699Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1974
File: packages/ui-components/src/__tests__/DeploymentSteps.test.ts:123-126
Timestamp: 2025-07-09T12:35:45.699Z
Learning: In packages/ui-components/src/__tests__/DeploymentSteps.test.ts, findolor prefers to keep mock initializations (like setSelectToken) in individual test cases rather than consolidating them into shared beforeEach blocks, even when it results in duplication.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-11-25T16:50:11.197Z
Learnt from: CR
Repo: rainlanguage/rain.orderbook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T16:50:11.197Z
Learning: Applies to packages/orderbook/**/*.{ts,tsx,js,jsx} : For Orderbook TypeScript (`packages/orderbook`), run tests using `nix develop -c npm run test -w rainlanguage/orderbook`
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-08-04T09:07:00.160Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2048
File: packages/webapp/src/__tests__/WithdrawModal.test.ts:36-37
Timestamp: 2025-08-04T09:07:00.160Z
Learning: In packages/webapp/src/__tests__/WithdrawModal.test.ts and similar test files, findolor considers it acceptable to directly unwrap .value from Float.fromFixedDecimal() and Float.parse() calls without explicit error handling, preferring to keep test fixtures simple rather than adding comprehensive error checking.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-07-17T10:36:02.846Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1996
File: packages/ui-components/src/__tests__/VaultIdInformation.test.ts:6-6
Timestamp: 2025-07-17T10:36:02.846Z
Learning: In packages/ui-components/src/__tests__/VaultIdInformation.test.ts, findolor prefers to keep exported type aliases like `VaultIdInformationComponentProps` in test files, even when static analysis tools flag this as discouraged practice.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-11-25T16:50:31.752Z
Learnt from: CR
Repo: rainlanguage/rain.orderbook PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T16:50:31.752Z
Learning: Applies to test/**/*.sol : Solidity: write tests with `forge test`; add fuzz and property tests where relevant
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-04-08T09:18:46.653Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1597
File: packages/ui-components/src/__tests__/OrderDetail.test.ts:120-120
Timestamp: 2025-04-08T09:18:46.653Z
Learning: In test files for the Rain Orderbook project, it's acceptable to bypass TypeScript's strict typing using constructs like `as unknown as [Type]` to create simplified mock objects that don't need to implement the entire interface.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-04-04T11:25:21.518Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1559
File: packages/ui-components/src/__tests__/OrderOrVaultHash.test.ts:94-94
Timestamp: 2025-04-04T11:25:21.518Z
Learning: In the rain.orderbook project, minimal test fixtures are preferred over complete mocks that implement the entire interface. Type casting (e.g., `as unknown as SgVault`) is an acceptable approach to maintain both minimal fixtures and TypeScript type compatibility.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-03-26T16:16:51.943Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1515
File: packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/layout.test.ts:37-37
Timestamp: 2025-03-26T16:16:51.943Z
Learning: For Rain Orderbook projects, in test files, the preference is to use "as any" type assertions with per-line ESLint disable comments rather than creating dedicated types for test parameters.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-06-08T18:43:51.842Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1891
File: packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/page.test.ts:66-80
Timestamp: 2025-06-08T18:43:51.842Z
Learning: In the rain.orderbook webapp test files, when mocking objects like the transaction manager, it's acceptable to use simple empty objects with ts-expect-error comments rather than providing complete mock implementations with all properties and methods.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-07-04T09:14:35.748Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1956
File: packages/ui-components/src/__tests__/VaultDetail.test.ts:177-181
Timestamp: 2025-07-04T09:14:35.748Z
Learning: In the rain.orderbook project, maintainer findolor is fine with mutating mock data directly in test files using ts-expect-error comments, preferring this pragmatic approach over immutable patterns like spread operators for test data updates.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-04-09T09:28:05.097Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1512
File: packages/ui-components/src/__tests__/OrderDetail.test.ts:0-0
Timestamp: 2025-04-09T09:28:05.097Z
Learning: The OrderDetail component has been refactored to use an `onRemove` callback approach instead of the previous `handleOrderRemoveModal` pattern for order removal functionality, as part of PR #1512.
Applied to files:
packages/ui-components/src/lib/components/detail/OrderDetail.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (18)
- GitHub Check: standard-tests (ubuntu-latest, rainix-wasm-test)
- GitHub Check: standard-tests (ubuntu-latest, test-js-bindings)
- GitHub Check: standard-tests (ubuntu-latest, rainix-sol-test)
- GitHub Check: standard-tests (ubuntu-latest, rainix-rs-static)
- GitHub Check: standard-tests (ubuntu-latest, rainix-sol-artifacts)
- GitHub Check: standard-tests (ubuntu-latest, rainix-wasm-artifacts)
- GitHub Check: standard-tests (ubuntu-latest, rainix-sol-static)
- GitHub Check: standard-tests (ubuntu-latest, rainix-sol-legal)
- GitHub Check: standard-tests (ubuntu-latest, ob-rs-test, true)
- GitHub Check: standard-tests (ubuntu-latest, rainix-rs-artifacts, true)
- GitHub Check: standard-tests (ubuntu-latest, rainix-wasm-browser-test)
- GitHub Check: test
- GitHub Check: test
- GitHub Check: git-clean
- GitHub Check: test
- GitHub Check: build-tauri (ubuntu-22.04, true)
- GitHub Check: Deploy-Docs-Preview
- GitHub Check: Deploy-Preview-Push
🔇 Additional comments (21)
packages/ui-components/src/lib/components/detail/OrderDetail.svelte (1)
250-250: LGTM! Chart theming refactor correctly applied.The removal of the
colorThemeprop fromOrderTradesChartaligns with the refactoring where the chart now manages its own theming through thelightweightChartsThemeprop. This is a clean separation of concerns.packages/ui-components/src/__tests__/pairTradesChartData.test.ts (7)
19-63: LGTM!The mock helpers are well-structured and follow the project's convention of using minimal test fixtures with type casting (
as unknown as RaindexTrade). The mock data structure correctly mirrors the expectedRaindexTradeshape with appropriateformattedAmountvalues.
65-81: LGTM!Good coverage of all time delta to bucket size mappings.
83-120: LGTM!Comprehensive test coverage for pair extraction including edge cases for empty input, single/multiple pairs, and reversed direction handling.
122-138: LGTM!Correctly tests default pair selection based on the oldest trade.
140-155: LGTM!Good coverage of token label formatting rules including symbol presence, address truncation, and short address handling.
157-165: LGTM!Proper fake timer setup for deterministic time-sensitive tests.
167-305: LGTM!Excellent test coverage for
transformPairTradesincluding:
- Pair filtering and time window filtering
- Buy/sell trade direction identification
- Price calculation (quote/base ratio)
- Same-timestamp trade merging
- Bucket aggregation
- Negative sell volume representation
- Chronological sorting
The tests are well-structured and cover the critical transformation logic.
packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte (7)
28-42: LGTM!Clean state management setup with appropriate defaults and derived state for the selected pair.
44-83: LGTM!The pair extraction logic correctly handles:
- Incremental pair discovery (adds new pairs without duplicates)
- First-load default selection
- Preserves user selection across data updates
85-96: LGTM!Clean reactive derivation of chart data and pair label with proper null handling.
98-121: LGTM!The flip pair logic correctly handles both cases: selecting an existing flipped pair or adding a new one.
123-137: LGTM!Time formatting adapts appropriately to the selected time range granularity.
139-209: LGTM!Comprehensive chart setup with:
- Dual price scales (price on right, volume on left)
- Zero baseline lines for volume histogram
- Appropriate precision for price formatting
- Proper series initialization
275-390: LGTM!Well-structured template with:
- Comprehensive state handling (loading, error, empty, data)
- Clean UI organization with header controls and chart area
- Proper overlay for no-data-in-range state
- Good test coverage with
data-testidattributespackages/ui-components/src/lib/services/pairTradesChartData.ts (6)
1-60: LGTM!Well-organized module with clear type definitions, sensible bucket duration constants, and appropriate color choices for buy/sell visualization.
27-32: LGTM!Clear mapping logic with appropriate bucket sizes for each time range.
62-102: LGTM!Helper functions correctly handle:
- Case-insensitive address comparison
- Bidirectional pair matching
- Trade direction determination (buy = order received base token)
- Safe parsing with
Number.isFinitecheck
104-124: LGTM!Correct pair extraction with normalized ordering based on address comparison for consistent deduplication.
146-155: LGTM!Clean token labeling with appropriate fallback to truncated address.
164-238: LGTM!Comprehensive transformation logic with:
- Proper time window filtering
- Price aggregation at exact timestamps with weighted average (sum quote / sum base)
- Volume aggregation into time buckets
- Negative sell volumes for downward histogram bars
- Division-by-zero protection (line 187, 209)
- Sorted output for chart consumption
Comment on lines
+261
to
+264
| $: if (chartData) updateChartData(); | ||
| $: if (timeDelta && chart) setTimeScale(); | ||
| $: if ($lightweightChartsTheme && chart) setChartOptions(); | ||
| $: if (chartElement && trades.length > 0 && selectedPair && !chart) setupChart(); |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider consolidating reactive triggers.
The reactive statement on line 261 (if (chartData) updateChartData()) will also be triggered when setupChart() completes (line 208 calls updateChartData()), potentially causing a duplicate update on initial load. This is benign since setData is idempotent, but you could avoid the double-call by removing the updateChartData() call from setupChart() and relying solely on the reactive statement.
🤖 Prompt for AI Agents
In packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
around lines 261 to 264, the reactive statement "$: if (chartData)
updateChartData()" duplicates the update triggered by setupChart(); remove the
explicit call to updateChartData() from the setupChart() function (where it's
currently invoked during chart initialization) so the reactive statement is the
single source of truth for applying chartData updates; ensure setupChart() still
initializes the chart and related state but does not call updateChartData(),
allowing the reactive declaration to run once chartData and chart are ready.
Collaborator
Author
There was a problem hiding this comment.
The updateChartData() call inside setupChart() is necessary because the reactive statement at line 261 runs before the chart exists and silently fails, so removing it would leave the chart empty on initial load
Contributor
There was a problem hiding this comment.
@findolor, you're absolutely right! Thank you for the clarification. I misunderstood the initialization lifecycle—the reactive statement runs when chartData is first computed (before the chart exists), so it returns early. The explicit call in setupChart() is indeed necessary to populate the chart with the initial data after it's created. After that, the reactive statement handles all subsequent updates. My apologies for the incorrect suggestion!
🧠 Learnings used
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1599
File: tauri-app/src/routes/orders/add/+page.svelte:287-287
Timestamp: 2025-04-11T06:05:46.473Z
Learning: The ScenarioDebugTable component in tauri-app/src/routes/orders/add/+page.svelte has been designed to manage its own data fetching internally without requiring a chartData prop.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2001
File: packages/ui-components/src/lib/services/historicalOrderCharts.ts:18-21
Timestamp: 2025-07-16T14:33:03.454Z
Learning: User findolor is comfortable with potential precision loss when converting formatted decimal strings to JavaScript Number type in historicalOrderCharts.ts, preferring the simpler implementation over using decimal arithmetic libraries like decimal.js.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1599
File: tauri-app/src/lib/components/ScenarioDebugTable.svelte:46-53
Timestamp: 2025-04-17T08:47:59.930Z
Learning: The ScenarioDebugTable component in tauri-app/src/lib/components/ScenarioDebugTable.svelte has been designed to manage its own data fetching internally without requiring a chartData prop.
Learnt from: brusherru
Repo: rainlanguage/rain.orderbook PR: 2002
File: packages/ui-components/src/lib/components/tables/VaultsListTable.svelte:63-68
Timestamp: 2025-07-24T19:31:29.248Z
Learning: In Svelte components, functions that depend on reactive state and are used in template rendering (like `isVaultDisabled` in VaultsListTable.svelte) should remain as reactive statements ($:) rather than regular functions, because regular functions won't trigger UI updates when their dependencies change. This is especially important for UI state like disabled/enabled status that needs to update across multiple rendered items when selection state changes.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2297
File: tauri-app/src/lib/components/MetricChart.test.ts:68-85
Timestamp: 2025-11-06T15:31:40.811Z
Learning: In tauri-app/src/lib/components/MetricChart.test.ts, findolor considers it acceptable to duplicate Float parsing and formatting logic within test helper functions like buildPlotData, rather than extracting it to shared utilities or reusing production code like decodeRainFloat from chartData.ts.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1907
File: packages/orderbook/test/common/test.test.ts:75-77
Timestamp: 2025-06-04T10:21:01.388Z
Learning: The DotrainOrder.create API in packages/orderbook/test/common/test.test.ts is internal and not used directly in consumer applications, so API changes here don't require external breaking change documentation.
Comment on lines
40
to
41
| // eslint-disable-next-line svelte/valid-compile | ||
| export let colorTheme = undefined; |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's look at the actual file content around lines 40-41
cd packages/ui-components/src/lib/components/detail
head -n 50 OrderDetail.svelte | tail -n 20Repository: rainlanguage/rain.orderbook
Length of output: 852
🏁 Script executed:
# Search for OrderDetail component usage with colorTheme prop across the codebase
rg -n "OrderDetail" packages --type=svelte --type=ts --type=js --type=tsx --type=jsx -C 2 | head -100Repository: rainlanguage/rain.orderbook
Length of output: 101
🏁 Script executed:
# Check if colorTheme is passed to OrderDetail anywhere
rg -n "colorTheme" packages/ui-components/src --type=svelte --type=ts --type=js -C 2Repository: rainlanguage/rain.orderbook
Length of output: 101
🏁 Script executed:
# Look for the OrderTradesChart to understand the refactoring
rg -n "OrderTradesChart" packages/ui-components/src --type=svelte -C 3Repository: rainlanguage/rain.orderbook
Length of output: 101
🏁 Script executed:
# Search for OrderDetail component usage more broadly
rg "OrderDetail" packages --type-list | grep -i svelte
rg "OrderDetail" packages -g "*.svelte" -C 2Repository: rainlanguage/rain.orderbook
Length of output: 3408
🏁 Script executed:
# Check colorTheme usage more broadly
rg "colorTheme" packages -g "*.svelte" -g "*.ts" -g "*.tsx" -C 1Repository: rainlanguage/rain.orderbook
Length of output: 8231
🏁 Script executed:
# Look for all Svelte files that might import OrderDetail
fd "\.svelte$" packages | xargs rg -l "OrderDetail"Repository: rainlanguage/rain.orderbook
Length of output: 381
🏁 Script executed:
# Check if OrderDetail is exported from an index file or used in storybook/tests
fd "OrderDetail" packages --type fRepository: rainlanguage/rain.orderbook
Length of output: 195
Remove the eslint-disable comment and properly type the colorTheme prop.
The svelte/valid-compile disable hides a real type mismatch: the parent component (packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte) passes colorTheme as a Readable store from $lib/darkMode, but the export declares it with a default of undefined. While colorTheme is no longer used within OrderDetail (it was refactored to use lightweightChartsTheme), it is still a backwards-compatibility prop passed by the parent.
Replace the eslint-disable with proper type annotation:
export let colorTheme: Readable<string> | undefined = undefined;
This allows the parent's store to be accepted correctly without suppressing the actual type error.
🤖 Prompt for AI Agents
In packages/ui-components/src/lib/components/detail/OrderDetail.svelte around
lines 40-41, remove the "// eslint-disable-next-line svelte/valid-compile" line
and replace the loose export with a properly typed prop so the parent Readable
store is accepted; add an import for Readable from 'svelte/store' if not present
and declare the prop as a Readable<string> | undefined with the default
undefined to preserve backwards compatibility.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (7)
packages/ui-components/src/__tests__/OrderDetail.test.tspackages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/ui-components/src/lib/services/pairTradesChartData.tspackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.sveltetauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
💤 Files with no reviewable changes (1)
- packages/ui-components/src/tests/OrderDetail.test.ts
🧰 Additional context used
📓 Path-based instructions (9)
packages/ui-components/**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
For UI components (
packages/ui-components), run lints and format checks usingnix develop -c npm run svelte-lint-format-check -w @rainlanguage/ui-components
Files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/services/pairTradesChartData.tspackages/ui-components/src/lib/components/detail/OrderDetail.svelte
packages/ui-components/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
For UI components (
packages/ui-components), run tests usingnix develop -c npm run test -w @rainlanguage/ui-components
Files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/services/pairTradesChartData.ts
packages/{webapp,ui-components}/**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
If you modify frontend code or functionality affecting the frontend, you MUST provide a screenshot of the built webapp reflecting your change.
Files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/services/pairTradesChartData.tspackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
packages/**/*.{js,ts,svelte}
📄 CodeRabbit inference engine (AGENTS.md)
JavaScript/Svelte organized as
packages/*including webapp, ui-components, and orderbook (wasm wrapper published to npm)
Files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/services/pairTradesChartData.tspackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
**/*.{ts,tsx,svelte}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,svelte}: TypeScript/Svelte: format withnix develop -c npm run format
TypeScript/Svelte: lint withnix develop -c npm run lint
TypeScript/Svelte: type-check withnix develop -c npm run check
Files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tstauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.sveltepackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/services/pairTradesChartData.tspackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
**/*.{test,spec}.ts
📄 CodeRabbit inference engine (AGENTS.md)
TypeScript/Svelte: run tests with
nix develop -c npm run test(Vitest). Name test files*.test.tsor*.spec.ts
Files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
tauri-app/**
📄 CodeRabbit inference engine (AGENTS.md)
Desktop app located in
tauri-appwith Rust and Svelte; excludesrc-taurifrom Cargo workspace
Files:
tauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
**/*.svelte
📄 CodeRabbit inference engine (AGENTS.md)
Svelte components should use
PascalCase.sveltenaming convention; other files use kebab or snake case as appropriate
Files:
tauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.sveltepackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
packages/webapp/**/*.{svelte,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
For Webapp (
packages/webapp), run lints and format checks usingnix develop -c npm run svelte-lint-format-check -w @rainlanguage/webapp
Files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
🧠 Learnings (45)
📚 Learning: 2025-09-02T08:04:44.814Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2117
File: packages/ui-components/src/__tests__/VaultIdInformation.test.ts:9-13
Timestamp: 2025-09-02T08:04:44.814Z
Learning: In packages/ui-components/src/__tests__/VaultIdInformation.test.ts and similar test files in the rain.orderbook project, the passthrough vi.mock('rainlanguage/orderbook', async (importOriginal) => { return { ...(await importOriginal()) }; }); block is required for tests to run properly, even when not overriding any exports. This is needed due to the specific Vitest configuration or test environment setup in the project.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-11-06T15:31:40.811Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2297
File: tauri-app/src/lib/components/MetricChart.test.ts:68-85
Timestamp: 2025-11-06T15:31:40.811Z
Learning: In tauri-app/src/lib/components/MetricChart.test.ts, findolor considers it acceptable to duplicate Float parsing and formatting logic within test helper functions like buildPlotData, rather than extracting it to shared utilities or reusing production code like decodeRainFloat from chartData.ts.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/services/pairTradesChartData.ts
📚 Learning: 2025-06-04T10:21:01.388Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1907
File: packages/orderbook/test/common/test.test.ts:75-77
Timestamp: 2025-06-04T10:21:01.388Z
Learning: The DotrainOrder.create API in packages/orderbook/test/common/test.test.ts is internal and not used directly in consumer applications, so API changes here don't require external breaking change documentation.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tstauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.sveltepackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/services/pairTradesChartData.tspackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-07-09T12:35:45.699Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1974
File: packages/ui-components/src/__tests__/DeploymentSteps.test.ts:123-126
Timestamp: 2025-07-09T12:35:45.699Z
Learning: In packages/ui-components/src/__tests__/DeploymentSteps.test.ts, findolor prefers to keep mock initializations (like setSelectToken) in individual test cases rather than consolidating them into shared beforeEach blocks, even when it results in duplication.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-11-25T16:50:11.197Z
Learnt from: CR
Repo: rainlanguage/rain.orderbook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T16:50:11.197Z
Learning: Applies to packages/orderbook/**/*.{ts,tsx,js,jsx} : For Orderbook TypeScript (`packages/orderbook`), run tests using `nix develop -c npm run test -w rainlanguage/orderbook`
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-07-17T10:36:02.846Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1996
File: packages/ui-components/src/__tests__/VaultIdInformation.test.ts:6-6
Timestamp: 2025-07-17T10:36:02.846Z
Learning: In packages/ui-components/src/__tests__/VaultIdInformation.test.ts, findolor prefers to keep exported type aliases like `VaultIdInformationComponentProps` in test files, even when static analysis tools flag this as discouraged practice.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-08-04T09:07:00.160Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2048
File: packages/webapp/src/__tests__/WithdrawModal.test.ts:36-37
Timestamp: 2025-08-04T09:07:00.160Z
Learning: In packages/webapp/src/__tests__/WithdrawModal.test.ts and similar test files, findolor considers it acceptable to directly unwrap .value from Float.fromFixedDecimal() and Float.parse() calls without explicit error handling, preferring to keep test fixtures simple rather than adding comprehensive error checking.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-04-08T09:18:46.653Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1597
File: packages/ui-components/src/__tests__/OrderDetail.test.ts:120-120
Timestamp: 2025-04-08T09:18:46.653Z
Learning: In test files for the Rain Orderbook project, it's acceptable to bypass TypeScript's strict typing using constructs like `as unknown as [Type]` to create simplified mock objects that don't need to implement the entire interface.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-11-25T16:50:31.752Z
Learnt from: CR
Repo: rainlanguage/rain.orderbook PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T16:50:31.752Z
Learning: Applies to test/**/*.sol : Solidity: write tests with `forge test`; add fuzz and property tests where relevant
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-04-04T11:25:21.518Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1559
File: packages/ui-components/src/__tests__/OrderOrVaultHash.test.ts:94-94
Timestamp: 2025-04-04T11:25:21.518Z
Learning: In the rain.orderbook project, minimal test fixtures are preferred over complete mocks that implement the entire interface. Type casting (e.g., `as unknown as SgVault`) is an acceptable approach to maintain both minimal fixtures and TypeScript type compatibility.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-07-04T09:14:35.748Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1956
File: packages/ui-components/src/__tests__/VaultDetail.test.ts:177-181
Timestamp: 2025-07-04T09:14:35.748Z
Learning: In the rain.orderbook project, maintainer findolor is fine with mutating mock data directly in test files using ts-expect-error comments, preferring this pragmatic approach over immutable patterns like spread operators for test data updates.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
📚 Learning: 2025-06-08T18:43:51.842Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1891
File: packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/page.test.ts:66-80
Timestamp: 2025-06-08T18:43:51.842Z
Learning: In the rain.orderbook webapp test files, when mocking objects like the transaction manager, it's acceptable to use simple empty objects with ts-expect-error comments rather than providing complete mock implementations with all properties and methods.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.ts
📚 Learning: 2025-03-26T16:16:51.943Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1515
File: packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/layout.test.ts:37-37
Timestamp: 2025-03-26T16:16:51.943Z
Learning: For Rain Orderbook projects, in test files, the preference is to use "as any" type assertions with per-line ESLint disable comments rather than creating dedicated types for test parameters.
Applied to files:
packages/ui-components/src/__tests__/pairTradesChartData.test.tspackages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-04-09T09:28:05.097Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1512
File: packages/ui-components/src/__tests__/OrderDetail.test.ts:0-0
Timestamp: 2025-04-09T09:28:05.097Z
Learning: The OrderDetail component has been refactored to use an `onRemove` callback approach instead of the previous `handleOrderRemoveModal` pattern for order removal functionality, as part of PR #1512.
Applied to files:
tauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-04-11T06:05:46.473Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1599
File: tauri-app/src/routes/orders/add/+page.svelte:287-287
Timestamp: 2025-04-11T06:05:46.473Z
Learning: The ScenarioDebugTable component in tauri-app/src/routes/orders/add/+page.svelte has been designed to manage its own data fetching internally without requiring a chartData prop.
Applied to files:
tauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.sveltepackages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-07-24T08:16:47.393Z
Learnt from: brusherru
Repo: rainlanguage/rain.orderbook PR: 2002
File: tauri-app/src/lib/components/ModalMultipleVaultsWithdraw.svelte:20-25
Timestamp: 2025-07-24T08:16:47.393Z
Learning: In the Rain OrderBook Tauri app, modal components directly mutate the `open` prop (setting `open = false`) as a consistent pattern across the codebase. This approach is maintained for consistency even though it violates typical Svelte one-way data flow, with plans to refactor all modals together in the future rather than making isolated changes.
Applied to files:
tauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-04-08T16:35:15.127Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1504
File: tauri-app/src/routes/orders/[network]-[orderHash]/+page.svelte:33-37
Timestamp: 2025-04-08T16:35:15.127Z
Learning: In the Rain OrderBook project, the onDeposit and onWithdraw functions in page components are kept simple (just calling modal handlers and revalidating queries) because error handling for deposit and withdraw actions (including user cancellations and failed transactions) is handled within the modal components themselves.
Applied to files:
tauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.sveltepackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-04-03T11:29:00.839Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1504
File: packages/webapp/src/routes/orders/[network]-[orderHash]/+page.svelte:50-74
Timestamp: 2025-04-03T11:29:00.839Z
Learning: In the Rain OrderBook app, error handling for deposit and withdraw actions (including user cancellations and failed transactions) is implemented in the transaction modal component, not in the page-level action handlers.
Applied to files:
tauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.sveltepackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-04-17T08:47:59.930Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1599
File: tauri-app/src/lib/components/ScenarioDebugTable.svelte:46-53
Timestamp: 2025-04-17T08:47:59.930Z
Learning: The ScenarioDebugTable component in tauri-app/src/lib/components/ScenarioDebugTable.svelte has been designed to manage its own data fetching internally without requiring a chartData prop.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-07-26T06:56:28.207Z
Learnt from: hardyjosh
Repo: rainlanguage/rain.orderbook PR: 2035
File: packages/ui-components/src/lib/components/tables/OrdersListTable.svelte:167-174
Timestamp: 2025-07-26T06:56:28.207Z
Learning: In OrdersListTable.svelte, maintainer hardyjosh considers keyed each-blocks unnecessary for item.inputs and item.outputs arrays because the entire query result updates at once during refresh, making DOM diffing optimizations negligible when the whole dataset is replaced rather than individual items being modified.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-07-24T19:31:29.248Z
Learnt from: brusherru
Repo: rainlanguage/rain.orderbook PR: 2002
File: packages/ui-components/src/lib/components/tables/VaultsListTable.svelte:63-68
Timestamp: 2025-07-24T19:31:29.248Z
Learning: In Svelte components, functions that depend on reactive state and are used in template rendering (like `isVaultDisabled` in VaultsListTable.svelte) should remain as reactive statements ($:) rather than regular functions, because regular functions won't trigger UI updates when their dependencies change. This is especially important for UI state like disabled/enabled status that needs to update across multiple rendered items when selection state changes.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
📚 Learning: 2025-09-02T08:04:34.729Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2117
File: crates/js_api/src/gui/select_tokens.rs:421-424
Timestamp: 2025-09-02T08:04:34.729Z
Learning: User findolor in the rainlanguage/rain.orderbook codebase prefers not to change test code when tests are already passing, even if there appear to be type mismatches or potential issues. Working tests should be left alone unless there are actual errors.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
📚 Learning: 2025-07-16T14:33:03.454Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2001
File: packages/ui-components/src/lib/services/historicalOrderCharts.ts:18-21
Timestamp: 2025-07-16T14:33:03.454Z
Learning: User findolor is comfortable with potential precision loss when converting formatted decimal strings to JavaScript Number type in historicalOrderCharts.ts, preferring the simpler implementation over using decimal arithmetic libraries like decimal.js.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
📚 Learning: 2025-11-06T19:46:38.652Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2301
File: packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte:45-66
Timestamp: 2025-11-06T19:46:38.652Z
Learning: User findolor in the rainlanguage/rain.orderbook repository prefers not to add test coverage for clipboard API edge cases (e.g., undefined error parameter, clipboard API unavailability) in the TanstackOrderQuote component.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
📚 Learning: 2025-07-04T10:23:41.820Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1956
File: packages/orderbook/test/js_api/raindexClient.test.ts:91-99
Timestamp: 2025-07-04T10:23:41.820Z
Learning: In the rain.orderbook project, maintainer findolor is fine with test code patterns that might seem like inverted logic in production contexts, such as the extractWasmEncodedData function in test files that returns undefined values when result.value is undefined.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
📚 Learning: 2025-03-31T10:16:53.544Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1469
File: packages/ui-components/src/__tests__/CodeMirrorDotrain.test.ts:75-98
Timestamp: 2025-03-31T10:16:53.544Z
Learning: In the rainlanguage/rain.orderbook project, direct manipulation of Svelte's internal state (component.$$.ctx) in tests is an acceptable approach for testing component behavior, as demonstrated in the CodeMirrorDotrain tests.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
📚 Learning: 2025-07-23T10:51:18.597Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2012
File: packages/orderbook/test/js_api/dotrainRegistry.test.ts:10-10
Timestamp: 2025-07-23T10:51:18.597Z
Learning: In the rain.orderbook project, maintainer findolor is fine with using `typeof void 0 === typeof result.value` for undefined checks in test files like packages/orderbook/test/js_api/dotrainRegistry.test.ts, preferring to keep this pattern rather than changing it to `result.value === undefined` for readability.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.sveltepackages/ui-components/src/lib/services/pairTradesChartData.tspackages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-06-10T12:01:07.418Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1916
File: packages/webapp/src/routes/+layout.ts:26-26
Timestamp: 2025-06-10T12:01:07.418Z
Learning: The user findolor prefers to keep string concatenation using the plus operator over template literals in the rainlanguage/rain.orderbook project, even when static analysis tools suggest the change.
Applied to files:
packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte
📚 Learning: 2025-09-16T07:52:46.075Z
Learnt from: thedavidmeister
Repo: rainlanguage/rain.orderbook PR: 2149
File: src/concrete/arb/RouteProcessorOrderBookV5ArbOrderTaker.sol:37-39
Timestamp: 2025-09-16T07:52:46.075Z
Learning: In the rainlanguage/rain.orderbook codebase, Slither static analysis tool prefers explicit handling of unused return values by capturing them in variables and referencing them in no-op statements (e.g., `(losslessInputAmount);`) rather than discarding them via destructuring with blank elements (e.g., `(uint256 inputTokenAmount, ) = ...`). The explicit pattern satisfies Slither's unused return value checks while the destructuring approach causes Slither to complain.
Applied to files:
packages/ui-components/src/lib/services/pairTradesChartData.ts
📚 Learning: 2025-09-24T11:03:03.867Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2163
File: packages/ui-components/src/lib/components/detail/OrderDetail.svelte:280-281
Timestamp: 2025-09-24T11:03:03.867Z
Learning: The CodeMirrorRainlang component in the Rain orderbook UI has internal null/undefined checking for the rainlangText prop, so defensive defaults are not needed when passing potentially undefined values.
Applied to files:
packages/ui-components/src/lib/services/pairTradesChartData.tspackages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-07-04T10:24:56.163Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1956
File: crates/common/src/raindex_client/trades.rs:215-223
Timestamp: 2025-07-04T10:24:56.163Z
Learning: In the rain.orderbook codebase, the get_trade_count method implementation that fetches all trades to count them is intentionally consistent with previous implementations and not considered a performance issue, as indicated by findolor for the trades counting functionality in crates/common/src/raindex_client/trades.rs.
Applied to files:
packages/ui-components/src/lib/services/pairTradesChartData.ts
📚 Learning: 2025-04-10T16:32:51.198Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1651
File: packages/ui-components/src/lib/components/TanstackAppTable.svelte:13-13
Timestamp: 2025-04-10T16:32:51.198Z
Learning: In the TanstackAppTable.svelte component, the queryKey prop should be required (type: string) rather than optional (string | undefined) to ensure proper query invalidation.
Applied to files:
packages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-07-17T13:33:29.619Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2004
File: packages/ui-components/src/lib/components/input/InputRegistryUrl.svelte:29-33
Timestamp: 2025-07-17T13:33:29.619Z
Learning: In packages/ui-components/src/lib/components/input/InputRegistryUrl.svelte, findolor is comfortable keeping the input element id as "strategy-url" even when the placeholder text has been updated to reference "order", indicating acceptance of mixed terminology during the strategy-to-order rename transition.
Applied to files:
packages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-06-17T17:48:58.544Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1903
File: packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte:24-31
Timestamp: 2025-06-17T17:48:58.544Z
Learning: The project maintainer prefers not to use readonly modifiers on component props like rpcUrls: string[] even when they're not mutated, indicating a preference for simpler typing over stricter immutability enforcement in Svelte components.
Applied to files:
packages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-04-08T12:56:03.272Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1512
File: packages/ui-components/src/__tests__/OrderDetail.test.ts:125-143
Timestamp: 2025-04-08T12:56:03.272Z
Learning: The OrderDetail component in the Rain orderbook UI doesn't currently have error handling tests, but issue #1605 has been created to address this in the future.
Applied to files:
packages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-05-15T09:33:54.104Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1750
File: packages/ui-components/src/lib/types/toast.ts:0-0
Timestamp: 2025-05-15T09:33:54.104Z
Learning: The ToastProps interface in packages/ui-components/src/lib/types/toast.ts intentionally keeps both `type` ('success', 'error', 'warning', 'info') and `color` ('green', 'red', 'yellow', 'blue') properties separate to maintain flexibility, even though they have a default one-to-one mapping.
Applied to files:
packages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-11-25T16:50:31.752Z
Learnt from: CR
Repo: rainlanguage/rain.orderbook PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T16:50:31.752Z
Learning: Applies to packages/**/*.{js,ts,svelte} : JavaScript/Svelte organized as `packages/*` including webapp, ui-components, and orderbook (wasm wrapper published to npm)
Applied to files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-07-17T13:33:08.771Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2004
File: packages/ui-components/src/lib/components/deployment/InvalidStrategiesSection.svelte:10-12
Timestamp: 2025-07-17T13:33:08.771Z
Learning: In packages/ui-components/src/lib/components/deployment/InvalidStrategiesSection.svelte, maintainer findolor is comfortable with mixed terminology during the strategy-to-order rename, where user-facing text is updated to "orders" but internal identifiers like test IDs ("invalid-strategies") and prop names ("strategiesWithErrors") can remain using "strategy" terminology.
Applied to files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-10-19T20:24:08.629Z
Learnt from: rouzwelt
Repo: rainlanguage/rain.orderbook PR: 2246
File: packages/webapp/src/hooks.client.ts:2-2
Timestamp: 2025-10-19T20:24:08.629Z
Learning: In the rain.orderbook repository, the import `rainlanguage/orderbook/esm` in packages/webapp/src/hooks.client.ts is intentional and should not be changed to the root package path, as it's specific to the webapp build configuration.
Applied to files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-09-02T08:05:07.646Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2117
File: packages/webapp/src/lib/components/DepositModal.svelte:25-28
Timestamp: 2025-09-02T08:05:07.646Z
Learning: In packages/webapp/src/lib/components/DepositModal.svelte, findolor considers the double-cast pattern `as unknown as AccountBalance` safe for initializing userBalance with Float.parse('0').value and formattedBalance: '0'.
Applied to files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-05-20T12:01:28.391Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1870
File: packages/webapp/src/lib/components/WithdrawModal.svelte:33-33
Timestamp: 2025-05-20T12:01:28.391Z
Learning: In the rain.orderbook project, transaction success handling in modal components is managed by the TransactionModal component and listeners that handle adding toasts, rather than directly invoking callbacks. This is part of the architecture being refactored as transactions are moved to the TransactionManager.
Applied to files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-06-07T09:15:27.885Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1882
File: packages/ui-components/src/lib/types/modal.ts:31-31
Timestamp: 2025-06-07T09:15:27.885Z
Learning: In the rain.orderbook project, `toAddress` and `orderbookAddress` are distinct variables serving different purposes: `toAddress` is used in transaction confirmation modals (particularly for deposits) to represent the transaction recipient, while `orderbookAddress` is used elsewhere for orderbook-specific logic outside of deposit-related flows.
Applied to files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-05-19T10:39:19.157Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1831
File: packages/ui-components/src/lib/types/transaction.ts:71-77
Timestamp: 2025-05-19T10:39:19.157Z
Learning: In the Rain Orderbook project, `orderHash` is typed as `string` (not `Hex`) in the `InternalTransactionArgs` interface because it comes from the WASM function `getRemoveOrderCalldata` which returns a string value. Meanwhile, `txHash` is typed as `Hex` since it represents an actual blockchain transaction hash that requires the stricter type.
Applied to files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-10-29T13:29:29.578Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2278
File: packages/webapp/src/lib/services/startLocalDbSync.ts:23-29
Timestamp: 2025-10-29T13:29:29.578Z
Learning: In packages/webapp/src/lib/services/startLocalDbSync.ts, the hard-coded default orderbook address '0x2f209e5b67A33B8fE96E28f24628dF6Da301c8eB' is a temporary placeholder that will be removed when new sync logic is introduced in the Raindex client, as documented in the NOTE comment.
Applied to files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
📚 Learning: 2025-05-19T10:39:19.157Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1831
File: packages/ui-components/src/lib/types/transaction.ts:71-77
Timestamp: 2025-05-19T10:39:19.157Z
Learning: In the Rain Orderbook project, `orderHash` is intentionally typed as `string` (not `Hex`) in the `InternalTransactionArgs` interface because it matches the return type of the `getRemoveOrderCalldata` WASM function which returns `Promise<string>`. String operations like `.slice()` are performed on `orderHash` in the code. Meanwhile, `txHash` is typed as `Hex` for blockchain transaction hashes.
Applied to files:
packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte
🧬 Code graph analysis (1)
packages/ui-components/src/__tests__/pairTradesChartData.test.ts (1)
packages/ui-components/src/lib/services/pairTradesChartData.ts (12)
getBucketSecondsForTimeDelta(27-32)TIME_DELTA_24_HOURS(11-11)BUCKET_SECONDS_24_HOURS(13-13)TIME_DELTA_7_DAYS(11-11)BUCKET_SECONDS_7_DAYS(14-14)TIME_DELTA_30_DAYS(11-11)BUCKET_SECONDS_30_DAYS(15-15)BUCKET_SECONDS_1_YEAR(16-16)extractPairsFromTrades(104-124)getDefaultPair(126-142)getTokenLabel(144-153)transformPairTrades(162-236)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (18)
- GitHub Check: test
- GitHub Check: git-clean
- GitHub Check: standard-tests (ubuntu-latest, rainix-wasm-browser-test)
- GitHub Check: standard-tests (ubuntu-latest, rainix-wasm-test)
- GitHub Check: standard-tests (ubuntu-latest, rainix-sol-static)
- GitHub Check: standard-tests (ubuntu-latest, rainix-rs-artifacts, true)
- GitHub Check: standard-tests (ubuntu-latest, rainix-wasm-artifacts)
- GitHub Check: standard-tests (ubuntu-latest, rainix-sol-legal)
- GitHub Check: standard-tests (ubuntu-latest, test-js-bindings)
- GitHub Check: standard-tests (ubuntu-latest, rainix-rs-static)
- GitHub Check: standard-tests (ubuntu-latest, rainix-sol-artifacts)
- GitHub Check: standard-tests (ubuntu-latest, rainix-sol-test)
- GitHub Check: test
- GitHub Check: standard-tests (ubuntu-latest, ob-rs-test, true)
- GitHub Check: test
- GitHub Check: build-tauri (ubuntu-22.04, true)
- GitHub Check: Deploy-Preview-Push
- GitHub Check: Deploy-Docs-Preview
🔇 Additional comments (19)
packages/ui-components/src/lib/services/pairTradesChartData.ts (5)
1-32: LGTM! Well-structured constants and bucket mapping.The time delta constants are properly re-exported from the time module, and the bucket seconds mapping provides sensible granularity for each time range (15min buckets for 24H up to daily buckets for 1Y). The CHART_COLORS constant provides consistent theming.
83-102: LGTM! Robust amount parsing with proper validation.The
getTradeAmountsfunction correctly usesNumber.isFiniteto guard against invalid parsed values, and the buy/sell direction logic is clear: when the input token matches the base token, it's a buy (order received base).
104-142: LGTM! Consistent pair extraction and default selection.The lexicographic address comparison ensures deterministic pair key generation regardless of trade direction. The
getDefaultPairfunction correctly identifies the oldest trade's pair using consistent ordering logic.
144-153: LGTM! Clean token label generation with fallback.
162-236: LGTM! Solid data transformation with volume-weighted price aggregation.The implementation correctly:
- Filters trades by time window and pair
- Calculates volume-weighted prices when multiple trades share a timestamp
- Buckets volumes by time delta granularity
- Negates sell volumes for chart visualization (bars below zero line)
- Sorts all output arrays chronologically
The use of
Date.now()is properly testable via Vitest's fake timers as demonstrated in the test file.packages/ui-components/src/lib/components/detail/OrderDetail.svelte (1)
247-249: LGTM! Clean prop removal aligning with updated chart API.The
colorThemeprop has been properly removed from theOrderTradesChartinvocation, matching the component's updated signature that now only requireslightweightChartsThemefor theming.packages/webapp/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte (2)
4-4: LGTM! Clean import update.Removed unused
colorThemeimport to match the updatedOrderDetailcomponent API.
83-93: LGTM! Component invocation updated correctly.The
OrderDetailcomponent receives only the necessary props after thecolorThemeremoval.tauri-app/src/routes/orders/[chainId]-[orderbook]-[orderHash]/+page.svelte (2)
9-9: LGTM! Import aligned with component API changes.
78-92: LGTM! Consistent with webapp changes.The tauri-app order detail page correctly mirrors the webapp changes, removing the
colorThemeprop fromOrderDetail.packages/ui-components/src/__tests__/pairTradesChartData.test.ts (4)
19-65: LGTM! Well-structured mock helpers.The mock helpers follow project conventions using
as unknown astype assertions for simplified test fixtures. ThecreateMockTradehelper properly sets up all necessary fields for testing the transformation logic.
159-167: LGTM! Proper use of fake timers.The
beforeEach/afterEachsetup correctly uses Vitest's fake timers with a fixed timestamp (1700000000), ensuring deterministic time-based filtering in alltransformPairTradestests.
200-226: LGTM! Thorough buy/sell direction testing.These tests properly validate that the
isBuylogic depends on which token (base or quote) is the input token, ensuring the chart correctly separates buy volume (green, positive) from sell volume (red, negative).
258-276: LGTM! Volume bucketing validation.The test correctly verifies that trades within the same time bucket are aggregated (100 + 50 = 150), validating the bucketing logic in
transformPairTrades.packages/ui-components/src/lib/components/charts/OrderTradesChart.svelte (5)
57-85: LGTM! Proper pair accumulation with first-load default selection.The reactive block correctly:
- Accumulates new pairs as trades update (allows for flipped pairs to persist)
- Sets the default pair only on initial load
- Uses immutable array updates via spread operator
100-118: LGTM! Clean pair flip implementation.The
flipPairfunction correctly enables the inverse ratio view (tkn2/tkn1 ↔ tkn1/tkn2) by either selecting an existing flipped pair or creating a new one.
141-211: LGTM! Well-structured chart initialization.The
setupChartfunction properly:
- Configures dual price scales (left for volume bars, right for price line)
- Creates separate histogram series for buy/sell volumes with zero-line baselines
- Applies theme options and initial data after series creation
263-274: LGTM! Proper reactive lifecycle management.The reactive statements correctly handle:
- Data updates when
chartDatachanges (line 263)- Time scale updates when
timeDeltachanges (line 264)- Theme updates when
lightweightChartsThemechanges (line 265)- Initial chart setup with guard to prevent re-initialization (line 266)
The explicit
updateChartData()call insetupChart()is necessary because the reactive statement at line 263 runs before the chart is created.
365-391: LGTM! Comprehensive state handling in template.The template properly handles all states:
- Loading indicator during data fetch
- Error display with message
- Empty state when no trades exist
- Overlay message when selected pair/time range has no data
The conditional overlay at lines 380-389 ensures users understand why an otherwise-ready chart shows no content.
Comment on lines
46
to
53
| $: query = createQuery({ | ||
| queryKey: [QKEY_ORDER_TRADES_LIST, order.id], | ||
| queryFn: async () => { | ||
| const data = await order.getTradesList(BigInt(1000), undefined, 1); | ||
| const data = await order.getTradesList(undefined, undefined, 1); | ||
| if (data.error) throw new Error(data.error.readableMsg); | ||
| return prepareHistoricalOrderChartData(data.value, $colorTheme); | ||
| return data.value; | ||
| } | ||
| }); |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find getTradesList method definition
ast-grep --pattern 'getTradesList($$$)'Repository: rainlanguage/rain.orderbook
Length of output: 53
🏁 Script executed:
# Look for getTradesList usage patterns across the codebase
rg "getTradesList" -B 2 -A 2 --type ts --type svelte | head -50Repository: rainlanguage/rain.orderbook
Length of output: 101
🏁 Script executed:
# Find the Order class/type definition to understand which client is being used
rg "class Order" -A 10 --type ts | head -50Repository: rainlanguage/rain.orderbook
Length of output: 53
🏁 Script executed:
# Search for pagination-related patterns in getTradesList implementations
rg "getTradesList" --type ts -A 5 | grep -E "(page|offset|limit|pagination)" | head -20Repository: rainlanguage/rain.orderbook
Length of output: 53
🏁 Script executed:
# Read the OrderTradesChart.svelte file to understand the order type and imports
head -80 packages/ui-components/src/lib/components/charts/OrderTradesChart.svelteRepository: rainlanguage/rain.orderbook
Length of output: 2641
🏁 Script executed:
# Search for getTradesList with better pattern (no type restrictions)
rg "getTradesList" -B 2 -A 5 | head -80Repository: rainlanguage/rain.orderbook
Length of output: 5147
🏁 Script executed:
# Find where Order type is defined or imported
rg "type Order" --type ts | head -20Repository: rainlanguage/rain.orderbook
Length of output: 318
🏁 Script executed:
# Look for getTradesList method implementations
rg "getTradesList\s*\(" --type ts -A 8 | head -100Repository: rainlanguage/rain.orderbook
Length of output: 1090
🏁 Script executed:
# Find the get_trades_list method implementation in the Rust code
sed -n '133,200p' crates/common/src/raindex_client/trades.rsRepository: rainlanguage/rain.orderbook
Length of output: 2520
🏁 Script executed:
# Look for more context around the method signature and parameters
sed -n '100,160p' crates/common/src/raindex_client/trades.rsRepository: rainlanguage/rain.orderbook
Length of output: 2418
🏁 Script executed:
# Search for LocalDb and pagination handling in the trades.rs file
rg "LocalDb|page|pagination" crates/common/src/raindex_client/trades.rs -A 3 -B 3Repository: rainlanguage/rain.orderbook
Length of output: 3207
Pagination in chart may be incomplete for subgraph-based orders.
The query fetches trades with getTradesList(undefined, undefined, 1), which uses pagination parameter page=1. Behavior depends on the data source:
- LocalDb path: Ignores the page parameter and returns ALL trades (intentional design for fast local queries)
- Subgraph path: Uses pagination and only returns page 1 of results
This means for orders with extensive trade history using subgraph (non-LocalDb chains), the chart visualization may be incomplete. If all trades need to be displayed, consider adopting the pagination pattern used in OrderTradesListTable.svelte, which uses useInfiniteQuery to fetch all pages.
Collaborator
Author
There was a problem hiding this comment.
That is because we get all the trades that we can get from the subgraph so that is not an issue
Contributor
There was a problem hiding this comment.
@findolor, thank you for the clarification! I understand now that the current implementation correctly retrieves all available trades from the subgraph as intended. I appreciate you setting the record straight.
🧠 Learnings used
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1599
File: tauri-app/src/routes/orders/add/+page.svelte:287-287
Timestamp: 2025-04-11T06:05:46.473Z
Learning: The ScenarioDebugTable component in tauri-app/src/routes/orders/add/+page.svelte has been designed to manage its own data fetching internally without requiring a chartData prop.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2001
File: packages/ui-components/src/lib/services/historicalOrderCharts.ts:18-21
Timestamp: 2025-07-16T14:33:03.454Z
Learning: User findolor is comfortable with potential precision loss when converting formatted decimal strings to JavaScript Number type in historicalOrderCharts.ts, preferring the simpler implementation over using decimal arithmetic libraries like decimal.js.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1599
File: tauri-app/src/lib/components/ScenarioDebugTable.svelte:46-53
Timestamp: 2025-04-17T08:47:59.930Z
Learning: The ScenarioDebugTable component in tauri-app/src/lib/components/ScenarioDebugTable.svelte has been designed to manage its own data fetching internally without requiring a chartData prop.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2155
File: crates/common/src/raindex_client/trades.rs:133-152
Timestamp: 2025-10-06T14:13:18.531Z
Learning: In the rain.orderbook codebase, the `page` parameter in `RaindexOrder::get_trades_list` method (in crates/common/src/raindex_client/trades.rs) is kept for backwards compatibility with subgraph logic, but the LocalDb fast-path intentionally returns all trades without implementing pagination.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1956
File: crates/common/src/raindex_client/trades.rs:215-223
Timestamp: 2025-07-04T10:24:56.163Z
Learning: In the rain.orderbook codebase, the get_trade_count method implementation that fetches all trades to count them is intentionally consistent with previous implementations and not considered a performance issue, as indicated by findolor for the trades counting functionality in crates/common/src/raindex_client/trades.rs.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1858
File: crates/subgraph/src/orderbook_client/vault.rs:81-92
Timestamp: 2025-05-19T12:09:10.694Z
Learning: The `vault_balance_changes_list` function in OrderbookSubgraphClient uses a different pagination approach compared to other list methods. It uses hard-coded GraphQL query parameters (first=200, skip=0) while still accepting pagination arguments, and the pagination is handled by special logic inside the `query_paginated` method that properly processes these values.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1956
File: crates/common/src/raindex_client/orders.rs:609-609
Timestamp: 2025-07-04T10:27:22.544Z
Learning: In the rainlanguage/rain.orderbook codebase, user findolor prefers not to implement overflow protection for trades count casting (usize to u16) at this time, considering it unnecessary for the current scope since the practical risk of orders having 65,535+ trades is extremely low.
Learnt from: brusherru
Repo: rainlanguage/rain.orderbook PR: 1957
File: packages/ui-components/src/lib/components/tables/OrdersListTable.svelte:86-94
Timestamp: 2025-06-27T18:41:18.194Z
Learning: In the rain.orderbook UI components, the tokensQuery should use `enabled: true` rather than `Object.keys($activeSubgraphs).length > 0` because tokens are needed for filtering functionality even when no specific subgraphs are selected. The multiSubgraphArgs falls back to default subgraphs from settings, so disabling the query when no subgraphs are active would break the token filtering feature.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 2163
File: crates/common/src/raindex_client/orders.rs:738-741
Timestamp: 2025-10-02T19:17:20.332Z
Learning: In crates/common/src/raindex_client/orders.rs, fetch_dotrain_source() is intentionally called in try_from_sg_order for every order conversion because the dotrain source information is needed immediately. A future optimization with local DB logic is planned to eliminate the network round-trip concern.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1891
File: packages/webapp/src/lib/services/handleAddOrder.ts:94-94
Timestamp: 2025-06-09T11:14:12.358Z
Learning: In the handleAddOrder function in packages/webapp/src/lib/services/handleAddOrder.ts, using an empty string fallback for undefined subgraphUrl is acceptable. When subgraphUrl is missing/empty, transaction indexing cannot be shown to the user, but the deployment functionality still works and users can manually navigate to the order page to view their deployed orders. This graceful degradation approach is preferred over making subgraphUrl required.
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1907
File: packages/orderbook/test/common/test.test.ts:75-77
Timestamp: 2025-06-04T10:21:01.388Z
Learning: The DotrainOrder.create API in packages/orderbook/test/common/test.test.ts is internal and not used directly in consumer applications, so API changes here don't require external breaking change documentation.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
See issues:
The existing IO ratio chart on the order detail page didn't provide meaningful insights for users. A new trades visualization chart was needed to show trading activity in a more useful way.
Solution
Implemented a new trades visualization chart with the following features:
Chart Features:
Technical Implementation:
pairTradesChartData.tsservice with pure functions for data transformationCHART_COLORSconstant for consistent themingtime.ts(DRY principle)Checks
By submitting this for review, I'm confirming I've done the following:
fix #1608
Summary by CodeRabbit
New Features
Tests
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.