neptune-web-wallet/src/components/auth/RecoverySeedComponent.vue

<script setup lang="ts">
import { ref, defineEmits, onMounted } from 'vue'
import { ButtonCommon } from '@/components'
import { generateSeedPhrase } from '@/utils'
import { useSeedStore } from '@/stores'

const emit = defineEmits<{
    next: []
    back: []
}>()

const seedStore = useSeedStore()

const seedWords = ref<string[]>([])

onMounted(() => {
    const words = generateSeedPhrase()
    seedWords.value = words
    seedStore.setSeedWords(words)
})

const handleNext = () => {
    emit('next')
}

const handleBack = () => {
    emit('back')
}
</script>

<template>
    <div class="recovery-container">
        <div class="recovery-card">
            <div class="recovery-header">
                <h1 class="recovery-title">Recovery Seed</h1>
            </div>

            <div class="recovery-content">
                <div class="instruction-text">
                    <p>
                        Your wallet is accessible by a seed phrase. The seed phrase is an ordered
                        12-word secret phrase.
                    </p>
                    <p>
                        Make sure no one is looking, as anyone with your seed phrase can access your
                        wallet your funds. Write it down and keep it safe.
                    </p>
                </div>

                <div class="seed-words-container">
                    <div class="seed-words-grid">
                        <div v-for="(word, index) in seedWords" :key="index" class="seed-word-item">
                            <span class="word-number">{{ index + 1 }}</span>
                            <span class="word-text">{{ word }}</span>
                        </div>
                    </div>
                </div>

                <div class="cool-fact">
                    <p>
                        Cool fact: there are more 12-word phrase combinations than nanoseconds since
                        the big bang!
                    </p>
                </div>

                <div class="recovery-actions">
                    <ButtonCommon type="default" size="large" @click="handleBack">
                        BACK
                    </ButtonCommon>
                    <ButtonCommon type="primary" size="large" @click="handleNext">
                        NEXT
                    </ButtonCommon>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.recovery-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    background: var(--bg-light);
    min-height: 100vh;
}

.recovery-card {
    @include card-base;
    max-width: 500px;
    width: 100%;
    border: 2px solid var(--primary-color);
}

.recovery-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);

    .recovery-title {
        font-size: var(--font-2xl);
        font-weight: var(--font-bold);
        color: var(--text-primary);
        margin: 0;
    }
}

.recovery-content {
    .instruction-text {
        margin-bottom: var(--spacing-2xl);

        p {
            font-size: var(--font-sm);
            color: var(--text-secondary);
            line-height: var(--leading-normal);
            margin-bottom: var(--spacing-md);

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .seed-words-container {
        margin-bottom: var(--spacing-2xl);
        padding: var(--spacing-lg);
        background: var(--bg-hover);
        border-radius: var(--radius-md);
        border: 1px solid var(--border-light);

        .seed-words-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-md);

            .seed-word-item {
                display: flex;
                align-items: center;
                gap: var(--spacing-sm);
                padding: var(--spacing-sm);
                background: var(--bg-white);
                border-radius: var(--radius-sm);
                border: 1px solid var(--border-light);

                .word-number {
                    font-size: var(--font-xs);
                    font-weight: var(--font-bold);
                    color: var(--text-muted);
                    min-width: 20px;
                }

                .word-text {
                    font-size: var(--font-sm);
                    font-weight: var(--font-medium);
                    color: var(--text-primary);
                }
            }
        }
    }

    .cool-fact {
        margin-bottom: var(--spacing-2xl);
        text-align: center;

        p {
            font-size: var(--font-xs);
            color: var(--text-muted);
            font-style: italic;
            margin: 0;
        }
    }

    .recovery-actions {
        display: flex;
        justify-content: space-between;
        gap: var(--spacing-md);
    }
}

// Responsive Design
@media (max-width: 640px) {
    .recovery-container {
        padding: var(--spacing-md);
    }

    .recovery-card {
        max-width: 100%;
    }

    .seed-words-container {
        .seed-words-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-sm);

            .seed-word-item {
                padding: var(--spacing-xs);

                .word-number {
                    min-width: 16px;
                }
            }
        }
    }
}
</style>