refactor: break down monolithic page component into reusable modules

[Veenoway]

Refactoring

Breaks down the large page.tsx component into smaller, focused, and reusable components while preserving exact visual styling and functionality.

Changes:

• ✅ Extract BackgroundEffects component for visual effects
• ✅ Extract Header component for logo section
• ✅ Extract ConnectedWallet component for wallet UI
• ✅ Extract ResourcesSection component for footer cards
• ✅ Extract LoadingSpinner component for loading state
• ✅ Create useContract hook for contract logic
• ✅ Maintain identical CSS classes and spacing
• ✅ Preserve all existing functionality

Structure:

src/
├── components/
│ ├── icons/
│ │ └── Icons.tsx
│ ├── provider/
│ │ └── NextAbstractWalletProvider.tsx
│ ├── ui/
│ │ ├── BackgroundEffect.tsx
│ │ ├── Button.tsx
│ │ └── LoadingSpinner.tsx
│ ├── wallet/
│ │ ├── ConnectWallet.tsx
│ │ ├── WalletInfo.tsx
│ │ ├── WalletActions.tsx
│ │ └── TransactionResult.tsx
│ ├── Header.tsx
│ ├── ResourceCard.tsx
│ └── ResourcesSection.tsx
├── hooks/
│ └── useContract.ts
└── app/
└── page.tsx (simplified)

Benefits:

• Modularity: Components can be reused and tested independently
• Maintainability: Easier to locate and modify specific features
• Readability: Main page component is now much cleaner
• Single Responsibility: Each component has one clear purpose

No visual changes - purely structural improvements.

---

PR-Codex overview

This PR introduces new components and refactors existing ones in the agw-connectkit-nextjs project. It enhances the UI with loading indicators, background effects, and transaction result displays, while reorganizing the wallet provider path and streamlining the main page structure.

Detailed summary

• Added LoadingSpinner component for loading animations.
• Introduced BackgroundEffects component for visual enhancements.
• Created TransactionResult and WalletInfo components to display transaction details and wallet address.
• Refactored the NextAbstractWalletProvider path.
• Updated Header and ResourcesSection components for better structure.
• Enhanced ConnectedWallet component to display transaction status.
• Implemented ResourceCard component for resource links.
• Added icons for wallet actions in WalletActions component.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
agw-connectkit-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2025 10:11pm
agw-eoa-linking	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2025 10:11pm
agw-rainbowkit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2025 10:11pm
agw-signing-messages	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2025 10:11pm
session-keys	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2025 10:11pm

[vercel]

@Veenoway is attempting to deploy a commit to the Abstract Foundation Team on Vercel.

A member of the Team first needs to authorize it.