# Active Identity Migration - Phase B Progress

**Author**: Matthew Raymer
**Date**: 2025-08-22T07:05Z
**Status**: 🚧 **IN PROGRESS** - Component Migration Active

## Objective

Complete **Phase B: Component Cutover** by updating all Vue components to use the new Active Identity façade methods instead of directly accessing `settings.activeDid`.

## Current Status

### ✅ **Completed**
- **Migration Infrastructure**: Migrations 003 and 004 implemented
- **Service Façade**: PlatformServiceMixin extended with all required methods
- **TypeScript Types**: Added missing method declarations to Vue component interfaces
- **Feature Flags**: Comprehensive flag system for controlling rollout phases

### 🔄 **In Progress**
- **Component Migration**: Manually updating critical components
- **Pattern Establishment**: Creating consistent migration approach

### ❌ **Pending**
- **Bulk Component Updates**: 40+ components need migration
- **Testing**: Validate migrated components work correctly
- **Performance Validation**: Ensure no performance regressions

## Migration Progress

### **Components Migrated (3/40+)**

| Component | Status | Changes Made | Notes |
|-----------|--------|--------------|-------|
| `IdentitySwitcherView.vue` | ✅ Complete | - Updated `switchIdentity()` method<br>- Added FLAGS import<br>- Uses `$setActiveDid()` | Critical component for identity switching |
| `ImportDerivedAccountView.vue` | ✅ Complete | - Updated `incrementDerivation()` method<br>- Added FLAGS import<br>- Uses `$setActiveDid()` | Handles new account creation |
| `ClaimAddRawView.vue` | ✅ Complete | - Updated `initializeSettings()` method<br>- Uses `$getActiveDid()` | Reads active DID for claims |

### **Components Pending Migration (37+)**

| Component | Usage Pattern | Priority | Estimated Effort |
|-----------|---------------|----------|------------------|
| `HomeView.vue` | ✅ Updated | High | 5 min |
| `ProjectsView.vue` | `settings.activeDid \|\| ""` | High | 3 min |
| `ContactsView.vue` | `settings.activeDid \|\| ""` | High | 3 min |
| `AccountViewView.vue` | `settings.activeDid \|\| ""` | High | 3 min |
| `InviteOneView.vue` | `settings.activeDid \|\| ""` | Medium | 3 min |
| `TestView.vue` | `settings.activeDid \|\| ""` | Medium | 3 min |
| `SeedBackupView.vue` | `settings.activeDid \|\| ""` | Medium | 3 min |
| `QuickActionBvcBeginView.vue` | `const activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `ConfirmGiftView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `ClaimReportCertificateView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `ImportAccountView.vue` | `settings.activeDid,` | Medium | 3 min |
| `MembersList.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `ShareMyContactInfoView.vue` | `const activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `ClaimView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `ImageMethodDialog.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `DiscoverView.vue` | `settings.activeDid as string` | Medium | 3 min |
| `QuickActionBvcEndView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `ContactQRScanFullView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `ContactGiftingView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `OfferDetailsView.vue` | `this.activeDid = settings.activeDid ?? ""` | Medium | 3 min |
| `NewActivityView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `OfferDialog.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `SharedPhotoView.vue` | `this.activeDid = settings.activeDid` | Medium | 3 min |
| `ContactQRScanShowView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `NewEditProjectView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `GiftedDialog.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `HelpView.vue` | `if (settings.activeDid)` | Medium | 3 min |
| `TopMessage.vue` | `settings.activeDid?.slice(11, 15)` | Medium | 3 min |
| `ClaimCertificateView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `UserProfileView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `OnboardingDialog.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `RecentOffersToUserView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `RecentOffersToUserProjectsView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `ContactImportView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |
| `GiftedDetailsView.vue` | `this.activeDid = settings.activeDid \|\| ""` | Medium | 3 min |

## Migration Patterns

### **Pattern 1: Simple Read Replacement**
```typescript
// Before
this.activeDid = settings.activeDid || "";

// After
this.activeDid = await this.$getActiveDid() || "";
```

### **Pattern 2: Write Replacement with Dual-Write**
```typescript
// Before
await this.$saveSettings({ activeDid: newDid });

// After
await this.$setActiveDid(newDid);

// Legacy fallback - remove after Phase C
if (!FLAGS.USE_ACTIVE_IDENTITY_ONLY) {
  await this.$saveSettings({ activeDid: newDid });
}
```

### **Pattern 3: FLAGS Import Addition**
```typescript
// Add to imports section
import { FLAGS } from "@/config/featureFlags";
```

## Next Steps

### **Immediate Actions (Next 30 minutes)**
1. **Complete High-Priority Components**: Update remaining critical components
2. **Test Migration**: Verify migrated components work correctly
3. **Run Linter**: Check for any remaining TypeScript issues

### **Short Term (Next 2 hours)**
1. **Bulk Migration**: Use automated script for remaining components
2. **Testing**: Validate all migrated components
3. **Performance Check**: Ensure no performance regressions

### **Medium Term (Next 1 day)**
1. **Phase C Preparation**: Enable `USE_ACTIVE_IDENTITY_ONLY` flag
2. **Legacy Fallback Removal**: Remove dual-write patterns
3. **Final Testing**: End-to-end validation

## Success Criteria

### **Phase B Complete When**
- [ ] All 40+ components use new façade methods
- [ ] No direct `settings.activeDid` access remains
- [ ] All components pass linting
- [ ] Basic functionality tested and working
- [ ] Performance maintained or improved

### **Phase C Ready When**
- [ ] All components migrated and tested
- [ ] Feature flag `USE_ACTIVE_IDENTITY_ONLY` can be enabled
- [ ] No legacy fallback usage in production
- [ ] Performance benchmarks show improvement

## Risks & Mitigation

### **High Risk**
- **Component Breakage**: Test each migrated component individually
- **Performance Regression**: Monitor performance metrics during migration
- **TypeScript Errors**: Ensure all method signatures are properly declared

### **Medium Risk**
- **Migration Inconsistency**: Use consistent patterns across all components
- **Testing Coverage**: Ensure comprehensive testing of identity switching flows

### **Low Risk**
- **Backup Size**: Minimal backup strategy for critical files only
- **Rollback Complexity**: Simple git revert if needed

## Tools & Scripts

### **Migration Scripts**
- `scripts/migrate-active-identity-components.sh` - Full backup version
- `scripts/migrate-active-identity-components-efficient.sh` - Minimal backup version

### **Testing Commands**
```bash
# Check for remaining settings.activeDid usage
grep -r "settings\.activeDid" src/views/ src/components/

# Run linter
npm run lint-fix

# Test specific component
npm run test:web -- --grep "IdentitySwitcher"
```

## References

- [Active Identity Implementation Overview](./active-identity-implementation-overview.md)
- [PlatformServiceMixin Documentation](../component-communication-guide.md)
- [Feature Flags Configuration](../feature-flags.md)
- [Database Migration Guide](../database-migration-guide.md)

---

**Status**: Phase B in progress, 3/40+ components migrated
**Next Review**: After completing high-priority components
**Maintainer**: Development team