Portfolio Page

This task is to implement the portfolio page in the Wunderstruck designs shown below.

Estimated time: ~100 hours

• All UI tasks include implementing light theme and dark theme.
• We are assuming the screen width will always be higher than 800px. There is no guarantee the app will work properly on tablet or mobile screens.
• All UI tasks include implementing loading, no data, and overflow states.

Sub-tasks (~100 hours)

Set up state

• Create portfolio slice (1 hr)
• Create all needed selectors (4 hr)
• Mock the data in the selectors (2 hr)

Build UI

• Set up new color definitions (1 hr)
• Build the header (4 hr)
• Research different graphing libraries (1 hr)
• Build the line graph (16 hr)
• Build the block graph (16 hr)
• Review Mark's table implementation (1 hr)
• Build the overview table (8 hr)
• Build transaction history table (8 hr)
• Build rewards tooltip (4 hr)

Integrate backend api

• Header (4 hr)
• Line graph (8 hr)
• Block graph (8 hr)
• Overview table (4 hr)
• Transaction history table (4 hr)

Testing (8 hr)

• Test loading states
• Test wallet not connnected states
• Test no data states
• Test overflow states
• Test at least 5 varieties of data sets for line graph
• Test at least 5 varieties of data sets for block graph

Resources

• https://www.figma.com/design/AbdgQGIoL4LaKSJN6MR0zh/Nucleus-2025?node-id=1849-173833&p=f&t=Vg7UFaSY7MPLRzgB-0