refactor: improve code reuse with shared hooks and components #443
Conversation
- Create useAddTokenToWallet hook to encapsulate wallet token/network addition logic - Create MetaMaskIcon component for shared MetaMask SVG icon - Create MetaMaskButton component with consistent styling - Create GradientText component for gradient typography - Create ChainBadge component for Ethereum/Phala Mainnet badges - Update content.tsx, stake.tsx to use useAddTokenToWallet hook - Update asset-card.tsx to use MetaMaskButton component - Update claim-assets.tsx to use ChainBadge component - Replace "Phala L2" terminology with "Phala Mainnet" across codebase 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![sentry[bot]](https://avatars.githubusercontent.com/u/1396951?s=60&v=4){kind=small}
| address, | ||
| symbol, | ||
| decimals, | ||
| image, | ||
| }, | ||
| }) | ||
| return true | ||
| } catch (error) { | ||
| console.error('Failed to add token to wallet:', error) | ||
| return false | ||
| } |
There was a problem hiding this comment.
Bug: The useAddTokenToWallet hook uses synchronous watchAsset instead of watchAssetAsync, causing broken error handling and false success reporting.
Severity: CRITICAL | Confidence: High
🔍 Detailed Analysis
The useAddTokenToWallet hook incorrectly uses the synchronous watchAsset function instead of the asynchronous watchAssetAsync from useWatchAsset(). This prevents the try-catch block from properly handling errors during the token addition process, as watchAsset does not return a promise and is not awaited. Consequently, the function returns true immediately, providing a false success indication to callers even if the wallet interaction fails or is pending user confirmation. This defeats the purpose of error handling and leads to functional failure in the token addition workflow.
💡 Suggested Fix
Replace watchAsset with watchAssetAsync from useWatchAsset() and ensure it is awaited to correctly handle asynchronous operations and catch potential errors.
🤖 Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: apps/app/hooks/use-add-token-to-wallet.ts#L25-L39
Potential issue: The `useAddTokenToWallet` hook incorrectly uses the synchronous
`watchAsset` function instead of the asynchronous `watchAssetAsync` from
`useWatchAsset()`. This prevents the `try-catch` block from properly handling errors
during the token addition process, as `watchAsset` does not return a promise and is not
awaited. Consequently, the function returns `true` immediately, providing a false
success indication to callers even if the wallet interaction fails or is pending user
confirmation. This defeats the purpose of error handling and leads to functional failure
in the token addition workflow.
Did we get this right? 👍 / 👎 to inform future reviews.
Reference ID: 3918799
Summary
useAddTokenToWallethook for wallet token/network addition with wagmiMetaMaskIcon,MetaMaskButton,GradientText,ChainBadgeTest plan
🤖 Generated with Claude Code