Skip to content

Conversation

@vutuanlinh2k2
Copy link
Contributor

Summary

  • Add full TangleMigration ABI and Base Sepolia chain icon
  • Fix wallet mode banner when relayer is unavailable
  • Improve liquid staking redeem UX with optimistic updates and clearer labels
  • Add transaction history details for liquid staking operations
  • Make token metadata chain-aware to prevent cross-chain collisions
  • Update restaking ABIs and helpers for typecheck compatibility
  • Add infrastructure tooling scripts for Base Sepolia deployment
  • Sync credits ABIs with windowed claims support
  • Pre-select vault from URL query parameter in deposit/redeem forms
  • Various QA fixes for vault display and asset lookups

Test plan

  • Verify claim migration flow works correctly
  • Test liquid staking deposit/redeem with URL query parameters
  • Confirm wallet mode banner shows when relayer is unavailable
  • Validate restaking assets table displays correctly

🤖 Generated with Claude Code

vutuanlinh2k2 and others added 24 commits December 22, 2025 18:52
- Normalize vault asset addresses to lowercase for proper indexer matching
- Add TokenIcon to vault selection in deposit/redeem pages
- Improve vault display names (use underlying asset symbol)
- Simplify redeem page UI with cleaner shares display
- Show approximate asset value on pending redeem claims
- Fix TransactionInputCard max amount handling for small values
- Update local Anvil contract and token addresses

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…staking pages

- Use getRoundedAmountString for consistent amount formatting in tables
- Add proper icons and avatars for selected operator/asset in create vault
- Use OperatorListItem and AssetListItem components for better list rendering
- Show approximate asset value inline with shares in redeem page

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…osit/redeem forms

When clicking Deposit/Redeem buttons in Vaults/Positions tables, the vault
is now automatically pre-selected in the corresponding form based on the
?vault= query parameter. Also unified the Redeem button style to match
the Deposit button.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ain collisions

Token metadata cache and lookups were not chain-aware, causing incorrect
metadata to be returned when users switched between networks (e.g., same
address could represent different tokens on different chains).

Changes:
- Restructure KNOWN_TOKEN_ADDRESSES to be keyed by chainId
- Update metadataCache key format from "address" to "chainId:address"
- Add chainId parameter to getCachedTokenMetadata, cacheTokenMetadata,
  and resolveTokenMetadata functions
- Update all consumers to pass chainId from wagmi/viem

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ing operations

Add txName and txDetails to liquid staking hooks so transactions display
meaningful information in the TxHistoryDrawer:
- Deposit: shows token address and amount with correct symbol
- Request redeem: shows asset address and shares count
- Redeem: shows asset address and shares count

Also fix shares formatting to display without a token symbol suffix.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…earer labels

- Rename share columns for clarity: "Your Shares" vs "Total Shares"
- Add optimistic redeem request display to avoid waiting for indexer
- Refetch user position after redeem/claim for immediate UI updates
- Fix TxConfirmationModal to not append token symbol to share amounts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Apply code formatting fixes across multiple files (dependency arrays, type annotations)
- Remove approximate asset value display from liquid staking redeem page to reduce confusion
- Convert ABI files from JSON-style to JavaScript object-style formatting

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The commit 15279a9 synced ABIs from tnt-core with a new diamond pattern
contract architecture, but the dapp code still expects the old function
signatures (delegate, deposit, claimDelegatorRewards, etc.).

- Revert multiAssetDelegation.ts, tangle.ts, blueprintServiceManager.ts,
  and operatorStatusRegistry.ts to pre-sync versions
- Fix parseEventLogs type assertion in useServiceRequest.ts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Conflicts resolved:
- tokenMetadata.ts: kept chain-separated structure, merged v2 addresses
- claim-relayer: accepted deletion
- multiAssetDelegation.ts: accepted v2 ABI
- tangle.ts: accepted v2 ABI

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix NetworkType usage in processLeaderboardRecord.ts (use string literal)
- Add chainId parameter to getCachedTokenMetadata call in RestakingAssetsTable
- Import EIP1193Provider from viem in useViemWalletClient
- Update Deposit button in VaultsTable to match Redeem button style

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Critical fixes:
- Replace incorrect useRef with useMemo for static Icon objects
- Fix memory leak from uncleaned setTimeout in redeem form
- Fix optimistic requests claimable check by filtering out unindexed requests
- Sync form state with useAllBlueprints in create-vault
- Add timestamp tolerance to optimistic request cleanup to prevent race conditions

Important fixes:
- Remove fragile error string matching for ERC20 approval retry
- Fix auto-close timer to check tx hash before closing modal
- Limit dismissedHashes Set size to prevent memory growth
- Standardize isNumericString to use faster regex implementation

Suggestions:
- Remove dead code exports from tokenMetadata.ts
- Create useFormSetValue hook to consolidate setValue wrapper pattern
- Standardize number formatting to use addCommasToNumber

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Resolved ABI conflict by taking v2 version

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Display an orange warning banner and update button text to inform users
when the relayer fails and they need to pay gas fees directly from their
wallet.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Expand the TangleMigration contract ABI to include all functions,
events, and error types. Add Base Sepolia chain icon for network
selection UI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@claude
Copy link

claude bot commented Dec 28, 2025

Claude finished @vutuanlinh2k2's task —— View job


PR Review Complete

Reviewing PR #3091: QA: Claim migration and liquid staking improvements

Todo List:

  • Read project guidelines from CLAUDE.md
  • Review ABI and contract changes
  • Review liquid staking improvements
  • Review claim migration changes
  • Review UI/UX improvements
  • Review hook and utility changes
  • Check for security implications
  • Assess performance considerations
  • Provide final recommendations

Review Summary

This is a substantial QA improvement PR with solid technical implementation. The changes enhance user experience across claim migration, liquid staking, and general UI improvements while maintaining good code quality.

🟢 Strengths

1. Chain-Aware Token Metadata (libs/dapp-config/src/tokenMetadata.ts)

  • Excellent implementation of chain-aware caching to prevent cross-chain metadata collisions
  • Clean cache key structure: ${chainId}:${address.toLowerCase()}
  • Proper fallback mechanism when chain data is unavailable

2. Optimistic Updates in Liquid Staking (apps/tangle-dapp/src/pages/liquid-staking/redeem/index.tsx)

  • Smart optimistic request handling with proper cleanup logic
  • Timestamp tolerance window (60s) prevents race conditions for duplicate requests
  • Clean state management with automatic cleanup when requests appear in indexer

3. Form UX Improvements (apps/tangle-dapp/src/hooks/useFormSetValue.ts)

  • Nice wrapper hook that automatically enables shouldDirty and shouldValidate
  • Follows project's functional component pattern correctly
  • Proper TypeScript generics usage

4. URL Query Parameter Pre-selection

  • Smart vault pre-selection from URL parameters in both deposit/redeem forms
  • Proper address validation using isAddress() before selection

🟡 Areas for Improvement

1. Performance Considerations

In useEvmAssetMetadatas.ts:41, the query key includes the entire array:

queryKey: ['evmAssetMetadatas', evmAssetIds, viemPublicClient?.chain?.id]

Consider using a sorted/hashed version for large arrays to prevent unnecessary re-renders when array order changes.

2. Error Handling in Claim Eligibility (apps/tangle-dapp/src/pages/claim/migration/hooks/useClaimEligibility.ts)

The file contains a massive ABI definition (lines 30-700+) that should be extracted to a separate ABI file following project conventions. ABIs belong in abi/ folders per the CLAUDE.md guidelines.

3. Transaction History Component (apps/tangle-dapp/src/components/TxHistoryDrawer.tsx:50-61)

The sorting logic could be optimized:

// Current: Creates new array each time
.slice()
.sort((a, b) => b.timestamp - a.timestamp)

// Better: Use useMemo for sorting
const sortedTransactions = useMemo(() => 
  relevantTransactions?.toSorted((a, b) => b.timestamp - a.timestamp) ?? []
, [relevantTransactions]);

4. Vault Display Logic (apps/tangle-dapp/src/components/Lists/VaultListItem.tsx:72-82)

The name parsing logic could fail silently:

// Add fallback for failed regex
const displayName = useMemo(() => {
  if (tvlSymbol) return `${tvlSymbol} Vault`;
  
  const match = vaultName.match(/Liquid Delegation (\w+)/);
  return match?.[1] ? `${match[1]} Vault` : vaultName;
}, [tvlSymbol, vaultName]);

🔒 Security & Best Practices

1. Address Validation
✅ Proper use of isAddress() for vault pre-selection
✅ Consistent address normalization with .toLowerCase()

2. Data Sanitization
✅ Good input validation in form hooks
✅ Proper error boundaries with fallback metadata

3. Environment Variables
⚠️ VITE_MIGRATION_RPC_URL in useClaimEligibility.ts:25 - ensure this is documented in deployment guides

🚀 Notable Improvements

  1. Better UX: Optimistic updates provide immediate feedback
  2. Cleaner Display: Asset-based vault naming instead of technical addresses
  3. Improved Navigation: URL-based vault pre-selection
  4. Enhanced Metadata: Chain-aware token handling prevents cross-chain issues
  5. Base Sepolia Support: Clean integration with proper icon assets

📝 Minor Suggestions

  1. Extract ABI: Move the large TangleMigration ABI to apps/tangle-dapp/src/abi/tangleMigration.ts

  2. Add JSDoc: Some complex hooks like useClaimEligibility would benefit from documentation

  3. Constants: Extract magic numbers like the 60-second timestamp tolerance to named constants

Final Recommendation

✅ APPROVE - This PR significantly improves user experience while maintaining code quality. The optimistic updates, chain-aware metadata, and improved vault displays are well-implemented. Address the minor performance and organization suggestions in follow-up work.


@vutuanlinh2k2 vutuanlinh2k2 changed the title QA: Claim migration and liquid staking improvements refactor(tangle-dapp): Claim migration and liquid staking improvements Dec 28, 2025
vutuanlinh2k2 and others added 2 commits December 29, 2025 13:54
Remove attempt counter from the progress message to provide
a cleaner user experience during proof generation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@drewstone drewstone merged commit ed78002 into v2 Dec 29, 2025
1 check passed
@drewstone drewstone deleted the linh/qa/claim-migration branch December 29, 2025 16:09
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.

3 participants