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

<script setup lang="ts">
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
}>()

const tab = ref<'seedphrase' | 'keystore'>('seedphrase')
const seedPhraseTabRef = ref<InstanceType<typeof SeedPhraseTab>>()
const keystoreTabRef = ref<InstanceType<typeof KeystoreTab>>()
const isSeedPhraseValid = ref(false)
const isKeystoreValid = ref(false)

const handleSeedPhraseSubmit = (words: string[]) => {
    emit('import-success', {
        type: 'seed',
        value: words,
    })
}

const handleKeystoreSubmit = (keystore: string) => {
    emit('import-success', { type: 'keystore', value: keystore })
}

const handleContinue = () => {
    if (tab.value === 'seedphrase') {
        seedPhraseTabRef.value?.handleSubmit()
    } else {
        keystoreTabRef.value?.handleSubmit()
    }
}
</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">
            <SeedPhraseTab
                ref="seedPhraseTabRef"
                @update:valid="isSeedPhraseValid = $event"
                @submit="handleSeedPhraseSubmit"
            />
        </div>
        <div v-else class="tab-pane">
            <KeystoreTab
                ref="keystoreTabRef"
                @update:valid="isKeystoreValid = $event"
                @submit="handleKeystoreSubmit"
            />
        </div>
        <ButtonCommon
            class="mt-lg"
            type="primary"
            block
            size="large"
            :disabled="tab === 'seedphrase' ? !isSeedPhraseValid : !isKeystoreValid"
            @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;
    }
    .mt-lg {
        margin-top: 32px;
    }
}
@include screen(mobile) {
    .import-wallet {
        padding: 16px 5px;
    }
}
</style>