Skip to content

Rework react-components to reduce bundle size and improve customizability #126

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.

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

Open
samsiegart opened this issue May 7, 2025 · 2 comments
Assignees
Labels
bug Something isn't working

Comments

@samsiegart
Copy link
Contributor

samsiegart commented May 7, 2025

Describe the bug

There are a few issues with @agoric/react-components:

  • Large bundle size (https://fastusdc.agoric.app/ has a 5.8MB JS bundle after compression) mostly due to chain registry and leap elements widget.
  • Difficult to customize wallet modal and IST onboarding popup (see screenshot). Seems like there's an issue with bundling interchain-ui/react within our own package and their styling engine doesn't seem to work well with that. Also we're removing IST altogether so that needs updating regardless (is it going to be BLD now?)

I think these issues can mostly be addressed by requiring the app to provide the dependencies rather than bundling them within the package, and maybe using an API for chain registry instead of bundling, I'll have to explore ideas though.

Possible Acceptance Criteria

If we're able to update the library and READMEs and create a new build of https://github.com/Agoric/fast-usdc-lp-ui with:

  1. A dramatically reduced bundle size
  2. Customized interchain ui components to agoric red instead of blue as shown below
  3. Complexity kept to a minimum, the library is still relatively straightforward to use

Image

@samsiegart samsiegart added the bug Something isn't working label May 7, 2025
@samsiegart
Copy link
Contributor Author

I think the main things are not importing the entire chain registry (it's a super large module that makes the bundle size giant), not including the leap elements widget by default (maybe we only export the client instead, it seems like the leap modal itself might have another copy of chain registry because it's so big). It's mainly used to onboard IST for smart wallet provisioning, which needs to be reworked anyway. And also, not bundling any of the Interchain UI stuff into the library, it just doesn't seem to be working. We should probably require the app/user to add all their own dependencies, and provide function arguments for rendering specific components that this library needs (just an idea, not necessarily).

@mujahidkay mujahidkay self-assigned this May 7, 2025
@mujahidkay
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants