From 658c758a7297bd3e9ee06ae477a8c714a39d668b Mon Sep 17 00:00:00 2001
From: NguyenAnhQuan <ngongquan@gmail.com>
Date: Tue, 28 Oct 2025 01:24:42 +0700
Subject: [PATCH] 281025/sync_value_between_18_input_grid_and_full_text_input

---
 src/composables/useNeptuneWallet.ts           |  23 ++++
 .../Auth/components/ImportWalletComponent.vue |  89 ++++++++++++---
 src/views/Auth/components/LoginTab.vue        |  10 +-
 .../Auth/components/OpenWalletComponent.vue   | 108 ++++++++++++++++--
 4 files changed, 198 insertions(+), 32 deletions(-)

diff --git a/src/composables/useNeptuneWallet.ts b/src/composables/useNeptuneWallet.ts
index 3aa5f29..a01b301 100644
--- a/src/composables/useNeptuneWallet.ts
+++ b/src/composables/useNeptuneWallet.ts
@@ -143,6 +143,28 @@ export function useNeptuneWallet() {
         return JSON.parse(resultJson)
     }
 
+    const importFromViewKey = async (viewKeyHex: string): Promise<{ receiver_identifier: string }> => {
+        try {
+            store.setLoading(true)
+            store.setError(null)
+
+            const result = await decodeViewKey(viewKeyHex)
+
+            store.setViewKey(viewKeyHex)
+            store.setReceiverId(result.receiver_identifier)
+            // Note: When importing from viewkey, we don't have the seed phrase
+            // and address needs to be derived from viewkey
+            
+            return result
+        } catch (err) {
+            const errorMsg = err instanceof Error ? err.message : 'Failed to import from view key'
+            store.setError(errorMsg)
+            throw err
+        } finally {
+            store.setLoading(false)
+        }
+    }
+
     // ===== API METHODS =====
 
     const getUtxos = async (
@@ -275,6 +297,7 @@ export function useNeptuneWallet() {
         initWasm: ensureWasmInitialized,
         generateWallet,
         importWallet,
+        importFromViewKey,
         getViewKeyFromSeed,
         getAddressFromSeed,
         validateSeedPhrase,
diff --git a/src/views/Auth/components/ImportWalletComponent.vue b/src/views/Auth/components/ImportWalletComponent.vue
index aa33cfa..6fd4d7c 100644
--- a/src/views/Auth/components/ImportWalletComponent.vue
+++ b/src/views/Auth/components/ImportWalletComponent.vue
@@ -1,32 +1,71 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+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[]; passphrase?: string }
+        data: { type: 'seed' | 'keystore'; value: string | string[] }
     ): void
 }>()
 
 const tab = ref<'seedphrase' | 'keystore'>('seedphrase')
-const seedWords = ref<string[]>(Array(18).fill(''))
+const passphrase = ref('') // Source of truth - full seed phrase text
 const seedError = ref('')
-const passphrase = 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 = () => {
-    if (seedWords.value.some((w) => !w.trim())) {
+    const words = seedWords.value.filter(w => w.trim())
+    
+    if (words.length !== 18) {
         seedError.value = 'Please enter all 18 words.'
         return false
     }
-    if (!validateSeedPhrase18(seedWords.value)) {
+    if (!validateSeedPhrase18(words)) {
         seedError.value = 'One or more words are invalid.'
         return false
     }
@@ -48,8 +87,7 @@ const handleContinue = () => {
         if (validateSeed()) {
             emit('import-success', {
                 type: 'seed',
-                value: seedWords.value,
-                passphrase: passphrase.value,
+                value: seedWords.value.filter(w => w.trim()),
             })
         }
     } else {
@@ -78,6 +116,19 @@ const handleContinue = () => {
             <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">
@@ -88,23 +139,18 @@ const handleContinue = () => {
                             autocapitalize="off"
                             autocomplete="off"
                             spellcheck="false"
-                            v-model="seedWords[i]"
+                            :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 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">
@@ -126,7 +172,7 @@ const handleContinue = () => {
             size="large"
             :disabled="
                 tab === 'seedphrase'
-                    ? !seedWords.every((w) => w) || !!seedError
+                    ? seedWords.filter(w => w.trim()).length !== 18 || !!seedError
                     : !keystore || !!keystoreError
             "
             @click="handleContinue"
@@ -240,6 +286,15 @@ const handleContinue = () => {
         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;
     }
diff --git a/src/views/Auth/components/LoginTab.vue b/src/views/Auth/components/LoginTab.vue
index 25a0a95..2f83339 100644
--- a/src/views/Auth/components/LoginTab.vue
+++ b/src/views/Auth/components/LoginTab.vue
@@ -8,9 +8,8 @@ const stage = ref<'import' | 'password'>('import')
 const importData = ref<any>(null)
 
 const handleImported = (payload: {
-    type: 'seed' | 'privatekey'
+    type: 'seed' | 'keystore'
     value: string | string[]
-    passphrase?: string
 }) => {
     importData.value = payload
     stage.value = 'password'
@@ -23,7 +22,12 @@ const handleNavigateToCreate = () => {
 <template>
     <div class="login-tab">
         <ImportWalletComponent v-if="stage === 'import'" @import-success="handleImported" />
-        <OpenWalletComponent v-else @navigateToCreate="handleNavigateToCreate" />
+        <OpenWalletComponent 
+            v-else 
+            :import-data="importData"
+            @navigateToCreate="handleNavigateToCreate"
+            @back="stage = 'import'"
+        />
     </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/views/Auth/components/OpenWalletComponent.vue b/src/views/Auth/components/OpenWalletComponent.vue
index 8abadbd..3286976 100644
--- a/src/views/Auth/components/OpenWalletComponent.vue
+++ b/src/views/Auth/components/OpenWalletComponent.vue
@@ -1,9 +1,27 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
 import { ButtonCommon, FormCommon } from '@/components'
+import { useNeptuneWallet } from '@/composables/useNeptuneWallet'
+
+interface ImportData {
+    type: 'seed' | 'keystore'
+    value: string | string[]
+}
+
+const props = defineProps<{
+    importData?: ImportData | null
+}>()
+
+const emit = defineEmits<{
+    navigateToCreate: []
+    back: []
+}>()
 
 const router = useRouter()
+const { importWallet, importFromViewKey } = useNeptuneWallet()
+
 const password = ref('')
 const passwordError = ref('')
 const isLoading = ref(false)
@@ -14,26 +32,53 @@ const handleOpenWallet = async () => {
         return
     }
 
+    if (!props.importData) {
+        passwordError.value = 'No import data available'
+        return
+    }
+
     isLoading.value = true
     passwordError.value = ''
 
     try {
-        await new Promise((resolve) => setTimeout(resolve, 1500))
+        // TODO: Use password to decrypt the wallet data
+        // For now, we'll just import directly
+        
+        if (props.importData.type === 'seed') {
+            const seedPhrase = Array.isArray(props.importData.value) 
+                ? props.importData.value 
+                : props.importData.value.split(' ')
+            
+            await importWallet(seedPhrase, 'testnet')
+            message.success('Wallet imported successfully from seed phrase!')
+        } else if (props.importData.type === 'keystore') {
+            // Assume keystore contains the view key hex string
+            const viewKey = typeof props.importData.value === 'string' 
+                ? props.importData.value 
+                : props.importData.value.join('')
+            
+            await importFromViewKey(viewKey)
+            message.success('Wallet imported successfully from keystore!')
+        }
+
+        // Navigate to home after successful import
         router.push('/')
     } catch (error) {
-        passwordError.value = 'Invalid password. Please try again.'
+        const errorMsg = error instanceof Error ? error.message : 'Failed to import wallet'
+        passwordError.value = errorMsg
+        message.error(errorMsg)
     } finally {
         isLoading.value = false
     }
 }
 
-const emit = defineEmits<{
-    navigateToCreate: []
-}>()
-
 const navigateToNewWallet = () => {
     emit('navigateToCreate')
 }
+
+const handleBack = () => {
+    emit('back')
+}
 </script>
 
 <template>
@@ -119,12 +164,17 @@ const navigateToNewWallet = () => {
                     </div>
                 </div>
 
+                <div class="import-info" v-if="importData">
+                    <div class="info-label">Importing from:</div>
+                    <div class="info-value">{{ importData.type === 'seed' ? 'Seed Phrase' : 'Keystore' }}</div>
+                </div>
+
                 <div class="form-group">
                     <FormCommon
                         v-model="password"
                         type="password"
-                        label="Enter your password"
-                        placeholder="Password"
+                        label="Create a password to encrypt your wallet"
+                        placeholder="Enter password"
                         show-password-toggle
                         required
                         :error="passwordError"
@@ -163,11 +213,16 @@ const navigateToNewWallet = () => {
                         :loading="isLoading"
                         @click="handleOpenWallet"
                     >
-                        {{ isLoading ? 'Opening...' : 'Open Wallet' }}
-                    </ButtonCommon>
-                    <ButtonCommon type="default" size="large" block @click="navigateToNewWallet">
-                        New Wallet
+                        {{ isLoading ? 'Importing...' : 'Import Wallet' }}
                     </ButtonCommon>
+                    <div class="button-row">
+                        <ButtonCommon type="default" size="large" @click="handleBack" :disabled="isLoading">
+                            Back
+                        </ButtonCommon>
+                        <ButtonCommon type="default" size="large" @click="navigateToNewWallet" :disabled="isLoading">
+                            New Wallet
+                        </ButtonCommon>
+                    </div>
                 </div>
             </div>
         </div>
@@ -194,6 +249,26 @@ const navigateToNewWallet = () => {
 }
 
 .auth-card-content {
+    .import-info {
+        text-align: center;
+        padding: var(--spacing-md);
+        background: var(--primary-light);
+        border-radius: var(--radius-md);
+        margin-bottom: var(--spacing-lg);
+
+        .info-label {
+            font-size: var(--font-sm);
+            color: var(--text-secondary);
+            margin-bottom: var(--spacing-xs);
+        }
+
+        .info-value {
+            font-size: var(--font-md);
+            font-weight: var(--font-semibold);
+            color: var(--primary-color);
+        }
+    }
+
     .form-group {
         margin-bottom: var(--spacing-xl);
     }
@@ -274,6 +349,15 @@ const navigateToNewWallet = () => {
     flex-direction: column;
     gap: var(--spacing-md);
     margin-bottom: var(--spacing-xl);
+
+    .button-row {
+        display: flex;
+        gap: var(--spacing-md);
+
+        > * {
+            flex: 1;
+        }
+    }
 }
 
 // Help Links