281025/sync_value_between_18_input_grid_and_full_text_input
This commit is contained in:
parent
673d12669e
commit
658c758a72
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user