125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { useNeptuneStore } from '@/stores/neptuneStore'
|
|
import { useNeptuneWallet } from '@/composables/useNeptuneWallet'
|
|
import { message } from 'ant-design-vue'
|
|
|
|
const neptuneStore = useNeptuneStore()
|
|
const { createKeystore } = useNeptuneWallet()
|
|
|
|
const emit = defineEmits<{
|
|
accessWallet: []
|
|
createAnother: []
|
|
}>()
|
|
|
|
const handleAccessWallet = async () => {
|
|
try {
|
|
const seedPhrase = neptuneStore.getSeedPhraseString
|
|
const password = neptuneStore.getPassword!
|
|
|
|
if (!seedPhrase || !password) {
|
|
message.error('Missing seed or password')
|
|
return
|
|
}
|
|
|
|
await createKeystore(seedPhrase, password)
|
|
emit('accessWallet')
|
|
} catch (err) {
|
|
message.error('Failed to create keystore')
|
|
}
|
|
}
|
|
|
|
const handleCreateAnother = () => {
|
|
emit('createAnother')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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">
|
|
<img
|
|
src="@/assets/imgs/logo.png"
|
|
alt="Neptune Logo"
|
|
style="max-width: 180px; height: auto"
|
|
/>
|
|
</div>
|
|
<div class="btn-row">
|
|
<ButtonCommon
|
|
class="done-btn"
|
|
type="primary"
|
|
size="large"
|
|
block
|
|
style="margin-bottom: 0.3em"
|
|
@click="handleAccessWallet"
|
|
>
|
|
Access Wallet
|
|
</ButtonCommon>
|
|
<button class="done-link" type="button" @click="handleCreateAnother">
|
|
Create Another Wallet
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.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>
|