refactor(auth): remove MetaMask package and disable web3 authentication#168
refactor(auth): remove MetaMask package and disable web3 authentication#168
Conversation
Remove MetaMask SDK and web3-react packages to prevent hydration errors. All MetaMask-related code is commented out with METAMASK DISABLED markers for easy re-enabling in the future. Changes: - Remove @metamask/sdk-react, @web3-react/* packages from dependencies - Comment out MetaMask login components and wallet utilities - Update auth pages to exclude MetaMask login option - Add fallback page for MetaMask callback route - Skip MetaMask binding phase in newbie onboarding flow 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Summary of ChangesHello @AnnatarHe, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request undertakes a significant refactoring of the authentication system by entirely removing MetaMask and web3 authentication capabilities. The core purpose is to resolve persistent hydration errors and simplify the application's dependency landscape. All related code, UI components, and utility functions have been either removed or stubbed out, ensuring a clean and functional state without web3 integration. The changes are marked for potential future re-introduction, but for now, the focus is on stability and a streamlined user experience through traditional OAuth methods. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request effectively removes the MetaMask integration by deleting dependencies and commenting out related code across the application. The changes are well-structured, using METAMASK DISABLED markers, which will make re-enabling the feature straightforward. The approach of stubbing out components and utility functions is sound, preventing broken imports and ensuring the rest of the application continues to function correctly. I have one suggestion to improve the user experience on the new MetaMask callback fallback page by using Next.js's <Link> component for navigation, which aligns better with the framework's best practices.
| <a | ||
| href='/auth/auth-v4' | ||
| className='mt-4 inline-block px-6 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors' | ||
| > | ||
| Back to Login | ||
| </a> |
There was a problem hiding this comment.
For better performance and to align with Next.js best practices, it's recommended to use the <Link> component for internal navigation instead of a standard <a> tag. This enables client-side navigation without a full page reload.
You'll need to import it at the top of the file:
import Link from 'next/link'| <a | |
| href='/auth/auth-v4' | |
| className='mt-4 inline-block px-6 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors' | |
| > | |
| Back to Login | |
| </a> | |
| <Link | |
| href='/auth/auth-v4' | |
| className='mt-4 inline-block px-6 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors' | |
| > | |
| Back to Login | |
| </Link> |
Pull Request Review - MetaMask RemovalOverviewThis PR removes MetaMask SDK and web3-react packages to address hydration errors. The approach of commenting out code with clear markers is pragmatic and allows for potential re-enablement in the future. ✅ Strengths
🔍 Issues & Concerns1. Security: Console.log in Production (HIGH)Location: console.log(process.env.NEXT_PUBLIC_INFURA_KEY)Issue: This logs a sensitive API key to the console. Even though MetaMask is disabled, this code is still in the file. 2. Unused GraphQL Query Still Imported (MEDIUM)Location: import { useAuthByWeb3LazyQuery } from '../schema/generated'Issue: Commented code still imports GraphQL hooks that may no longer be needed, increasing bundle size unnecessarily. 3. TypeScript Type Safety Compromised (MEDIUM)Location: export async function signDataByWeb3(m: unknown): Promise<{...}>Issue: Using export async function signDataByWeb3(m: never): Promise<never> {
throw new Error('MetaMask functionality is currently disabled')
}4. Incomplete Cleanup in chains.ts (LOW)Location: 5. ESLint Disable Comments (LOW)Locations: Multiple files have 6. Progress Counter Mismatch (MEDIUM)Location: <ProgressBlock value={phase + 1} max={6}>
<h3 className='w-full text-center mt-2 block dark:text-white'>
Progress: {phase + 1} / 6
</h3>Issue: The progress still shows "/ 6" but phases 2, 3, and 4 are now skipped. This is confusing UX. 🧪 Testing ConcernsThe test plan in the PR description is incomplete:
📦 Dependency CleanupGood: The following packages were removed from package.json:
Result: ~5,126 lines removed from pnpm-lock.yaml (massive reduction!) 🎨 Code StyleThe code follows project conventions well:
🔒 Performance ImpactPositive:
📋 Recommendations SummaryBefore Merge (HIGH PRIORITY):
Nice to Have (MEDIUM): Future Consideration: 🎯 Overall AssessmentCode Quality: 7/10 Recommendation: ✅ Approve with changes - Address the console.log security issue and verify the build before merging. This is a solid approach to temporarily disabling MetaMask while keeping the option to re-enable it. The main concerns are ensuring the build succeeds and removing the API key logging. |
1 participant
Summary
METAMASK DISABLEDmarkers for easy re-enablingPackages Removed
@metamask/sdk-react@web3-react/core@web3-react/metamask@web3-react/network@web3-react/typesFiles Modified (16 total)
package.json- Removed MetaMask dependenciespnpm-lock.yaml- Updated lockfilesrc/utils/wallet.ts- Commented out, stub export addedsrc/utils/chains.ts- Commented out, stub exports addedsrc/components/auth/metamask-provider-wrapper.tsx- Returns children directlysrc/components/auth.metamask.tsx- Returns nullsrc/components/auth/metamask-standalone.tsx- Returns nullsrc/components/auth/metamask.tsx- Returns nullsrc/components/externalAccount/metamask.bind.tsx- Returns nullsrc/components/externalAccount/list.tsx- MetaMask card removedsrc/app/auth/auth-v2/page.tsx- MetaMask login removedsrc/app/auth/auth-v4/thirdPartEntry.tsx- MetaMask button removedsrc/app/auth/callback/metamask/page.tsx- Shows disabled messagesrc/app/auth/callback/metamask/content.tsx- Returns nullsrc/app/dash/[userid]/newbie/content.tsx- Phase 2 skippedTest plan
🤖 Generated with Claude Code