Skip to content

Commit 7af0daf

Browse files
authored
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>
1 parent 5ad731d commit 7af0daf

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

web/src/components/TwoStageKeyModal.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,10 @@ export function TwoStageKeyModal({
6363
const stage1Ref = useRef<HTMLInputElement>(null)
6464
const stage2Ref = useRef<HTMLInputElement>(null)
6565

66-
const expectedPart1Length = Math.ceil(expectedLength / 2)
67-
const expectedPart2Length = expectedLength - expectedPart1Length
66+
// UX improvement: Use 58 + 6 split (most of the key + last 6 chars)
67+
// Advantage: Second stage only requires entering 6 characters, much easier to count
68+
const expectedPart1Length = expectedLength - 6 // 64 - 6 = 58
69+
const expectedPart2Length = 6 // Last 6 characters
6870

6971
useEffect(() => {
7072
if (isOpen && stage === 1 && stage1Ref.current) {

0 commit comments

Comments
 (0)