136 lines
3.7 KiB
Vue
136 lines
3.7 KiB
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>
|