236 lines
7.1 KiB
Vue
236 lines
7.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'download'): void
|
||
|
|
(e: 'back'): void
|
||
|
|
}>()
|
||
|
|
function handleDownload() {
|
||
|
|
emit('download')
|
||
|
|
}
|
||
|
|
function handleBack() {
|
||
|
|
emit('back')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="keystore-step">
|
||
|
|
<div class="step-content">
|
||
|
|
<h2 class="title">Download keystore file</h2>
|
||
|
|
<div class="desc">Important things to know before downloading your keystore file.</div>
|
||
|
|
<div class="box-list">
|
||
|
|
<div class="box">
|
||
|
|
<div class="icn">
|
||
|
|
<svg width="44" height="44" viewBox="0 0 36 36">
|
||
|
|
<g>
|
||
|
|
<path
|
||
|
|
d="M15,29 L29,29 C30.1045695,29 31,28.1045695 31,27 L31,9 C31,7.8954305 30.1045695,7 29,7 L7,7 C5.8954305,7 5,7.8954305 5,9 L5,27 C5,28.1045695 5.8954305,29 7,29 L11,29"
|
||
|
|
fill="#d8f7fa"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M12.5,20.5 L17.5,25.5 L27.5,15.5"
|
||
|
|
stroke="#51c7ce"
|
||
|
|
stroke-width="2.2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
fill="none"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="box-title">Don't lose it</div>
|
||
|
|
<div class="box-desc">Be careful, it can not be recovered if you lose it.</div>
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<div class="icn">
|
||
|
|
<svg width="46" height="46" viewBox="0 0 28 28">
|
||
|
|
<g>
|
||
|
|
<circle cx="16" cy="16" r="12" fill="#e3fae5" />
|
||
|
|
<text
|
||
|
|
x="11"
|
||
|
|
y="21"
|
||
|
|
font-size="15"
|
||
|
|
font-family="Arial"
|
||
|
|
fill="#48b783"
|
||
|
|
font-weight="bold"
|
||
|
|
>
|
||
|
|
$
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="box-title">Don't share it</div>
|
||
|
|
<div class="box-desc">
|
||
|
|
Your funds will be stolen if you use this file on a malicious phishing site.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<div class="icn">
|
||
|
|
<svg width="46" height="46" viewBox="0 0 28 28">
|
||
|
|
<g>
|
||
|
|
<rect x="5" y="7" width="18" height="16" rx="3" fill="#c6f1fc" />
|
||
|
|
<rect x="7" y="10" width="14" height="10" rx="2" fill="#96e2fc" />
|
||
|
|
<text
|
||
|
|
x="10"
|
||
|
|
y="19"
|
||
|
|
font-size="9"
|
||
|
|
font-family="monospace"
|
||
|
|
fill="#418aaf"
|
||
|
|
>
|
||
|
|
{ }
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="box-title">Make a backup</div>
|
||
|
|
<div class="box-desc">
|
||
|
|
Secure it like the millions of dollars it may one day be worth.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-row">
|
||
|
|
<button class="back-btn" @click="handleBack">Back</button>
|
||
|
|
<button class="main-btn" @click="handleDownload">Acknowledge & Download</button>
|
||
|
|
</div>
|
||
|
|
<div class="not-recommended">
|
||
|
|
<span class="warn-icn">⚠</span>
|
||
|
|
<div>
|
||
|
|
<span class="strong">NOT RECOMMENDED</span><br />
|
||
|
|
This information is sensitive, and these options should only be used in offline
|
||
|
|
or secure environments.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.keystore-step {
|
||
|
|
max-width: 650px;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-radius: 14px;
|
||
|
|
box-shadow: var(--shadow-md);
|
||
|
|
padding: 34px 16px 28px 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-content {
|
||
|
|
padding: 6px 5px 0 5px;
|
||
|
|
}
|
||
|
|
.step-title {
|
||
|
|
color: var(--primary-color);
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: 0.07em;
|
||
|
|
font-size: 1.07rem;
|
||
|
|
margin-bottom: 2px;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
color: var(--text-primary);
|
||
|
|
font-size: 1.36rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
.desc {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 1.09rem;
|
||
|
|
margin-bottom: 23px;
|
||
|
|
}
|
||
|
|
.box-list {
|
||
|
|
display: flex;
|
||
|
|
gap: 21px;
|
||
|
|
margin-bottom: 32px;
|
||
|
|
justify-content: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.box {
|
||
|
|
border: 2px solid var(--border-color);
|
||
|
|
border-radius: 12px;
|
||
|
|
background: var(--bg-light);
|
||
|
|
padding: 21px 19px 17px 19px;
|
||
|
|
flex: 1 1 140px;
|
||
|
|
min-width: 196px;
|
||
|
|
max-width: 250px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
.icn {
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
.box-title {
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
font-size: 1.07em;
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
.box-desc {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 0.99em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.btn-row {
|
||
|
|
display: flex;
|
||
|
|
gap: 14px;
|
||
|
|
margin: 23px 0 0 0;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.back-btn {
|
||
|
|
padding: 10px 32px;
|
||
|
|
background: none;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 2px solid var(--border-color);
|
||
|
|
color: var(--text-primary);
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1em;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: 0.13s;
|
||
|
|
&:hover {
|
||
|
|
background: var(--bg-light);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.main-btn {
|
||
|
|
padding: 10px 32px;
|
||
|
|
background: var(--primary-color);
|
||
|
|
border-radius: 8px;
|
||
|
|
border: none;
|
||
|
|
color: var(--text-light);
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1em;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: 0.12s;
|
||
|
|
box-shadow: 0 4px 18px var(--shadow-primary);
|
||
|
|
&:hover {
|
||
|
|
background: var(--primary-hover);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.not-recommended {
|
||
|
|
background: var(--bg-secondary);
|
||
|
|
border-radius: 10px;
|
||
|
|
color: var(--secondary-color);
|
||
|
|
padding: 13px 17px;
|
||
|
|
margin-top: 28px;
|
||
|
|
font-size: 1.09em;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 11px;
|
||
|
|
.warn-icn {
|
||
|
|
font-size: 1.43em;
|
||
|
|
color: var(--error-color);
|
||
|
|
margin-top: 3px;
|
||
|
|
}
|
||
|
|
.strong {
|
||
|
|
font-weight: 700;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 900px) {
|
||
|
|
.steps-bar .step {
|
||
|
|
min-width: 90px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 650px) {
|
||
|
|
.keystore-step {
|
||
|
|
padding: 15px 3px 13px 3px;
|
||
|
|
}
|
||
|
|
.box {
|
||
|
|
padding: 12px 5px 10px 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|