Add ABI viewer and clean up CSS

[sdankel]

• Displays the ABI in the ABI tab for contracts. I tested this locally by publishing a contract, commenting out the check for whether std has a version to make it build successfully.

• Addresses the nits from feat: scaffolding for package detail #36 (removes !important and changes activeTab handling)
• Adds a MUI theme for sane default CSS
• Closes forc.pub api key can be generated without a name #44

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
forc-pub	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 17, 2025 6:21pm

[Copilot]

Copilot reviewed 14 out of 25 changed files in this pull request and generated no comments.

Files not reviewed (11)

• app/package-lock.json: Language not supported
• app/package.json: Language not supported
• app/src/App.css: Language not supported
• app/src/features/dahboard/components/PackageDashboard.css: Language not supported
• app/src/features/dashboard/components/PackageDashboard.css: Language not supported
• app/src/features/detail/components/PackageDetail.css: Language not supported
• app/src/features/detail/components/PackageSidebar.css: Language not supported
• app/src/features/tokens/components/CopyableToken.css: Language not supported
• app/src/features/toolbar/components/SearchBar.css: Language not supported
• app/src/features/toolbar/components/UserButton.css: Language not supported
• app/src/pages/ApiTokens.css: Language not supported

Comments suppressed due to low confidence (1)

app/src/features/detail/components/PackageDetail.tsx:7

• The alias 'TabNames' for the imported Tab component conflicts with the type alias also named 'TabNames'. Consider renaming the component import (e.g., to 'MuiTab') to avoid confusion.

import { Tab as TabNames } from "@mui/material";

[zees-dev]

Note: MUI is pretty heavy-weight (from when i last used it years ago; tailwind supported library (utils lib) may give more freedom - especially since AI seems to be quite good with tailwind).

This may not be true today though - so worthwhile looking at the size of the CSS/lib dependency loaded in browser.

[zees-dev]

Would be great to have a copy-to-clipboard button for the ABI too

[sdankel]

Note: MUI is pretty heavy-weight (from when i last used it years ago; tailwind supported library (utils lib) may give more freedom - especially since AI seems to be quite good with tailwind).

This may not be true today though - so worthwhile looking at the size of the CSS/lib dependency loaded in browser.

Glad you brought this up! The bundle size is under 1MB so not a problem yet. MUI used to have a bigger problem with bloating node_modules in the past (specifically module duplication), and it is still a problem if you import components from the top-level like import CloudDownloadIcon from "@mui/icons-material rather than importing from the specific module. More about it here: https://mui.com/material-ui/guides/minimizing-bundle-size/

I'll add eslint in another PR with a rule to catch problematic imports.

Here's the bundle analysis:

[zees-dev]

Nice, thanks for the bundle analysis - LGTM! 👍

nit: the copy-to-clipboard could be a little lighter shade of white/gray since its not very subtle. Can be done in future PR though (if you also agree).