search

muttoni / contract-browser

The one stop shop for smart contracts on Flow
https://contractbrowser.com
8 stars 3 forks source link

[FEATURE] Show flow-cli install command in contract overview #7

Closed bartolomej closed 2 hours ago

bartolomej commented 1 month ago

Issue to be solved

Flow CLI now ships with a Cadence dependency manager: https://developers.flow.com/tools/flow-cli/dependency-manager

This simplifies and standardizes dependency management in Flow projects, so I think we should update the UI to show the corresponding Flow CLI command in the contract overview page.

Suggest A Solution

I imagine we would add a piece of UI that shows the auto-generated install command, similar to other package registries like npm or crates.io:

Screenshot 2024-05-15 at 13 06 30 Screenshot 2024-05-15 at 13 06 47

What are you currently working on that this is blocking?

No response

muttoni commented 3 weeks ago

That's a great idea - do you have ideas on what the UX could be like and where to show this?

bartolomej commented 3 weeks ago

@muttoni I think ideally we'd show the install/import commands in the same way that's done in the above example, where you can copy it, but the command/code itself is also clearly shown (as opposed to a button just saying "import" or "install", without disclosing what it's copying).

Additionally, I think we could also get rid of the "code", "account" or "import" copy buttons, as I think the developer shouldn't need to copy those things as before (code can now be "downloaded" with the package manager, there is no need to copy the account address to import the code, etc...).

As a follow-up, I believe it could be nice to use the same layout as most other package registry UIs, where the "info section" (with some basic metadata and install commands) is shown on the right - this is mostly because developers are so familiar with that layout + it also makes sense as there is more vertical room to grow (e.g. to display more info) than horizontal at the top. But maybe we should create a separate issue for this.

muttoni commented 5 days ago

I think the "code" button is helpful, and think the others are too in case people are old-school. But yeah, I agree with this. I've added a dedicated section right underneath. this will be part of the next release!

image

muttoni commented 5 days ago

This has now been published as part of https://github.com/muttoni/contract-browser/commit/3e44c9cab1c52c473277e3a19e52c53f2ac767bc

bartolomej commented 2 hours ago

Wow great work, this is awesome! Closing this as it's completed.