[Explorer] Contract page updates

[mdaria17]

How contracts and account pages look right now:

• contract – example
• account – example

Propose calling them both contracts, not an account.

Link to the Figma file

Updates:

• Rename title into Contract
• Put transactions, contract code and bytecode into tabs
• Show empty state for transactions
• Use pagination in the transactions table
• Update tokens view
  
• Add details in the contract code tab (name, compiler version and etc.)
• Add code, read, write (make write functions disabled) tabs in the contract code tab
• Add buttons in the contract code tab: open in playground, copy, copy link

• Make the page responsive (showed in the figma breakpoints)

Video of how it works with an explanation:

Contract.page.updates.mov

[njokojunior]

Could I be assigned to this?

I'll implement the contract page redesign based on the provided Figma and requirements. Here's my detailed approach:

1. Page Terminology Standardization:

• Rename both "contract" and "account" pages to simply "Contract" for consistency
• Update all related navigation links and breadcrumbs

2. Tab-based Layout Implementation:

• Create a tabbed interface with "Transactions", "Contract Code", and "Bytecode" tabs
• Implement tab switching with proper state management to preserve user navigation context

3. Transactions Tab Enhancements:

• Implement empty state UI for when no transactions exist
• Add pagination controls with configurable page size
• Ensure table responsiveness at all breakpoints

4. Contract Code Tab Features:

• Add nested tabbing system for "Code", "Read", and "Write" views
• Implement disabled state for write functions as specified
• Add contract metadata display (name, compiler version, etc.)
• Implement utility buttons (playground link, copy code, copy link) with proper functionality

5. Token View Updates:

• Redesign token information display according to Figma specs
• Ensure proper handling of different token types

6. Responsive Design Implementation:

• Follow Figma breakpoints for responsive behavior
• Test across all standard device sizes (mobile, tablet, desktop)
• Ensure proper element wrapping and prioritization at smaller screen sizes

I have experience with similar UI component refactoring and can deliver this update efficiently while maintaining full functionality. I'll ensure all elements match the Figma designs precisely.

ETA: 32hrs