134 lines
3.9 KiB
Vue
134 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { ButtonCommon } from '@/components'
|
|
import { useNeptuneStore } from '@/stores/neptuneStore';
|
|
|
|
const neptuneStore = useNeptuneStore()
|
|
|
|
const emit = defineEmits<{
|
|
accessWallet: []
|
|
createAnother: []
|
|
}>()
|
|
|
|
const handleAccessWallet = async () => {
|
|
const seedPhrase = neptuneStore.getSeedPhraseString
|
|
const password = neptuneStore.getPassword!
|
|
const encrypted = (window as any).walletApi.createKeystore(seedPhrase, password)
|
|
console.log('encrypted keystore sample:', encrypted)
|
|
// TODO: save keystore file, update settings.json, clear RAM... (implement in later steps)
|
|
emit('accessWallet')
|
|
}
|
|
|
|
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">
|
|
<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="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>
|