fix: improve two-stage private key input UX (32+32 → 58+6 split) (#942)

## Problem
Users reported that the 32+32 character split design is not user-friendly:
1.  Second stage still requires entering 32 characters - hard to count
2.  Need to count many characters in both stages
3.  Easy to make mistakes when counting
## Solution
Change the split from 32+32 to **58+6**
**Stage 1**: 58 characters
- Enter the majority of the key (90%)
- Easy to copy/paste the prefix
**Stage 2**: 6 characters
-  Only need to count last 6 chars (very easy)
-  Quick verification of key suffix
-  Reduces user errors
## Changes
```typescript
// Old: Equal split
const expectedPart1Length = Math.ceil(expectedLength / 2)  // 32
const expectedPart2Length = expectedLength - expectedPart1Length  // 32
// New: Most of key + last 6 chars
const expectedPart1Length = expectedLength - 6  // 58
const expectedPart2Length = 6  // Last 6 characters
```
## Test plan
 Frontend builds successfully (npm run build)
 User-friendly: Only need to count 6 characters
 Maintains security: Two-stage input logic unchanged
Co-authored-by: the-dev-z <the-dev-z@users.noreply.github.com>
This commit is contained in:
0xYYBB | ZYY | Bobo
2025-11-12 21:37:55 +08:00
committed by GitHub
parent a8c87125fa
commit 9e5688609e

View File

@@ -63,8 +63,10 @@ export function TwoStageKeyModal({
const stage1Ref = useRef<HTMLInputElement>(null)
const stage2Ref = useRef<HTMLInputElement>(null)
const expectedPart1Length = Math.ceil(expectedLength / 2)
const expectedPart2Length = expectedLength - expectedPart1Length
// UX improvement: Use 58 + 6 split (most of the key + last 6 chars)
// Advantage: Second stage only requires entering 6 characters, much easier to count
const expectedPart1Length = expectedLength - 6 // 64 - 6 = 58
const expectedPart2Length = 6 // Last 6 characters
useEffect(() => {
if (isOpen && stage === 1 && stage1Ref.current) {