Closed saimeunt closed 4 days ago
Hi @saimeunt I'm a frontend developer, and I would love to work on this. I can tackle this issue in 2 - 3 working days Here's my onlydust profile https://app.onlydust.com/u/kateberryd
if assigned I would handle this issue as suggested below
Hey @saimeunt , I am Bhavya, a seasoned frontend engineer with two years of professional experience. I have worked on a similar issue in starkflare before (entrypoints + transactions) where I made the card for listing entrypoints and transactions which also used shadcn for ui elements. I have major experience in nextjs + tailwindcss so I am already familiar with the code!
To create this page and solve this issue:
setup folder + file based routing in the app
folder using nextjs architecture with an address folder and [address] file
I noticed that the redirect to the specific page routes already exist.
The page currently would essentially contain info to whether it is showing details regarding a contract address or a EOA along with its native token balance (as asked in the issue). Therefore the ui will contain details taking inspo from the etherscan page and already :
To determine whether the address given is a contract or an EOA, we will use the getCode()
function from viem
which will gives us the bytecode of the address. The length of the bytecode received can be used to determine whether the address is an EOA (bytecode length === 0) or a contract (bytecode length > 0).
Balance data will be fetched using the getBalance()
function from viem
using Client according to the chain from which the address belongs to (similarly for getCode()) and format the value using preexisting formatEther()
function from utils
in order to display it in the ui.
These computations can be done in the useEffect()
hook and then displayed accordingly as states in the ui components.
Will add a skeleton loading component too, to display loading until the data is fetched asynchronously.
Hello @saimeunt @mazurroman I am Isaac, a full stack JavaScript developer with a proven record of successful contributions to starknet and of hack projects.
I would love to be assigned to this issue and would be sure to deliver a solution in 2 business days and if there are any blockers I would tender a notice beforehand.
My solution would be to follow the requirements and provide an account details page with minimal features as requested.
Take inspiration from the provided shadcn links while making sure the user experience is as good as the user interface and deliver in a timely manner.
Build the accounts page so that it's a dynamic link which takes the token account address as a parameter and sources the information for that particular account.
Build and integrate the needed functions to retrieve the token account details given the address as a query.
Below is my Onlydust contribution profile
Hi, can I take this? I have been a contributor to several projects of the walnut team. My profile on onlydust: https://app.onlydust.com/u/melnikga
Hi, @saimeunt
I will be glad to work on the Account Details Page for the Op Scan. This is my first time contributing to a Walnut project as I didn't get the opportunity to work on any frontend tasks during ODHack 4.0. With my 3 years of expertise in Next.js, TypeScript, Shadcn, and React, I’m confident I can deliver a robust and user-friendly page. You can check out my Github here: https://github.com/Benjtalkshow.
Here's how i will implement it:
pages/account/[accountAddress].tsx
and design the UI using Shadcn for responsiveness and accessibility./address/:address
, featuring a simple card layout inspired by Shadcn's dashboard blocks to display the account balance.getCode
to check if the account is an EOA or a Contract, and getBalance
to fetch the native token balance.@bhavyagosai assigning to you as you provided an extensive solution proposal. Please note however that we don't need a fallback page in case the address is invalid, you can assume the address exists. We don't want to fetch data client-side either, we're using React Server Components so this can be done directly in the root component of the account details page just like the tx details page: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/index.tsx#L5-L6 Since date will be fetched server-side there's no need for a skeleton.
@bhavyagosai assigning to you as you provided an extensive solution proposal. Please note however that we don't need a fallback page in case the address is invalid, you can assume the address exists. We don't want to fetch data client-side either, we're using React Server Components so this can be done directly in the root component of the account details page just like the tx details page: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/index.tsx#L5-L6 Since date will be fetched server-side there's no need for a skeleton.
Ah yes, understood what you meant to say! I had not pulled latest main so did not see the Tx index page on my local setup haha 😅 Definitely a cleaner approach.
Account details page
⚠️ Reading contributors guidelines to get assigned is MANDATORY!
Read contributors guidelines
User stories
As a user, when I access an account details page, I want to see very basic info about this particular address.
Validation
It should look like Etherscan account details page. EOA: https://optimistic.etherscan.io/address/0x1017a988aa1521a0599c91a9f202d27b8d25fcdb Contract: https://optimistic.etherscan.io/address/0x80942a0066f72efff5900cf80c235dd32549b75d Only display whether the account is an EOA (
Address
) or a contract (Contract
) along with the native token balance. Do NOT display any other info at the moment.Implementation
You can use the tx details page as an inspiration of the global architecture. The URL of the page should be
/address/:address
. Use a simple card to display the account balance, you can take inspiration from blocks on this dashboard: https://ui.shadcn.com/blocks#dashboard-01 (use lift mode). UsegetCode
andgetBalance
to fetch the data needed to render the account details page correctly.Resources
getCode
: https://viem.sh/docs/contract/getCode#getcodegetBalance
: https://viem.sh/docs/actions/public/getBalance