abi.ninja
abi.ninja copied to clipboard
carletex
New dashboard UI
I'll be updating here with the issues/comments that we have.
- [x] When you load a contract from the homepage, The URL param gets empty appended by default
?functions=(e.g. https://stage.abi.ninja/0xde30da39c46104798bb5aa3fe8b9e0e1f348163f/mainnet?functions=). It shouldn't be there. - [x] The contract name doesn't display correctly (it seems it's related to the window height... sometimes I can't see it)
- [x] The previous contract address should be a link to the corresponding blockexplorer (as in current abi.ninja)
- [x] Can we make the result dropdown to be open when receiving a result? rn is closed:
- [ ] There is currently overlap on the right side function column with the contract info. Possible fix is to resize the two function columns if/when the contract info is expanded so they are a little narrower, but fit with no overlap.
@carletex your issues are fixed on this PR https://github.com/carletex/abi.ninja/pull/5
@ZakGriffith the idea was to collapse and expanded over all the content, in this way on mobile works in the same way, if we rescale the other cards the user is going to see a lot of changes on the ui, I know that is not the best solution but I prefer it instead of rescale, what do you think?
@carletex your issues are fixed on this PR #5
Great @Franpastoragusti , marked as resolved!
@Franpastoragusti Testing it on an iphone 10 at the moment. I have to scroll past the contract info to get to the functions anyway. There doesn't seem to be any collapsing/expanding option for the contract info. Would the changes on the UI be drastic? Seems it would just change the width of the function cards when on a larger screen and mobile would remain the same. Maybe it looks different on other phone sizes/OS.
@Franpastoragusti There are a few tweaks that we can make to keep improving/iterating, but I believe the only thing that is keeping us to merging to master is the Mobile view (for the contract page). I think it needs a lil bit more love <3
This is a video comparing both versions:
https://user-images.githubusercontent.com/2486142/199773643-5828008b-c472-4a05-b12a-33d1cf84839d.mp4
- Alignment between the hamburger menu / Contract info
- Add some shadows? Sidebar menu & Contract info. If not, everything seems some mixed
- Text "Add methods from sidebar" looks out of place
- When you land in the contract page, is hard to tell what you have to do:
Maybe contract info should be below, and the burger menu have some "Select methods" text next to it? Not sure.
Also we might want to change the preview image when sharing? So it looks more like the new design.
Whoa, that is expandable. I didn't actually know until I saw the video. Check the expand arrow for the contract info on an iPhone X.
@ZakGriffith check staging when you are able in order to see It on your phone, i'm thinking on the contract info collapsable, but nothing better for the time being
The expand arrow is moved over, but this is what I see when I open a contract.
This might not be possible, but what if the Contact Info is an entire different section when on a phone. You can view the contract info entirely(Which could be what they land on when opening a contract), or click the top left nav button to switch it to the function view. Thinking out loud.
@ZakGriffith @carletex I have change the contract info display in order to fit better on mobile and I think also on desktop, please check the PR and the result when you are able and let me know your thoughts. If all is fine and you think is ready to merge on master, let me know an dI will rebase stage on master or do it by your own
We've been testing out both stage.abi.ninja and abi.ninja heavily today and here's where we're gonna take it:
Use the landing page from stage.abi.ninja as it looks very clean, with a few adjustments.
-
[ ] Match the color scheme from the current abi.ninja contract page e.g. https://abi.ninja/0x6b175474e89094c44da98b954eedeac495271d0f/mainnet
-
[ ] Add the line 'Interact with any contract on Ethereum.'
-
[ ] - Add 'Quick Access' to denote that the DAI, Gitcoin, and Opensea buttons are links to their contracts.
The current abi.ninja contract page is a bit more user friendly on both desktop and mobile so use that as the starting place. But we need to pull in some of the quality UI/UX things that were implemented on stage.abi.ninja
-
[ ] - Implement the 'remove' Xs and the READ/SEND categories in the left side navigation section, along with the highlighting of the selected functions. Update SEND to WRITE instead.
-
[ ] - Remove the tiny scroll bar from the left side function navigation
@ZakGriffith some points here that I don't get
-
Implement the 'remove' Xs and the READ/SEND categories in the left side navigation section, along with the highlighting of the selected functions. Update SEND to WRITE instead.
-
Remove the tiny scroll bar from the left side function navigation
(So it means that we want to have on desktop "METHODS | CONTENT | CONTRACT INFO" visible and on mobile hide the methods as the abi.ninja page does but if I implement the select/remove functionality in mobile implies to have the methods as it is with the menu to show and hide if not, on mobile is not possible to add/remove more methods) I'm agree on the Home changes, but I would say that the main screen changes are not clear, let's try to align here before to continue
- Implement add/remove methods => we continue with the approach to show all methods on the menu and add or remove from the main content on click => hide/show the methods on mobile version
This is the main change from the abi.ninja app so at the end I think that is better start with the current stage one and fix
- the way that we manage layout moving to this 3 columns that abi.ninja has and forget about hide or show contact info and show it like in the original one
- remove the dashboard ui and come back to a big content card with all the methods splited by READ and WRITE
- Preserve the menu button on mobile but show the methods in full screen instead like now
Let me know your opinion here
Something like that on mobile, is not done, I'm testing things
@Franpastoragusti @carletex Hey ya'll, the bullet points from the meeting:
-
Main landing page, soften the purple background color to match the contracts page. Maybe the button as well?
-
Contract page:
- One middle column for the functions.
- One static column on the right side for the contract information, maybe as wide as the function selector column on the left
- Bold the headings in the contract info to make them stand out from the data
-
Mobile view needs some love on both apple and android. Here is a screenshot of the main landing page on IOS
I am also experiencing what Carlos mentioned. When I select any functions, the top left X disappears and I can no longer scroll the main page.
Thanks for helping with this!
@ZakGriffith @carletex I think all is fixed as soon as the PR is merged. let me know if something is missing
@Franpastoragusti @carletex PR is merged and this is looking good!
Just two things that I see. When first loading a contract on desktop, the contract info should already be pushed all the way to the right (To where is goes after functions start to be added).
Then on mobile the buttons get in the way when function names are long. Is it possible to put the button after all the arguments on the bottom and centered, but just on mobile? Then keep the button where they are on the desktop version.
Either way, I think we can push this to ABI.Ninja, do these minor fixes, then forgot about it for awhile.
@carletex last one I promise, I have fix the order of the empty placeholder on mobile
@Franpastoragusti we kind of like the current order on mobile! If we flip the order (as it was before) it's a bit weird when you select some methods, close the drawer... and you have to scroll all the way down to see the added methods.
Let's stick with this for now and we can change later.
I'll take a deep look tomorrow, might push a few tiny tweaks (like spacing stuff) and push it live.
Thank you so much for your work on this Fran!