Account details page

[saimeunt]

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).
Use getCode and getBalance to fetch the data needed to render the account details page correctly.

Resources

• tx details page: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/index.tsx
• shadcn/ui card: https://ui.shadcn.com/docs/components/card
• getCode: https://viem.sh/docs/contract/getCode#getcode
• getBalance: https://viem.sh/docs/actions/public/getBalance

[zintarh]

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

• Set up a URL structure for the account details page using the format /address/:address.
• Use getCode and getBalance functions to fetch data (account type and native token balance).
• Display the information in a simple card layout, inspired by the Shadcn Blocks Dashboard. Keep the interface minimal, focusing only on essential details.

[bhavyagosai]

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

  • also contain an index file for fallback if address does not exist and show a basic invalid address page.

• 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 :

  • At the top we would have EOA/Contract address mentioning what type of address it is (will also have an option to copy this value)
  • will contain a card (shadcn component taken using lift mode as mentioned) which would essentially contain the details regarding the balance/value of the address. (card position / fullWidth or not can be determined later upon further discussion)

• 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.

[Dprof-in-tech]

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

https://app.onlydust.com/u/Dprof-in-tech

[melnikga]

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

[Benjtalkshow]

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:

1. Page Creation: I'll create pages/account/[accountAddress].tsx and design the UI using Shadcn for responsiveness and accessibility.
2. User Experience: The page URL will be /address/:address, featuring a simple card layout inspired by Shadcn's dashboard blocks to display the account balance.
3. Data Fetching: I'll use getCode to check if the account is an EOA or a Contract, and getBalance to fetch the native token balance.
4. Validation: The page will look like Etherscan's, showing only the account type (EOA or Contract) and the native token balance for now.

[saimeunt]

@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]

@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.