Skip to content

refactor: break down monolithic page component into reusable modules#54

Closed
Veenoway wants to merge 82 commits intoAbstract-Foundation:mainfrom
Veenoway:refactor/modularize-wallet-components
Closed

refactor: break down monolithic page component into reusable modules#54
Veenoway wants to merge 82 commits intoAbstract-Foundation:mainfrom
Veenoway:refactor/modularize-wallet-components

Conversation

@Veenoway
Copy link

@Veenoway Veenoway commented Jul 30, 2025

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 focuses on updating dependencies, particularly the next version across multiple packages, and introduces new components and features in the agw-connectkit-nextjs module.

Detailed summary

  • Updated next version in multiple package.json files.
  • Created new components: LoadingSpinner, BackgroundEffects, TransactionResult, WalletInfo, ResourceCard, Button, and ConnectedWallet.
  • Refactored NextAbstractWalletProvider import path.
  • Updated Home component structure for better organization.

The following files were skipped due to too many changes: agw-thirdweb-nextjs/pnpm-lock.yaml, session-keys/pnpm-lock.yaml, agw-connectkit-nextjs/pnpm-lock.yaml, agw-rainbowkit-nextjs/pnpm-lock.yaml, session-keys-local-storage/pnpm-lock.yaml, agw-signing-messages/pnpm-lock.yaml, agw-eoa-linking/pnpm-lock.yaml, crossmint/pnpm-lock.yaml, agw-batch-transactions/pnpm-lock.yaml, server-wallets-session-keys/pnpm-lock.yaml, agw-nextjs/pnpm-lock.yaml

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

jarrodwatts and others added 30 commits August 23, 2024 12:47
* wip: smart-contract-accounts-viem

* working deploy for local node and abs testnet

* smart-contract-accounts-viem working interact script

* viem-smart-contracts remove contract address

* update smart-contract-accounts-viem readme

---------

Co-authored-by: jarrodwatts <jarrod@cubelabs.xyz>
* wip

* working deploy script with transaction

* cleanup script

* make work on local node too

* Add sub-READMEs

* Working mint from frontend

* Add factory to readme

---------

Co-authored-by: jarrodwatts <jarrod@thirdweb.com>
* contract-deployment example - hardhat

* add ethers script for contract deployment cleints

* add viem

* Add readme

* update readme

---------

Co-authored-by: jarrodwatts <jarrod@thirdweb.com>
* Add agw-rainbowkit example

* Update licenses sections

* rename agw-rainbowkit to agw-rainbowkit-nextjs

* Add agw-nextjs example

* Add agw-typescript example

* add new examples to readme

* check agw-nextjs

* setup agw-rainbowkit example with beta versions

* fix agw-typescript and update to beta version

* git commit -m agw-ts remove unnecessary log
* working deployment scripts

* Add verify to abstract script

* connect and bridge mint scripts

* Cleanup scripts

---------

Co-authored-by: jarrodwatts <jarrod@thirdweb.com>
* add gitignore

* add connectkit example
@vercel
Copy link

vercel bot commented Jul 30, 2025

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
Copy link

vercel bot commented Jul 30, 2025

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

A member of the Team first needs to authorize it.

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.