neptune-web-wallet/src/components/auth/ImportWalletComponent.vue

<script setup lang="ts">
import { ref } 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[]; passphrase?: string }
    ): void
}>()

const tab = ref<'seedphrase' | 'keystore'>('seedphrase')
const seedWords = ref<string[]>(Array(18).fill(''))
const seedError = ref('')
const passphrase = ref('')
const keystore = ref('')
const keystoreError = ref('')

const inputBoxFocus = (idx: number) => {
    document.getElementById('input-' + idx)?.focus()
}

const validateSeed = () => {
    if (seedWords.value.some((w) => !w.trim())) {
        seedError.value = 'Please enter all 18 words.'
        return false
    }
    if (!validateSeedPhrase18(seedWords.value)) {
        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,
                passphrase: passphrase.value,
            })
        }
    } 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>
            <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"
                            v-model="seedWords[i]"
                            :placeholder="i + 1 + '.'"
                            maxlength="24"
                            @keydown.enter="inputBoxFocus(i + 1)"
                            :class="{ error: seedError && !word.trim() }"
                            @focus="seedError = ''"
                        />
                    </div>
                </div>
            </div>
            <div class="form-row mt-sm">
                <FormCommon
                    v-model="passphrase"
                    :label="'Seed passphrase (optional)'"
                    placeholder="Enter seed passphrase"
                />
            </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.every((w) => w) || !!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;
    }
    .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;
    }
}
@media (max-width: 600px) {
    .import-wallet {
        padding: 16px 5px;
    }
    .seed-input-grid {
        gap: 8px;
        grid-template-columns: repeat(3, 1fr);
    }
}
</style>