Convert owner address to block explorer link in OrderDetail and VaultDetail pages #2367
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
Contributor
WalkthroughOwner address rendering in OrderDetail and VaultDetail was changed to use getExplorerLink synchronously: when an explorer URL exists the owner displays as an external link (with WalletOutline icon), otherwise it falls back to the existing Hash/plain text. Tests were added/updated to cover both cases. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (6)
🧰 Additional context used📓 Path-based instructions (7)packages/ui-components/**/*.{svelte,ts,tsx,js,jsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
packages/ui-components/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
packages/{webapp,ui-components}/**/*.{svelte,ts,tsx,js,jsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
packages/**/*.{js,ts,svelte}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,svelte}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{test,spec}.ts📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.svelte📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (18)📓 Common learnings📚 Learning: 2025-07-11T08:46:07.606ZApplied to files:
📚 Learning: 2025-07-09T12:35:45.699ZApplied to files:
📚 Learning: 2025-09-02T08:04:44.814ZApplied to files:
📚 Learning: 2025-07-17T10:36:02.846ZApplied to files:
📚 Learning: 2025-08-14T14:16:34.044ZApplied to files:
📚 Learning: 2025-06-27T17:34:15.825ZApplied to files:
📚 Learning: 2025-05-20T12:03:18.032ZApplied to files:
📚 Learning: 2025-08-14T18:29:32.933ZApplied to files:
📚 Learning: 2025-06-30T14:17:16.626ZApplied to files:
📚 Learning: 2025-04-04T11:25:21.518ZApplied to files:
📚 Learning: 2025-06-04T10:21:01.388ZApplied to files:
📚 Learning: 2025-04-08T12:56:03.272ZApplied to files:
📚 Learning: 2025-06-17T14:55:22.914ZApplied to files:
📚 Learning: 2025-03-31T10:16:53.544ZApplied to files:
📚 Learning: 2025-04-28T10:58:11.124ZApplied to files:
📚 Learning: 2025-04-09T09:28:05.097ZApplied to files:
📚 Learning: 2025-04-08T12:31:23.761ZApplied to files:
🧬 Code graph analysis (3)packages/ui-components/src/__tests__/getExplorerLink.test.ts (1)
packages/ui-components/src/__tests__/VaultDetail.test.ts (1)
packages/ui-components/src/lib/services/getExplorerLink.ts (1)
⏰ 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). (14)
🔇 Additional comments (10)
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: 2
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
packages/ui-components/src/__tests__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.tspackages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/ui-components/src/lib/components/detail/VaultDetail.svelte
🧰 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/__tests__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.tspackages/ui-components/src/lib/components/detail/VaultDetail.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__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.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__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.tspackages/ui-components/src/lib/components/detail/VaultDetail.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.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__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.tspackages/ui-components/src/lib/components/detail/VaultDetail.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.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__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.tspackages/ui-components/src/lib/components/detail/VaultDetail.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.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__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.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/detail/VaultDetail.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.svelte
🧠 Learnings (18)
📓 Common learnings
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.
📚 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__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.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__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.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__/OrderDetail.test.ts
📚 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/__tests__/OrderDetail.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__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.tspackages/ui-components/src/lib/components/detail/VaultDetail.svelte
📚 Learning: 2025-08-14T18:29:32.933Z
Learnt from: brusherru
Repo: rainlanguage/rain.orderbook PR: 2083
File: packages/ui-components/src/__tests__/VaultsListTable.test.ts:16-19
Timestamp: 2025-08-14T18:29:32.933Z
Learning: In the rain.orderbook project's UI components tests, mocking hooks like useToasts is often required as infrastructure even when not directly asserting on their calls, because components internally depend on these hooks. Removing such mocks would break component rendering in tests and require more complex test setup with providers.
Applied to files:
packages/ui-components/src/__tests__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.ts
📚 Learning: 2025-06-30T14:17:16.626Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1926
File: packages/ui-components/src/lib/__mocks__/stores.ts:13-17
Timestamp: 2025-06-30T14:17:16.626Z
Learning: User findolor reports that vi.mock(import('rainlanguage/orderbook'), async (importOriginal) => { ... }) syntax works in their testing environment, despite official Vitest documentation indicating the first argument should be a string. This suggests there may be specific Vitest versions or configurations that support dynamic import() as the first argument to vi.mock().
Applied to files:
packages/ui-components/src/__tests__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.ts
📚 Learning: 2025-06-17T14:55:22.914Z
Learnt from: findolor
Repo: rainlanguage/rain.orderbook PR: 1936
File: packages/ui-components/vite.config.ts:21-23
Timestamp: 2025-06-17T14:55:22.914Z
Learning: In the rain.orderbook project, the Vite configuration uses `'import.meta.vitest': 'undefined'` (as a string) combined with conditional `if (import.meta.vitest)` checks for in-source testing. The mock files are excluded from test execution using `exclude: ['src/lib/__mocks__/**/*.ts']`. This configuration successfully allows dev builds to work without `vi` undefined errors, despite the theoretical expectation that the string "undefined" would be truthy and cause issues.
Applied to files:
packages/ui-components/src/__tests__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.ts
📚 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/__tests__/OrderDetail.test.ts
📚 Learning: 2025-04-28T10:58:11.124Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1700
File: tauri-app/src/lib/mocks/mockConfigSource.ts:6-6
Timestamp: 2025-04-28T10:58:11.124Z
Learning: In mock data for testing in this codebase, it's acceptable to use URL placeholders like 'https://mainnet.infura.io/v3/YOUR-PROJECT-ID' as they clearly indicate the expected format for actual implementation.
Applied to files:
packages/ui-components/src/__tests__/OrderDetail.test.ts
📚 Learning: 2025-08-14T14:16:34.044Z
Learnt from: brusherru
Repo: rainlanguage/rain.orderbook PR: 2083
File: packages/ui-components/src/lib/components/tables/VaultsListTable.svelte:205-205
Timestamp: 2025-08-14T14:16:34.044Z
Learning: In the VaultsListTable component, the `matchesAccount` function from the wallet provider may not properly update on wallet connect/disconnect events, making direct comparison with the reactive `$account` variable more reliable for UI visibility checks. The `matchesAccount` function needs future refactoring to handle wallet state changes properly.
Applied to files:
packages/ui-components/src/__tests__/VaultDetail.test.tspackages/ui-components/src/lib/components/detail/VaultDetail.sveltepackages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 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__/VaultDetail.test.ts
📚 Learning: 2025-06-27T17:34:15.825Z
Learnt from: brusherru
Repo: rainlanguage/rain.orderbook PR: 1957
File: packages/ui-components/src/lib/components/tables/VaultsListTable.svelte:60-60
Timestamp: 2025-06-27T17:34:15.825Z
Learning: In the VaultsListTable.svelte component, the `activeAccounts` store is redundant in query keys when the `owners` variable (derived from `activeAccountsItems`) is already included, as `owners` is what's actually used in the query function while `activeAccounts` is just a transformed version of the same data.
Applied to files:
packages/ui-components/src/lib/components/detail/VaultDetail.svelte
📚 Learning: 2025-05-20T12:03:18.032Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1870
File: packages/webapp/src/lib/components/WithdrawModal.svelte:31-31
Timestamp: 2025-05-20T12:03:18.032Z
Learning: The VaultActionArgs type no longer contains an action property after refactoring the deposit/withdraw modals into separate components.
Applied to files:
packages/ui-components/src/lib/components/detail/VaultDetail.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:
packages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-03-22T21:11:34.405Z
Learnt from: hardingjam
Repo: rainlanguage/rain.orderbook PR: 1496
File: packages/webapp/src/lib/components/DepositOrWithdrawModal.svelte:164-164
Timestamp: 2025-03-22T21:11:34.405Z
Learning: The refactoring to replace signerAddress with account from useAccount hook is being done in stages - shared UI components first (PR #1496), with webapp-specific components to be handled in a separate future PR.
Applied to files:
packages/ui-components/src/lib/components/detail/OrderDetail.svelte
📚 Learning: 2025-08-19T04:15:33.633Z
Learnt from: brusherru
Repo: rainlanguage/rain.orderbook PR: 2036
File: packages/ui-components/src/lib/components/ListViewVaultFilters.svelte:33-52
Timestamp: 2025-08-19T04:15:33.633Z
Learning: In the ListViewVaultFilters.svelte component, the "Show my items only" filter is intentionally destructive for the owners field. When toggled, it should replace any existing owner filters (including those from URL parameters) rather than being additive. This is by design because the UI doesn't provide capability to filter by other owner addresses or remove specific owners from a list. The toggle serves as both a filter and a way for users to clear URL-based owner filters and switch to filtering by their own address only.
Applied to files:
packages/ui-components/src/lib/components/detail/OrderDetail.svelte
🧬 Code graph analysis (1)
packages/ui-components/src/__tests__/OrderDetail.test.ts (1)
packages/ui-components/src/lib/index.ts (1)
getExplorerLink(100-100)
⏰ 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). (3)
- GitHub Check: Deploy-Docs-Preview
- GitHub Check: build-tauri (ubuntu-22.04, true)
- GitHub Check: Deploy-Preview-Push
🔇 Additional comments (8)
packages/ui-components/src/lib/components/detail/OrderDetail.svelte (1)
24-27: LGTM: Clean imports for explorer link functionality.The import additions are minimal and well-organized, bringing in the WalletOutline icon and getExplorerLink service needed for the owner address link feature.
packages/ui-components/src/__tests__/OrderDetail.test.ts (3)
19-19: LGTM: Proper mock setup for getExplorerLink.The mock follows the project's established testing patterns and allows per-test override of the return value, providing good flexibility for testing both explorer-available and unavailable scenarios.
Also applies to: 51-53, 165-168
348-366: LGTM: Comprehensive test for explorer link rendering.The test thoroughly validates the explorer link functionality, including proper security attributes (
target="_blank"andrel="noopener noreferrer"), which is essential for preventing security vulnerabilities.
368-382: LGTM: Proper fallback test coverage.The test correctly validates that when no explorer link is available, the component falls back to displaying the address as plain text without creating a link element.
packages/ui-components/src/__tests__/VaultDetail.test.ts (3)
15-15: LGTM: Consistent mock setup with OrderDetail tests.The mock configuration mirrors the OrderDetail test setup, maintaining consistency across the test suite and making the codebase easier to maintain.
Also applies to: 48-50, 86-88
227-245: LGTM: Thorough explorer link test.The test validates all critical aspects including security attributes, maintaining consistency with the OrderDetail test approach.
247-261: LGTM: Proper fallback validation.The test correctly verifies the fallback behavior when no explorer link is available, ensuring graceful degradation of the feature.
packages/ui-components/src/lib/components/detail/VaultDetail.svelte (1)
26-31: LGTM: Imports align with OrderDetail pattern.The import changes are clean and consistent with the OrderDetail component, maintaining a unified approach across both detail views.
Comment on lines
160
to
174
| {#await getExplorerLink(data.owner, chainId, 'address') then explorerLink} | ||
| {#if explorerLink} | ||
| <a | ||
| href={explorerLink} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| class="flex items-center justify-start space-x-2 text-left text-blue-500 hover:underline" | ||
| > | ||
| <WalletOutline size="sm" /> | ||
| <span>{data.owner}</span> | ||
| </a> | ||
| {:else} | ||
| <Hash type={HashType.Wallet} shorten={false} value={data.owner} /> | ||
| {/if} | ||
| {/await} |
Contributor
There was a problem hiding this comment.
Add error handling to the explorer link resolution.
The {#await} block lacks a :catch clause. If getExplorerLink throws an error (e.g., network issues, misconfigured explorer service), the Owner field may fail to render entirely.
🔎 Proposed fix with error handling
-{#await getExplorerLink(data.owner, chainId, 'address') then explorerLink}
+{#await getExplorerLink(data.owner, chainId, 'address') then explorerLink catch}
{#if explorerLink}
<a
href={explorerLink}
target="_blank"
rel="noopener noreferrer"
class="flex items-center justify-start space-x-2 text-left text-blue-500 hover:underline"
>
<WalletOutline size="sm" />
<span>{data.owner}</span>
</a>
{:else}
<Hash type={HashType.Wallet} shorten={false} value={data.owner} />
{/if}
{/await}📝 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.
Suggested change
| {#await getExplorerLink(data.owner, chainId, 'address') then explorerLink} | |
| {#if explorerLink} | |
| <a | |
| href={explorerLink} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| class="flex items-center justify-start space-x-2 text-left text-blue-500 hover:underline" | |
| > | |
| <WalletOutline size="sm" /> | |
| <span>{data.owner}</span> | |
| </a> | |
| {:else} | |
| <Hash type={HashType.Wallet} shorten={false} value={data.owner} /> | |
| {/if} | |
| {/await} | |
| {#await getExplorerLink(data.owner, chainId, 'address') then explorerLink} | |
| {#if explorerLink} | |
| <a | |
| href={explorerLink} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| class="flex items-center justify-start space-x-2 text-left text-blue-500 hover:underline" | |
| > | |
| <WalletOutline size="sm" /> | |
| <span>{data.owner}</span> | |
| </a> | |
| {:else} | |
| <Hash type={HashType.Wallet} shorten={false} value={data.owner} /> | |
| {/if} | |
| {:catch error} | |
| <Hash type={HashType.Wallet} shorten={false} value={data.owner} /> | |
| {/await} |
🤖 Prompt for AI Agents
packages/ui-components/src/lib/components/detail/OrderDetail.svelte lines
160-174: the {#await getExplorerLink(...)} block has no :catch branch so a
thrown error will break rendering; add a :catch block that handles errors by
rendering the fallback Hash component (Hash type Wallet, shorten false, value
data.owner) and optionally log the error (console.error or a logger) so the
Owner field still displays when getExplorerLink fails.
Comment on lines
136
to
150
| {#await getExplorerLink(data.owner, chainId, 'address') then explorerLink} | ||
| {#if explorerLink} | ||
| <a | ||
| href={explorerLink} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| class="flex items-center justify-start space-x-2 text-left text-blue-500 hover:underline" | ||
| > | ||
| <WalletOutline size="sm" /> | ||
| <span>{data.owner}</span> | ||
| </a> | ||
| {:else} | ||
| <Hash type={HashType.Wallet} value={data.owner} /> | ||
| {/if} | ||
| {/await} |
Contributor
There was a problem hiding this comment.
Add error handling to the explorer link resolution.
The {#await} block lacks a :catch clause. If getExplorerLink throws an error (e.g., network issues, misconfigured explorer service), the Owner address field may fail to render entirely.
🔎 Proposed fix with error handling
-{#await getExplorerLink(data.owner, chainId, 'address') then explorerLink}
+{#await getExplorerLink(data.owner, chainId, 'address') then explorerLink catch}
{#if explorerLink}
<a
href={explorerLink}
target="_blank"
rel="noopener noreferrer"
class="flex items-center justify-start space-x-2 text-left text-blue-500 hover:underline"
>
<WalletOutline size="sm" />
<span>{data.owner}</span>
</a>
{:else}
<Hash type={HashType.Wallet} value={data.owner} />
{/if}
{/await}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/ui-components/src/lib/components/detail/VaultDetail.svelte around
lines 136 to 150 the {#await getExplorerLink(...)} block has no :catch branch so
a thrown error will break rendering; add error handling by adding a :catch
clause that renders a safe fallback (e.g., the <Hash type={HashType.Wallet}
value={data.owner} /> component or a non-blocking disabled link) and optionally
log the error; ensure you preserve the existing then branch and keep :catch last
before {/await} so the Owner field always renders even if getExplorerLink fails.
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 owner address in the Order Detail and Vault Detail pages currently only supports copy-to-clipboard functionality. Navigating directly to the network's block explorer provides a more useful experience, allowing users to immediately view the address details, transaction history, and token holdings without manual copy-paste workflows.
Solution
Updated the owner address display in both OrderDetail.svelte and VaultDetail.svelte components to render as a clickable link that opens the block explorer in a new tab:
Files changed:
packages/ui-components/src/lib/components/detail/OrderDetail.sveltepackages/ui-components/src/lib/components/detail/VaultDetail.sveltepackages/ui-components/src/__tests__/OrderDetail.test.tspackages/ui-components/src/__tests__/VaultDetail.test.tsChecks
By submitting this for review, I'm confirming I've done the following:
fix #1393
Summary by CodeRabbit
New Features
Tests
✏️ Tip: You can customize this high-level summary in your review settings.