From 0246809a882c2633cfc72d086063d5add6415fe4 Mon Sep 17 00:00:00 2001 From: NguyenAnhQuan Date: Thu, 23 Oct 2025 03:27:02 +0700 Subject: [PATCH] feat: auth update FE --- src/components/auth/CreateWalletComponent.vue | 444 ++++++++++++------ src/components/auth/ImportWalletComponent.vue | 270 +++++++++++ .../auth/KeystoreDownloadComponent.vue | 235 +++++++++ src/components/auth/OnboardingComponent.vue | 38 +- src/components/index.ts | 4 + src/utils/helpers/seedPhrase.ts | 5 + src/views/Auth/AuthView.vue | 3 +- src/views/Auth/components/LoginTab.vue | 24 +- 8 files changed, 844 insertions(+), 179 deletions(-) create mode 100644 src/components/auth/ImportWalletComponent.vue create mode 100644 src/components/auth/KeystoreDownloadComponent.vue diff --git a/src/components/auth/CreateWalletComponent.vue b/src/components/auth/CreateWalletComponent.vue index 5964473..2e1b65d 100644 --- a/src/components/auth/CreateWalletComponent.vue +++ b/src/components/auth/CreateWalletComponent.vue @@ -1,12 +1,14 @@ - + + + @@ -231,7 +319,7 @@ const handleNext = () => { .auth-card { @include card-base; - max-width: 420px; + max-width: 720px; width: 100%; @media (max-width: 640px) { @@ -360,9 +448,15 @@ const handleNext = () => { line-height: var(--leading-normal); } +.auth-button { + width: fit-content; + margin: 0 auto; +} + .auth-button-group { margin-top: var(--spacing-2xl); - + display: flex; + flex-direction: column; .secondary-actions { display: flex; justify-content: center; @@ -379,7 +473,6 @@ const handleNext = () => { cursor: pointer; transition: color 0.2s ease; padding: 0; - &:hover { color: var(--primary-hover); text-decoration: underline; @@ -416,4 +509,53 @@ const handleNext = () => { } } } + +.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; + } +} diff --git a/src/components/auth/ImportWalletComponent.vue b/src/components/auth/ImportWalletComponent.vue new file mode 100644 index 0000000..658d1bb --- /dev/null +++ b/src/components/auth/ImportWalletComponent.vue @@ -0,0 +1,270 @@ + + + diff --git a/src/components/auth/KeystoreDownloadComponent.vue b/src/components/auth/KeystoreDownloadComponent.vue new file mode 100644 index 0000000..bc3cb46 --- /dev/null +++ b/src/components/auth/KeystoreDownloadComponent.vue @@ -0,0 +1,235 @@ + + + diff --git a/src/components/auth/OnboardingComponent.vue b/src/components/auth/OnboardingComponent.vue index 3bf3b81..d794f9d 100644 --- a/src/components/auth/OnboardingComponent.vue +++ b/src/components/auth/OnboardingComponent.vue @@ -2,16 +2,16 @@ import { ButtonCommon } from '@/components' const emit = defineEmits<{ - onboardingComplete: [] + goToCreate: [] + goToLogin: [] }>() -const goToNewWallet = () => { - window.open('https://kaspa-ng.org', '_blank') +const handleGoToCreate = () => { + emit('goToCreate') } -const goToLegacyWallet = () => { - // Emit event to parent to show tab interface - emit('onboardingComplete') +const handleGoToLogin = () => { + emit('goToLogin') } @@ -21,21 +21,19 @@ const goToLegacyWallet = () => {

Welcome to the New Wallet Experience

-

- We've launched a new version of the Kaspa Wallet at -
- https://kaspa-ng.org -

- - Go to the new Kaspa NG Wallet +

Choose the next action:

+
+
+ + Create new wallet + + + Open existing wallet
-
-

- Already have funds on the old wallet?
- You can still use https://wallet.kaspanet.io -

- Continue on Legacy Wallet
Thank you for being a part of the Kaspa community!
@@ -53,7 +51,7 @@ const goToLegacyWallet = () => { box-shadow: var(--shadow-md); border-radius: var(--radius-md); width: 100%; - max-width: 800px; + max-width: 500px; flex-direction: column; text-align: center; padding: 2rem; diff --git a/src/components/index.ts b/src/components/index.ts index 18d6c35..059cbdb 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,6 +6,8 @@ import OpenWalletComponent from './auth/OpenWalletComponent.vue' import CreateWalletComponent from './auth/CreateWalletComponent.vue' import RecoverySeedComponent from './auth/RecoverySeedComponent.vue' import ConfirmSeedComponent from './auth/ConfirmSeedComponent.vue' +import ImportWalletComponent from './auth/ImportWalletComponent.vue' +import KeystoreDownloadComponent from './auth/KeystoreDownloadComponent.vue' import { IconCommon } from './icon' export { @@ -18,4 +20,6 @@ export { RecoverySeedComponent, ConfirmSeedComponent, IconCommon, + ImportWalletComponent, + KeystoreDownloadComponent, } diff --git a/src/utils/helpers/seedPhrase.ts b/src/utils/helpers/seedPhrase.ts index f868c7b..70ba493 100644 --- a/src/utils/helpers/seedPhrase.ts +++ b/src/utils/helpers/seedPhrase.ts @@ -126,3 +126,8 @@ export const validateSeedPhrase = (words: string[]): boolean => { // Check if all words are in the BIP39 wordlist return words.every((word) => BIP39_WORDS.includes(word.toLowerCase())) } + +export const validateSeedPhrase18 = (words: string[]): boolean => { + if (words.length !== 18) return false + return words.every((word) => BIP39_WORDS.includes(word.toLowerCase())) +} diff --git a/src/views/Auth/AuthView.vue b/src/views/Auth/AuthView.vue index 562bab5..83ae328 100644 --- a/src/views/Auth/AuthView.vue +++ b/src/views/Auth/AuthView.vue @@ -33,7 +33,8 @@ const handleBack = () => {
diff --git a/src/views/Auth/components/LoginTab.vue b/src/views/Auth/components/LoginTab.vue index eb647a5..1645a10 100644 --- a/src/views/Auth/components/LoginTab.vue +++ b/src/views/Auth/components/LoginTab.vue @@ -1,21 +1,31 @@ - -