feat: auth update FE

src/components/auth/CreateWalletComponent.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, computed, defineEmits } from 'vue'
-import { ButtonCommon, FormCommon } from '@/components'
+import { ButtonCommon, FormCommon, KeystoreDownloadComponent } from '@/components'
 
 const emit = defineEmits<{
     navigateToOpenWallet: [event: Event]
     navigateToRecoverySeed: []
 }>()
 
+const step = ref(1)
+
 const password = ref('')
 const confirmPassword = ref('')
 const passwordError = ref('')
@@ -23,9 +25,7 @@ const passwordStrength = computed(() => {
         number: /[0-9]/.test(password.value),
         special: /[!@#$%^&*(),.?":{}|<>]/.test(password.value),
     }
-
     strength = Object.values(checks).filter(Boolean).length
-
     if (strength <= 2) return { level: 1, text: 'Weak', color: 'var(--error-color)' }
     if (strength <= 3) return { level: 2, text: 'Medium', color: 'var(--warning-color)' }
     if (strength <= 4) return { level: 3, text: 'Good', color: 'var(--info-color)' }
@@ -50,8 +50,7 @@ const handleIHaveWallet = (e: Event) => {
     e.preventDefault()
     emit('navigateToOpenWallet', e)
 }
-
+const handleNextPassword = () => {
-const handleNext = () => {
     if (!canProceed.value) {
         if (password.value.length < 8) {
             passwordError.value = 'Password must be at least 8 characters'
@@ -61,13 +60,42 @@ const handleNext = () => {
         }
         return
     }
-    emit('navigateToRecoverySeed')
+    step.value = 2
+}
+function downloadKeystoreFile() {
+    // Giả lập nội dung keystore (có thể tuỳ chỉnh)
+    const data = {
+        account: 'kaspa-wallet',
+        version: 1,
+        enc: 'mock-data',
+        created: new Date().toISOString(),
+        note: 'Exported from web-wallet',
+        hint: 'Replace bằng file thực tế trong tích hợp thật.',
+    }
+    const file = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(file)
+    link.download = 'kaspa-wallet-keystore.json'
+    link.click()
+    setTimeout(() => URL.revokeObjectURL(link.href), 2300)
+    step.value = 3
+}
+function handleBack() {
+    if (step.value === 2) step.value = 1
+    else if (step.value === 3) step.value = 2
+}
+function resetAll() {
+    password.value = ''
+    confirmPassword.value = ''
+    passwordError.value = ''
+    confirmPasswordError.value = ''
+    step.value = 1
 }
 </script>
-
 <template>
     <div class="auth-container">
         <div class="auth-card">
+            <template v-if="step === 1">
                 <div class="auth-card-header">
                     <div class="logo-container">
                         <div class="logo-circle">
@@ -93,7 +121,13 @@ const handleNext = () => {
                                             style="stop-color: #0066a6; stop-opacity: 1"
                                         />
                                     </linearGradient>
-                                <linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                                    <linearGradient
+                                        id="ringGradient"
+                                        x1="0%"
+                                        y1="0%"
+                                        x2="100%"
+                                        y2="0%"
+                                    >
                                         <stop
                                             offset="0%"
                                             style="stop-color: #007fcf; stop-opacity: 0.3"
@@ -142,7 +176,6 @@ const handleNext = () => {
                     <h1 class="auth-title">Create New Wallet</h1>
                     <p class="auth-subtitle">Secure your wallet with a strong password</p>
                 </div>
-
                 <div class="auth-card-content">
                     <div class="form-group">
                         <FormCommon
@@ -155,7 +188,6 @@ const handleNext = () => {
                             :error="passwordError"
                             @input="passwordError = ''"
                         />
-
                         <div v-if="password" class="password-strength">
                             <div class="strength-bar">
                                 <div
@@ -166,12 +198,13 @@ const handleNext = () => {
                                     }"
                                 ></div>
                             </div>
-                        <span class="strength-text" :style="{ color: passwordStrength.color }">
+                            <span
-                            {{ passwordStrength.text }}
+                                class="strength-text"
-                        </span>
+                                :style="{ color: passwordStrength.color }"
+                                >{{ passwordStrength.text }}</span
+                            >
                         </div>
                     </div>
-
                     <div class="form-group">
                         <FormCommon
                             v-model="confirmPassword"
@@ -183,32 +216,31 @@ const handleNext = () => {
                             :error="confirmPasswordError"
                             @input="confirmPasswordError = ''"
                         />
-
                         <div
                             v-if="confirmPassword"
                             class="password-match"
                             :class="{ match: isPasswordMatch }"
                         >
-                        <span v-if="isPasswordMatch" class="match-text"> ✓ Passwords match </span>
+                            <span v-if="isPasswordMatch" class="match-text">
+                                ✓ Passwords match
+                            </span>
                             <span v-else class="match-text error"> Passwords do not match </span>
                         </div>
                     </div>
-
                     <p class="helper-text">
-                    Password must be at least 8 characters with uppercase, lowercase, and numbers.
+                        Password must be at least 8 characters with uppercase, lowercase, and
+                        numbers.
                     </p>
-
                     <div class="auth-button-group">
                         <ButtonCommon
                             type="primary"
                             size="large"
+                            class="auth-button"
                             block
                             :disabled="!canProceed"
-                        @click="handleNext"
+                            @click="handleNextPassword"
+                            >Create Wallet</ButtonCommon
                         >
-                        Create Wallet
-                    </ButtonCommon>
-
                         <div class="secondary-actions">
                             <button class="link-button" @click="handleIHaveWallet">
                                 Already have a wallet?
@@ -216,6 +248,62 @@ const handleNext = () => {
                         </div>
                     </div>
                 </div>
+            </template>
+            <template v-else-if="step === 2">
+                <KeystoreDownloadComponent @download="downloadKeystoreFile" @back="handleBack" />
+            </template>
+            <template v-else-if="step === 3">
+                <div class="well-done-step">
+                    <h2 class="done-main">You are done!</h2>
+                    <p class="done-desc">
+                        You are now ready to take advantage of all that your wallet has to offer!
+                        Access with keystore file should only be used in an offline setting.
+                    </p>
+                    <div class="center-svg" style="margin: 14px auto 12px auto">
+                        <svg width="180" height="95" viewBox="0 0 175 92" fill="none">
+                            <rect x="111" y="37" width="64" height="33" rx="7" fill="#23B1EC" />
+                            <rect
+                                x="30.5"
+                                y="37.5"
+                                width="80"
+                                height="46"
+                                rx="7.5"
+                                fill="#D6F9FE"
+                                stroke="#AEEBF8"
+                                stroke-width="5"
+                            />
+                            <rect x="56" y="67" width="32" height="10" rx="3" fill="#B0F3A6" />
+                            <rect x="46" y="49" width="52" height="12" rx="3" fill="#a2d2f5" />
+                            <circle cx="155" cy="52" r="8" fill="#fff" />
+                            <rect x="121" y="43" width="27" height="7" rx="1.5" fill="#5AE9D2" />
+                            <rect x="128" y="59" width="17" height="4" rx="1.5" fill="#FCEBBA" />
+                            <circle cx="40" cy="27" r="7" fill="#A2D2F5" />
+                            <g>
+                                <circle cx="128" cy="21" r="3" fill="#FF8585" />
+                                <circle cx="57.5" cy="20.5" r="1.5" fill="#67DEFF" />
+                                <rect x="95" y="18" width="7" height="5" rx="2" fill="#A2D2F5" />
+                            </g>
+                        </svg>
+                    </div>
+                    <div class="btn-row">
+                        <ButtonCommon
+                            class="done-btn"
+                            type="primary"
+                            size="large"
+                            block
+                            style="margin-bottom: 0.3em"
+                            @click="$router.push('/')"
+                            >Access Wallet</ButtonCommon
+                        >
+                        <button class="done-link" type="button" @click="resetAll">
+                            Create Another Wallet
+                        </button>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <slot> </slot>
+            </template>
         </div>
     </div>
 </template>
@@ -231,7 +319,7 @@ const handleNext = () => {
 
 .auth-card {
     @include card-base;
-    max-width: 420px;
+    max-width: 720px;
     width: 100%;
 
     @media (max-width: 640px) {
@@ -360,9 +448,15 @@ const handleNext = () => {
     line-height: var(--leading-normal);
 }
 
+.auth-button {
+    width: fit-content;
+    margin: 0 auto;
+}
+
 .auth-button-group {
     margin-top: var(--spacing-2xl);
-
+    display: flex;
+    flex-direction: column;
     .secondary-actions {
         display: flex;
         justify-content: center;
@@ -379,7 +473,6 @@ const handleNext = () => {
         cursor: pointer;
         transition: color 0.2s ease;
         padding: 0;
-
         &:hover {
             color: var(--primary-hover);
             text-decoration: underline;
@@ -416,4 +509,53 @@ const handleNext = () => {
         }
     }
 }
+
+.well-done-step {
+    text-align: center;
+    padding: 20px 8px;
+    .done-title {
+        color: var(--primary-color);
+        font-weight: 700;
+        letter-spacing: 0.07em;
+        margin-bottom: 1px;
+    }
+    .done-main {
+        font-size: 1.36rem;
+        font-weight: 700;
+        color: var(--text-primary);
+        margin-bottom: 2px;
+    }
+    .done-desc {
+        color: var(--text-secondary);
+        font-size: 1.11em;
+        max-width: 410px;
+        margin: 2px auto 15px auto;
+    }
+    .center-svg {
+        display: flex;
+        justify-content: center;
+    }
+    .btn-row {
+        display: flex;
+        flex-direction: column;
+        gap: 11px;
+        align-items: center;
+        width: 100%;
+        max-width: 400px;
+        margin: 0 auto 5px auto;
+    }
+    .done-btn {
+        margin-bottom: 0.3em;
+    }
+    .done-link {
+        background: none;
+        border: none;
+        color: var(--primary-color);
+        font-size: 1em;
+        text-decoration: underline;
+        cursor: pointer;
+        margin: 0 auto;
+        font-weight: 600;
+    }
+}
 </style>

src/components/auth/ImportWalletComponent.vue

@@ -0,0 +1,270 @@
+<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' | 'privatekey'; value: string | string[]; passphrase?: string }
+    ): void
+}>()
+
+const tab = ref<'seedphrase' | 'privatekey'>('seedphrase')
+const seedWords = ref<string[]>(Array(18).fill(''))
+const seedError = ref('')
+const passphrase = ref('')
+const privateKey = ref('')
+const privateKeyError = 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 validateKey = () => {
+    if (!privateKey.value.trim()) {
+        privateKeyError.value = 'Please enter your private key.'
+        return false
+    }
+    privateKeyError.value = ''
+    return true
+}
+
+const handleContinue = () => {
+    if (tab.value === 'seedphrase') {
+        if (validateSeed()) {
+            emit('import-success', {
+                type: 'seed',
+                value: seedWords.value,
+                passphrase: passphrase.value,
+            })
+        }
+    } else {
+        if (validateKey()) {
+            emit('import-success', { type: 'privatekey', value: privateKey.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 === 'privatekey' && 'active']"
+                @click="tab = 'privatekey'"
+            >
+                Import by private key
+            </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="privateKey"
+                    type="text"
+                    label="Private key"
+                    placeholder="Enter private key"
+                    :error="privateKeyError"
+                    @focus="privateKeyError = ''"
+                />
+            </div>
+        </div>
+        <ButtonCommon
+            class="mt-lg"
+            type="primary"
+            block
+            size="large"
+            :disabled="
+                tab === 'seedphrase'
+                    ? !seedWords.every((w) => w) || !!seedError
+                    : !privateKey || !!privateKeyError
+            "
+            @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>

src/components/auth/KeystoreDownloadComponent.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+    (e: 'download'): void
+    (e: 'back'): void
+}>()
+function handleDownload() {
+    emit('download')
+}
+function handleBack() {
+    emit('back')
+}
+</script>
+<template>
+    <div class="keystore-step">
+        <div class="step-content">
+            <h2 class="title">Download keystore file</h2>
+            <div class="desc">Important things to know before downloading your keystore file.</div>
+            <div class="box-list">
+                <div class="box">
+                    <div class="icn">
+                        <svg width="44" height="44" viewBox="0 0 36 36">
+                            <g>
+                                <path
+                                    d="M15,29 L29,29 C30.1045695,29 31,28.1045695 31,27 L31,9 C31,7.8954305 30.1045695,7 29,7 L7,7 C5.8954305,7 5,7.8954305 5,9 L5,27 C5,28.1045695 5.8954305,29 7,29 L11,29"
+                                    fill="#d8f7fa"
+                                />
+                                <path
+                                    d="M12.5,20.5 L17.5,25.5 L27.5,15.5"
+                                    stroke="#51c7ce"
+                                    stroke-width="2.2"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    fill="none"
+                                />
+                            </g>
+                        </svg>
+                    </div>
+                    <div class="box-title">Don't lose it</div>
+                    <div class="box-desc">Be careful, it can not be recovered if you lose it.</div>
+                </div>
+                <div class="box">
+                    <div class="icn">
+                        <svg width="46" height="46" viewBox="0 0 28 28">
+                            <g>
+                                <circle cx="16" cy="16" r="12" fill="#e3fae5" />
+                                <text
+                                    x="11"
+                                    y="21"
+                                    font-size="15"
+                                    font-family="Arial"
+                                    fill="#48b783"
+                                    font-weight="bold"
+                                >
+                                    $
+                                </text>
+                            </g>
+                        </svg>
+                    </div>
+                    <div class="box-title">Don't share it</div>
+                    <div class="box-desc">
+                        Your funds will be stolen if you use this file on a malicious phishing site.
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="icn">
+                        <svg width="46" height="46" viewBox="0 0 28 28">
+                            <g>
+                                <rect x="5" y="7" width="18" height="16" rx="3" fill="#c6f1fc" />
+                                <rect x="7" y="10" width="14" height="10" rx="2" fill="#96e2fc" />
+                                <text
+                                    x="10"
+                                    y="19"
+                                    font-size="9"
+                                    font-family="monospace"
+                                    fill="#418aaf"
+                                >
+                                    { }
+                                </text>
+                            </g>
+                        </svg>
+                    </div>
+                    <div class="box-title">Make a backup</div>
+                    <div class="box-desc">
+                        Secure it like the millions of dollars it may one day be worth.
+                    </div>
+                </div>
+            </div>
+            <div class="btn-row">
+                <button class="back-btn" @click="handleBack">Back</button>
+                <button class="main-btn" @click="handleDownload">Acknowledge & Download</button>
+            </div>
+            <div class="not-recommended">
+                <span class="warn-icn">&#9888;</span>
+                <div>
+                    <span class="strong">NOT RECOMMENDED</span><br />
+                    This information is sensitive, and these options should only be used in offline
+                    or secure environments.
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<style scoped lang="scss">
+.keystore-step {
+    max-width: 650px;
+    margin: 0 auto;
+    border-radius: 14px;
+    box-shadow: var(--shadow-md);
+    padding: 34px 16px 28px 16px;
+}
+
+.step-content {
+    padding: 6px 5px 0 5px;
+}
+.step-title {
+    color: var(--primary-color);
+    font-weight: 700;
+    letter-spacing: 0.07em;
+    font-size: 1.07rem;
+    margin-bottom: 2px;
+}
+.title {
+    color: var(--text-primary);
+    font-size: 1.36rem;
+    font-weight: 700;
+    margin-bottom: 4px;
+}
+.desc {
+    color: var(--text-secondary);
+    font-size: 1.09rem;
+    margin-bottom: 23px;
+}
+.box-list {
+    display: flex;
+    gap: 21px;
+    margin-bottom: 32px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+.box {
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--bg-light);
+    padding: 21px 19px 17px 19px;
+    flex: 1 1 140px;
+    min-width: 196px;
+    max-width: 250px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .icn {
+        margin-bottom: 12px;
+    }
+    .box-title {
+        font-weight: 700;
+        margin-bottom: 5px;
+        font-size: 1.07em;
+        color: var(--text-primary);
+    }
+    .box-desc {
+        color: var(--text-secondary);
+        font-size: 0.99em;
+    }
+}
+.btn-row {
+    display: flex;
+    gap: 14px;
+    margin: 23px 0 0 0;
+    justify-content: center;
+    align-items: center;
+}
+.back-btn {
+    padding: 10px 32px;
+    background: none;
+    border-radius: 8px;
+    border: 2px solid var(--border-color);
+    color: var(--text-primary);
+    font-weight: 700;
+    font-size: 1em;
+    cursor: pointer;
+    transition: 0.13s;
+    &:hover {
+        background: var(--bg-light);
+    }
+}
+.main-btn {
+    padding: 10px 32px;
+    background: var(--primary-color);
+    border-radius: 8px;
+    border: none;
+    color: var(--text-light);
+    font-weight: 700;
+    font-size: 1em;
+    cursor: pointer;
+    transition: 0.12s;
+    box-shadow: 0 4px 18px var(--shadow-primary);
+    &:hover {
+        background: var(--primary-hover);
+    }
+}
+.not-recommended {
+    background: var(--bg-secondary);
+    border-radius: 10px;
+    color: var(--secondary-color);
+    padding: 13px 17px;
+    margin-top: 28px;
+    font-size: 1.09em;
+    display: flex;
+    align-items: flex-start;
+    gap: 11px;
+    .warn-icn {
+        font-size: 1.43em;
+        color: var(--error-color);
+        margin-top: 3px;
+    }
+    .strong {
+        font-weight: 700;
+        margin-right: 8px;
+    }
+}
+@media (max-width: 900px) {
+    .steps-bar .step {
+        min-width: 90px;
+        font-size: 14px;
+    }
+}
+@media (max-width: 650px) {
+    .keystore-step {
+        padding: 15px 3px 13px 3px;
+    }
+    .box {
+        padding: 12px 5px 10px 5px;
+    }
+}
+</style>

src/components/auth/OnboardingComponent.vue

@@ -2,16 +2,16 @@
 import { ButtonCommon } from '@/components'
 
 const emit = defineEmits<{
-    onboardingComplete: []
+    goToCreate: []
+    goToLogin: []
 }>()
 
-const goToNewWallet = () => {
+const handleGoToCreate = () => {
-    window.open('https://kaspa-ng.org', '_blank')
+    emit('goToCreate')
 }
 
-const goToLegacyWallet = () => {
+const handleGoToLogin = () => {
-    // Emit event to parent to show tab interface
+    emit('goToLogin')
-    emit('onboardingComplete')
 }
 </script>
 
@@ -21,21 +21,19 @@ const goToLegacyWallet = () => {
             <div class="welcome-box">
                 <div class="header-section">
                     <h2>Welcome to the New Wallet Experience</h2>
-                    <p>
+                    <p>Choose the next action:</p>
-                        We've launched a new version of the Kaspa Wallet at
+                </div>
-                        <br />
+                <div
-                        <span class="highlight"> https://kaspa-ng.org </span>
+                    class="button-group"
-                    </p>
+                    style="display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0"
-                    <ButtonCommon @click="goToNewWallet">
+                >
-                        Go to the new Kaspa NG Wallet
+                    <ButtonCommon type="primary" size="large" @click="handleGoToCreate">
+                        Create new wallet
+                    </ButtonCommon>
+                    <ButtonCommon type="default" size="large" @click="handleGoToLogin">
+                        Open existing wallet
                     </ButtonCommon>
                 </div>
-                <div class="spacer"></div>
-                <p>
-                    Already have funds on the old wallet?<br />
-                    You can still use <span class="highlight">https://wallet.kaspanet.io</span>
-                </p>
-                <ButtonCommon @click="goToLegacyWallet"> Continue on Legacy Wallet </ButtonCommon>
                 <div class="note">Thank you for being a part of the Kaspa community!</div>
             </div>
         </div>
@@ -53,7 +51,7 @@ const goToLegacyWallet = () => {
         box-shadow: var(--shadow-md);
         border-radius: var(--radius-md);
         width: 100%;
-        max-width: 800px;
+        max-width: 500px;
         flex-direction: column;
         text-align: center;
         padding: 2rem;

src/components/index.ts

@@ -6,6 +6,8 @@ import OpenWalletComponent from './auth/OpenWalletComponent.vue'
 import CreateWalletComponent from './auth/CreateWalletComponent.vue'
 import RecoverySeedComponent from './auth/RecoverySeedComponent.vue'
 import ConfirmSeedComponent from './auth/ConfirmSeedComponent.vue'
+import ImportWalletComponent from './auth/ImportWalletComponent.vue'
+import KeystoreDownloadComponent from './auth/KeystoreDownloadComponent.vue'
 import { IconCommon } from './icon'
 
 export {
@@ -18,4 +20,6 @@ export {
     RecoverySeedComponent,
     ConfirmSeedComponent,
     IconCommon,
+    ImportWalletComponent,
+    KeystoreDownloadComponent,
 }

src/utils/helpers/seedPhrase.ts

@@ -126,3 +126,8 @@ export const validateSeedPhrase = (words: string[]): boolean => {
     // Check if all words are in the BIP39 wordlist
     return words.every((word) => BIP39_WORDS.includes(word.toLowerCase()))
 }
+
+export const validateSeedPhrase18 = (words: string[]): boolean => {
+    if (words.length !== 18) return false
+    return words.every((word) => BIP39_WORDS.includes(word.toLowerCase()))
+}

src/views/Auth/AuthView.vue

@@ -33,7 +33,8 @@ const handleBack = () => {
     <div class="auth-container">
         <OnboardingComponent
             v-if="currentState === 'onboarding'"
-            @onboarding-complete="handleOnboardingComplete"
+            @go-to-create="handleGoToCreate"
+            @go-to-login="handleGoToLogin"
         />
 
         <LoginTab v-else-if="currentState === 'login'" @go-to-create="handleGoToCreate" />

src/views/Auth/components/LoginTab.vue

@@ -1,21 +1,31 @@
 <script setup lang="ts">
-import { OpenWalletComponent } from '@/components'
+import { ref } from 'vue'
+import { ImportWalletComponent, OpenWalletComponent } from '@/components'
 
-const emit = defineEmits<{
+const emit = defineEmits<{ goToCreate: [] }>()
-    goToCreate: []
+
-}>()
+const stage = ref<'import' | 'password'>('import')
+const importData = ref<any>(null)
+
+const handleImported = (payload: {
+    type: 'seed' | 'privatekey'
+    value: string | string[]
+    passphrase?: string
+}) => {
+    importData.value = payload
+    stage.value = 'password'
+}
 
 const handleNavigateToCreate = () => {
     emit('goToCreate')
 }
 </script>
-
 <template>
     <div class="login-tab">
-        <OpenWalletComponent @navigateToCreate="handleNavigateToCreate" />
+        <ImportWalletComponent v-if="stage === 'import'" @import-success="handleImported" />
+        <OpenWalletComponent v-else @navigateToCreate="handleNavigateToCreate" />
     </div>
 </template>
-
 <style lang="scss" scoped>
 .login-tab {
     padding: var(--spacing-lg);