Skip to content

fix(widget): inherit token icon wrapper dimensions #553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Philippoes merged 1 commit into from
Jul 21, 2026
Merged

fix(widget): inherit token icon wrapper dimensions #553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/widget/src/components/atoms/token-icon/token-icon-image/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const TokenIconImage = ({
<Image
data-rk="token-logo"
wrapperProps={{ hw: tokenLogoHw, "data-rk": "token-logo" }}
imgProps={{ hw: tokenLogoHw }}
imgProps={{ hw: "full" }}
src={mainUrl ?? fallbackUrl}
fallbackName={name}
/>
Expand Down
24 changes: 24 additions & 0 deletions packages/widget/tests/components/atoms/token-icon-image.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,30 @@ describe("TokenIconImage", () => {
expect(image?.getAttribute("src")).toBe(validSrc);
});

it("sizes the image from a host-overridden wrapper", async () => {
const app = await render(
<div data-test-host>
<style>{`
[data-test-host] [data-rk="token-logo"] {
width: 24px;
height: 24px;
}
`}</style>
<TokenIconImage mainUrl={validSrc} name="Atom" tokenLogoHw="9" />
</div>
);

const wrapper = app.container.querySelector<HTMLElement>(
'[data-rk="token-logo"]'
);
const image = wrapper?.querySelector<HTMLImageElement>("img");

expect(wrapper?.getBoundingClientRect().width).toBe(24);
expect(wrapper?.getBoundingClientRect().height).toBe(24);
expect(image?.getBoundingClientRect().width).toBe(24);
expect(image?.getBoundingClientRect().height).toBe(24);
});

@cursor cursor Bot Jul 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regression test skips theme sizing

Medium Severity

The new host-override case renders TokenIconImage without a theme root, so sprinkle space vars never resolve. hw: "full" therefore does not become 100%, and the image size checks do not validate wrapper inheritance—the behavior this PR is meant to lock in.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit d467df7. Configure here.


it("falls through to the generated monogram after mainUrl fails", async () => {
const app = await render(
<TokenIconImage
Expand Down