Numeric widget: add optional value title from API (#3282)#3337
Merged
Numeric widget: add optional value title from API (#3282)#3337
Conversation
Contributor
|
Important Review skippedAuto reviews are disabled on this repository. To trigger a review, include ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (4)
ui/address/Address3rdPartyWidgets.pw.tsx (1)
29-29: Consider extracting hardcoded mock value to the mocks file.The
valueTitle: 'Duck'is hardcoded here. Per project conventions, mock values should be imported from existing files inmocks/rather than hardcoded in test files.Suggested approach
Add to
mocks/address/widgets.ts:export const valueTitle = 'Duck';Then update this file:
- { value: widgetsMock.values[i], valueTitle: 'Duck' }, + { value: widgetsMock.values[i], valueTitle: widgetsMock.valueTitle },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui/address/Address3rdPartyWidgets.pw.tsx` at line 29, Replace the hardcoded valueTitle 'Duck' in Address3rdPartyWidgets.pw.tsx with a mock import: add export const valueTitle = 'Duck' to mocks/address/widgets.ts, import { valueTitle } from 'mocks/address/widgets' in Address3rdPartyWidgets.pw.tsx, and use valueTitle where the diff currently has valueTitle: 'Duck' (alongside existing widgetsMock.values[i]).ui/address/address3rdPartyWidgets/useWidgetData.ts (3)
37-37: Missing explicit return type annotation.Per coding guidelines, top-level module functions should declare their return types.
Suggested change
-export default function useWidgetData({ name, valuePath, valueTitlePath, address, isLoading }: Props) { +export default function useWidgetData({ name, valuePath, valueTitlePath, address, isLoading }: Props): ReturnType<typeof useApiQuery<typeof RESOURCE_NAME, unknown, Response | undefined>> {Alternatively, extract the return type to a named type alias for readability.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui/address/address3rdPartyWidgets/useWidgetData.ts` at line 37, The function useWidgetData lacks an explicit return type; add a clear return type annotation to its declaration (e.g., useWidgetData(props: Props): <ReturnType> or define a named type alias like WidgetDataResult and use useWidgetData(props: Props): WidgetDataResult) and ensure the annotated type matches the actual returned shape (include any promises, nullable fields, or unions used inside the function). Locate the function named useWidgetData and update its signature to include the chosen return type so it adheres to the top-level module function guideline.
44-49:valueTitlemay not be a string at runtime.The
get()function returnsunknown, butvalueTitleis assigned directly without validation. If the API returns a non-string value for thevalueTitlePath, it could cause unexpected rendering behavior.Consider adding type validation similar to how
formatValuehandlesvalue:Suggested fix
const value = valuePath ? get(response, valuePath) : undefined; - const valueTitle = valueTitlePath ? get(response, valueTitlePath) : undefined; + const rawValueTitle = valueTitlePath ? get(response, valueTitlePath) : undefined; + const valueTitle = typeof rawValueTitle === 'string' ? rawValueTitle : undefined; return { value: formatValue(value), valueTitle, };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui/address/address3rdPartyWidgets/useWidgetData.ts` around lines 44 - 49, In useWidgetData (the mapping that computes value and valueTitle) validate and coerce the result of get(response, valueTitlePath) before assigning to valueTitle: treat non-string or null/undefined as undefined (or convert via String(...) if intended), using a typeof check similar to formatValue for value, so that valueTitle is guaranteed to be a string | undefined; update the logic around get, valueTitlePath and formatValue usage to perform this runtime type check and assignment.
24-35: Consider addingreadonlymodifiers to interface properties.Per coding guidelines, interface properties should use
readonlyby default to prevent accidental mutation.Suggested change
interface Props { - name: string; - valuePath?: string; - valueTitlePath?: string; - address: string; - isLoading: boolean; + readonly name: string; + readonly valuePath?: string; + readonly valueTitlePath?: string; + readonly address: string; + readonly isLoading: boolean; } interface Response { - value: string | undefined; - valueTitle: string | undefined; + readonly value: string | undefined; + readonly valueTitle: string | undefined; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui/address/address3rdPartyWidgets/useWidgetData.ts` around lines 24 - 35, The Props and Response interfaces (Props and Response) should mark their properties as readonly to prevent accidental mutation; update the interface declarations so every property (name, valuePath, valueTitlePath, address, isLoading on Props and value, valueTitle on Response) is prefixed with readonly while preserving optional modifiers and types.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@ui/address/Address3rdPartyWidgets.pw.tsx`:
- Line 29: Replace the hardcoded valueTitle 'Duck' in
Address3rdPartyWidgets.pw.tsx with a mock import: add export const valueTitle =
'Duck' to mocks/address/widgets.ts, import { valueTitle } from
'mocks/address/widgets' in Address3rdPartyWidgets.pw.tsx, and use valueTitle
where the diff currently has valueTitle: 'Duck' (alongside existing
widgetsMock.values[i]).
In `@ui/address/address3rdPartyWidgets/useWidgetData.ts`:
- Line 37: The function useWidgetData lacks an explicit return type; add a clear
return type annotation to its declaration (e.g., useWidgetData(props: Props):
<ReturnType> or define a named type alias like WidgetDataResult and use
useWidgetData(props: Props): WidgetDataResult) and ensure the annotated type
matches the actual returned shape (include any promises, nullable fields, or
unions used inside the function). Locate the function named useWidgetData and
update its signature to include the chosen return type so it adheres to the
top-level module function guideline.
- Around line 44-49: In useWidgetData (the mapping that computes value and
valueTitle) validate and coerce the result of get(response, valueTitlePath)
before assigning to valueTitle: treat non-string or null/undefined as undefined
(or convert via String(...) if intended), using a typeof check similar to
formatValue for value, so that valueTitle is guaranteed to be a string |
undefined; update the logic around get, valueTitlePath and formatValue usage to
perform this runtime type check and assignment.
- Around line 24-35: The Props and Response interfaces (Props and Response)
should mark their properties as readonly to prevent accidental mutation; update
the interface declarations so every property (name, valuePath, valueTitlePath,
address, isLoading on Props and value, valueTitle on Response) is prefixed with
readonly while preserving optional modifiers and types.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 7a77f1c2-f6b1-4a87-a907-652615091da5
⛔ Files ignored due to path filters (3)
ui/address/__screenshots__/Address3rdPartyWidgets.pw.tsx_dark-color-mode_base-view-dark-mode-1.pngis excluded by!**/*.pngui/address/__screenshots__/Address3rdPartyWidgets.pw.tsx_default_base-view-dark-mode-1.pngis excluded by!**/*.pngui/address/__screenshots__/Address3rdPartyWidgets.pw.tsx_default_mobile-base-view-1.pngis excluded by!**/*.png
📒 Files selected for processing (8)
deploy/tools/envs-validator/schemas/features/address3rdPartyWidgets.tsdeploy/tools/envs-validator/test/assets/configs/address_3rd_party_widgets_config.jsondocs/ENVS.mdmocks/address/widgets.tstypes/views/address.tsui/address/Address3rdPartyWidgets.pw.tsxui/address/address3rdPartyWidgets/Address3rdPartyWidgetCard.tsxui/address/address3rdPartyWidgets/useWidgetData.ts
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Description and Related Issue(s)
Resolves #3282
This change adds an optional
valueTitlePathso address page third-party widgets can show an extra string from the API beside the widget title (for example a risk label such as "LOW" or "Honeypot"), similar to howvaluePathselects the main value.Proposed Changes
valueTitlePathto the widget config type, Yup schema, validator test asset, and docs/ENVS.md.useWidgetDatato return both the formatted value and an optional title string from the response;Address3rdPartyWidgetCardshowsTitle: valueTitlewhen present and keeps title truncation with ellipsis.Breaking or Incompatible Changes
None. Widgets that omit
valueTitlePathbehave as before.Additional Information
Environment variable changes
valueTitlePath(insideNEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETSJSON)Checklist for PR author