Skip to content

feat: refactor owner-portal into modular component architecture#44

Open
PranavGadge01 wants to merge 3 commits intoc2siorg:mainfrom
PranavGadge01:feat/owner-portal-dashboard-refactor
Open

feat: refactor owner-portal into modular component architecture#44
PranavGadge01 wants to merge 3 commits intoc2siorg:mainfrom
PranavGadge01:feat/owner-portal-dashboard-refactor

Conversation

@PranavGadge01
Copy link
Copy Markdown

Summary

Refactors the owner-portal from a single monolithic component into a
properly structured React application with separated concerns.

Motivation

The entire portal was contained in two files (OwnerDashboard.jsx + CSS),
making it hard to maintain, extend, and test. This refactor applies
standard React architecture patterns.

New Structure

src/
├── components/
│   ├── layout/
│   │   ├── Sidebar.jsx        # Navigation sidebar
│   │   └── Sidebar.css
│   ├── tabs/
│   │   ├── Overview.jsx       # Wallet stats and account info
│   │   ├── MintNFT.jsx        # NFT minting form
│   │   ├── History.jsx        # Transaction history
│   │   └── Settings.jsx       # App settings
│   ├── ui/
│   │   ├── StatCard.jsx       # Reusable stat display card
│   │   ├── Alert.jsx          # Inline alert component
│   │   └── Toast.jsx          # Auto-dismissing notifications
├── constants/
│   └── tabs.js                # Tab definitions
├── hooks/
│   └── useSessionSigner.js    # Session signer logic extracted
└── utils/
    └── validators.js          # IPFS/hash/signature validators

Changes

  • Extracted session signer logic into useSessionSigner custom hook
  • Split UI into 4 tabs: Overview, Mint NFT, History, Settings
  • Created reusable StatCard, Alert, and Toast UI components
  • Moved validation functions to utils/validators.js
  • Tab constants extracted to constants/tabs.js
  • OwnerDashboard.jsx now only handles layout and tab routing

Testing

  • App loads and authenticates successfully
  • All 4 tabs navigate correctly
  • Wallet connection displays in sidebar
  • Mint form validates inputs before submission
  • Session signer error handled gracefully when backend is offline

Screenshots

Dashboard Overview

image

Mint NFT Tab

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant