mirror of https://github.com/luxfi/safe-wallet.git synced 2026-10-30 15:19:21 +00:00

Files

T

ba4623c68a refactor(web): migrate Swap to new feature architecture (#7084 )

* refactor(swap): migrate to v3 feature architecture

- Create contract.ts defining public API surface with typed exports
- Create feature.ts with flat structure for lazy-loaded components
- Create index.ts with feature handle and direct hook exports
- Move SwapWidget from index.tsx to components/SwapWidget/
- Extract getSwapTitle to helpers/utils.ts
- Add FallbackSwapWidget to contract and feature

Update all consumers (~20 files) to use the v3 pattern:
- Components accessed via useLoadFeature(SwapFeature)
- Hooks imported directly from @/features/swap
- Utilities/constants imported directly from @/features/swap

All consumers now use proper public API imports instead of
internal paths like @/features/swap/components/* or
@/features/swap/hooks/*

* fix(swap): convert internal imports to relative paths

Convert absolute @/features/swap/* imports to relative paths within
the swap feature to satisfy ESLint import restrictions.

Internal components and hooks now use relative imports:
- components/SwapOrder/index.tsx: ../OrderId, ../StatusLabel, etc.
- components/SwapOrderConfirmationView/*: ../OrderId, ../SwapTokens, etc.
- hooks/__tests__/*: ../useIsExpiredSwap, ../useIsTWAPFallbackHandler

Also fix external consumers:
- SignMessage: import selectSwapParams from @/features/swap
- store/slices.ts: import from @/features/swap barrel

* docs(web): eslint gotcha on feature refactoriing

* refactor(web): move swapTx to transactions

* fix(web): don’t directly import feature files

* refactor(web): use swap title directly

* fix(web): import swap

* refactor(web): remove unused hook

* fix(web): export store from store folder

* fix(web): duplicate import

* fix: import swap errors

* fix(web): add pr feedback

---------

Co-authored-by: Hanzo Dev <[email protected]>

2026-03-05 16:12:39 +01:00

4.5 KiB

Raw Permalink Blame History

module, date, problem_type, component, symptoms, root_cause, resolution_type, severity, tags

module

date

problem_type

component

symptoms

root_cause

resolution_type

severity

Troubleshooting: ESLint Warnings Ignored During Feature Refactor

Problem

During the swap feature v3 architecture migration, ESLint warnings specific to the feature being refactored were incorrectly dismissed as "pre-existing warnings from other features." This resulted in an incomplete refactor that required a second pass to fix.

Environment

Module: System-wide workflow issue
Affected Component: Feature migration workflow
Date: 2026-02-03

Symptoms

Ran ESLint after completing the refactor

Saw warnings like:

@/features/swap/components/OrderId import is restricted...
@/features/swap/components/StatusLabel import is restricted...
@/features/swap/hooks/useIsExpiredSwap import is restricted...

Dismissed these as "pre-existing warnings from other features"
User had to point out that these warnings were for the feature being refactored

What Didn't Work

Attempted Solution 1: Running ESLint and visually scanning output

Why it failed: Warnings were present but incorrectly attributed to other features, not the one being refactored

Root issue: No systematic verification that ESLint warnings for the specific feature being modified were addressed.

Solution

1. Always filter ESLint output for the feature being modified

After completing a refactor, run ESLint with grep to filter for the specific feature:

# For swap feature migration
yarn workspace @safe-global/web lint 2>&1 | grep -i swap

# Generic pattern
yarn workspace @safe-global/web lint 2>&1 | grep -i [feature-name]

2. Run ESLint specifically on the feature directory

# Check the feature directory itself for any issues
yarn workspace @safe-global/web lint src/features/swap/

# Check for any consumers importing incorrectly
yarn workspace @safe-global/web lint 2>&1 | grep "@/features/swap"

3. Verify zero warnings for the feature

Before considering a refactor complete, ensure:

# This should return NO results if refactor is complete
yarn workspace @safe-global/web lint 2>&1 | grep "@/features/[feature-name]" | grep -v "node_modules"

4. Create a verification checklist

For feature architecture migrations:

All internal imports use relative paths (not @/features/[name]/...)
All external consumers import from barrel (@/features/[name])
Run lint | grep [feature-name] returns zero warnings
Run lint | grep "@/features/[name]/" returns zero warnings (note the trailing slash)

Why This Works

Root Cause: The mistake was assuming ESLint warnings in the output were from other features, not the one being modified. This assumption was wrong.
Verification Gap: There was no explicit step to verify that ESLint warnings for the specific feature being refactored were resolved.
Cognitive Bias: When seeing many warnings, it's easy to assume they're pre-existing rather than verifying each one.

Prevention

ALWAYS filter lint output for the feature being modified - Never assume warnings are from other features
Run feature-specific lint checks - Use grep or path-specific linting
Zero tolerance for feature warnings - A refactor is not complete until the feature has zero related ESLint warnings
Include lint verification in migration checklist - Add explicit lint check step to feature migration documentation
When in doubt, investigate - If a warning mentions the feature being refactored, it's almost certainly related to the refactor

Checklist for Future Feature Migrations

Add this to the end of any feature architecture migration:

# Final verification - must return empty
FEATURE_NAME="swap"  # Change for each migration
yarn workspace @safe-global/web lint 2>&1 | grep -i "$FEATURE_NAME" && echo "WARNINGS FOUND - FIX BEFORE COMPLETING" || echo "No warnings - migration complete"

See also: feature-v3-migration-swap-20260203.md - The successful migration after fixing the overlooked warnings

4.5 KiB Raw Permalink Blame History