neptune-web-wallet/src/views/Auth/components/create/WalletCreatedStep.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>