123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <script setup lang="ts">
- /* Initialize stores. */
- import { useProfileStore } from '@/stores/profile'
- import { useSystemStore } from '@/stores/system'
- import { useWalletStore } from '@/stores/wallet'
- const Profile = useProfileStore()
- const System = useSystemStore()
- const Wallet = useWalletStore()
- onBeforeMount(() => {
- // TODO Move this block to @nexajs/app
- try {
- Profile.$state = JSON.parse(localStorage.getItem('profile'), (key, value) => {
- if (typeof value === 'string' && /^\d+n$/.test(value)) {
- return BigInt(value.slice(0, value.length - 1))
- }
- return value
- })
- System.$state = JSON.parse(localStorage.getItem('system'), (key, value) => {
- if (typeof value === 'string' && /^\d+n$/.test(value)) {
- return BigInt(value.slice(0, value.length - 1))
- }
- return value
- })
- // NOTE: This is an "ephemeral" wallet, stored in the Session.
- Wallet.$state = JSON.parse(sessionStorage.getItem('wallet'), (key, value) => {
- if (typeof value === 'string' && /^\d+n$/.test(value)) {
- return BigInt(value.slice(0, value.length - 1))
- }
- return value
- })
- // add additional states here...
- } catch (err) {
- console.error(err)
- }
- })
- // TODO Move this block to @nexajs/app
- watch([Profile.$state, System.$state, Wallet.$state], (_state) => {
- localStorage.setItem('profile',
- JSON.stringify(_state[0], (key, value) =>
- typeof value === 'bigint' ? value.toString() + 'n' : value
- )
- )
- localStorage.setItem('system',
- JSON.stringify(_state[1], (key, value) =>
- typeof value === 'bigint' ? value.toString() + 'n' : value
- )
- )
- // NOTE: This is an "ephemeral" wallet, stored in the Session.
- sessionStorage.setItem('wallet',
- JSON.stringify(_state[2], (key, value) =>
- typeof value === 'bigint' ? value.toString() + 'n' : value
- )
- )
- // watch additional states here...
- })
- onMounted(() => {
- /* Initailize system. */
- System.init()
- /* Initialize wallet. */
- Wallet.init()
- })
- onBeforeUnmount(() => {
- console.log('TODO! Cleanup session.')
- // Now is the time to perform all cleanup operations.
- })
- </script>
- <template>
- <div class="min-h-full">
- <Header />
- <main class="-mt-24 pb-8">
- <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
- <h1 class="sr-only">
- Hush Your Money
- </h1>
- <!-- Main 3 column grid -->
- <div class="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
- <!-- Left column -->
- <div class="grid grid-cols-1 gap-4 lg:col-span-2">
- <section aria-labelledby="section-1-title">
- <h2 class="sr-only" id="section-1-title">
- Dashboard
- </h2>
- <div class="overflow-hidden rounded-lg bg-white shadow">
- <div class="p-6">
- <!-- Your content -->
- <slot />
- </div>
- </div>
- </section>
- </div>
- <!-- Right column -->
- <div class="grid grid-cols-1 gap-4">
- <WealthSummary />
- <ActivitySummary />
- </div>
- </div>
- </div>
- </main>
- <Footer />
- </div>
- </template>
|