neptune-web-wallet/src/views/Auth/components/ImportWalletComponent.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ButtonCommon, FormCommon } from '@/components'
import { validateSeedPhrase18 } from '@/utils/helpers/seedPhrase'

const emit = defineEmits<{
    (
        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('')

// 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 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 handleContinue = () => {
    if (tab.value === 'seedphrase') {
        if (validateSeed()) {
            emit('import-success', {
                type: 'seed',
                value: seedWords.value.filter(w => w.trim()),
            })
        }
    } else {
        if (validateKeystore()) {
            emit('import-success', { type: 'keystore', value: keystore.value })
        }
    }
}
</script>
<template>
    <div class="import-wallet dark-card">
        <h2 class="title">Import Wallet</h2>
        <div class="desc">Pick your import method</div>
        <div class="tabs">
            <button
                :class="['tab-btn', tab === 'seedphrase' && 'active']"
                @click="tab = 'seedphrase'"
            >
                Import by seed phrase
            </button>
            <button :class="['tab-btn', tab === 'keystore' && 'active']" @click="tab = 'keystore'">
                Import by keystore
            </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 = ''"
                />
            </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 = ''"
                />
            </div>
        </div>
        <ButtonCommon
            class="mt-lg"
            type="primary"
            block
            size="large"
            :disabled="
                tab === 'seedphrase'
                    ? seedWords.filter(w => w.trim()).length !== 18 || !!seedError
                    : !keystore || !!keystoreError
            "
            @click="handleContinue"
            >Continue</ButtonCommon
        >
    </div>
</template>
<style lang="scss" scoped>
.import-wallet {
    max-width: 420px;
    width: 100%;
    margin: 24px auto;
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-primary);
    padding: 32px 28px 24px 28px;
    color: var(--text-primary);

    .title {
        font-weight: 700;
        font-size: 1.45rem;
        text-align: center;
        margin-bottom: 5px;
    }
    .desc {
        text-align: center;
        color: var(--text-secondary);
        font-size: 1rem;
        margin-bottom: 24px;
    }
    .tabs {
        display: flex;
        background: var(--text-primary);
        border-radius: 13px;
        overflow: hidden;
        margin-bottom: 18px;
        .tab-btn {
            flex: 1;
            padding: 13px;
            border: none;
            background: none;
            color: var(--text-secondary);
            font-size: 1rem;
            cursor: pointer;
            transition: 0.18s;
            &.active {
                background: var(--primary-color);
                color: var(--text-light);
            }
            &:hover:not(.active) {
                background: var(--bg-secondary);
            }
        }
    }
    .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>