Skip to content

fix: bundle Telegram and TON brand icons as data URIs - #579

Open
maxrihter wants to merge 1 commit into
ton-connect:mainfrom
maxrihter:fix/bundle-brand-icons-locally
Open

fix: bundle Telegram and TON brand icons as data URIs#579
maxrihter wants to merge 1 commit into
ton-connect:mainfrom
maxrihter:fix/bundle-brand-icons-locally

Conversation

@maxrihter

Copy link
Copy Markdown

Closes #574

Problem

The Telegram and TON brand icons are hardcoded to
raw.githubusercontent.com URLs in packages/ui/src/app/env/IMG.ts. Under a
strict Content Security Policy that host is typically not allowlisted, so the
TON icon at the QR-code center and the Telegram badge silently fail to load
(they stay as empty placeholders); they also add external requests to every
connect flow.

Change

IMG.TON and IMG.TG are now base64 data URIs generated from the existing
source files in assets/ (ton-icon-48.png, tg.png), so both icons ship
inside the bundle. A comment in IMG.ts documents how to regenerate them after
changing a source asset.

IMG.WALLET_CONNECT is intentionally left as an external URL to keep the
bundle cost minimal — the issue scope is the Telegram and TON icons, which are
the ones shown in the default connect flow. Happy to inline it as well if you
prefer the file fully local (~+22 kB).

Reproduction & verification

Reproduced the CSP failure on the built tonconnect-ui.min.js artifacts
(Playwright, static page with img-src data: https://config.ton.org — i.e.
githubusercontent not allowlisted), main build vs this branch:

main build this branch
CSP violations, desktop modal 2 (ton-icon-48.png, tg.png) 0
TON icon at QR center / TG badge blocked, stuck as empty placeholders render from data: URIs (144×144 / 72×72)
CSP violations, mobile modal 3 (tg.png) 0
  • Checked on chromium, webkit and firefox — icons render from data: URIs in
    all three, no SDK-related CSP violations.
  • Unit tests added (tests/app/env/img.test.ts): TON/TG are data:image/png
    URIs and decode to valid PNGs (signature check). They fail against main,
    guarding against regressing back to an external host.
  • tsc --noEmit, prettier and the full ui build pass; @tonconnect/ui-react
    builds cleanly against the change.
  • Bundle size: tonconnect-ui.min.js 445 467 → 456 566 bytes (+11.1 kB,
    matching the two encoded PNGs).

Consumers no longer need img-src raw.githubusercontent.com in their CSP —
img-src data: covers both icons.

A changeset (patch for @tonconnect/ui) is included.

@maxrihter
maxrihter requested a review from a team as a code owner July 9, 2026 13:30
@vercel

vercel Bot commented Jul 9, 2026

Copy link
Copy Markdown

@maxrihter is attempting to deploy a commit to the TOP Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bundle Telegram and TON icons locally

1 participant