fix: 281025/fix_paster_seed_phrase

src/views/Auth/components/ImportWalletComponent.vue

@@ -1,99 +1,35 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { ButtonCommon, FormCommon } from '@/components'
-import { validateSeedPhrase18 } from '@/utils/helpers/seedPhrase'
+import { ref } from 'vue'
+import { ButtonCommon } from '@/components'
+import SeedPhraseTab from './SeedPhraseTab.vue'
+import KeystoreTab from './KeystoreTab.vue'
 
 const emit = defineEmits<{
-    (
-        e: 'import-success',
-        data: { type: 'seed' | 'keystore'; value: string | string[] }
-    ): void
+    (e: 'import-success', data: { type: 'seed' | 'keystore'; value: string | string[] }): void
 }>()
 
 const tab = ref<'seedphrase' | 'keystore'>('seedphrase')
-const passphrase = ref('') // Source of truth - full seed phrase text
-const seedError = ref('')
-const keystore = ref('')
-const keystoreError = ref('')
+const seedPhraseTabRef = ref<InstanceType<typeof SeedPhraseTab>>()
+const keystoreTabRef = ref<InstanceType<typeof KeystoreTab>>()
+const isSeedPhraseValid = ref(false)
+const isKeystoreValid = ref(false)
 
-// Computed array for grid inputs - synced with passphrase
-const seedWords = computed({
-    get: () => {
-        const words = passphrase.value.trim().split(/\s+/).filter(w => w)
-        // Always return array of 18 elements
-        return Array.from({ length: 18 }, (_, i) => words[i] || '')
-    },
-    set: (newWords: string[]) => {
-        // Update passphrase from grid
-        passphrase.value = newWords.filter(w => w.trim()).join(' ')
-    }
-})
-
-const inputBoxFocus = (idx: number) => {
-    document.getElementById('input-' + idx)?.focus()
+const handleSeedPhraseSubmit = (words: string[]) => {
+    emit('import-success', {
+        type: 'seed',
+        value: words,
+    })
 }
 
-const handleGridInput = (index: number, value: string) => {
-    const newWords = [...seedWords.value]
-    newWords[index] = value
-    seedWords.value = newWords
-}
-
-const handlePaste = (event: ClipboardEvent, index: number) => {
-    event.preventDefault()
-    const pastedData = event.clipboardData?.getData('text') || ''
-    
-    // Split by whitespace and filter empty strings
-    const words = pastedData.trim().split(/\s+/).filter(w => w)
-    
-    if (words.length === 0) return
-    
-    // Fill words starting from the current index
-    const newWords = [...seedWords.value]
-    for (let i = 0; i < words.length && index + i < 18; i++) {
-        newWords[index + i] = words[i]
-    }
-    
-    seedWords.value = newWords
-    seedError.value = ''
-}
-
-const validateSeed = () => {
-    const words = seedWords.value.filter(w => w.trim())
-    
-    if (words.length !== 18) {
-        seedError.value = 'Please enter all 18 words.'
-        return false
-    }
-    if (!validateSeedPhrase18(words)) {
-        seedError.value = 'One or more words are invalid.'
-        return false
-    }
-    seedError.value = ''
-    return true
-}
-
-const validateKeystore = () => {
-    if (!keystore.value.trim()) {
-        keystoreError.value = 'Please enter your keystore.'
-        return false
-    }
-    keystoreError.value = ''
-    return true
+const handleKeystoreSubmit = (keystore: string) => {
+    emit('import-success', { type: 'keystore', value: keystore })
 }
 
 const handleContinue = () => {
     if (tab.value === 'seedphrase') {
-        if (validateSeed()) {
-            emit('import-success', {
-                type: 'seed',
-                value: seedWords.value.filter(w => w.trim()),
-            })
-        }
+        seedPhraseTabRef.value?.handleSubmit()
     } else {
-        if (validateKeystore()) {
-            emit('import-success', { type: 'keystore', value: keystore.value })
-        }
+        keystoreTabRef.value?.handleSubmit()
     }
 }
 </script>
@@ -113,68 +49,25 @@ const handleContinue = () => {
             </button>
         </div>
         <div v-if="tab === 'seedphrase'" class="tab-pane">
-            <div class="seed-row-radio">
-                <div class="radio active">18 words</div>
-            </div>
-            
-            <!-- Full seed phrase input (shares state with grid) -->
-            <div class="form-row">
-                <FormCommon
-                    v-model="passphrase"
-                    type="text"
-                    label="Paste your seed phrase (all 18 words)"
-                    placeholder="word1 word2 word3 ... word18"
-                    @focus="seedError = ''"
+            <SeedPhraseTab
+                ref="seedPhraseTabRef"
+                @update:valid="isSeedPhraseValid = $event"
+                @submit="handleSeedPhraseSubmit"
             />
         </div>
-
-            <!-- Individual input grid -->
-            <div class="seed-inputs">
-                <div class="seed-input-grid">
-                    <div v-for="(word, i) in seedWords" :key="i" class="seed-box">
-                        <input
-                            :id="'input-' + i"
-                            type="text"
-                            inputmode="text"
-                            autocapitalize="off"
-                            autocomplete="off"
-                            spellcheck="false"
-                            :value="word"
-                            :placeholder="i + 1 + '.'"
-                            maxlength="24"
-                            @keydown.enter="inputBoxFocus(i + 1)"
-                            :class="{ error: seedError && !word.trim() }"
-                            @focus="seedError = ''"
-                            @input="handleGridInput(i, ($event.target as HTMLInputElement).value)"
-                            @paste="handlePaste($event, i)"
-                        />
-                    </div>
-                </div>
-            </div>
-            <div v-if="seedError" class="error-text">{{ seedError }}</div>
-        </div>
         <div v-else class="tab-pane">
-            <div class="form-row mb-md">
-                <FormCommon
-                    v-model="keystore"
-                    type="text"
-                    label="Keystore"
-                    placeholder="Enter keystore"
-                    :error="keystoreError"
-                    @focus="keystoreError = ''"
+            <KeystoreTab
+                ref="keystoreTabRef"
+                @update:valid="isKeystoreValid = $event"
+                @submit="handleKeystoreSubmit"
             />
         </div>
-        </div>
         <ButtonCommon
             class="mt-lg"
             type="primary"
             block
             size="large"
-            :disabled="
-                tab === 'seedphrase'
-                    ? seedWords.filter(w => w.trim()).length !== 18 || !!seedError
-                    : !keystore || !!keystoreError
-            "
+            :disabled="tab === 'seedphrase' ? !isSeedPhraseValid : !isKeystoreValid"
             @click="handleContinue"
             >Continue</ButtonCommon
         >
@@ -230,93 +123,13 @@ const handleContinue = () => {
     .tab-pane {
         margin-top: 0.5rem;
     }
-    .seed-row-radio {
-        display: flex;
-        gap: 24px;
-        align-items: center;
-        margin-bottom: 16px;
-        .radio {
-            background: var(--bg-secondary);
-            color: var(--text-secondary);
-            border-radius: 14px;
-            font-size: 1.08rem;
-            padding: 7px 24px 7px 18px;
-            font-weight: 500;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            &.active {
-                background: var(--primary-color);
-                color: var(--text-light);
-            }
-            opacity: 1;
-        }
-    }
-    .seed-inputs {
-        width: 100%;
-    }
-    .seed-input-grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 12px;
-    }
-    .seed-box input {
-        width: 100%;
-        padding: 8px 12px;
-        border-radius: 9px;
-        border: 2px solid var(--border-color);
-        background: var(--bg-secondary);
-        color: var(--text-secondary);
-        outline: none;
-        font-size: 15px;
-        transition:
-            border 0.16s,
-            box-shadow 0.16s;
-        &:focus {
-            border-color: var(--primary-color);
-            box-shadow: 0 2px 8px var(--shadow-primary);
-        }
-        &.error {
-            border-color: var(--error-color);
-            background: var(--bg-secondary);
-            color: var(--text-light);
-        }
-    }
-    .form-row {
-        margin-top: 19px;
-        margin-bottom: 4px;
-    }
-    .paste-hint {
-        text-align: center;
-        font-size: var(--font-sm);
-        color: var(--text-secondary);
-        margin-top: var(--spacing-md);
-        padding: var(--spacing-sm) var(--spacing-md);
-        background: var(--bg-secondary);
-        border-radius: var(--radius-md);
-    }
-    .mt-sm {
-        margin-top: 9px;
-    }
-    .mb-md {
-        margin-bottom: 14px;
-    }
     .mt-lg {
         margin-top: 32px;
     }
-    .error-text {
-        color: var(--error-color);
-        font-size: 0.97em;
-        margin-top: 3px;
-    }
 }
 @include screen(mobile) {
     .import-wallet {
         padding: 16px 5px;
     }
-    .seed-input-grid {
-        gap: 8px;
-        grid-template-columns: repeat(3, 1fr);
-    }
 }
 </style>

src/views/Auth/components/KeystoreTab.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { FormCommon } from '@/components'
+
+const emit = defineEmits<{
+    (e: 'update:valid', valid: boolean): void
+    (e: 'submit', keystore: string): void
+}>()
+
+const keystore = ref('')
+const keystoreError = ref('')
+
+// Watch keystore and emit validity
+watch(
+    [keystore, keystoreError],
+    () => {
+        const isValid = !!keystore.value.trim() && !keystoreError.value
+        emit('update:valid', isValid)
+    },
+    { immediate: true }
+)
+
+const validateKeystore = () => {
+    if (!keystore.value.trim()) {
+        keystoreError.value = 'Please enter your keystore.'
+        return false
+    }
+    keystoreError.value = ''
+    return true
+}
+
+const handleSubmit = () => {
+    if (validateKeystore()) {
+        emit('submit', keystore.value)
+    }
+}
+
+defineExpose({
+    handleSubmit,
+})
+</script>
+
+<template>
+    <div class="keystore-tab">
+        <div class="form-row mb-md">
+            <FormCommon
+                v-model="keystore"
+                type="text"
+                label="Keystore"
+                placeholder="Enter keystore"
+                :error="keystoreError"
+                @focus="keystoreError = ''"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.keystore-tab {
+    .form-row {
+        margin-top: 19px;
+        margin-bottom: 4px;
+    }
+    .mb-md {
+        margin-bottom: 14px;
+    }
+}
+</style>
+

src/views/Auth/components/LoginTab.vue

@@ -7,10 +7,7 @@ const emit = defineEmits<{ goToCreate: [] }>()
 const stage = ref<'import' | 'password'>('import')
 const importData = ref<any>(null)
 
-const handleImported = (payload: {
-    type: 'seed' | 'keystore'
-    value: string | string[]
-}) => {
+const handleImported = (payload: { type: 'seed' | 'keystore'; value: string | string[] }) => {
     importData.value = payload
     stage.value = 'password'
 }

src/views/Auth/components/SeedPhraseTab.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { validateSeedPhrase18 } from '@/utils/helpers/seedPhrase'
+
+const emit = defineEmits<{
+    (e: 'update:valid', valid: boolean): void
+    (e: 'submit', words: string[]): void
+}>()
+
+const seedWords = ref<string[]>(Array.from({ length: 18 }, () => ''))
+const seedError = ref('')
+
+const updateValidity = () => {
+    const words = seedWords.value.filter((w) => w.trim())
+    const isValid = words.length === 18 && !seedError.value
+    emit('update:valid', isValid)
+}
+
+const inputBoxFocus = (idx: number) => {
+    document.getElementById('input-' + idx)?.focus()
+}
+
+const handleGridInput = (index: number, value: string) => {
+    seedWords.value[index] = value
+    updateValidity()
+}
+
+const handlePaste = (event: ClipboardEvent) => {
+    event.preventDefault()
+    const pastedData = event.clipboardData?.getData('text') || ''
+    const words = pastedData
+    .trim()
+    .split(/\s+/)
+    .filter((w) => w)
+
+    if (words.length === 0) return
+
+    seedWords.value = words
+    seedError.value = ''
+    updateValidity()
+}
+
+const validateSeed = () => {
+    const words = seedWords.value.filter((w) => w.trim())
+
+    if (words.length !== 18) {
+        seedError.value = 'Please enter all 18 words.'
+        return false
+    }
+    if (!validateSeedPhrase18(words)) {
+        seedError.value = 'One or more words are invalid.'
+        return false
+    }
+    seedError.value = ''
+    return true
+}
+
+const handleSubmit = () => {
+    if (validateSeed()) {
+        emit('submit', seedWords.value.filter((w) => w.trim()))
+    }
+    updateValidity()
+}
+
+defineExpose({
+    handleSubmit,
+})
+</script>
+
+<template>
+    <div class="seed-phrase-tab">
+        <div class="seed-row-radio">
+            <div class="radio active">18 words</div>
+        </div>
+
+        <!-- Individual input grid -->
+        <div class="seed-inputs">
+            <div class="seed-input-grid">
+                <div v-for="(word, i) in seedWords" :key="i" class="seed-box">
+                    <input
+                        :id="'input-' + i"
+                        type="text"
+                        inputmode="text"
+                        autocapitalize="off"
+                        autocomplete="off"
+                        spellcheck="false"
+                        :value="word"
+                        :placeholder="i + 1 + '.'"
+                        maxlength="24"
+                        @keydown.enter="inputBoxFocus(i + 1)"
+                        :class="{ error: seedError && !word.trim() }"
+                        @focus="seedError = ''"
+                        @input="handleGridInput(i, ($event.target as HTMLInputElement).value)"
+                        @paste="handlePaste($event, i)"
+                    />
+                </div>
+            </div>
+        </div>
+        <div v-if="seedError" class="error-text">{{ seedError }}</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.seed-phrase-tab {
+    .seed-row-radio {
+        display: flex;
+        gap: 24px;
+        align-items: center;
+        margin-bottom: 16px;
+        .radio {
+            background: var(--bg-secondary);
+            color: var(--text-secondary);
+            border-radius: 14px;
+            font-size: 1.08rem;
+            padding: 7px 24px 7px 18px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            &.active {
+                background: var(--primary-color);
+                color: var(--text-light);
+            }
+            opacity: 1;
+        }
+    }
+    .seed-inputs {
+        width: 100%;
+    }
+    .seed-input-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 12px;
+    }
+    .seed-box input {
+        width: 100%;
+        padding: 8px 12px;
+        border-radius: 9px;
+        border: 2px solid var(--border-color);
+        background: var(--bg-secondary);
+        color: var(--text-secondary);
+        outline: none;
+        font-size: 15px;
+        transition:
+            border 0.16s,
+            box-shadow 0.16s;
+        &:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 2px 8px var(--shadow-primary);
+        }
+        &.error {
+            border-color: var(--error-color);
+            background: var(--bg-secondary);
+            color: var(--text-light);
+        }
+    }
+    .error-text {
+        color: var(--error-color);
+        font-size: 0.97em;
+        margin-top: 8px;
+    }
+}
+
+@include screen(mobile) {
+    .seed-input-grid {
+        gap: 8px;
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+</style>
+

src/views/Auth/components/index.ts

@@ -3,6 +3,8 @@ export { default as LoginTab } from './LoginTab.vue'
 export { default as CreateTab } from './CreateTab.vue'
 export { default as RecoveryTab } from './RecoveryTab.vue'
 export { default as ConfirmTab } from './ConfirmTab.vue'
+export { default as SeedPhraseTab } from './SeedPhraseTab.vue'
+export { default as KeystoreTab } from './KeystoreTab.vue'
 
 // Auth Components
 export { default as OnboardingComponent } from './OnboardingComponent.vue'