neptune-web-wallet/src/components/auth/OnboardingComponent.vue
2025-10-22 01:43:20 +07:00

79 lines
2.1 KiB
Vue

<script setup lang="ts">
import { ButtonCommon } from '@/components'
const emit = defineEmits<{
onboardingComplete: []
}>()
const goToNewWallet = () => {
window.open('https://kaspa-ng.org', '_blank')
}
const goToLegacyWallet = () => {
// Emit event to parent to show tab interface
emit('onboardingComplete')
}
</script>
<template>
<div class="welcome-page flex-center">
<div class="welcome-card flex-center">
<div class="welcome-box">
<div class="header-section">
<h2>Welcome to the New Wallet Experience</h2>
<p>
We've launched a new version of the Kaspa Wallet at
<br />
<span class="highlight"> https://kaspa-ng.org </span>
</p>
<ButtonCommon @click="goToNewWallet">
Go to the new Kaspa NG Wallet
</ButtonCommon>
</div>
<div class="spacer"></div>
<p>
Already have funds on the old wallet?<br />
You can still use <span class="highlight">https://wallet.kaspanet.io</span>
</p>
<ButtonCommon @click="goToLegacyWallet"> Continue on Legacy Wallet </ButtonCommon>
<div class="note">Thank you for being a part of the Kaspa community!</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.welcome-page {
min-height: 100vh;
background-color: var(--bg-light);
position: relative;
.welcome-card {
background-color: var(--bg-white);
box-shadow: var(--shadow-md);
border-radius: var(--radius-md);
width: 100%;
max-width: 800px;
flex-direction: column;
text-align: center;
padding: 2rem;
.welcome-box {
width: 100%;
max-width: 700px;
padding: 30px;
}
}
}
p {
margin: 1rem;
font-size: var(--font-sm);
}
.note {
margin-top: 1rem;
font-size: 0.9rem;
color: var(--text-secondary);
}
</style>